Three.js

Three.js 实践详解：构建你的 3D 世界

1. Three.js 核心概念

在开始编写代码之前，我们需要了解 Three.js 的几个核心概念：

• 场景 (Scene)： 场景是 3D 世界的容器，所有物体、灯光和相机都放置在场景中。

• 相机 (Camera)： 相机定义了观察 3D 世界的视角。 Three.js 提供了多种相机类型，如透视相机 (PerspectiveCamera) 和正交相机 (OrthographicCamera)。

• 渲染器 (Renderer)： 渲染器负责将场景渲染到屏幕上。 Three.js 提供了多种渲染器，如 WebGLRenderer 和 CanvasRenderer。

• 物体 (Object3D)： 物体是场景中的基本元素，可以包含几何体 (Geometry)、材质 (Material) 和其他子物体。

• 几何体 (Geometry)： 几何体定义了物体的形状，例如立方体、球体或自定义形状。

• 材质 (Material)： 材质定义了物体的外观，例如颜色、纹理和光泽。

• 光照 (Lights)： 光照用于照亮场景，使物体可见并产生阴影。 Three.js 提供了多种光照类型，如环境光 (AmbientLight)、方向光 (DirectionalLight) 和点光源 (PointLight)。

2. 创建一个简单的 Three.js 场景

让我们从创建一个简单的 Three.js 场景开始，其中包含一个立方体和一个透视相机。

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置相机位置
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 将渲染器添加到 DOM
// 4. 创建立方体
const geometry = new THREE.BoxGeometry(); // 立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
const cube = new THREE.Mesh(geometry, material); // 创建网格物体
scene.add(cube); // 将立方体添加到场景
// 5. 渲染循环
function animate() {
  requestAnimationFrame(animate); // 循环调用 animate 函数
  cube.rotation.x += 0.01; // 旋转立方体
  cube.rotation.y += 0.01;
  renderer.render(scene, camera); // 渲染场景
}
animate(); // 启动渲染循环
​

这段代码创建了一个包含一个旋转绿色立方体的简单场景。 让我们分解一下代码：

• 第 1-3 行 创建了场景、相机和渲染器。 透视相机的第一个参数是视野角度 (FOV)，第二个参数是宽高比，后两个参数是近裁剪面和远裁剪面。

• 第 4-7 行 创建了一个立方体，并将其添加到场景中。 THREE.BoxGeometry 定义了立方体的形状，THREE.MeshBasicMaterial 定义了立方体的颜色。 THREE.Mesh 将几何体和材质结合起来，创建一个网格物体。

• 第 8-14 行 创建了一个渲染循环，该循环不断更新立方体的旋转并渲染场景。 requestAnimationFrame 用于在浏览器准备好绘制下一帧时调用 animate 函数。

3. 添加光照

上面的例子中，我们使用了 THREE.MeshBasicMaterial，它不受光照影响。 为了使场景更逼真，我们需要添加光照并使用受光照影响的材质，例如 THREE.MeshLambertMaterial 或 THREE.MeshPhongMaterial。

// 修改材质
const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
scene.add(ambientLight);
// 添加方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // 白色光，强度 0.5
directionalLight.position.set(1, 1, 1); // 设置光照方向
scene.add(directionalLight);
​

这段代码将立方体的材质更改为 THREE.MeshLambertMaterial，并添加了一个环境光和一个方向光。 环境光照亮了整个场景，而方向光则从特定方向照亮场景。

4. 加载 3D 模型

Three.js 支持加载各种 3D 模型格式，例如 GLTF、OBJ 和 FBX。 我们可以使用 GLTFLoader 或 OBJLoader 等加载器来加载模型。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 创建 GLTFLoader
const loader = new GLTFLoader();
// 加载模型
loader.load('path/to/your/model.gltf', function (gltf) {
  scene.add(gltf.scene); // 将模型添加到场景
}, undefined, function (error) {
  console.error(error);
});
​

这段代码使用 GLTFLoader 加载一个 GLTF 模型，并将其添加到场景中。 加载器提供了一个回调函数，该函数在模型加载完成后执行。 你还可以提供一个错误处理函数，以处理加载过程中发生的任何错误。

5. 添加交互

Three.js 可以与用户交互。 我们可以使用鼠标或触摸事件来控制相机、旋转物体或执行其他操作。 Raycaster 类可以用于检测鼠标点击或触摸事件与 3D 物体之间的交点。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseMove(event) {
  // 计算鼠标位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 更新射线投射器
  raycaster.setFromCamera(mouse, camera);
  // 计算物体与射线的交叉点
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    // 处理交叉点
    intersects[0].object.material.color.set(0xff0000); // 将被点击的物体颜色设置为红色
  }
}
window.addEventListener('mousemove', onMouseMove, false);
​

这段代码监听鼠标移动事件，并使用 Raycaster 检测鼠标光标下的物体。 如果检测到物体，则将其颜色更改为红色。

6. 使用 OrbitControls 控制相机

OrbitControls 是 Three.js 提供的一个方便的控件，它允许用户使用鼠标或触摸来旋转、平移和缩放相机。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05;
// 在渲染循环中更新 controls
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新 controls
  renderer.render(scene, camera);
}
​

这段代码创建了一个 OrbitControls 实例，并将其连接到相机和渲染器。 controls.update() 方法需要在渲染循环中调用，以更新相机的位置和方向。

7. 性能优化

在开发复杂的 Three.js 应用程序时，性能优化至关重要。 以下是一些提高性能的技巧：

• 减少多边形数量： 尽可能使用低多边形模型。

• 使用纹理贴图集： 将多个小纹理合并到一个大纹理中，以减少纹理切换的次数。

• 使用 LOD (Level of Detail)： 根据物体与相机的距离，使用不同细节级别的模型。

• 使用 Instancing： 使用 Instancing 渲染大量相同的物体，可以显著提高性能。

• 避免不必要的渲染： 仅在场景发生变化时才渲染。

8. Mermaid 图示

我们可以使用 Mermaid 图示来更清晰地描述 Three.js 的核心概念。

这个图示展示了 Three.js 中各个组件之间的关系。 场景包含相机、渲染器、物体和光照。 物体包含几何体和材质。

9. 总结

Three.js 是一个强大的 JavaScript 库，可用于在网页上创建令人惊叹的 3D 图形。 本文介绍了 Three.js 的核心概念，并提供了一些代码示例来帮助你入门。 通过掌握这些概念和技巧，你可以构建自己的 3D 世界，并将其分享给全世界。

10. 进一步学习

• Three.js 官方网站

• Three.js 文档

• Three.js 示例

希望这篇文章能够帮助你更好地理解和使用 Three.js。 祝你 3D 开发之旅愉快！