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

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

aframe

Aframe 基于图像跟踪和位置的A-Frame AR和AR.js 3存在描述符问题,aframe,descriptor,ar.js,Aframe,Descriptor,Ar.js,我对A-Frame和Ar.js真的很陌生，从字面上了解了这一点，并从今天开始着手。这是我正在做的一个项目，我正在使用本教程，我按照说明将“恐龙”图像上传到NFT创建者。它说我会下载三张图片，我下载了，最后是fset3、fset和iset。我试着点击下载的图片，收到一条消息说‘没有应用程序可以打开文档，而且看起来像是图片链接（顺便说一下，我用的是mac电脑）。代码如下： <html> <head> <meta charset="utf-8" />

我对A-Frame和Ar.js真的很陌生，从字面上了解了这一点，并从今天开始着手。这是我正在做的一个项目，我正在使用本教程，我按照说明将“恐龙”图像上传到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.


基于图像的跟踪AR.js演示
.arjs加载器{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景色：rgba（0,0,0,0.8）；
z指数：9999；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.arjs装载机分区{
文本对齐：居中；
字号：1.25em；
颜色：白色；
}
正在加载，请稍候。。。
```
我知道我需要在“url=”“中输入图像描述符，但我一直在坚持这一点。

如果在web服务器上提供，则

如下

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图像/trex

trex图像

文件夹包含

trex.fset

，

trex.fset3

，

trex.iset

。因此

/trex

位于URL末尾

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

也可以使用像XAMPP这样的本地主机。请参阅：

更多信息：

如果在web服务器上提供，则

将如下

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图像/trex

trex图像

文件夹包含

trex.fset

，

trex.fset3

，

trex.iset

。因此

/trex

位于URL末尾

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

也可以使用像XAMPP这样的本地主机。请参阅：

更多信息：

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

首先，创建代码（HTML、javascript、css…）

第二，用创建你的NFT描述符，阅读另一篇文章

第三，设置描述符（NFT标记）的文件夹/位置的正确路径

如果您的描述符，则名为

trex

的三个扩展名为

.fset.iset.fset3

的文件位于文件夹

trex描述符

中：


如果您希望运行nodejs
服务器，请安装节点服务器模块：
npm install http-server -g

然后运行：
http-server . -p 8000

这样，您的页面将被送达：

在Web服务器上托管（Github页面）
如果您的代码托管在Github上，您可能需要
修改url。这与github如何处理路径url有关。
如果您是github上某个配置文件的所有者，并且您的配置文件名为myprofile
：
https://github.com/myprofile

您是个人资料中存储库myrepository
的所有者：
https://github.com/myprofile/myrepository

您应该将myrepository
添加到nft url：
主分支
gh网页科
测试示例：如何使用NFT标记部署WebAR应用程序
首先，创建代码（HTML、javascript、css…）
第二，用创建你的NFT描述符，阅读另一篇文章
第三，设置描述符（NFT标记）的文件夹/位置的正确路径
如果您的描述符，则名为trex
的三个扩展名为.fset.iset.fset3
的文件位于文件夹trex描述符
中：

如果您希望运行nodejs
服务器，请安装节点服务器模块：
npm install http-server -g

然后运行：
http-server . -p 8000

这样，您的页面将被送达：

在Web服务器上托管（Github页面）
如果您的代码托管在Github上，您可能需要
修改url。这与github如何处理路径url有关。
如果您是github上某个配置文件的所有者，并且您的配置文件名为myprofile
：
https://github.com/myprofile

您是个人资料中存储库myrepository
的所有者：
https://github.com/myprofile/myrepository

您应该将myrepository
添加到nft url：
主分支
gh网页科
测试示例：
使用web服务器服务您的文件。浏览器无法访问本地文件系统。使用web服务器服务您的文件。浏览器无法访问本地文件系统。这看起来是一个非常好的库，因此我尝试使用此示例添加一些简化的测试用例。这导致了控制台throwing:ARToolKitJS（）：无法设置NFT标记。
after:https://ar-js-org.github.io/AR.js/three.js/../data/data/camera_para.dat
。这是您可以帮助的吗？演示：当然这是路径问题，我现在无法详细查看您的代码，您是否在github上托管了此代码？是的。我已将页面重命名为，NFT标记为：@ScottPhillips您的代码在localhost上运行，但在github主机上失败。github的问题是路径的开头不是人们想象的那样，因此您应该向文件路径添加额外的arjs。当然，如果在localhost上运行，这将失败。一种解决方案是在另一个分支上提供页面，如for ex