用途:把 3D 模型做小做快而不明显破坏观感,面向网页端 glTF/GLB 资源优化。原则是始终保留原始文件,优化结果写入新文件,并报告优化前后体积。
使用步骤:
- 检查现状:npx @gltf-transform/cli inspect model.glb,关注文件大小、网格/图元数量、贴图数量与分辨率、绘制调用估算,以及是否已使用 Draco/KTX2。
- 一键优化:npx @gltf-transform/cli optimize model.glb model.opt.glb --compress draco --texture-compress ktx2。该命令会清理无用数据、去重、焊接顶点、实例化,对几何体做 Draco 压缩、对贴图做 KTX2 压缩。
- 针对性处理(按需):贴图过大可执行 npx @gltf-transform/cli resize model.opt.glb model.opt.glb --width 2048 --height 2048;也可用 gltfpack -i model.glb -o model.pack.glb -cc 作为 meshopt 方案,需另行安装 npm i -g gltfpack。其他可用命令包括 dedup、prune、weld、instance、draco、meshopt,以及 KTX2 的 ets1s/uastc 质量档。
- 可选转换为 R3F 组件:npx gltfjsx model.opt.glb -t -T,生成带类型的 useGLTF 组件与 JSX 场景图,便于按网格编辑。
- 运行时解码:压缩资源需解码器。drei 的 useGLTF 会自动处理 Draco、meshopt、KTX2,但需确保解码器路径可解析;原生 Three.js 需为 GLTFLoader 接入 DRACOLoader、KTX2Loader(配合 renderer.detectSupport)与 MeshoptDecoder。
- 验证与报告:对比原始 X MB → 优化 Y MB(−Z%),确认模型仍能加载且外观正确(缩放、材质、贴图齐全)。贴图发白时提高 KTX2 质量(uastc)或跳过法线贴图压缩。
目标:主视觉资源 GLB 尽量控制在几 MB 以内,贴图用 KTX2,几何体用 Draco/meshopt,每场景约 100 次绘制调用以内。若命令报错,请核对 gltf-transform / gltfpack 当前文档中的参数。