three.js场景渲染流程

three.js是一个基于WebGL的JavaScript库，用于创建互动的3D图形。它的场景渲染流程大致包括以下几个步骤：

1. **创建场景** (Scene): 创建一个`THREE.Scene`对象，它是所有3D元素的容器。

2. **添加几何体** (Geometry) 和材质(Materials): 使用`THREE.Geometry`创建3D模型的基本形状，并给它们涂上材质，比如`THREE.MeshBasicMaterial`、`THREE.MeshLambertMaterial`等。

3. **网格(Mesh)**: 将几何体和材质结合形成`THREE.Mesh`对象。

4. **相机(Camera)**: 设置视角和位置的`THREE.PerspectiveCamera`或`THREE.OrthographicCamera`，它控制我们看到的视图。

5. **渲染器(Renderer)**: 初始化`THREE.WebGLRenderer`并设置其大小和背景颜色。

6. **添加到舞台(Add to Stage)**: 将网格添加到场景中，相机将渲染场景到渲染器的画布上。

7. **渲染(Scene rendering)**: 调用`renderer.render(scene, camera)`，传递场景和相机对象，开始渲染3D图像。

8. **循环更新与绘制**: 游戏循环中不断更新相机、网格的位置和旋转，然后再次渲染，完成帧动画。

相关问题

three.js 场景切换

要切换 three.js 场景，可以使用以下步骤：

1. 创建多个场景对象。
2. 根据需要在每个场景中添加不同的模型、灯光、相机等元素。
3. 使用 `renderer.render(scene, camera)` 方法在渲染循环中渲染当前场景。
4. 使用 `scene.dispose()` 方法清除当前场景中的元素，释放内存。
5. 切换到下一个场景时，重复步骤 3 和 4，并将下一个场景设置为当前场景。

下面是一个示例代码，展示了如何实现场景切换：

var renderer, camera1, camera2, scene1, scene2;
var currentScene = 1;

function init() {
  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建相机和场景 1
  camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera1.position.z = 5;
  scene1 = new THREE.Scene();
  var geometry1 = new THREE.BoxGeometry();
  var material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  var cube1 = new THREE.Mesh(geometry1, material1);
  scene1.add(cube1);

  // 创建相机和场景 2
  camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera2.position.z = 5;
  scene2 = new THREE.Scene();
  var geometry2 = new THREE.SphereGeometry();
  var material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  var sphere2 = new THREE.Mesh(geometry2, material2);
  scene2.add(sphere2);
}

function animate() {
  requestAnimationFrame(animate);

  // 渲染当前场景
  if (currentScene == 1) {
    renderer.render(scene1, camera1);
  } else {
    renderer.render(scene2, camera2);
  }
}

function switchScene() {
  // 清除当前场景
  if (currentScene == 1) {
    scene1.dispose();
  } else {
    scene2.dispose();
  }

  // 切换到下一个场景
  currentScene = currentScene == 1 ? 2 : 1;

  // 渲染下一个场景
  if (currentScene == 1) {
    renderer.render(scene1, camera1);
  } else {
    renderer.render(scene2, camera2);
  }
}

在这个示例中，我们创建了两个场景，每个场景包含一个不同的几何体。我们使用 `currentScene` 变量来追踪当前场景，并在需要时切换场景。在 `switchScene()` 函数中，我们首先使用 `dispose()` 方法清除当前场景，然后切换到下一个场景，并使用 `renderer.render()` 方法渲染下一个场景。

three.js场景旋转

你可以使用 `THREE.OrbitControls` 来实现场景的旋转。这个控制器可以让你用鼠标或触摸来旋转、缩放和平移场景。

以下是一个简单的例子，展示如何使用 `OrbitControls` 来旋转场景：

var camera, scene, renderer, controls;

init();
animate();

function init() {
  // 创建相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  // 创建场景
  scene = new THREE.Scene();

  // 创建一个立方体
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建控制器
  controls = new THREE.OrbitControls(camera, renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);

  // 更新控制器
  controls.update();

  // 渲染场景
  renderer.render(scene, camera);
}

在这个例子中，我们创建了一个相机、一个场景和一个立方体。然后，我们创建了一个 `OrbitControls` 控制器，并将它绑定到相机和渲染器上。最后，我们在动画循环中更新控制器，并渲染场景。

你可以通过鼠标左键拖动来旋转场景，中键缩放，右键平移。你还可以通过设置控制器的属性来调整其行为。例如，你可以将 `controls.rotateSpeed` 属性设置为一个更高的值来加快旋转速度。