图像追踪
“图像追踪”实现了扫描照片、绘画及其它图片，并在图片上显示模型。
为了简单起见，以下所有示例均与A-Frame一起使用。 你可以使用three.js。 点击nft three.js example查看官方仓库。
在这里可以找到所有用于图像跟踪的A-Frame示例。
图像追踪入门
Natural Feature Tracking(NFT)是一个让扫描图片代替扫描像二维码或Hiro码等标记的技术。
该软件跟踪图像中的特征点并使用它们，它用于估计摄像机的位置。这些特征点(也称为“图像描述符”)通过NFT Marker Creator创建，这是一个用于创建NFT标记的工具。它有2个版本: 1.Web版(推荐)，2.node.js版。该项目在AR.js的Github仓库上也有一个分支，但对于现在来说，Daniel Fernandes 的版本效果更好。
感谢Daniel Fernandes对此文档所做出的贡献。
选择一张辨识度高的图片
如果你想要更加深入地了解标记生成的过程，你可以去查看NFT Marker Creator百科。这里同时也解释了为什么某些图像使用起来的效果更好。其中的一个重要因素是图片的DPI：一个好的DPI(300及以上)会带来很好的稳定性，所以一个较低的DPI(例如72)将要求用户在扫描图片时保持非常静止并靠近图像，否则图片追踪将滞后。
创建图像描述符
一旦你选好了你要使用的图片，你可以使用NFT Marker Creator的Web版或node版。
如果你正在使用node版，你可以参考以下的基本命令：
node app.js -i <指向img/image-name.jpg/png文件的路径>
执行这句命令之后，你将在output文件夹中找到“图像描述符”文件。在WEB版中，你的浏览器将会自动下载生成的“图像描述符”文件。
“图像描述符”文件共3个，分别是.fset、.fset3和.iset文件。
这三个不同类型的文件的主文件名是一样的。主文件名就是”图像描述符”的名字，它将在AR.js web应用中被引用。
例如：由trex.fset、trex.fset3和trex.iset组成的“图像描述符”，它的名字叫trex。
呈现内容
现在可以创建AR.js Web应用程序了。
<!-- 导入必要的js文件，为加快访问，已经下载到自己的服务器上 -->
<script src="https://ar.cnxfs.com.cn/aframe-master.min.js"></script>
<script src="https://ar.cnxfs.com.cn/aframe-ar-nft.js"></script>
<!-- 页面的样式 -->
<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>
<body style="margin : 0px; overflow: hidden;">
<!-- 在加载图像描述符之前，将显示“正在加载”的页面。 根据设备的计算能力，加载可能需要一段时间 -->
<div class="arjs-loader">
<div>正在加载，请稍候...</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是定义图像跟踪实体的钩子-->
<!-- 在'url'属性中填写之前创建的“图像描述符”的路径 -->
<!-- 路径不带文件扩展名！【注意】以网站的域名为相对路径。 -->
<a-nft
type="nft"
url="<你的“图像描述符”文件的路径>"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<!-- 这里设置用于显示在图片上的 GLTF 模型 -->
<a-entity
gltf-model="<要显示的模型文件的路径>"
scale="5 5 5"
position="50 150 0"
>
</a-entity>
</a-nft>
<!-- 根据设备移动而移动的静态摄像机 -->
<a-entity camera></a-entity>
</a-scene>
</body>
有关说明，请参见上面的注释（内联在代码上）。
你也可以参考A-Frame文档来了解相关内容并进行个性化。你可以添加几何图形、3D模型、视频、图像。你也可以自定义它的位置、比例及旋转度等。
这里唯一的自定义组件是a-nft，它是Image Tracking HTML钩子。
<a-nft\>
以下是该实体的属性
| 属性名 | 描述 | 组件映射 |
|---|---|---|
| type | 标记的类型 - [只能设置为'nft'] | artoolkitmarker.type |
| url | ”图像描述符”的路径（不带扩展名，若使用相对路径，起点为网站的域名） | artoolkitmarker.descriptorsUrl |
| emitevents | 发出'markerFound'和'markerLost'事件 - ['true', 'false'] | - |
| smooth | 打开/关闭相机平滑 - ['true', 'false'] - 默认值: false | - |
| smoothCount | 要平滑追踪的矩阵数，数值越大越平滑，但追踪越慢 - 默认值: 5 | - |
| smoothTolerance | 用于平滑的距离公差，如果矩阵的＃smoothThreshold处于公差范围内，则追踪将保持静止 - 默认值: 0.01 | - |
| smoothThreshold | 除非有足够的矩阵超出公差范围，否则平滑阈值将保持不变 - 默认值: 2 | - |
| size | 标记的大小（单位：米） | artoolkitmarker.size |
⚡️ 建议去使用 smooth, smoothCount 及 smoothTolerance 属性，因为图像追踪中内容的稳定性较弱。幸好有了smoothing，从3D模型到2D视频的内容更加稳定了 。