AFrame AR场景中GLTF模型无法加载的技术求助

1. 修复AFrame版本冲突问题 #

你重复引入了两个不同版本的AFrame（1.3.0和0.6.0），这会导致框架核心逻辑冲突，GLTF组件等功能无法正常工作。保留一个兼容AR.js的版本即可，建议移除旧的0.6.0版本引入，保留1.3.0，同时使用适配AFrame 1.x的AR.js版本。

修改后的头部脚本引入：

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script
    src="https://unpkg.com/aframe-physics-system@^1.4.x/dist/aframe-physics-system.min.js"
    data-component-description="Physics system for A-Frame VR, built on Cannon.js"
    data-component-names="dynamic-body,static-body,constraint"
    data-component-url="https://npmjs.com/package/aframe-physics-system"
    data-package-name="aframe-physics-system"
  ></script>
  <!-- 使用适配AFrame 1.x版本的AR.js -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>

2. 修正GLTF模型引用语法错误 #

你的gltf-model属性错误使用了##tree，正确的引用格式应为#tree（单个#号指向asset-item的id）。

修正后的模型实体代码：

<a-entity gltf-model="#tree" scale=".02 .02 .02" position="0 0 -2"></a-entity>

3. 确保模型位置可见 #

当前模型未设置位置，可能会与相机位置重叠导致无法看到。参考a-box的位置0 0 -2，给模型设置相同或合适的位置，确保在标记物的可视范围内。

4. 排查模型加载潜在问题 #

• 确认GLTF模型资源完整性：虽然在线查看器能加载，但要确保模型依赖的纹理、二进制文件（.bin）都能正常访问，无缺失。
• 查看浏览器控制台错误：打开浏览器开发者工具（F12）的Console面板，检查是否有资源加载失败、CORS跨域错误或组件初始化报错，这些信息可直接定位问题。

完整修复后的代码示例 #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script
      src="https://unpkg.com/aframe-physics-system@^1.4.x/dist/aframe-physics-system.min.js"
      data-component-description="Physics system for A-Frame VR, built on Cannon.js"
      data-component-names="dynamic-body,static-body,constraint"
      data-component-url="https://npmjs.com/package/aframe-physics-system"
      data-package-name="aframe-physics-system"
    ></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>

  <body style="margin: 0px; overflow: hidden">
    <a-scene embedded arjs>
      <a-assets>
        <a-asset-item id="tree" src="https://cdn.glitch.me/c7d0d4e9-d04a-4e56-989f-c554ae50c253%2Fwindmilmaster4.gltf"></a-asset-item>
      </a-assets>

      <a-entity>
        <a-box position="0 0 -2" material="opacity: 1;"></a-box>
        <a-entity gltf-model="#tree" scale=".02 .02 .02" position="0 0 -2"></a-entity>
      </a-entity>

      <a-marker-camera preset="hiro"></a-marker-camera>
    </a-scene>
  </body>
</html>

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