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

相关推荐
AAA程序技术1 小时前
用户点击按钮时,发生了什么
前端
sp421 小时前
Java 加解密组件再设计
java·后端
花旗蜕变1 小时前
前端转 NestJS 全栈实践:从表单页面到微信业务系统
前端·typescript·nestjs
知守观1 小时前
从三个带病的 Guava 本地缓存出发:Redis + Guava 二级缓存的读写路径与失效设计推演
java·redis·后端
ThinkerQAQ_1 小时前
并发编程(七):volatile——从语言规则到 CPU
java·python·go
蜗牛互联网1 小时前
Python Responses API函数调用实战:工具白名单、参数校验与预算
java·人工智能·后端
韩曙亮1 小时前
【JavaEE】MyBatis 基本用法 ⑤ ( 单条件查询 | 多条件查询 | 多条件动态查询 | 单条件动态查询 )
java·sql·java-ee·mybatis·mapper·sql映射
开开心心就好1 小时前
二维码批量生成导出工具,离线可用完全免费
java·前端·人工智能·智能手机·github·excel·visual studio
wangbing11251 小时前
开发指南147-WebSocket-前后关联关系
java