带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题 [英] Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

查看：24 发布时间：2021/10/26 17:44:48 aframe descriptor ar.js

本文介绍了带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对 A-Frame 和 Ar.js 真的很陌生，从字面上发现了这一点，并从今天开始着手研究.这是我正在做的一个项目，我正在使用本教程 https://aframe.io/blog/arjs3/#creating-image-descriptors 我按照说明将恐龙"图像上传到 NFT 创建者中.它说我会下载三个图像，我做到了，它们以 fset3、fset 和 iset 结尾.我尝试单击下载的图像并收到一条消息，提示没有设置用于打开文档的应用程序以及看起来像图像链接的应用程序.(顺便说一下，我使用的是 mac)."代码如下:

<头><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>基于图像的跟踪 AR.js 演示</title><!-- 导入 aframe，然后导入具有基于图像跟踪/位置功能的 ar.js --><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><!-- 加载器的样式--><风格>.arjs-加载器{高度:100%；宽度:100%；位置:绝对；顶部:0；左:0；背景颜色:rgba(0, 0, 0, 0.8);z-索引:9999；显示:弹性；对齐内容:居中；对齐项目:居中；}.arjs-loader div {文本对齐:居中；字体大小:1.25em；白颜色;}</风格><body style="margin : 0px; overflow: hidden;"><!-- 在加载图像描述符之前显示的最小加载器.根据设备的计算能力，加载可能需要一段时间 --><div class="arjs-loader"><div>加载中，请稍候...</div>

<一个场景vr-mode-ui="启用:假；"renderer="logarithmicDepthBuffer: true;"嵌入式arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"><a-nft类型=nft"url="<路径到您的图像描述符>"平滑=真"smoothCount="10"smoothTolerance=".01"smoothThreshold="5"><一个实体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"比例=5 5 5"位置="100 100 0"></a-实体></a-nft><实体相机></实体></a-scene></html>```我知道我需要在 "url="<path-to-your-image-descriptors>" 中输入图像描述符，但我一直坚持到这一点.

解决方案

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

首先，创建您的代码(HTML、javascript、css...)
其次，使用 NFT 创建您的 NFT 描述符-Marker-Creator 阅读其他 stackoverflow 文章
三、设置正确的文件夹路径/描述符位置(NFT标记)

如果你的描述符，三个扩展名为 .fset .iset .fset3 名为 trex 的文件位于 trex-descriptors 文件夹中:

<a-nft类型=nft"url="./trex-descriptors/trex"平滑=真"smoothCount="10"smoothTolerance=".01"smoothThreshold="5">

请注意，文件路径中没有扩展名.不要不要放置扩展名！！！

测试

最后，如果您想在本地主机(在您的设备上)进行测试，请运行服务器.

对于python服务器(你需要安装python)运行:

//Python 2.xpython -m SimpleHTTPServer//Python 3.xpython -m http.server

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

http://localhost:8000/

如果您更喜欢运行 nodejs 服务器，请安装节点服务器模块:

npm install http-server -g

然后运行:

http-server .-p 8000

这样，您的页面将在以下位置提供:

http://localhost:8000/

托管在 Web 服务器上(Github 页面)

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

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

https://github.com/myprofile

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

https://github.com/myprofile/myrepository

您应该将 myrepository 添加到 nft 网址:

<a-nft类型=nft"url="./myrepository/trex-descriptors/trex"平滑=真"smoothCount="10"smoothTolerance=".01"smoothThreshold="5">

或者如果您愿意:

<a-nft类型=nft"url="https://github.com/myprofile/myrepository/trex-descriptors/trex"平滑=真"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.html master 分支

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

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

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.

解决方案

How to deploy your WebAR app with NFT Markers

First, create your code (HTML, javascript, css...)
Second, create your NFT descriptors with NFT-Marker-Creator read this other stackoverflow article
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

这篇关于带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题 [英] Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

问题描述

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

测试

托管在 Web 服务器上(Github 页面)

How to deploy your WebAR app with NFT Markers

Testing

Hosting on a WebServer (Github pages)

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

带有 A-Frame 和 AR.js 3 的图像跟踪和基于位置的 AR 存在描述符问题 [英] Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

问题描述

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

测试

托管在 Web 服务器上(Github 页面)

How to deploy your WebAR app with NFT Markers

Testing

Hosting on a WebServer (Github pages)

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭