AR.js中Blender压缩GLB模型的Draco解压问题求助

问题回顾 #

在AR.js项目中加载Blender导出的Draco压缩.glb模型时出现解压失败，未压缩模型可正常运行，已引入DRACOLoader并下载了三个Draco解码文件，更换版本仍无法解决。

解决步骤 #

1. 确保Draco文件版本匹配与完整性 #

• 所有Draco文件（draco_decoder.wasm、draco_wasm_wrapper.js、draco_decoder.js）必须同版本，且与A-Frame依赖的Three.js版本对应：A-Frame 1.3.0对应Three.js r132，需下载该版本的Draco文件。
• 检查文件路径是否正确，在浏览器开发者工具的Network面板确认三个文件均成功加载（无404或加载失败状态）。

2. 手动配置DRACOLoader到A-Frame的GLTFLoader #

A-Frame原生gltf-model组件未默认集成Draco支持，需自定义扩展组件：
在引入DRACOLoader脚本后添加以下代码：

<script>
  AFRAME.registerComponent('gltf-model-draco', {
    schema: { type: 'string' },
    init: function () {
      const el = this.el;
      const loader = new THREE.GLTFLoader();
      const dracoLoader = new THREE.DRACOLoader();
      // 设置Draco解码器所在文件夹路径（无需指定单个文件）
      dracoLoader.setDecoderPath('https://bg.com/AR/');
      loader.setDRACOLoader(dracoLoader);

      loader.load(this.data, function (gltf) {
        el.setObject3D('mesh', gltf.scene);
      }, undefined, function (error) {
        console.error('GLTF模型加载错误:', error);
      });
    }
  });
</script>

将实体的gltf-model属性替换为自定义的gltf-model-draco：

<a-entity
  position="0 0 0"
  scale="0.05 0.05 0.05"
  rotation="0 0 0 "
  gltf-model-draco="https://bg.com/AR/phone2.glb"
  animation__rotation="property: rotation; to: 0 360 0; loop: true; dur: 5000"
></a-entity>

3. 验证Blender导出设置 #

• 确认Blender导出.glb时已正确勾选「Draco压缩」选项，且压缩参数设置合理（避免过度压缩导致模型损坏）。
• 用Three.js官方GLTFViewer验证压缩模型本身是否可正常加载，排除模型导出损坏的问题。

4. 调试与跨域检查 #

• 打开浏览器开发者工具Console面板，查看具体报错信息（如Draco加载失败、模型解析错误），精准定位问题。
• 若模型或Draco文件跨域部署，需确保服务器配置了CORS允许跨域访问，否则会被浏览器拦截加载。

内容的提问来源于stack exchange，提问作者user24409075