简介
Three.js是一个基于WebGL的JavaScript库，用于创建和渲染3D场景。它提供了简单易用的API，使得在Web浏览器中创作和展示3D内容变得轻松。
准备工作
在开始使用Three.js之前，我们需要引入Three.js库。可以通过以下方式来获取和引入Three.js库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
这将在你的HTML文件中引入Three.js库，并使其可用于创建3D场景。
创建3D场景
首先，我们需要创建一个场景对象：
const scene = new THREE.Scene();
接着，我们需要创建一个相机对象：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
这里使用了透视相机（PerspectiveCamera）。75表示视角，window.innerWidth / window.innerHeight表示相机的宽高比，0.1和1000表示相机的近剪裁面和远剪裁面，即可见视场的范围。
然后，我们需要创建一个渲染器对象，并将其连接到HTML页面上的一个元素中：
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
这里使用了WebGLRenderer，它使用WebGL对场景进行渲染。setSize方法设置了渲染器的尺寸为窗口的宽高，appendChild方法将渲染器的画布添加到HTML页面中。
现在，我们可以开始创建3D对象并将其添加至场景中了。以下是一个简单的立方体示例：
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
上述代码创建了一个立方体的几何体（BoxGeometry），使用绿色作为材质颜色，并将其添加至场景中。
接着，我们需要设置相机的位置，以便能够看到我们添加到场景中的3D对象：
camera.position.z = 5;
最后，我们需要创建一个循环函数，用于每帧更新场景和渲染器：
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
该函数使用了requestAnimationFrame()方法，以维持一个恒定的帧速率。在每帧中，我们可以通过改变对象的旋转属性，来实现动画效果。最后，我们使用render()方法将场景和相机传递给渲染器，以进行渲染。
结论
通过使用Three.js库，我们可以轻松地创建和渲染3D场景。在本文中，我们学习了如何创建一个简单的3D场景，并向其中添加立方体对象。希望这篇博客能帮助你入门Three.js，并激发你对进一步探索3D内容创作的兴趣。
本文来自极简博客，作者：闪耀之星喵，转载请注明原文链接：使用Three.js创建3D场景
