Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

↘锁芯ラ 提交于 2021-02-05 12:14:10

问题


I'm really new to A-Frame and Ar.js, literally found out about this and started working on this today. It's for a project I'm doing and I'm using this tutorial https://aframe.io/blog/arjs3/#creating-image-descriptors I followed the instructions and uploaded the 'dinosaur' image into an NFT creator. It said I would get three images downloaded, I did and they end with fset3, fset and iset. I tried clicking on the downloaded images and got a message saying 'There is no application set to open the document and with what looks like the image link.(I'm using a mac by the way). Here is the code:

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



回答1:


If you serve it on web server the <path-yo-your-image-descriptors> will be like

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

focus on the URL second last, the trex-image/trex

The trex-image is folder containing trex.fset, trex.fset3, trex.iset. Hence /trex at the end of URL

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


Or you can use localhost like XAMPP. See: https://stackoverflow.com/a/61083435/12958413

More info: AR.js Image Tracking




回答2:


How to deploy your WebAR app with NFT Markers

  1. First, create your code (HTML, javascript, css...)
  2. Second, create your NFT descriptors with NFT-Marker-Creator read this other stackoverflow article
  3. Third, set the correct path of the folder/location of the descriptors(NFT markers)

if your descriptors, three files with extension .fset .iset .fset3 named trex are in a folder trex-descriptors:

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

Note that there is not extension in the files path. Do NOT put the extension !!!

Testing

At the end if you want to test in localhost (on your device) run a server.

For a python server ( you need to install python) run:

// Python 2.x
python -m SimpleHTTPServer

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

your page will be served at this address in the browser:

http://localhost:8000/

If you prefer run a nodejs server, install the node server module:

npm install http-server -g

then run:

http-server . -p 8000

in this way your page will be served at:

http://localhost:8000/

Hosting on a WebServer (Github pages)

If your code is hosted on Github you probably need

to modify the url. this is related to how github treat the path urls. If you are owner of a profile on github, and your profile name is myprofile :

https://github.com/myprofile

and you are owner of a repository myrepository on your profile:

https://github.com/myprofile/myrepository

you should add myrepository to the nft url:

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

or if you want:

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

but this won't work on localhost. You can set up a gh-pages branch on your repository and modify the url in order to have in master branch a version that works on localhost and and another for gh-pages served as website.

EXAMPLE:

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

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

Testing example: https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/basic-nft-aframe.html



来源:https://stackoverflow.com/questions/61262063/image-tracking-and-location-based-ar-with-a-frame-and-ar-js-3-having-a-problem-w

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!