记录学习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 示例
一行代码即可加载完整模型,包括材质、动画、灯光!

javascript 复制代码
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 中是这样的结构

javascript 复制代码
风扇(Fan)
├── 机身(Body)
├── 支架(Stand)
└── 叶片(Blade)

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

.OBJ 格式不支持层级结构

它导出后,所有这些部分可能被「扁平化」成一个单一的大模型(一个 Mesh),像这样:

javascript 复制代码
Fan.obj
└── 一个包含全部顶点的网格,没有结构信息

所以你在加载 .obj 后,想单独拿到 blade 部分旋转?要么靠 child.name.includes('blade') 模糊查找,要么就没法单独控制。
.glTF 格式则保留原始的「场景层级结构」

javascript 复制代码
gltf.scene.getObjectByName('blade').rotation.z += 0.01;

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

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

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

.OBJ 加载过程:

javascript 复制代码
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 加载过程:

javascript 复制代码
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
});
特性 .OBJ + .MTL .glTF / .glb
材质 需要额外加载 .mtl 内嵌在模型中
层级结构 无,全部是一个大 Mesh 有,保留父子结构
动画 ❌ 不支持 ✅ 支持骨骼动画
灯光、相机 ❌ 不支持 ✅ 支持
代码加载方式 至少两段 Loader 一行搞定
相关推荐
向宇it1 天前
【unity小技巧】封装unity适合2D3D进行鼠标射线检测,获取鼠标位置信息检测工具类
游戏·3d·unity·游戏引擎
中科米堆1 天前
中科米堆CASAIM金属件自动3d测量外观尺寸三维检测解决方案
人工智能·3d·视觉检测
山楂树の1 天前
模型优化——在MacOS 上使用 Python 脚本批量大幅度精简 GLB 模型(通过 Blender 处理)
python·macos·3d·图形渲染·blender
Blossom.1182 天前
基于深度学习的医学图像分析:使用BERT实现医学文本分类
人工智能·深度学习·机器学习·3d·分类·cnn·bert
dllmayday2 天前
3D空间中的变换矩阵
线性代数·3d·矩阵
渲吧-云渲染2 天前
材质:3D渲染的隐形支柱
3d·材质
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes(3D背景盒子组件)
前端·javascript·vue.js·3d·vue
广州华锐视点2 天前
3D 网上展厅,到底是什么?
3d
新启航光学频率梳3 天前
自定心深凹槽参数检测装置及检测方法 - 激光频率梳 3D 轮廓检测
科技·3d·制造
渲吧-云渲染3 天前
为什么全景渲染更耗时?关键因素解析
3d