在 Web3D 开发过程中，glTF 和 GLB 这两种 3D 模型格式几乎是必用的选择。许多初学者常常困惑于它们之间的区别，每次导出模型时都会犹豫：到底该选哪一个？别着急，今天我们就来彻底讲清楚这件事。

首先给出一个基本判断：glTF 和 GLB 本质上是一回事，只是同一格式的两种不同“包装方式”。理解了这个核心，后续的选择就变得简单了。

一、glTF 是什么

glTF 的全称是 GL Transmission Format（GL 传输格式），由 Khronos Group 制定，目标是成为 3D 领域的 JPEG——专为 Web 端高效传输而设计。目前 Three.js、Babylon.js、Unity、Unreal Engine 等主流引擎都原生支持它，可以说是 Web3D 领域的事实标准格式。

二、glTF 和 GLB 的关系

GLB 是 glTF 的二进制打包版本，两者同源，区别仅在于文件组织方式。

glTF 格式（又称“散装版”）：

• model.gltf —— JSON 格式的主文件，描述场景结构与节点信息
• model.bin —— 二进制数据（几何信息、顶点数据等）
• texture_0.png —— 贴图文件
• texture_1.jpg —— 贴图文件
• ……

特点：多个文件组成，JSON 可读性好，贴图独立可替换，部署时需要携带整个文件夹。

GLB 格式（“打包版”）：

• model.glb —— 单个文件，包含所有模型数据与贴图资源

特点：单文件，不可直接编辑，部署简单，HTTP 请求数量少，通常加载速度更快。

三、技术结构对比

四、什么时候用 glTF，什么时候用 GLB

选 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，具体可以参考相关的教程文章。

八、总结

格式转换工具推荐：Zipoly（有免费在线版，无需安装）。

如果还有疑问，欢迎在评论区交流。