AR.js 3和A-Frame开始支持全新图像追踪、基于位置的追踪

编辑：刘余欣 | 分类：快讯 / 研发 | 2020年4月2日

查看引用/信息源请点击：aframe

图像追踪和基于位置的追踪

（映维网 2020年04月02日）AR.js 3和A-Frame现已支持全新的图像追踪和基于位置的追踪。详细的API引用和源代码请访问官方文档和GitHub页面。

A-Frame团队同时分享了关于所述追踪功能的示例教程。

AR.js 3和A-Frame开始支持全新图像追踪、基于位置的追踪

1. 图像追踪

全新的AR.js追踪可以将任意图像或图形作为三维内容进行定位和显示。

你只需要一张有着大量细节的高分辨率图像即可。图像越详尽，追踪效果越好。关于具体如何选择图片，请参考这篇博文。

对于本教程，我们将采用下图：

AR.js 3和A-Frame开始支持全新图像追踪、基于位置的追踪

1.1 创建图像描述符

下一步是创建图像描述符：一组用于描述图像，并用于追踪算法的文件。示例使用了Web端的NFT Marked Creator（如果愿意，你可以将其作为node.js脚本在本地使用）。上传你的图片，然后点击“generat”来创建描述符。图像处理完成后，三个文件将自动下载。接下来，将以下代码片段复制到新的HTML文件，并将其托管在服务器。为方便起见，下文提供了包含所有必要代码的Codepen。

<span class="line"><span class="meta"><!DOCTYPE html></span></span><br /><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br /><span class="line">  <span class="tag"><<span class="name">head</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /></span></span><br /><span class="line">    <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br /><span class="line">    <span class="tag"><<span class="name">title</span>></span>Image based tracking AR.js demo<span class="tag"></<span class="name">title</span>></span></span><br /><span class="line">    <span class="comment"><!-- import aframe and then ar.js with image tracking / location based features --></span></span><br /><span class="line">    <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://aframe.io/releases/1.0.4/aframe.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></p><p><span class="line">    <span class="comment"><!-- style for the loader --></span></span><br /><span class="line">    <span class="tag"><<span class="name">style</span>></span></span><br /><span class="line">      .arjs-loader {</span><br /><span class="line">        height: 100%;</span><br /><span class="line">        width: 100%;</span><br /><span class="line">        position: absolute;</span><br /><span class="line">        top: 0;</span><br /><span class="line">        left: 0;</span><br /><span class="line">        background-color: rgba(0, 0, 0, 0.8);</span><br /><span class="line">        z-index: 9999;</span><br /><span class="line">        display: flex;</span><br /><span class="line">        justify-content: center;</span><br /><span class="line">        align-items: center;</span><br /><span class="line">      }</span></p><p><span class="line">      .arjs-loader div {</span><br /><span class="line">        text-align: center;</span><br /><span class="line">        font-size: 1.25em;</span><br /><span class="line">        color: white;</span><br /><span class="line">      }</span><br /><span class="line">    <span class="tag"></<span class="name">style</span>></span></span><br /><span class="line">  <span class="tag"></<span class="name">head</span>></span></span></p><p><span class="line">  <span class="tag"><<span class="name">body</span> <span class="attr">style</span>=<span class="string">"margin : 0px; overflow: hidden;"</span>></span></span><br /><span class="line">    <span class="comment"><!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power --></span></span><br /><span class="line">    <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"arjs-loader"</span>></span></span><br /><span class="line">      <span class="tag"><<span class="name">div</span>></span>Loading, please wait...<span class="tag"></<span class="name">div</span>></span></span><br /><span class="line">    <span class="tag"></<span class="name">div</span>></span></span></p><p><span class="line">    <span class="comment"><!-- a-frame scene --></span></span><br /><span class="line">    <span class="tag"><<span class="name">a-scene</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">vr-mode-ui</span>=<span class="string">"enabled: false;"</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">renderer</span>=<span class="string">"logarithmicDepthBuffer: true;"</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">embedded</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">arjs</span>=<span class="string">"trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"</span>></span></span><br /><span class="line">      <span class="comment"><!-- a-nft is the anchor that defines an Image Tracking entity --></span></span><br /><span class="line">      <span class="comment"><!-- on 'url' use the path to the Image Descriptors created before. --></span></span><br /><span class="line">      <span class="comment"><!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex --></span></span><br /><span class="line">      <span class="tag"><<span class="name">a-nft</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">type</span>=<span class="string">"nft"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">url</span>=<span class="string">"<path-to-your-image-descriptors>"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">smooth</span>=<span class="string">"true"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">smoothCount</span>=<span class="string">"10"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">smoothTolerance</span>=<span class="string">".01"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">smoothThreshold</span>=<span class="string">"5"</span>></span></span><br /><span class="line">          <span class="comment"><!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity --></span></span><br /><span class="line">          <span class="tag"><<span class="name">a-entity</span></span></span><br /><span class="line"><span class="tag">          <span class="attr">gltf-model</span>=<span class="string">"https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"</span></span></span><br /><span class="line"><span class="tag">              <span class="attr">scale</span>=<span class="string">"5 5 5"</span></span></span><br /><span class="line"><span class="tag">              <span class="attr">position</span>=<span class="string">"100 100 0"</span></span></span><br /><span class="line"><span class="tag">          ></span></span><br /><span class="line">          <span class="tag"></<span class="name">a-entity</span>></span></span><br /><span class="line">      <span class="tag"></<span class="name">a-nft</span>></span></span><br /><span class="line">      <span class="comment"><!-- static camera that moves according to the device movemenents --></span></span><br /><span class="line">      <span class="tag"><<span class="name">a-entity</span> <span class="attr">camera</span>></span><span class="tag"></<span class="name">a-entity</span>></span></span><br /><span class="line">    <span class="tag"></<span class="name">a-scene</span>></span></span><br /><span class="line">  <span class="tag"></<span class="name">body</span>></span></span><br /><span class="line"><span class="tag"></<span class="name">html</span>></span></span>

将< path-to-your-image-descriptors >指向包含你生成和下载的图像描述符的路径。所述文件会拥有一个通用名称。删除文件扩展名，如“dinora.fset”和“dinora.iset”等，你要添加的路径应以“dinora”结尾。

举一个本地或远程服务器的例子：Github和Glitch是免费和方便的选项。导航到URL，而你应该会在加载屏幕消失后看到一个霸王龙模型。

如果你希望不自己托管并立即查看效果，请访问这个Codepen。

你可以将上述模型替换为任何其他资源：二维视频、图像、音频文件。任何A-Frame A-entity都是A-nft锚的有效子级。

2. 基于位置的AR

基于位置的追踪是使用真实世界的坐标将AR内容放到情景之中。用户可以自由移动，而与其位置相关的内容会相应地缩放和放置。例如，内容将根据与用户的距离变大/变小。利用AR.js和A-Frame，你现在可以轻松建立城市和博物馆游览，餐厅指南，寻宝，与生物和历史等学科相关的学习体验，或将虚拟艺术品放置在现实世界。

下面的示例将向你演示如何将文本放置到现实世界中的固定位置。当你移动时，文本会保持原位。内容锚定到你当前的位置。在尝试之前，请确保设备已启用GPS追踪。

<span class="line"><span class="meta"><!DOCTYPE html></span></span><br /><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br /><span class="line">  <span class="tag"><<span class="name">head</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /></span></span><br /><span class="line">    <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span> /></span></span><br /><span class="line">    <span class="tag"><<span class="name">title</span>></span>Location-based AR.js demo<span class="tag"></<span class="name">title</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://aframe.io/releases/1.0.4/aframe.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br /><span class="line">  <span class="tag"></<span class="name">head</span>></span></span></p><p><span class="line">  <span class="tag"><<span class="name">body</span> <span class="attr">style</span>=<span class="string">"margin: 0; overflow: hidden;"</span>></span></span><br /><span class="line">    <span class="tag"><<span class="name">a-scene</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">vr-mode-ui</span>=<span class="string">"enabled: false"</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">embedded</span></span></span><br /><span class="line"><span class="tag">      <span class="attr">arjs</span>=<span class="string">"sourceType: webcam; debugUIEnabled: false;"</span></span></span><br /><span class="line"><span class="tag">    ></span></span><br /><span class="line">      <span class="tag"><<span class="name">a-text</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">value</span>=<span class="string">"This content will always face you."</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">look-at</span>=<span class="string">"[gps-camera]"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">scale</span>=<span class="string">"50 50 50"</span></span></span><br /><span class="line"><span class="tag">        <span class="attr">gps-entity-place</span>=<span class="string">"latitude: <add-your-latitude>; longitude: <add-your-longitude>;"</span></span></span><br /><span class="line"><span class="tag">      ></span><span class="tag"></<span class="name">a-text</span>></span></span><br /><span class="line">      <span class="tag"><<span class="name">a-camera</span> <span class="attr">gps-camera</span> <span class="attr">rotation-reader</span>></span> <span class="tag"></<span class="name">a-camera</span>></span></span><br /><span class="line">    <span class="tag"></<span class="name">a-scene</span>></span></span><br /><span class="line">  <span class="tag"></<span class="name">body</span>></span></span><br /><span class="line"><span class="tag"></<span class="name">html</span>></span></span>

注意事项：

将< add your latitude >和< add your longitude >替换为GPS坐标。有数个在线服务可允许你免费检索所述数据，如latlong。
根据坐标指定的位置距离更改缩放属性：如果看不到文本，请尝试将其放大或选择一个离文本较近的位置。
示例使用了自定义的look-at A-Frame组件，这使得内容总是面向用户camera。这十分重要，尤其是作为文本的2D内容。

你可以在包含GPS数据的设备运行所述示例，并应该能够看到固定位置的文本。根据GPS坐标，它的位置应该符合现实世界定位。

你可以充分发挥创造力，用自己喜欢的任何内容替换文本。利用A-Frame，你可以快速显示3D模型、视频、图像。任何A-entity都将如同预期一般实现定位追踪。