glTF-Draco 压缩：优化 3D 模型的加载
glTF-Draco 是 Google Draco 压缩技术 与 glTF（GL Transmission Format） 结合的格式，能 大幅减少 glTF / GLB 文件的大小，同时保持高质量的 3D 模型。
1. 为什么要使用 Draco 压缩？
3D 模型通常包含大量 顶点（Vertices） 和 索引（Indices），使得文件体积较大，影响加载速度。
🔹 Draco 压缩的优势：
✅ 减少 3D 模型文件大小（通常压缩比 5:1 ~ 10:1）
✅ 减少网络传输时间（更快的 Web 3D 加载）
✅ 保持高质量的几何数据（顶点、索引、法线等）
✅ 兼容 glTF / GLB（可在 Three.js、Babylon.js、Unity 等使用）
2. Draco 在 glTF 结构中的作用
普通 glTF 结构（未压缩）
-------------------------------------------------
| JSON Chunk (scene, nodes, meshes, materials...) |
-------------------------------------------------
| Binary Chunk (geometry, textures, animations...)|
-------------------------------------------------
使用 Draco 进行几何压缩
-------------------------------------------------
| JSON Chunk (scene, nodes, meshes, materials...) |
-------------------------------------------------
| Binary Chunk (compressed geometry with Draco) |
-------------------------------------------------
🚀 Draco 只压缩几何数据（顶点、索引、法线、UV 等），不影响材质和动画。
3. 如何加载 glTF-Draco？
（1）Three.js 加载 Draco 压缩的 glTF
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.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);
// 创建 GLTFLoader
const loader = new GLTFLoader();
// 设置 Draco 解码路径
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/'); // Google Draco 解码库
loader.setDRACOLoader(dracoLoader);
// 加载压缩的 glTF 文件
loader.load('model-draco.glb', function (gltf) {
scene.add(gltf.scene);
}, undefined, function (error) {
console.error('加载失败', error);
});
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
✅ 重点
-
DRACOLoader负责解码 Draco 压缩的几何数据 -
setDecoderPath设置 Draco 解码库路径（可使用 Google CDN 或本地文件）
4. 如何在 Blender 中导出 Draco 压缩的 glTF？
-
打开 Blender
-
选择模型
-
点击
File > Export > glTF 2.0 (.glb, .gltf) -
勾选
Draco Mesh Compression -
调整 "Compression Level"（通常设为 6 ~ 10）
-
点击 "Export glTF 2.0"
🔹 压缩率越高，文件越小，但解码时间稍长。
5. 如何使用 glTF-Transform 进行 Draco 压缩？
glTF-Transform 是一个命令行工具，可以将普通 glTF / GLB 转换为 Draco 压缩格式。
安装 glTF-Transform
npm install -g @gltf-transform/cli
压缩 glTF
gltf-transform draco model.gltf model-draco.glb
✅ 快速将未压缩的 glTF 变成 Draco 压缩的 GLB
6. 使用 Draco 压缩的适用场景
✅ Web 3D（Three.js、Babylon.js）
✅ 游戏引擎（Unity、Unreal）
✅ 3D 电商、AR / VR（减少模型体积，提高加载速度）
✅ 移动端 3D 渲染（降低带宽需求）
7. 总结
🔹 glTF-Draco 是 Draco 压缩技术与 glTF 结合的格式
🔹 大幅降低 3D 模型文件大小，提高加载速度
🔹 兼容 Three.js、Babylon.js、Unity、Blender 等
🔹 可以使用 Blender、glTF-Transform、Three.js 进行加载和转换
如果你想在 Web 3D、游戏开发、还是移动端 使用 glTF-Draco，可以根据场景选择最合适的方式！🚀