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：

1. 选择你的 3D 模型

2. 点击 File > Export > glTF 2.0 (.glb, .gltf)

3. 选择导出格式（GLB / GLTF）

4. 选择 "Include" 选项，确保纹理和动画被导出

5. 点击 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？😊