在Web开发中，三维图形越来越受到重视，而Three.js作为一款基于WebGL的JavaScript 3D渲染库，为我们提供了一种简单、快捷的方式来创建复杂的3D场景。如果您刚开始学习Three.js并想快速入门，那么本文将为您介绍如何用JavaScript构建一个简单的3D场景。
1. 创建场景
首先，我们需要创建一个Three.js场景。在HTML文件中添加一个空的`<div>`元素，并使用JavaScript创建一个基本的场景对象：
var scene = new THREE.Scene();
2. 添加相机
接下来，我们需要添加一个相机，以便我们可以从正确的角度观察场景。Three.js支持多种类型的相机，例如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）等。在这里，我们使用透视相机来创建一个具有远近感的3D效果。
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
其中，第一个参数指定了相机的视角范围，第二个参数指定了相机的宽高比，第三个和第四个参数分别指定了相机的近截面和远截面。这些参数可以根据需要进行调整。
3. 添加渲染器
为了将场景显示在网页上，我们需要添加一个渲染器。Three.js支持多种类型的渲染器，例如WebGLRenderer、CanvasRenderer、CSS3DRenderer等。在这里，我们使用WebGLRenderer来创建一个支持硬件加速的WebGL渲染器，并将其附加到DOM元素中。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
4. 添加物体
现在，我们已经创建了场景、相机和渲染器，接下来我们需要添加一些物体和材质来呈现3D效果。在这里，我们创建一个简单的立方体，并使用基础材质（MeshBasicMaterial）来给它上色。
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
5. 渲染场景
最后，在`render()`函数中使用`requestAnimationFrame()`方法循环渲染场景，并更新相机的位置和旋转角度。这样就可以实现对场景的动态更改。
function render() {
requestAnimationFrame(render);
// 使立方体绕着X轴和Y轴旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 更新相机的位置
camera.position.z = 5;
renderer.render(scene, camera);
}
render();
现在，我们已经成功创建了一个简单的3D场景，并使用JavaScript控制了相机和物体的位置和旋转角度。这只是Three.js的冰山一角，它还有许多其他功能和特性可以探索。
本文提供了一个基础的入门教程，希望能够对初学者有所帮助。如果您想深入学习Three.js，可以参考官方文档和示例代码，或者阅读相关书籍和博客。
