前段时间我在做一个Three.js的3D项目。遇到一个很典型的问题：模型能正常显示，但加载速度就是很慢，首屏进入的时候有明显的卡顿，场景操作也容易掉帧。
一开始我也怀疑是不是灯光、阴影或者后处理的问题，但是实际排查下来，发现很多性能压力其实不是在代码层，而是在模型本身。特别是场景里的模型数量一多、面数一高，这种问题就会被放大，非常明显。
说到底，Three.js卡顿往往集中在两个层面：
一个是模型传输和加载太重，文件体积大，网络下载和浏览器解析都得花时间；
另一个是渲染阶段压力太大，因为场景里的模型不管远近都在用同样精细的版本，GPU就会一直承担不必要的绘制负担。
所以后来我再遇到这类问题，重点就会放在Draco压缩和LOD分级上。
先说 Draco
Draco本质上是一种针对3D几何数据的压缩方式，主要用来压缩模型中的顶点、面片、法线这类数据。它解决的是模型"太大"的问题。
在Three.js里加载Draco压缩模型也不复杂：
javascript
import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader.js';
import{DRACOLoader}from'three/examples/jsm/loaders/DRACOLoader.js';
constloader=newGLTFLoader();
constdracoLoader=newDRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
loader.setDRACOLoader(dracoLoader);
loader.load('model.glb',(gltf)=>{
scene.add(gltf.scene);
});这样配置之后，加载器就能自动处理Draco压缩过的几何数据。相比直接加载未经处理的原始模型，这种方式在体积和加载效率上基本都会更稳妥。
LOD又解决了什么问题？
LOD是LevelofDetail的缩写，意思是"细节层级"。它解决的不是"文件大"，而是"没必要一直用最高精度渲染"。比如离镜头很近的模型可以使用高精度版本，但远处的建筑、设备、装饰物，其实完全可以切换成低面数版本。这样用户视觉感知变化不大，但是GPU压力会变小很多，场景运行也会更稳定些。
简单来说，Draco更偏向于解决加载阶段的问题，而LOD更偏向于解决运行阶段的问题。前者是让模型资源"进来得更轻"，后者是让场景"跑起来更轻"。这两个结合到一起，基本就是我在Three.js模型优化时的操作。
用轻装3D来实现这套方案
如果只是偶尔处理一个模型，单独找工具做Draco压缩，或者手动准备几档LOD，也不是完全做不了。
但是项目模型一多，问题就出现了。这整个流程非常碎，而且有很多的重复劳动。
比如一个模型改版之后，可能又要重新压缩、重新减面、重新导出不同层级，再重新检查资源是否可用。
如果一个一个手动处理会很麻烦，轻装3D可以通过一次选择，就跑完整个流程，这样就非常方便了。
它把Draco压缩和LOD分级这两件事放到了同一套流程里去整理。也就是说，在模型进入Three.js之前，就先处理掉了"体积过大"和"渲染过重"这两个核心问题。
一方面，它可以通过Draco压缩减少几何数据体积，把模型轻量化成更适配Web端的资源；另一方面，也能提前生成多档不同精度的模型版本，用来做LOD分级。这样处理过后，模型本身就变得更适合在线场景的使用，而不是直接用Three.js来硬扛性能压力。
所以要是就Three.js模型卡顿这件事来看，一个比较实用的流程就是：
先用Draco压缩减轻加载压力，再用LOD分级降低运行时渲染负担。轻装3D就是把这套优化方案集中起来，直接在一个流程里操作完，省时省力。