从 0 到上线的 3D 产品页实践，重点聊模型优化这块

---

我们电商平台去年下半年做了一批 3D 商品详情页，主要品类是鞋子和包，设计团队搞了一套完整的 3D 展示方案，用 <model-viewer> 实现。

项目做完之后想把这过程中踩的坑记一下，重点说说模型优化的部分，这块花了我最多精力。

---

项目背景

鞋类和包类产品的 3D 展示对模型质量要求比较高——用户会旋转查看各个角度，缝线、材质细节都需要清晰。

这就带来了一个矛盾：

• 质量要求高 → 模型面数多、贴图精度高 → 文件大
• 移动端为主 → 文件大 → 加载慢 → 用户流失

设计给的原始模型，一双鞋平均 35MB，一个包 50MB+，这显然没办法直接上线。

---

优化目标

参考了业内一些案例，我们定了这个目标：

• 移动端首屏 3D 模型加载 ≤ 3 秒（4G 网络）
• 模型文件 ≤ 8MB
• 视觉质量无明显损失（对比原始模型肉眼看不出差异）

---

优化流程

1. 分析文件组成

用 gltf.report 在线分析了几个代表性模型，大致情况：

• 几何数据（Mesh）：占 25–30%
• 贴图（Textures）：占 65–70%
• 其他：5%

贴图是大头，几何数据其次。

2. 几何压缩（Draco / Meshopt）

用 Zipoly v2.0.0 做的，支持 Draco（KHR_draco_mesh_compression）和 Meshopt（EXT_meshopt_compression）双引擎。model-viewer 项目只能选 Draco（model-viewer 不支持 Meshopt）。Three.js 项目可以选 Meshopt，压缩率更高，还能 KTX2 纹理一体化。

参数选择上稍微保守了一点，鞋这种细节多的产品不敢压太狠：

• 鞋类：压缩级别 6（保证鞋面细节）
• 包类：压缩级别 7（皮革纹路要清晰）
• 配件类（扣子、链条等）：压缩级别 5（这类小物件量化失真比较明显）

几何压缩之后，一双鞋从 35MB 到 12MB 左右，降幅约 65%。

3. 贴图优化

这步 Zipoly 也能处理，勾选"纹理优化"输出 glTF，会自动把超过 2048 的贴图缩小、重压缩。

但我们产品贴图对质量很敏感，自动压缩效果不够可控，最后还是美术手动处理的：

• 主贴图从 4096 缩到 2048（差异很小，移动端屏幕分辨率有限）
• 法线贴图保留 2048（影响材质质感）
• 粗糙度/金属度贴图降到 1024（不直接影响视觉，可以低分辨率）
• JPEG 替换 PNG（有损但体积小 60%+）

处理后：12MB → 5.8MB，达到目标。

---

model-viewer 的配置

前端这边用的是 Google 的 <model-viewer> 组件，内置 Draco 支持，配置很简单：

<model-viewer
  src="/models/shoe-001_optimized.glb"
  alt="Air Force 1 白色 42码"
  camera-controls
  auto-rotate
  shadow-intensity="1"
  ar
  ar-modes="webxr scene-viewer quick-look"
  loading="lazy"
  poster="/models/shoe-001-poster.webp"
>
</model-viewer>

注意几个细节：

• loading="lazy" 很重要，非可见区域不加载
• poster 提供一张占位图，3D 加载完之前显示
• ar 开启 AR 功能，在 iOS/Android 上体验不错

Draco 压缩的 GLB 不需要任何额外配置，model-viewer 自动处理。

---

效果数据（内部测试）

指标	优化前	优化后
平均模型文件大小	41MB	5.2MB
4G 首屏加载时间	14.6s	2.8s
WiFi 首屏加载时间	3.2s	0.9s
用户在 3D 展示区停留时间	-	增加约 40%

停留时间增加主要是加载快了，模型质量也到位，用户愿意多转两圈看。

---

几点经验

1. 几何压缩级别要根据品类调。高精度产品展示别用 8–10，5–7 通常是安全范围。
2. 贴图往往比几何更重要。很多时候优化贴图的效果比 Draco 压缩更明显。
3. 先压缩再检查，别盲目上线。Zipoly 内置查看器这点很省事。
4. poster 图不能省。模型加载前有占位图，用户体验好很多，也降低跳出率。

---

整个流程跑完，这套优化思路后来在公司内推广了，其他品类的 3D 详情页都在用类似流程。

Zipoly 的下载地址：https://zipoly.netlify.app

做电商 3D 详情页的同学，你们鞋类/服装类一般把模型压到多大？我们目前卡在 6MB 左右，再往下视觉就开始能看出差异了，想问问有没有更好的方案。