GLTF（GL Transmission Format）详细介绍
GLTF（GL Transmission Format）是一种现代 3D 文件格式，由 Khronos Group 开发，专为高效传输和渲染 3D 资产而设计。它被广泛用于 Web 3D（如 Three.js、Babylon.js）、游戏开发（Unity、Unreal）以及 AR/VR 应用。
1. GLTF 主要特点
✅ 轻量 & 高效：相比 FBX/OBJ，GLTF 文件更小，加载更快
✅ 支持 PBR 材质：支持 金属度-粗糙度（Metal-Roughness） 和 镜面光滑度（Specular-Glossiness） 两种 PBR 渲染方式
✅ 支持动画：骨骼动画（Skeletal Animation）、关键帧动画
✅ 开放标准：由 Khronos Group 维护，兼容 OpenGL、WebGL、Vulkan 等图形 API
✅ 可包含纹理 & 形变：支持嵌入 纹理、法线贴图、骨骼蒙皮、Morph Target（变形目标）
2. GLTF 文件格式
GLTF 有两种主要格式：
| 格式 | 扩展名 | 特点 |
|---|---|---|
| GLTF | .gltf | 文本格式，使用 JSON 存储模型数据，外部存储二进制数据和纹理 |
| GLB | .glb | 二进制格式，所有数据（几何、纹理、动画）都封装在一个文件中，适合网络传输 |
GLB vs. GLTF 的区别：
-
GLB 适合网络加载，因为它是一个完整的二进制文件
-
GLTF 适合手动编辑，因为它是 JSON 格式，易读易改
3. GLTF 文件结构
GLTF 文件主要包含以下数据：
-
Asset（资产信息）：版本、元数据
-
Scene（场景）：包含模型的层次结构
-
Node（节点）：定义物体的位置、旋转、缩放
-
Mesh（网格）：存储几何数据，如顶点、法线、UV
-
Material（材质）：定义 PBR 材质，支持金属度-粗糙度
-
Texture（纹理）：颜色、法线贴图等
-
Animation（动画）：骨骼动画、关键帧动画
-
Camera（摄像机）：透视和正交相机
4. 如何加载 GLTF 文件？（Three.js 示例）
（1）安装 GLTFLoader
npm install three
（2）使用 GLTFLoader 加载模型
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载 GLTF 模型
const loader = new GLTFLoader();
loader.load('model.gltf', function (gltf) {
scene.add(gltf.scene); // 添加到场景
gltf.scene.position.set(0, 0, 0); // 设置位置
}, undefined, function (error) {
console.error('加载失败', error);
});
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
5. 如何导出 GLTF？
Blender 导出 GLTF：
-
选择你的 3D 模型
-
点击 File > Export > glTF 2.0 (.glb, .gltf)
-
选择导出格式（GLB / GLTF）
-
选择 "Include" 选项，确保纹理和动画被导出
-
点击 Export glTF 2.0
使用 Three.js 导出 GLTF：
import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
const exporter = new GLTFExporter();
exporter.parse(scene, function (gltf) {
const blob = new Blob([JSON.stringify(gltf)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'scene.gltf';
a.click();
}, { binary: false });
6. GLTF 适用于哪些场景？
🔹 Web 3D（Three.js / Babylon.js）
🔹 游戏开发（Unity / Unreal Engine）
🔹 AR / VR 应用（WebXR / ARKit）
🔹 3D 电商 & 配置器（3D 预览）
🔹 影视动画（用于实时渲染引擎）
7. 总结
✅ GLTF 是最适合 Web 3D 的格式（轻量、高效、支持 PBR）
✅ GLB 更适合网络传输，GLTF 更适合编辑
✅ 支持动画、骨骼、PBR 材质、形变目标，比 OBJ / FBX 更现代化
✅ Three.js / Babylon.js / Unity / Unreal 均支持 GLTF
你是想用 GLTF 在 Web 3D 中加载，还是用于 游戏开发或 AR/VR？😊