Three.js 如何初始化一个场景?

要初始化一个 Three.js 场景，首先需要创建一个 Scene 对象：

const scene = new THREE.Scene();

然后，你需要创建一个相机 Camera 对象。相机决定了你从什么位置观察 3D 场景。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

在此示例中，使用了 PerspectiveCamera，它可以创建一个仿真透视的相机。第一个参数是视角角度（单位是度），第二个参数是视窗 (viewport) 比例，第三个参数是相机距离近截面的距离，第四个参数是相机距离远截面的距离。

接下来，你需要创建一个渲染器 Renderer 对象。这个对象可以将场景和相机渲染为屏幕上的 2D 图像。在这个例子中，使用了 WebGL 渲染器。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

该代码将创建一个新的 WebGLRenderer 对象，并设置其大小，然后将其添加到屏幕上的 body 元素。在这之后，你需要把相机和对象添加到场景中。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

在这个例子中，创建了一个新的 BoxGeometry 对象，一个网格材质 MeshBasicMaterial，以及一个用这两个对象创建的立方体。然后添加立方体对象到场景中，并设置相机位置。

最后，你需要执行渲染循环，以显示你的场景：

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

该循环利用 requestAnimationFrame() 方法在每一帧深层嵌套地递归，更新 3D 动画的帧并将其渲染到屏幕上。

以上便是 Three.js 初始化场景的基本过程。