一、先说痛点
做 Web3D 的朋友应该都经历过这种场景：美术同学高高兴兴交付一个 GLB，你往页面里一塞 —— 好家伙，47MB。首屏白屏 8 秒，用户骂骂咧咧关掉页面，老板质问你 "为什么别人家的模型加载那么快"。
更难受的是，很多项目还有数据保密要求：军工、医疗、工业制造，模型根本不允许上传到任何第三方在线工具。你搜遍全网，找到的压缩教程全是命令行，或者是必须上传文件的网页工具 —— 直接劝退。
我最近接了个产品落地页的需求，把整个踩坑过程和最终方案整理出来，希望能帮你少走点弯路。
二、先搞清楚：GLB 到底大在哪？
动手之前别急着压缩，先诊断。GLB 的体积基本由三部分组成：
- 几何数据（顶点、索引、法线）
- 纹理贴图（baseColor、normal、roughness 等，往往是最大头）
- 动画 / 节点结构
判断标准很简单：贴图占比大就优先压纹理，几何占比大就优先压网格。我这次 47MB 的模型就是典型的 "几何 + 纹理双高"，所以两边都得处理。
三、网格压缩：Draco vs Meshopt，到底选哪个？
这是 GLB 压缩绕不开的两个主流方案，都是 glTF 官方扩展，区别如下：
表格
| 对比项 | Draco（KHR_draco_mesh_compression） | Meshopt（EXT_meshopt_compression） |
|---|---|---|
| 压缩率 | 高（几何数据 -70~90%） | 更高（几何 + 场景图一体化优化） |
| 解码速度 | 快 | 快 5~10 倍（WebGPU 友好） |
| 纹理压缩 | JPEG / WebP / KTX2 | BasisU（ETC1S / UASTC）内置 |
| 框架支持 | Three.js / Babylon.js / model-viewer | Three.js r136+ |
| 适合场景 | 兼容性广、Babylon.js 项目 | 新项目、追求性能 |
我的经验：新项目、追求加载性能，优先选 Meshopt；项目里用 Babylon.js 或 model-viewer 的，老老实实选 Draco（这俩框架不支持 Meshopt）。
但问题来了 ——命令行太劝退了。以前每次压缩我都要翻文档拼参数，Draco 一行、Meshopt 一行、纹理又是一行，压完还得自己写脚本看体积对比，效率极低。
四、我的方案：一个能离线跑的 GUI 压缩工具
后来我找到了 Zipoly—— 一款完全离线运行的桌面端模型压缩工具，重点是：不用碰命令行，文件不出本机。对保密项目来说是刚需，对普通项目来说是真的省事。
4.1 上手很简单
下载地址在官网：zipoly.netlify.app，安装包很小（5MB 左右），装完就能用，全程不需要联网。界面很干净，左侧导航就四个功能：压缩优化、格式转换、3D 查看器、操作日志。
4.2 压缩操作三步走
第一步：导入模型，看体检报告
把 47MB 的 GLB 拖进去，软件自动跑一遍体检，直接告诉我：
- 顶点数、三角面数、纹理数量、动画数量
- 潜在问题（重复顶点、超规格纹理、缺失法线等）
- 推荐的压缩级别
这一步太关键了 —— 以前这些信息我得开好几个工具才能凑齐，现在导入就全有了。
第二步：选引擎，直接照抄它的推荐
我这次新项目走 Three.js，按它的场景预设选 "Web 3D 场景"（Meshopt 引擎）。如果你项目用 Babylon.js，选" 工业可视化 " 预设（Draco 引擎）就行。不纠结，它还内置了自动降级：Meshopt 不可用时自动退回 Draco，结果不受影响。
压缩级别默认 7，一般从这开始没错：
表格
| 级别 | 适用场景 |
|---|---|
| 1~3 | 工程 / 医疗 / 精密模型，精度优先 |
| 4~6 | 产品展示、建筑可视化 |
| 7（默认） | Web3D 通用，推荐从这里开始 |
| 8~9 | 移动端、低带宽，能接受轻微失真 |
| 10 | 远景装饰，几何失真明显 |
第三步：点 "开始优化"，等对比结果
压缩过程会实时显示 "几何压缩 → 纹理优化 → 写入文件" 三个阶段进度。我这个 47MB 的模型，大概一分钟跑完，弹出来的对比窗口写着：47MB → 8MB，体积缩小 83%。
强烈建议压完点一下 "预览效果"，在内置 3D 查看器里亲眼看一遍模型外观 —— 量化参数合不合适，眼睛看最准，别只看数字。
4.3 我为什么长期用它？
用了一段时间，最打动我的三个点：
- 离线运行，保密项目敢用。模型文件不出本机，军工、医疗、企业内网场景完全 OK，不用提心吊胆传文件到别人的服务器。
- 自动体检 + 可视化对比。哪个环节有问题直接标出来，压缩前还能预览，不用靠猜。
- 批量压缩。一次选一个文件夹，递归扫描所有 GLB/glTF，暂停 / 继续 / 取消都支持，做资产管线的福音。
对了，如果你手头只有 FBX/OBJ/STL/DAE/PLY，它内置的 "格式转换" 能直接互转 7 种格式，转完顺手就能压缩，一条龙。
五、压完怎么加载？Three.js 代码直接抄
压缩只是第一步，加载端也得配好解码器，不然会报错。Three.js 的完整写法如下：
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
const loader = new GLTFLoader();
// 1. 如果用了 Draco 压缩，配置 Draco 解码器（建议本地部署，国内访问 Google CDN 不稳）
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/'); // 把 three/examples/jsm/libs/draco 拷到 public 下
loader.setDRACOLoader(dracoLoader);
// 2. 如果用了 Meshopt 压缩，配置 Meshopt 解码器
loader.setMeshoptDecoder(MeshoptDecoder);
// 3. 如果纹理压成了 KTX2，还要配置 KTX2Loader
// const ktx2Loader = new KTX2Loader();
// ktx2Loader.setTranscoderPath('...basis/');
// ktx2Loader.detectSupport(renderer);
// loader.setKTX2Loader(ktx2Loader);
// 4. 正常加载
loader.load(
'/models/building.glb',
(gltf) => { scene.add(gltf.scene); },
(xhr) => { console.log(`${(xhr.loaded / xhr.total * 100).toFixed(1)}%`); },
(err) => { console.error('加载失败:', err); }
);
如果用 Babylon.js 或 model-viewer，直接加载就行，无需额外配置—— 但这俩框架不支持 Meshopt，压缩时记得选 Draco 引擎。
六、几个容易踩的坑
- 压完忘了配解码器。Draco 压过的 GLB 不配
DRACOLoader直接加载会报错，Meshopt 同理。 - 小模型别硬压。面数 < 1000 或体积 < 100KB 的模型，压缩元数据开销反而超过收益，压完可能更大。
- 压完模型变形 / 锯齿？把压缩级别降下来（7→5），别硬扛。
- 压缩完一定预览。量化参数合不合适，眼睛最诚实，别省这一步。
七、总结
GLB 太大不是死局，核心就一句话：几何上 Draco/Meshopt，纹理上 KTX2/WebP，压完配好解码器。90% 的模型体积问题都能解决。
工具这块，我的建议是：能离线就不上传，能可视化就不靠猜。Zipoly 免费下载，Mac/Linux 用户还有免安装的 Web 在线版，小文件也能白嫖。官网放这了：zipoly.netlify.app，需要的自取，不是广告，是真心觉得好用才分享。
如果你手头有压不动的模型，欢迎评论区贴出你的数据，一起聊聊。
