3D模型太大加载卡死？Draco+KTX2压缩，体积直接砍掉90%

现在AI生成3D模型越来越方便了，腾讯混元、Tripo、Meshy，随便描述几句就能出一个模型。

但有一个坑我相信你一定踩过——生成的模型动辄几十MB，根本没法在Web端用。

我以腾讯混元下了一个模型，24MB，往Cesium和Three.js里一塞，加载速度感人，手机端直接卡死。这篇文章聊聊我怎么用AI帮我把它压缩到2MB出头，还几乎看不出画质差别。

大概24MB。

为什么生成的模型这么大？

AI生成的3D模型，文件大主要有两个原因：几何数据没压缩、纹理格式没优化。

几何数据是什么？你可以把3D模型想象成一个由无数个三角形拼起来的物体。每个三角形有3个顶点，每个顶点都要记录位置（XYZ坐标）、法线方向、UV贴图坐标等信息。AI生成的模型，这些数据全部原始存储，没有任何压缩，顶点数量一多，文件就大。

纹理数据是什么？就是贴在模型表面的图片，让模型看起来有颜色、有质感。AI生成的模型一般用PNG/JPEG格式，这类格式虽然人眼看起来清晰，但浏览器加载后需要完整解压到内存，一张4096×4096的贴图解压后轻松占几十MB内存。

所以Web端要优化这种模型，要分别处理这两个问题：

  • Draco：专门压缩几何数据的算法，把顶点坐标用更紧凑的方式编码存储，体积能压掉 80-90%，但模型形状不变
  • KTX2/Basis Universal：一种专为GPU设计的纹理格式，浏览器加载后不需要完整解压，GPU可以直接读取压缩状态的数据，省内存也省带宽，视觉上几乎没损失

两者结合，文件体积直接打下去一个数量级。

工具：gltf-transform

现在业内处理 glTF/GLB 格式最成熟的工具就是 @gltf-transform/cli，Three.js 和 Cesium 都原生支持带 Draco/KTX2 的 GLB 文件。

它提供了一套完整的命令行工具，压缩、合并、优化、转换，一条命令搞定，不需要写一行代码：

npm install -g @gltf-transform/cli

装完之后在终端输入 gltf-transform --help 可以看到所有支持的命令。功能很多，但我们只用压缩这一个场景。

如果你已经清楚参数含义，也可以直接跑这条命令：

npx --yes @gltf-transform/cli optimize basic.glb basic.optimized.glb \
  --compress meshopt \
  --texture-compress webp \
  --texture-size 1024
  • --compress meshopt：用 MeshOptimizer 压缩几何数据（比 Draco 兼容性更好）
  • --texture-compress webp：纹理转为 WebP 格式
  • --texture-size 1024：贴图尺寸限制在 1024，超出自动缩放

不想记参数的话，往下看，让 AI 帮你搞定。

用 Codex 直接执行

方案有了，接下来是实操。当然直接使用AI来进行处理，完全没有必要自己去把工具学一遍，这里我用的是 Codex。

先把下载的模型放到项目目录下：

然后直接告诉 Codex 我的诉求，不需要自己查命令：

项目下有一个模型，但是这个模型太大了，
我想使用 gltf-transform/cli 对他进行压缩，要怎么处理

Codex 直接帮我执行了命令，不用自己翻文档、试参数。压缩完还给了一个质量更高的备选脚本：

两个模型大小相差10倍。

验证：两个模型同时加载对比

压完了不能凭感觉说"应该差不多"，让 Codex 写个验证页面：

现在需要验证模型质量，请你用 Three.js 进行加载，
两个模型同时加载显示在画面左右；使用 importmap 的方式

项目后运行查看，左边原始24MB，右边压缩后2MB出头。

结果：肉眼几乎看不出差别。

几何细节保留完整，纹理颜色基本一致，文件体积差了10倍。对于Web端展示场景，这个质量完全够用。

什么时候用？

  • Cesium 加载大量建筑/地形模型，优化首屏时间
  • Three.js 场景里放AI生成的物体，避免卡顿
  • 有模型但加载慢、内存占用高，先压缩再说

整个流程下来，技术方案用 ChatGPT 捋技术方案，实操用 Codex 跑命令，自己基本不需要记参数。这才是 AI 辅助开发的正确打开方式——不是替你思考，是替你干那些重复查文档、记命令的活。

搭建 threejs 的环境