从零开始学习three.js（12）：单个大模型加载优化实战：从卡顿到流畅的完整指南

一、为什么需要优化大模型加载？

当你在Three.js中加载一个复杂的3D模型时，可能会遇到这些崩溃现场：

手机端加载10秒后变成白屏
浏览器内存占用飙到2GB
模型一放大就卡成PPT动画
核心问题在哪里？

几何体数据量过大：一个波音747模型可能有几十万个三角形
纹理分辨率过高：单张8K材质图需要加载40MB
渲染性能瓶颈：每秒要绘制几百万个三角形的计算压力

二、优化四步法（从准备到渲染）

第一步：给模型减面

1. 几何体简化 - LOD分级加载

ini 复制代码

// 当相机距离大于50米时显示低模
const lod = new THREE.LOD();
const highModel = ...;  // 100万面模型
const lowModel = ...;   // 10万面简化版

lod.addLevel(lowModel, 50);
lod.addLevel(highModel, 0);
scene.add(lod);

2. Draco压缩 - 减少50%以上文件体积

arduino 复制代码

javascript
// 加载前配置Draco压缩
const loader = new THREE.GLTFLoader();
loader.setDRACOLoader(new THREE.DracoLoader());

// 解压配置（WebAssembly版本更快）
const dracoDecoder = new THREE.DracoDecoder();
dracoDecoder.setDecoderPath('path/to/draco/');

3. 分块加载：像拼乐高一样加载

scss 复制代码

//加载一辆车，先加载车身
loadCarBody().then(() => {
    // 再加载车轮
    loadWheels().then(() => {
        // 最后加载内饰
        loadInterior();
    });
});

第二步：智能加载策略

1. 分块加载 - 按需加载模型部件

javascript 复制代码

// 使用Box3检测可视区域
function checkVisibility(model) {
  const box = new THREE.Box3().setFromObject(model);
  return camera.frustum.intersectsBox(box);
}

// 异步加载可见部分
async function loadVisibleParts() {
  const visibleModels = models.filter(checkVisibility);
  await Promise.all(visibleModels.map(loadModel));
}

2. 流式加载 - 边下载边渲染

ini 复制代码

// WebSocket流式加载示例
const ws = new WebSocket('ws://model-server');
let buffer = [];

ws.onmessage = (event) => {
  buffer.push(event.data);
  while(buffer.length > 4) {
    const chunkSize = buffer.readUInt32(0);
    const data = buffer.slice(4, 4+chunkSize);
    parseModelChunk(data); // 解析模型数据
    buffer = buffer.slice(4+chunkSize);
  }
};

第三步：材质与纹理优化

1. 纹理压缩 - 让图片变小3倍

ini 复制代码

// ASTC压缩（现代浏览器支持）
const textureLoader = new THREE.TextureLoader();
textureLoader.setFormat(THREE.CompressedTextureFormat.ASTC);

// 动态MIPMAP生成
texture.generateMipmaps();
texture.minFilter = THREE.LinearMipmapLinearFilter;

2. 纹理按需加载 - 只加载可见区域的材质

arduino 复制代码

// 使用Raycaster检测纹理可见性
function isTextureVisible(texture) {
  const raycaster = new THREE.Raycaster();
  const cameraPos = camera.position;
  const direction = new THREE.Vector3().subVectors(
    camera.position, 
    texture.map.image.center
  ).normalize();

  raycaster.set(cameraPos, direction);
  return raycaster.intersectObjects(scene.children);
}

第四步：渲染性能调优

1. 实例化渲染

ini 复制代码

// 批量渲染1000个相同箱子
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial();
const instances = new THREE.InstancedMesh(
  geometry, 
  material, 
  1000
);

// 设置每个实例的位置（在shader中控制）
instances.geometry.setDrawRange(0, 1000);

2. 渲染管线优化 - 关闭不必要的特效

ini 复制代码

// 静态模型关闭深度写入
staticMesh.material.depthWrite = false;

// 使用混合模式替代透明效果
material.blending = THREE.MultiplyBlending;

三、移动端特别优化技巧

1. 动态分辨率适配

javascript 复制代码

function onWindowResize() {
  const dpr = window.devicePixelRatio;
  renderer.setSize(window.innerWidth * dpr, window.innerHeight * dpr);
  
  // 根据分辨率调整相机比例
  camera.aspect = (window.innerWidth / dpr) / (window.innerHeight / dpr);
  camera.updateProjectionMatrix();
}
window.addEventListener('resize', onWindowResize);

2. 触摸事件节流

ini 复制代码

javascript
let lastTouchTime = 0;
document.addEventListener('touchstart', (e) => {
  const now = Date.now();
  if (now - lastTouchTime > 100) { // 100ms节流
    handleTouch(e);
    lastTouchTime = now;
  }
});

通过合理的优化策略，Three.js完全能够驾驭大型3D场景。关键是要：

前期准备：用专业工具做好模型简化
智能加载：按需加载+流式传输
渲染优化：善用实例化+管线控制
持续监控：用性能分析工具找瓶颈

更多three.js、cesium.js开源案例，请移至gitee.com/giser2017/t...