一文了解 threejs 中.bin 文件与 .gltf 文件 和 .glb 文件三者之间的关系

---

前言

在 GLTF 生态中，.bin 文件是 GLTF 格式的重要组成部分，通常与 .gltf 文件一起使用。以下是它们的详细关系和用途：

一、.bin 文件的作用

.bin 文件是一个二进制文件，用于存储 GLTF 模型中的二进制数据，例如：

• 顶点数据（位置、法线、UV坐标等）
• 索引数据（三角形面的顶点索引）
• 动画数据
• 其他二进制资源（如纹理、蒙皮权重等）

GLTF 格式的设计理念是将结构化数据（如场景、节点、材质等）存储在 .gltf 文件中（JSON 格式），而将二进制数据（如几何体、动画等）存储在 .bin 文件中。这种分离设计使得 GLTF 文件更轻量且易于解析。

二、.gltf 文件的作用

.gltf 文件是一个 JSON 文件，用于描述 3D 模型的结构和元数据，例如：

• 场景的层次结构（节点、网格、相机等）
• 材质的定义（颜色、纹理引用等）
• 动画的定义
• 对 .bin 文件的引用（指定二进制数据的位置和用途）

.gltf 文件通过 buffers 和 bufferViews 字段引用 .bin 文件中的数据。例如：

 
{
  "buffers": [
    {
      "uri": "model.bin",  // 引用 .bin 文件
      "byteLength": 1024   // .bin 文件的大小
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,         // 引用 buffers 数组中的第一个 buffer
      "byteOffset": 0,      // 数据在 .bin 文件中的起始位置
      "byteLength": 512     // 数据的长度
    }
  ],
  "accessors": [
    {
      "bufferView": 0,      // 引用 bufferViews 数组中的第一个 bufferView
      "componentType": 5126, // 数据类型（如浮点数）
      "count": 100,         // 数据项的数量
      "type": "VEC3"        // 数据类型（如三维向量）
    }
  ]
}

在这个例子中，.gltf 文件通过 buffers 字段引用了 model.bin 文件，并通过 bufferViews 和 accessors 字段描述了如何解析 .bin 文件中的数据。

三、.gltf 和 .bin 的关系

• .gltf 文件：描述模型的结构和元数据，引用 .bin 文件中的数据。
• .bin 文件：存储实际的二进制数据（如顶点、索引、动画等），供 .gltf 文件使用。
• 通常情况下，.gltf 文件和 .bin 文件是成对出现的。例如：
• model.gltf：描述模型的结构。
• model.bin：存储模型的二进制数据。

四、.glb 文件的作用

.glb 是 GLTF 的二进制版本，它将 .gltf 文件和 .bin 文件（以及其他资源，如纹理）打包成一个单独的二进制文件。这种格式更适合传输和加载，因为它减少了文件数量并简化了文件管理。

.glb 文件 = .gltf 文件 + .bin 文件 + 其他资源（如纹理）。

五、如何查看或编辑 .bin 文件

.bin 文件是二进制文件，不能直接编辑。如果需要修改 .bin 文件中的数据，通常需要：

1. 使用 GLTF 工具（如 glTF-Transform）加载 .gltf 和 .bin 文件。
2. 修改数据后，重新导出为 .gltf 和 .bin 文件，或直接导出为 .glb 文件。

六、总结

• .bin 文件：存储 GLTF 模型的二进制数据（如顶点、索引、动画等）。
• .gltf 文件：描述模型的结构和元数据，并引用 .bin 文件中的数据。
• .glb 文件：将 .gltf 和 .bin 文件打包成一个二进制文件。

如果你需要修改模型（如更换皮肤），通常只需要操作 .gltf 文件中的材质或纹理引用，而不需要直接修改 .bin 文件。