如何使用NFT标记部署WebAR应用

Question

我真的是A-Frame和Ar.js的新手，从字面上发现了这一点，并从今天开始着手研究。这是针对我正在执行的项目，我正在使用本教程https://aframe.io/blog/arjs3/#creating-image-descriptors，按照说明进行操作，并将“恐龙”图像上传到NFT创作者中。它说我将下载三张图像，我下载了三张，它们以fset3，fset和iset结尾。我尝试单击下载的图像，并收到一条消息，提示“没有设置应用程序来打开文档，其外观类似于图像链接。（顺便说一下，我使用的是Mac）。这是代码：

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Image based tracking AR.js demo</title>
    <!-- import aframe and then ar.js with image tracking / location based features -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

    <!-- style for the loader -->
    <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>
  </head>

  <body style="margin : 0px; overflow: hidden;">
    <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
    <div class="arjs-loader">
      <div>Loading, please wait...</div>
    </div>

    <!-- a-frame scene -->
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
      <!-- a-nft is the anchor that defines an Image Tracking entity -->
      <!-- on 'url' use the path to the Image Descriptors created before. -->
      <!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
      <a-nft
        type="nft"
        url="<path-to-your-image-descriptors>"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5">
          <!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
          <a-entity
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
              scale="5 5 5"
              position="100 100 0"
          >
          </a-entity>
      </a-nft>
      <!-- static camera that moves according to the device movemenents -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>```

I understand that I need to input the image descriptor in "url="<path-to-your-image-descriptors>" but I'm stuck on getting to that point.

Answer 1

如果您将其投放在网络服务器上，则<path-yo-your-image-descriptors>就像

https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex

关注网址倒数第二，trex-image/trex

trex-image是包含trex.fset，trex.fset3，trex.iset的文件夹。因此，/trex位于网址末尾

trex-image
   | -- trex.fset
   | -- trex.fset3
   | -- trex.iset

或者，您可以使用XAMPP之类的localhost。参见：https://stackoverflow.com/a/61083435/12958413

更多信息：AR.js Image Tracking

Answer 2

如何使用NFT标记部署WebAR应用

首先，创建您的代码（HTML，javascript，css ...）
第二，使用 NFT-Marker-Creator 创建您的 NFT 描述符，并阅读其他stackoverflow article
第三，设置描述符的正确路径/位置（ NFT 标记）

如果有描述符，则文件夹.fset .iset .fset3中有三个扩展名为trex的文件，扩展名为trex-descriptors：

<a-nft
   type="nft"
   url="./trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

请注意，文件路径中没有扩展名。不要添加扩展名!!!

测试

最后，如果要在localhost（在设备上）进行测试，请运行服务器。

对于python服务器（您需要安装python），请运行：

// Python 2.x
python -m SimpleHTTPServer

// Python 3.x
python -m http.server

您的页面将在浏览器中的以下地址提供：

http://localhost:8000/

如果您希望运行nodejs服务器，请安装节点服务器模块：

npm install http-server -g

然后运行：

http-server . -p 8000

通过这种方式，您的页面将在以下位置提供：

http://localhost:8000/

在Web服务器上托管（Github页面）

如果您的代码托管在Github上，则可能需要

修改URL。这与github如何处理路径网址有关。如果您是github上的个人资料的所有者，并且您的个人资料名称为myprofile：

https://github.com/myprofile

并且您是个人资料上存储库myrepository的所有者：

https://github.com/myprofile/myrepository

您应将myrepository添加到nft网址：

<a-nft
   type="nft"
   url="./myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

或者如果您愿意：

<a-nft
   type="nft"
   url="https://github.com/myprofile/myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

，但这在localhost上不起作用。您可以在存储库中建立一个gh-pages分支并修改url，以便在master分支中拥有一个可以在localhost上运行的版本，以及一个用于gh-pages的网站版本。

示例：

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/arjs/basic-nft-aframe.html主分支

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/gh-pages/arjs/basic-nft-aframe.html gh页分支

测试示例：https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/basic-nft-aframe.html

具有A-Frame和AR.js 3的图像跟踪和基于位置的AR描述符存在问题

2 个答案:

如何使用NFT标记部署WebAR应用

测试

在Web服务器上托管（Github页面）