Ar.js 图像跟踪 NFT - 在 Worker 403 上加载标记时出错

Question

我正在尝试此处解释的图像跟踪示例 - https://github.com/AR-js-org/AR.js#get-started 我用自己的图像和视频替换了图像和视频，并将整个项目添加到 Amazon S3 存储桶中。当我运行 html 页面时，浏览器控制台出现错误 "Error in loading marker on Worker 403"。我假设这表明 NFT 图像以某种方式未加载。控制台中没有指示 CORS 错误或任何其他未经授权的错误。

我在浏览一些关于堆栈溢出的页面后尝试过的事情（但它们没有帮助）-

最初我使用的图像是非常基本的，所以我换成了弹球图像以便AR.js得到更多的描述。
禁用了我的 chrome 扩展程序，例如广告拦截器等

有人可以帮我解决 NFT 正确加载的错误或缺失吗？

这是我的代码 -

    <script 
   src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.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;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <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;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/pinball.jpg"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/video1.mp4"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

更新： 我已经更改了我的代码以使用 nft merker 和视频。但我仍然遇到同样的错误。这是更新后的代码：

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.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;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <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;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/peacock-nft/peacock"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-video
        src="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/video1.mp4"
        width="9"
        height="9"
        position="50 150 0"
      >
      </a-video>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

更新 2 - @Kalwalt 的解决方案解决了我的问题。此外，原来我的旧 html 文件仍然缓存在 Cloudfront 中。我必须使该文件无效，以便从 S3 存储桶中提取较新的版本。

Answer 1

您使用的标记是 .jpg 图片，这不是 a-nft 所需要的。您需要使用此 Carnaux NFT Marker Creator 从图像中制作 NFT（这需要时间）

或按照此文档获取 Node 版本 AR.js NFT Marker Creator Docs

编辑：此外，您使用的是 <a-entity gltf-model...>，但使用的是 .mp4（视频）。

gltf-model 适用于 .gltf 或 .glb 格式（3D 模型）。如果您想使用视频，请使用 a-video

Answer 2

NFTN自然F自然Tracking 使用 "descriptors" 跟踪所需的图像。为此，您需要创建自己的描述符，即 NFT 标记，您有两种选择：

使用在线工具 carnaux.github.io/NFT-Marker-Creator/ 更容易但更慢
nodejs 应用程序，但您需要下载或克隆 repository

按照 Readme or my tutorial 中的说明进行操作。

您遇到了那个错误 "Error in loading marker on Worker 403"。因为你试图使用 jpg 图片作为 NFT 标记，这是不允许的。

此外，您正在尝试加载视频而不是 gltf 模型。如果你想加载视频，你应该使用 <a-video> 原语。对于 gltf 提供扩展名为 .gltf 或 .glb 的 gltf 模型。

Ar.js 图像跟踪 NFT - 在 Worker 403 上加载标记时出错

Ar.js image tracking NFT - Error in loading marker on Worker 403

ar.js