解决three.js中GLTFLoader无法加载Blender压缩GLB模型的问题：从格式解析到性能优化

1次阅读

共计 1763 个字符，预计需要花费 5 分钟才能阅读完成。

当开发者尝试用 three.js 的 GLTFLoader 加载 Blender 导出的压缩 GLB 模型时，常会遇到以下典型错误：

404 Not Found：服务器未正确配置 MIME 类型（应为model/gltf-binary）
Parsing failed：控制台报错THREE.GLTFLoader: Failed to parse glTF asset
Buffer decoding error：使用 Draco 压缩时出现DRACOLoader is not defined

这些问题的根源往往在于对 GLB 格式特性理解不足。

graph LR
  A[glTF 标准格式] -->|JSON+ 外部资源 | B(glTF-Embedded)
  A -->| 纯二进制 | C(glTF-Binary/GLB)
  C --> D[Header]
  C --> E[JSON Chunk]
  C --> F[Binary Chunk]

关键差异点：

存储方式
标准 glTF：JSON 文件 + 独立的.bin 二进制文件 + 外部纹理
GLB：将 JSON、二进制数据和纹理打包成单一.blb 文件
压缩特性
Blender 默认导出的 GLB 已使用 zlib 压缩 JSON 部分
启用 Draco 压缩后会额外处理几何数据

在 Blender 3.4+ 中按如下配置导出：

# Python 导出脚本示例（可在 Blender 控制台执行）bpy.ops.export_scene.gltf(
    filepath='model.glb',
    export_format='GLB',
    export_draco_mesh_compression_enable=True,
    export_draco_mesh_compression_level=6,
    export_draco_position_quantization=14,
    export_draco_texcoord_quantization=12
)

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader';

export async function loadCompressedGLB(url: string) {const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');

  const loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);

  return new Promise((resolve, reject) => {
    loader.load(
      url,
      gltf => resolve(gltf),
      progress => console.log(`Loading: ${(progress.loaded / progress.total * 100).toFixed(1)}%`),
      error => reject(`Failed to load: ${error.message}`)
    );
  });
}