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 诊断 → 压纹理 → 压几何 → 配对应解码器。四步走完,几十兆的展示模型压到一两兆是常规操作;顺序错了,换什么工具都白搭。

相关推荐
金銀銅鐵6 小时前
带您看懂字节码指令(二):空循环里有什么
java·后端·ai编程
吴名氏.8 小时前
Java转AI Agent教程(第十三周)混合检索与重排
java·数据库·人工智能·ai·ai agent
.痞老板.9 小时前
java ee--多线程(进阶)
java·java-ee
treasure1409 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
深入云栈10 小时前
Netty 4.2.x 源码深度解析 (二十三):ByteBuf 核心设计 —— 索引、类型与零拷贝
java·后端·架构
jay神10 小时前
基于 YOLOv8 的手势识别系统(Web 版)
前端·人工智能·python·深度学习·yolo·计算机视觉·计算机毕业设计
屏什么录10 小时前
长时间录屏中途崩溃:MP4 打不开的 6 种救回方案与参数设置
前端·音视频开发
code_Bo11 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen11 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye11 小时前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程