做 Web3D 开发时，经常会遇到 .gltf 和 .glb 两种格式，很多同学分不清区别，也不知道该用哪种。
本文详细解释这两种格式的关系和区别，并给出实际使用场景的建议。
一、glTF 是什么
glTF（GL Transmission Format）是由 Khronos Group 制定的 3D 内容标准格式，被称为"3D 界的 JPEG"，专为 Web 传输设计。
目前 Three.js、Babylon.js、Unity、Unreal Engine 等主流引擎均支持 glTF 格式。
二、glTF 和 GLB 的关系
GLB 是 glTF 的二进制打包版本，两者本质上是同一种格式，区别只在于文件组织方式：
glTF 格式（"散装"）
model.gltf ← JSON 格式的主文件，描述场景结构
model.bin ← 二进制数据（几何数据等）
texture_0.png ← 贴图文件
texture_1.jpg ← 贴图文件
...
特点：
• 多个文件组成
• JSON 可读，便于手动编辑
• 贴图独立，可以单独替换
• 部署需要把整个文件夹打包
GLB 格式（"打包"）
model.glb ← 一个文件，包含所有数据
特点：
• 单文件，包含 JSON 数据 + 二进制数据 + 贴图
• 不可直接编辑
• 部署方便，一个文件搞定
• HTTP 请求少，加载通常更快
三、技术结构对比
特性 glTF GLB
文件数量 多个（.gltf + .bin + 贴图） 单个
主文件格式 JSON（可读） 二进制
贴图存储 外部文件 内嵌
加载请求数 多 1
文件大小 接近 接近（略有差异）
适合编辑 ✅ ❌
适合部署 需要整包 直接部署
四、什么时候用 glTF，什么时候用 GLB
用 glTF 的场景
- 需要后续修改贴图：glTF 的贴图是外部独立文件，可以直接替换 PNG/JPG 而不需要重新导出模型
- 需要读取/修改场景结构：.gltf 文件是 JSON，用文本编辑器可以查看和修改
- 与建模流程集成：一些工具导出 glTF 后需要手动调整场景节点结构
- 开发调试阶段：JSON 结构可读，便于排查问题
用 GLB 的场景 - 生产环境部署：单文件，不会因为贴图路径问题加载失败
- CDN 分发：一个文件，缓存管理更简单
- 移动端优化：减少 HTTP 请求数
- 发给别人使用：一个文件方便传输，不会丢贴图
通常建议：开发阶段用 glTF（便于调试），上线阶段转成 GLB（便于部署）。
五、如何相互转换
使用 Zipoly（https://zipoly.netlify.app）可以轻松互转：
glTF → GLB（打包贴图）
- 打开 Zipoly，选"格式转换"
- 导入 .gltf 文件（贴图会自动关联）
- 目标格式选 GLB
- 开始转换
转换后，所有贴图文件会被自动打包进 GLB，生成独立的单文件。
GLB → glTF（解包贴图）
同样的步骤，目标格式选 glTF 即可，会输出独立的 .gltf + .bin + 贴图文件。
六、和 Draco 压缩的关系
Draco 压缩和 glTF/GLB 格式是独立的两件事：
• 格式（glTF/GLB）：决定文件如何组织
• Draco 压缩：决定几何数据是否压缩
两者可以组合：
• 未压缩的 glTF
• 未压缩的 GLB
• Draco 压缩的 glTF
• Draco 压缩的 GLB（最常用的生产格式）
一般的最佳实践是：Draco 压缩 + GLB 格式 = 最小体积 + 单文件部署。
七、Three.js 加载两种格式的代码
两种格式用的是同一个 GLTFLoader，代码相同：
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
const loader = new GLTFLoader()
// 加载 GLB
loader.load('/models/scene.glb', (gltf) => {
scene.add(gltf.scene)
})
// 加载 glTF（相同的代码）
loader.load('/models/scene.gltf', (gltf) => {
scene.add(gltf.scene)
})
注意：加载 Draco 压缩版本还需要配置 DRACOLoader（见其他文章）。
八、总结
场景 推荐格式
开发调试 glTF
生产部署 GLB
贴图需要经常更新 glTF
一次成型，直接部署 GLB
传给他人使用 GLB
需要手动查看/编辑结构 glTF
格式转换工具：Zipoly（https://zipoly.netlify.app，有免费在线版）
欢迎评论区交流！
