使用ThreeJS GLTFLoader加载带授权头的GLTF模型，AFrame无法显示

问题核心 #

手动通过ThreeJS的GLTFLoader加载GLTF模型（需携带授权头）后，在a-entity的loaded事件中添加gltf.scene未生效，而直接用本地路径设置gltf-model属性可正常显示，本质是添加模型的时机错误，未匹配AFrame的实体初始化流程。

直接修复方案（修改现有代码） #

移除多余的loaded事件监听，在GLTF加载完成后直接将模型添加到a-entity的object3D中：

let loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.4.0/");
loader.setDRACOLoader(dracoLoader);
loader.requestHeader = header;

loader.load(url, function(gltf) {
  let scene = document.querySelector('a-scene');
  let model = document.createElement('a-entity');

  // 设置实体基础属性
  model.setAttribute('position', '0 -8 -10');
  model.setAttribute('rotation', '10 0 0');
  model.setAttribute('scale', '2 2 2');

  // 直接将加载好的GLTF场景添加到实体中
  model.object3D.add(gltf.scene);

  // 若模型包含动画，添加animation-mixer组件启用动画
  if (gltf.animations && gltf.animations.length > 0) {
    model.setAttribute('animation-mixer', 'clip: *');
  }

  scene.appendChild(model);
});

优化方案：自定义AFrame组件（复用性更强） #

封装带授权头的GLTF加载逻辑为AFrame组件，符合框架的组件化思想：

// 注册自定义组件
AFRAME.registerComponent('gltf-model-auth', {
  schema: {
    url: { type: 'string' },
    authHeader: { type: 'object', default: {} }
  },
  init: function() {
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderConfig({ type: 'js' });
    dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.4.0/");
    loader.setDRACOLoader(dracoLoader);
    loader.requestHeader = this.data.authHeader;

    loader.load(this.data.url, (gltf) => {
      // 将模型添加到当前实体
      this.el.object3D.add(gltf.scene);
      // 处理模型动画
      if (gltf.animations.length > 0) {
        this.el.setAttribute('animation-mixer', 'clip: *');
      }
    });
  }
});

使用该组件：

<a-entity 
  gltf-model-auth="url: 你的模型URL; authHeader: {Authorization: 'Bearer 你的令牌'}"
  position="0 -8 -10" 
  rotation="10 0 0" 
  scale="2 2 2">
</a-entity>

关键说明 #

• 原代码中loaded事件监听无效：刚创建的a-entity还未挂载到场景，loaded事件不会触发，导致添加模型的代码从未执行。
• Draco解码器配置已正确设置，加载后的gltf.scene可直接使用，无需额外处理。
• 若模型包含动画，必须添加animation-mixer组件才能播放动画，否则动画不会生效。

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