Three.js 模型体积优化：Draco/Meshopt 压缩与 DRACOLoader 配置的 4 个步骤

场景加载慢，先别怀疑渲染代码。这篇给一套能直接复制的完整流程：inspect 诊断 → 纹理压缩 → 几何压缩 → Three.js 解码器配置，含命令和参数。

环境

前端：Three.js（r150+，示例包 three/examples/jsm）
压缩工具（二选一）：命令行 gltf-transform / gltf-pipeline，或桌面工具 Zipoly
输入格式：GLB 优先（二进制打包，贴图内嵌）

第 0 步：先诊断，别急着压

bash 复制代码

gltf-transform inspect model.glb

输出会列出顶点数、三角面数、贴图数量和各自占用体积。这一步决定了后面压什么：

贴图占大头 → 先跑纹理压缩（很多「几十兆」的模型，几何只有几兆）
几何占大头 → 直接上 Draco / Meshopt

诊断错了，后面全白做。

第 1 步：压纹理

Zipoly 桌面版纹理优化页参数：

参数	取值	说明
输出格式	JPEG / WebP / KTX2	WebP 体积小约 30%；KTX2 GPU 原生性能最佳
压缩质量	75（默认）	滑杆 0-100
最大边长	2048（默认）	超过此边长的纹理会被缩放

实测一组批量贴图：486 KB → 103.2 KB（-45%）、269.8 KB → 183.1 KB（-77%），已优化过的自动跳过。

命令行等价操作：gltf-transform etch input.glb output.glb（WebP 链路）。

第 2 步：压几何

引擎二选一，参数对照：

项	Draco	Meshopt
压缩率	更高	略低
解压速度	稍慢	更快
节点层级	可能合并	可保留命名节点
前端解码器	DRACOLoader	MeshoptDecoder
适合	静态展示	工业/BIM、需交互查询

压缩率别看宣传数字，看自己的模型：一次实测里 6.10 MB 压到 0.18 MB（-38.5%），另一个模型压掉 90% 以上------差距来自模型本身。

已压过的模型不要重复压：再压一次几乎无变化（846 KB → 815 KB，3.6%），日志会直接告诉你省了多少。这种情况回头找源文件重压。

第 3 步：Three.js 接解码器（漏了就黑屏）

压完不配解码器 = 模型加载出来是黑的。这是最常见的翻车点，而且极易被误判成「压缩把模型压坏了」。

js 复制代码

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()
// 解码器文件必须与构建产物一起部署，路径不对会 404
dracoLoader.setDecoderPath('/three/examples/jsm/libs/draco/')

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

gltfLoader.load('model_optimized.glb', (gltf) => scene.add(gltf.scene))

Meshopt 的写法：

js 复制代码

import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
gltfLoader.setMeshoptDecoder(MeshoptDecoder)

用了 KTX2 贴图还要再加 KTX2Loader，并且要传 renderer 做 GPU 能力检测。

常见坑

坑一：解码器 404。

setDecoderPath 指向的目录没被打包进产物。本地能跑、上线黑屏，基本都是这个原因------打开网络面板看一眼就知道。

坑二：引擎和解码器不匹配。

用 Meshopt 压的却配 DRACOLoader，或者反过来。压的时候选了什么引擎，前端就配什么解码器。

坑三：压缩强度拉满导致画质问题。

强度开到最高时，金属件高光可能发黑、贴图轻微错位。压完一定要预览转一圈，有问题就降一档强度重来。

坑四：层级被合并。

工业模型靠节点树做点击查询，压缩时如果没开「保留命名节点」，层级会被合并，交互全废。Meshopt 下记得开这个开关。

什么时候别压

模型用于工程测量、毫米级误差不可接受时，不要压几何，只压贴图。另外带骨骼动画的 3D 模型压缩率不稳定，先拿一两个试压再决定参数。

小结

inspect 诊断 → 压纹理 → 压几何 → 配对应解码器。四步走完，几十兆的展示模型压到一两兆是常规操作；顺序错了，换什么工具都白搭。