记录学习three.js 为什么 .glTF 是更适合 Web 的 3D 模型格式？——从 .OBJ 到 .glTF 的转变⑭

在上一篇中，我们介绍了如何在 Three.js 中加载 .OBJ 模型。如果你没看过，建议先阅读一下基础内容。然而你很快会发现，.OBJ 虽然入门简单，却并不是 Web3D 场景中的最佳格式。

.OBJ 是什么？

.OBJ 是最早期的3D交换格式之一，目的是让各类 3D 编辑器（如 Maya、3ds Max）之间传输模型数据：

• 是文本格式，人可以读懂，机器也能简单处理；

• 文件由 .obj（几何数据）和 .mtl（材质）组成；

• 没有层级结构（Scene Graph），所有对象都变成一个大 Mesh；

• 不支持动画、骨骼、灯光等高级功能；

• 贴图路径容易丢失，材质兼容性差；

• 加载慢、数据体积大，不利于 Web 性能优化。

.glTF（GL Transmission Format）是 Khronos Group 推出的 3D 图形传输标准，专为 Web 而生：

• ✅ 体积小：二进制数据（.glb）极度压缩，适合网络加载；

• ✅ 结构清晰：包含场景、层级、材质、贴图、动画等；

• ✅ 渲染友好：三角面、贴图、PBR 材质都是 WebGL/Three.js 可直接使用的；

• ✅ 加载简单：没有额外材质文件，One file，One loader；

• ✅ 跨平台标准：被 Blender、Unity、Unreal、Three.js 等现代工具广泛支持；

一句话总结：

📦 glTF 是 Web 3D 世界的 JPEG，旨在成为“3D 模型的通用图像格式”。

.glTF 比 .OBJ 强在哪？

特性	.OBJ	.glTF
文件结构	仅包含几何 + 材质	场景图 + 动画 + 灯光 + 材质 + 相机
材质支持	简单材质，贴图易丢失	标准 PBR 材质，贴图内嵌
动画支持	❌ 不支持	✅ 支持骨骼/关键帧动画
加载速度	较慢（文本解析）	快（直接传入 GPU）
文件体积	较大（3~5 倍）	极小，优化传输
渲染兼容性	需要手动调整	开箱即用

使用 Three.js 加载 .glTF 示例

一行代码即可加载完整模型，包括材质、动画、灯光！

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('/models/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

总结：什么时候选 .glTF？

如果你面向 Web 显示 / 动画 / PBR 材质 / 性能优化，请选择 .glTF 或 .glb！

.OBJ 仍然适用于快速测试或简单模型，但在现代 Web3D 项目中，.glTF 几乎是唯一推荐的格式。

1. 「没有层级结构（Scene Graph），所有对象都变成一个大 Mesh」是什么意思？

假设你原始模型是一个风扇，它在 Blender 中是这样的结构

风扇（Fan）
├── 机身（Body）
├── 支架（Stand）
└── 叶片（Blade）

每个部分是一个单独的对象（Object），你可以单独操作它们，比如给叶片加动画、旋转它。

但 .OBJ 格式不支持层级结构

它导出后，所有这些部分可能被「扁平化」成一个单一的大模型（一个 Mesh），像这样：

Fan.obj
└── 一个包含全部顶点的网格，没有结构信息

所以你在加载 .obj 后，想单独拿到 blade 部分旋转？要么靠 child.name.includes('blade') 模糊查找，要么就没法单独控制。

.glTF 格式则保留原始的「场景层级结构」 

gltf.scene.getObjectByName('blade').rotation.z += 0.01;

「一行代码即可加载完整模型，包括材质、动画、灯光！」是真的不用额外加载 .mtl 文件吗？

✅ 是的，.glTF/.glb 不需要 .mtl 材质文件，材质是内嵌进去的！

这点是 .glTF 相比 .OBJ 最大的优势之一。

.OBJ 加载过程：

const mtlLoader = new MTLLoader();
mtlLoader.load('model.mtl', (materials) => {
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('model.obj', (object) => {
    scene.add(object);
  });
});

 .glTF 加载过程：

const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
});

特性	.OBJ + .MTL	.glTF / .glb
材质	需要额外加载 .mtl	内嵌在模型中
层级结构	无，全部是一个大 Mesh	有，保留父子结构
动画	❌ 不支持	✅ 支持骨骼动画
灯光、相机	❌ 不支持	✅ 支持
代码加载方式	至少两段 Loader	一行搞定