Three.js 模型优化全流程教学文章

在使用 Three.js 开发 3D 应用时，模型优化是提升性能的关键。未经优化的模型可能导致加载缓慢、帧率下降，影响用户体验。本文将详细介绍 Three.js 中模型优化的完整过程，帮助你打造高效流畅的 3D 应用。

一、选择合适的模型格式

模型格式对性能影响很大，Three.js 支持多种格式，推荐优先使用 GLTF/GLB 格式。它是一种高效的二进制格式，支持动画、材质、纹理等多种特性，并且文件体积较小，加载速度快。

使用 GLTFLoader 加载模型的代码如下：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
    'path/to/your/model.gltf',
    (gltf) => {
        const model = gltf.scene;
        scene.add(model);
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.log('An error happened');
    }
);

二、模型几何优化

1. 减少多边形数量

复杂的模型包含大量多边形，会消耗更多计算资源。可以使用 3D 建模软件（如 Blender）对模型进行简化，减少多边形数量。在 Blender 中，通过 “Decimate” 修改器，设置合适的比例参数，能在保持模型大致形状的前提下，有效降低多边形数量 。

2. 合并几何体

场景中有多个小几何体时，将它们合并成一个大几何体，可以减少绘制调用次数，提升渲染效率。利用BufferGeometryUtils.mergeBufferGeometries方法实现合并：

import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const geometry2 = new THREE.SphereGeometry(0.5);
const geometries = [geometry1, geometry2];
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);
const mesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);

3. 使用 LOD（Level of Detail）技术

根据相机与模型的距离，展示不同精度的模型。近距离展示高精度模型，远距离展示低精度模型，在不影响视觉效果的同时节省性能。示例代码如下：

const highDetailMesh = new THREE.Mesh(highDetailGeometry, material);
const mediumDetailMesh = new THREE.Mesh(mediumDetailGeometry, material);
const lowDetailMesh = new THREE.Mesh(lowDetailGeometry, material);
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(mediumDetailMesh, 100);
lod.addLevel(lowDetailMesh, 200);
scene.add(lod);

三、纹理优化

1. 纹理压缩

未经压缩的纹理文件体积大，加载慢。使用纹理压缩工具，将纹理压缩成 ETC、ASTC 等格式。例如，对于安卓设备，ETC 格式兼容性和性能表现较好；对于 iOS 设备，ASTC 格式更为合适。

在 Three.js 中加载压缩纹理：

import { CompressedTextureLoader } from 'three/addons/loaders/CompressedTextureLoader.js';
const loader = new CompressedTextureLoader();
loader.setPath('textures/');
loader.load('yourTexture.etc', (texture) => {
    material.map = texture;
    material.needsUpdate = true;
});

2. 控制纹理尺寸

纹理尺寸应尽量为 2 的幂次方（如 256×256、512×512），并且避免使用过大尺寸的纹理，一般不超过 2048×2048，防止占用过多内存。

四、材质与着色器优化

1. 选择合适的材质

Three.js 提供多种材质，不同材质性能不同。MeshBasicMaterial不考虑光照，性能最好；MeshStandardMaterial和MeshPhysicalMaterial支持物理正确的渲染，但计算复杂，性能消耗大。根据场景需求选择合适的材质，如不需要光照效果的背景模型，可使用MeshBasicMaterial。

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

2. 优化自定义着色器

如果使用自定义着色器，要尽量简化计算逻辑。避免使用过多的循环和复杂的数学运算，减少不必要的变量声明，缓存计算结果以避免重复计算，从而提升着色器执行效率。

五、渲染优化

1. 实例化（Instancing）

当场景中有大量相同模型时，使用实例化技术，只需绘制一次模型，通过不同的实例矩阵设置每个模型的位置、旋转和缩放，大幅减少绘制调用次数。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const instanceCount = 1000;
const instancedMesh = new THREE.InstancedMesh(geometry, material, instanceCount);
for (let i = 0; i < instanceCount; i++) {
    const matrix = new THREE.Matrix4();
    matrix.setPosition(
        Math.random() * 100 - 50,
        Math.random() * 100 - 50,
        Math.random() * 100 - 50
    );
    instancedMesh.setMatrixAt(i, matrix);
}
scene.add(instancedMesh);

2. 视锥体剔除（Frustum Culling）

Three.js 默认开启视锥体剔除，只渲染相机视锥体内的对象。也可手动控制，对于一些复杂的对象组合，可以在不需要显示时手动关闭其渲染，提升性能。

mesh.frustumCulled = true; // 开启视锥体剔除

3. 层级剔除（Hierarchical Culling）

对于大型复杂场景，使用 BVH（Bounding Volume Hierarchy，包围体层次结构）或八叉树（Octree）结构，快速判断对象是否在视锥体内，加速剔除过程。

六、其他优化技巧

1. 延迟加载

将非关键的模型或资源进行延迟加载，比如在场景初始化完成后，或者用户触发特定操作时再加载，减少初始加载时间，提升应用启动速度。

2. 内存管理

及时释放不再使用的资源，如通过dispose()方法释放纹理、几何体和材质，避免内存泄漏，防止应用运行过程中内存占用过高导致卡顿甚至崩溃。

mesh.geometry.dispose();
mesh.material.dispose();
if (mesh.material.map) {
    mesh.material.map.dispose();
}

3. 性能监控

使用Stats.js等工具实时监控帧率、内存使用情况等性能指标，定位性能瓶颈，有针对性地进行优化。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
<script>
    const stats = new Stats();
    document.body.appendChild(stats.dom);
    function animate() {
        requestAnimationFrame(animate);
        stats.begin();
        renderer.render(scene, camera);
        stats.end();
    }
    animate();
</script>

通过以上全面的模型优化过程，从模型格式选择、几何处理、纹理优化，到材质着色器、渲染优化以及其他实用技巧，能够有效提升 Three.js 应用的性能，打造出流畅、高效的 3D 应用。在实际开发中，根据具体场景灵活运用这些优化方法，不断调试和改进，以达到最佳效果。