【WebAR】使用AR.js第3版实现图片跟踪和基于位置的AR
作者：Nicolo Carpignoli 和 Diego Marcos
原文：https://aframe.io/blog/arjs3/
前言
AR.js开源项目由个人维护改为组织维护，项目升级到第3版，功能支持图像跟踪、基于位置、有标记跟踪等，并且有了官方文档。
本文介绍AR.js 3和A-Frame集成，并具有的图像跟踪和基于位置的新功能。
图像跟踪入门
新的AR.js跟踪可以拍摄任意图像或绘画（不仅是有标记的图案）来固定和显示3D内容。
您只需要具有大量细节的高分辨率图像。图像的复杂度越高，跟踪效果越好。
在本教程，我们将使用一张图像。
创建图像描述符
图像描述符（Image Descriptors）：一组描述图像的文件，跟踪算法需要这些文件。
我们将通过网络在线使用NFT标记创建器（如果愿意，也可以在本地以node.js脚本的形式获得）。上传您的图片，然后单击“生成”以创建图像描述符。处理完图像后，将自动下载三个文件。将以下代码片段复制到新的HTML文件中，并将其托管在服务器上。
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
url="
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
scale="5 5 5"
position="100 100 0"
>
将
在本地或远程服务器部署示例，导航到设备上的URL。等加载显示消失后，您应该会看到T-Rex模型。
您可以将以上模型替换为任何其他资源：2D视频，图像，音频文件。
基于位置的AR
基于位置的跟踪使用现实世界坐标将AR内容放置在上下文中。用户可以自由移动（在室外以获得更好的精度），并且与他们的位置相关联的内容将被缩放和放置（例如：内容将根据与用户的距离而变大或变小）。现在使用AR.js和A-Frame，可以很轻松地构建各种体验，例如城市和博物馆之旅、餐厅指南、寻宝、生物学或历史学习游戏等，或者将虚拟艺术品放置在任何现实世界中。
下面的示例演示如何将文本放置在现实世界中的固定位置上。当您四处移动时，文本将保留在原位。内容将锚定到您当前的位置。尝试之前，请确保已在设备上启用GPS权限。
embedded
arjs="sourceType: webcam; debugUIEnabled: false;"
>
look-at="[gps-camera]"
scale="50 50 50"
gps-entity-place="latitude:
>
一些注意事项：
- 将
和 替换为您的GPS坐标。有几种在线服务可让您免费获取这些数据。 - 根据您指定的坐标位置的距离来改变
scale属性。如果看不到文本，请尝试按比例放大或选择距离更近的位置。 - 我们使用了自定义的aframe组件
look-at，使内容始终朝着用户相机看。这是基本的要求，特别是对于作为文本的2D内容而言。
在启用GPS数据的设备上运行示例，您应该能够看到固定的文本。它的位置应符合您添加的GPS坐标的实际位置。
利用aframe，您可以发挥创造力并将其替换为您喜欢的任何内容，从而可以快速显示3D模型，视频，图像，所有a-entity 会按预期进行跟踪。
AR.js第3版的官方文档：
https://ar-js-org.github.io/AR.js-Docs/