【问题标题】:Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题
【发布时间】:2020-05-02 19:15:16
【问题描述】:

我真的是 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. 


【问题讨论】:

标签: aframe descriptor ar.js


【解决方案1】:

如果您在网络服务器上提供它,&lt;path-yo-your-image-descriptors&gt; 会像

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

关注倒数第二个 URL,trex-image/trex

trex-image 是包含trex.fsettrex.fset3trex.iset 的文件夹。因此 /trex 在 URL 的末尾

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


或者你可以使用像 XAMPP 这样的 localhost。见:https://stackoverflow.com/a/61083435/12958413

更多信息:AR.js Image Tracking

【讨论】:

    【解决方案2】:

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

    1. 首先,创建您的代码(HTML、javascript、css...)
    2. 其次,使用 NFT-Marker-Creator 创建您的 NFT 描述符,阅读其他 stackoverflow article
    3. 三、设置描述符的文件夹/位置的正确路径(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/

    在 WebServer 上托管(Github 页面)

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

    修改网址。这与 github 如何处理路径 url 有关。 如果您是 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">
    

    但这不适用于本地主机。您可以在您的存储库上设置一个gh-pages 分支并修改 url,以便在 master 分支中拥有一个适用于 localhost 的版本和另一个用于 gh-pages 作为网站的版本。

    示例

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

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

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-21
    • 2021-10-02
    • 2016-08-09
    相关资源
    最近更新 更多