记录学习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 一行搞定
相关推荐
SYNCON25 小时前
[新启航]白光干涉仪与激光干涉仪的区别及应用解析
科技·3d·制造
Struart_R2 天前
LLaVA-3D,Video-3D LLM,VG-LLM,SPAR论文解读
人工智能·深度学习·计算机视觉·3d·大语言模型·多模态
杀生丸学AI2 天前
【无标题】GAP: 用文本指导对任何点云进行高斯化
3d·aigc·三维重建·视觉大模型·动态重建
audyxiao0013 天前
为了更强大的空间智能,如何将2D图像转换成完整、具有真实尺度和外观的3D场景?
人工智能·计算机视觉·3d·iccv·空间智能
范男3 天前
基于Pytochvideo训练自己的的视频分类模型
人工智能·pytorch·python·深度学习·计算机视觉·3d·视频
点云SLAM3 天前
SLAM文献之-Globally Consistent and Tightly Coupled 3D LiDAR Inertial Mapping
3d·机器人·slam·vgicp算法·gpu 加速·lidar-imu 建图方法·全局匹配代价最小化
LetsonH3 天前
⭐CVPR2025 给3D高斯穿 “UV 衣” 框架[特殊字符]
3d·uv
新启航-光学3D测量4 天前
从 48 小时到 4 小时:三维逆向工程中自动化工具链如何重构扫描建模效率
科技·3d·制造
彩旗工作室4 天前
腾讯混元3D系列开源模型:从工业级到移动端的本地部署
3d·开源·腾讯混元
CG_MAGIC4 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南
3d·渲染·动画·材质·贴图·3d 模型格式·材质支持与转换操作指南