Question

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

在堆栈上浏览了一些页面后我尝试过的东西（但是它们没有帮助）-

最初，我使用的图像非常基本，所以我更改为Pinball图像，以便AR.js获得更多描述。
禁用了我的Chrome扩展程序，例如Ad Blocker等。

有人可以帮我解决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合并器和视频。但是我仍然遇到同样的错误。这是更新的代码：

<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>

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

Answer 1

NFT N 自然 F 特性 T 使用“描述符”跟踪所需的图像。为此，您需要创建自己的描述符，即 NFT 标记，您有两种选择：

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

按照Readme或我的tutorial中的说明进行操作。

您遇到该错误"Error in loading marker on Worker 403"。因为您正尝试将jpg图像用作NFT标记，所以这是不允许的。

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

Answer 2

您使用的标记是.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

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

2 个答案: