AR.js官方文档图像跟踪示例运行异常 始终停留在加载状态求助

核心问题原因 #

页面卡在加载状态的核心原因是示例中使用的公共CORS代理服务已下线，无法正常代理加载NFT标记描述符和GLTF模型资源，导致加载流程中断。

可直接落地的修复步骤 #

• 替换公共CORS代理：将所有需要跨域加载的资源上传到你当前的Glitch项目目录下，直接使用项目内相对路径引用，避免跨域问题。
• 补充A-Frame资源预加载节点：在<a-scene>内部最前面添加<a-assets>节点，统一管理GLTF等静态资源，避免加载时序异常。
• 使用稳定版AR.js依赖：不要使用master分支的实时构建版本，将AR.js相关文件下载到项目目录后本地引用，减少未知兼容性问题。

修复后的参考代码 #

<script src="/你的本地AR.js路径/aframe-ar-nft.min.js"></script>
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>
<body style="margin : 0px; overflow: hidden;">
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- 新增资源预加载节点 -->
    <a-assets>
      <a-asset-item id="trexModel" src="/你的模型本地路径/scene.gltf"></a-asset-item>
    </a-assets>
    <!-- NFT标记换成你自己生成后上传到项目的描述文件路径 -->
    <a-nft
      type="nft"
      url="/你的标记本地路径/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="#trexModel"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
  <script>
    // 手动监听NFT加载完成事件隐藏加载页，避免内置逻辑失效
    document.querySelector('a-nft').addEventListener('loaded', () => {
      document.querySelector('.arjs-loader').style.display = 'none';
    })
  </script>
</body>

额外排查要点 #

• 自定义NFT标记需要生成三个后缀为.fset、.fset3、.iset的描述文件，引用时路径写三个文件的公共前缀即可，不需要加后缀。
• 手机端访问时需要授予摄像头权限，若权限被拒绝也会导致加载流程中断。
• 测试阶段可先将官方示例的NFT描述文件和GLTF模型下载后上传到Glitch项目的assets目录，直接用项目内路径引用即可。

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