8.Three.js 扩展与生态

8.Three.js 扩展与生态

8. Three.js 扩展与生态

8.1 Three.js 扩展方式

Three.js 的扩展主要通过以下几种方式实现：

• 官方扩展 (Examples)： Three.js 官方维护的 examples 目录包含了大量的示例代码和辅助工具，这些工具可以作为扩展直接使用，或者作为参考学习如何扩展 Three.js 的功能。

• 第三方库： 社区贡献了大量的 Three.js 相关的库，涵盖了各种领域，例如物理引擎、后期处理、模型加载、GUI 控制等。

• 自定义扩展： 开发者可以根据自己的需求，自定义 Three.js 的功能，例如自定义着色器、自定义几何体、自定义控制器等。

8.2 常用扩展库及实践

8.2.1 OrbitControls - 视角控制

OrbitControls 是 Three.js 官方 examples 目录下的一个常用控制器，允许用户通过鼠标或触摸操作旋转、缩放和平移场景。

代码实践：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼，使旋转更平滑
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false; // 禁止屏幕空间平移
controls.minDistance = 1;
controls.maxDistance = 10;
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 更新控制器
    renderer.render(scene, camera);
}
animate();
​

内容详解：

• OrbitControls 接收相机和渲染器的 DOM 元素作为参数。

• controls.update() 必须在渲染循环中调用，以更新控制器的状态。

• enableDamping 启用阻尼效果，使旋转更加平滑。

• dampingFactor 设置阻尼系数。

• screenSpacePanning 控制是否允许屏幕空间平移。

• minDistance 和 maxDistance 设置相机距离目标的最小和最大距离。

8.2.2 GLTFLoader - 模型加载

GLTFLoader 用于加载 glTF (GL Transmission Format) 模型，glTF 是一种流行的 3D 模型格式，具有体积小、加载速度快等优点。

代码实践：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 创建 GLTFLoader
const loader = new GLTFLoader();
// 加载 glTF 模型
loader.load(
    'path/to/your/model.gltf',
    function (gltf) {
        scene.add(gltf.scene);
        // 模型加载完成后的回调函数
    },
    function (xhr) {
        // 加载进度回调函数
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        // 加载出错回调函数
        console.error('An error happened', error);
    }
);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
​

内容详解：

• GLTFLoader.load() 接收 glTF 模型的路径、加载成功回调、加载进度回调和加载出错回调作为参数。

• 加载成功回调函数接收一个 gltf 对象，其中 gltf.scene 是模型的场景对象，可以直接添加到场景中。

• 加载进度回调函数接收一个 xhr 对象，可以用于显示加载进度。

• 加载出错回调函数接收一个 error 对象，可以用于处理加载错误。

8.2.3 Stats.js - 性能监控

Stats.js 是一个用于监控 Three.js 应用性能的库，可以显示 FPS (Frames Per Second)、渲染时间等信息。

代码实践：

import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 创建 Stats 对象
const stats = new Stats();
document.body.appendChild(stats.dom);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    // 更新 Stats
    stats.update();
    renderer.render(scene, camera);
}
animate();
​

内容详解：

• Stats 对象创建后，需要将其 DOM 元素添加到页面中。

• stats.update() 必须在渲染循环中调用，以更新性能信息。

8.2.4 DAT.GUI - GUI 控制

DAT.GUI 是一个轻量级的 GUI 库，可以用于创建交互式界面，方便调整 Three.js 应用的参数。

代码实践：

import * as THREE from 'three';
import * as dat from 'dat.gui';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建 GUI 对象
const gui = new dat.GUI();
// 定义 GUI 控制的参数
const params = {
    color: 0x00ff00,
    rotationSpeed: 0.01
};
// 添加颜色控制器
gui.addColor(params, 'color').onChange(function (value) {
    material.color.set(value);
});
// 添加旋转速度控制器
gui.add(params, 'rotationSpeed', 0, 0.1);
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += params.rotationSpeed;
    cube.rotation.y += params.rotationSpeed;
    renderer.render(scene, camera);
}
animate();
​

内容详解：

• dat.GUI() 创建一个 GUI 对象。

• gui.addColor() 添加颜色控制器，gui.add() 添加其他类型的控制器。

• onChange() 方法用于监听控制器值的变化，并在值变化时执行回调函数。

8.3 Three.js 生态系统

Three.js 的生态系统非常活跃，除了上述常用的扩展库外，还有许多其他优秀的库，例如：

• 物理引擎： Cannon.js, Ammo.js

• 后期处理： Postprocessing

• 粒子系统： THREE.Points

• 骨骼动画： THREE.Skeleton, THREE.AnimationMixer

• VR/AR： WebXR API, A-Frame

8.4 自定义扩展

除了使用现有的库，开发者还可以根据自己的需求自定义 Three.js 的功能。例如，可以自定义着色器，实现特殊的渲染效果；可以自定义几何体，创建复杂的 3D 模型；可以自定义控制器，实现特殊的交互方式。

自定义着色器示例：

// 顶点着色器
const vertexShader = `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;
// 片元着色器
const fragmentShader = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
    }
`;
// 创建着色器材质
const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});
// 创建几何体和网格
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
​

8.5 Three.js 扩展的架构图

8.6 总结

Three.js 的扩展和生态系统非常丰富，为开发者提供了强大的工具和资源，可以帮助开发者快速构建复杂的 3D 应用。 开发者可以根据自己的需求选择合适的扩展方式，或者自定义 Three.js 的功能，以满足特定的需求。 掌握 Three.js 的扩展和生态系统，是成为一名优秀的 Three.js 开发者的关键。