问题背景：3D 模型加载太慢怎么优化

Web3D 项目常遇到三个性能瓶颈：

• • 3D 模型文件体积超过 50MB，首屏加载十几秒
• • 移动端用户加载体验差
• • 网页白屏时间太长，用户流失

本文用 5 步流程 解决 GLB / glTF 模型加载慢的问题，覆盖 Draco / Meshopt 压缩、KTX2 纹理、Three.js 加载配置、场景拆分、CDN 缓存，按顺序做下来基本能把加载时间压到 2 秒以内。

第一步：诊断问题

动手优化之前，先搞清楚瓶颈在哪。

打开 Chrome DevTools → Network 面板，刷新页面，看：

1. 1. 模型文件大小：GLB 超过 10MB 就得考虑优化了
2. 2. 加载时间分布：模型占首屏资源多大比例
3. 3. TTFB（首字节时间）：服务器响应速度

再用 gltf.report 分析 GLB 各部分大小占比（几何 / 贴图 / 动画），决定优化方向：

• • 几何数据 > 40% → 做 Draco 或 Meshopt 压缩
• • 贴图 > 50% → 先做纹理优化（JPEG/WebP/KTX2）
• • 动画 > 50% → 精简关键帧

第二步：压缩几何数据（Draco 或 Meshopt）

这是效果最显著的一步，通常能把几何数据体积减 70–90%。

两种引擎怎么选？

用 Babylon.js 或 <model-viewer> → 选 Draco
用 Three.js、追求性能 → 选 Meshopt

使用 Zipoly 压缩（GUI，不用命令行）

工具下载：https://zipoly.netlify.app（Windows，有免费在线版）

操作步骤：

1. 1. 打开 Zipoly，选"压缩优化"
2. 2. 导入 GLB/glTF 文件，软件会自动跑体检诊断
3. 3. 选场景预设（Web 3D / 移动端 / 工业 / 电商）或者手动调参
4. 4. 点"开始优化"，分阶段展示进度
5. 5. 在内置 3D 查看器里确认效果

压缩级别推荐：

Three.js 加载配置

Draco：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') // 推荐本地化，避免依赖 Google CDN
loader.setDRACOLoader(dracoLoader)

loader.load('/models/scene_optimized.glb', (gltf) => scene.add(gltf.scene))

Meshopt：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'

const loader = new GLTFLoader()
loader.setMeshoptDecoder(MeshoptDecoder)

loader.load('/models/scene_optimized.glb', (gltf) => scene.add(gltf.scene))

第三步：优化贴图

贴图往往是大头，Draco/Meshopt 对贴图无效，得单独处理。

方法一：用 Zipoly 纹理优化

Zipoly 有独立的"纹理优化"Tab，支持：

• • PNG / JPEG / WebP 批量处理
• • 等比缩放（超过指定边长）
• • 转成 KTX2 GPU 纹理（Basis Universal ETC1S 或 UASTC）

用 Meshopt 引擎压缩时，在纹理设置里开启 BasisU，几何 + 纹理一起处理。

方法二：手动处理贴图

• • 4K 贴图降到 2K（移动端屏幕看不出区别）
• • PNG 改 JPEG（体积小 60–80%）
• • 法线/高光贴图可以降到 1K

方法三：KTX2 纹理（推荐，进阶）

KTX2（KHR_texture_basisu）是 GPU 原生压缩纹理格式，文件小，GPU 不需要解码，内存占用也低。

import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'

const ktx2Loader = new KTX2Loader()
ktx2Loader.setTranscoderPath('https://cdn.jsdelivr.net/npm/three/examples/jsm/libs/basis/')
ktx2Loader.detectSupport(renderer)

const loader = new GLTFLoader()
loader.setKTX2Loader(ktx2Loader)

注意：KTX2 目前只有 Three.js 支持，Babylon.js 和 model-viewer 不支持。

第四步：场景拆分和懒加载

别把整个场景塞一个文件里。

// 相机靠近时加载，远离时卸载
class LODManager {
  update(cameraPos) {
    this.models.forEach((model) => {
      const dist = cameraPos.distanceTo(model.position)
      if (dist < model.loadDistance && !this.loaded.has(model.id)) {
        this.load(model)
      } else if (dist > model.unloadDistance && this.loaded.has(model.id)) {
        this.unload(model)
      }
    })
  }
}

<!-- model-viewer 的 poster + lazy 功能 -->
<model-viewer
  src="/models/product.glb"
  poster="/images/product-poster.webp"
  loading="lazy">
</model-viewer>

第五步：CDN 和缓存策略

location ~* \.(glb|gltf|ktx2)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

配合内容哈希文件名（model.abc123.glb）实现长缓存。

优化效果参考

Web3D 性能优化速查表

Web3D 性能优化优先级：

1. 1. Draco / Meshopt 压缩（效果最显著，必做）
2. 2. 贴图优化（经常是主要瓶颈）
3. 3. KTX2 纹理（GPU 友好，内存占用低）
4. 4. 场景拆分 + 懒加载（大场景必做）
5. 5. CDN + 缓存（简单有效）

以上压缩、纹理、格式转换操作可用上文介绍的 Zipoly 完成。