AR.js 初探

写之前说几句，以下示例和参考都是github上的开源作品，小编只是分享在利用进程中的踩坑和开辟心得。本文适用于小白，由于例子中能够需要利用到shell号令，小编的电脑操纵系统是windows 7，假如是mac请自行转换为对应的号令行。

AR技术（增强现实技术Augmented Reality，简称 AR），AR技术在Native中已经兴起了，而且市场上有很多成功的APP，可是对于JavaScript怎样来玩转AR呢？下面我来简单的给大师演示两个分歧版本，分歧场景的AR小例子。

1.首先需要先到github上搜索ar.js,以下图，有2.8K star的就是了。

目录结构以下，大师可以download zip,大概git clone下来



我们的例子首要在这个开源库上变动，它的一级目录，aframe data three.js webvr-polyfill,一看就很清楚了，明天我们刀刀见血，只看three.js部分，固然也要依靠于data目录里的数据。

事前预备，为了今后的灵活扩大，倡议大师下载一份最新的three.js源码,里面有完整的例子和源码可以鉴戒。

把项目download下来今后，需要摆设到web办事器上，然后运转一下里面的例子，下面我以dev.html举例。目录结构以下：


这个页面比力简洁，不到300行的代码，我们需要关注两块内容，便可以完成对这个页面例子的修改。


这几行代码什么意义呢，就是一个婚配的法则，婚配的文件是data目录中的Market标识，说白了就是用让摄像头识别这个标志，官方示例给的标志是patt.hiro,这个标志的来历图片对应着data目录中的images/hiro.png 这张图，怎样用这张图来天生patt.hiro这个标志呢，这时我们需要利用一个SDK工具，细小轻量级的，大师别担忧是很重的安装包。这个工具叫artoolkit,就是AR工具箱，进入官网今后点download下载，我挑选的是这个

安装完成今后，进入到D:\Program Files (x86)\ARToolKit5\bin 目录下，接下来我们就要自界说一个标志了，这里的标志是传统的长方形标志，第一代market，稍后会增加自然图片的market，这里第一代market我是用div画的，具体的结果以下：

最外层的边框 最好为黑红色，这个是官方的文档上倡议的 参考链接market,然后呢把这个结果截图保存到我们适才下载的SDK D:\Program Files (x86)\ARToolKit5\bin\image下，没有image目录就新建一个，用cmd到D:\Program Files (x86)\ARToolKit5\bin目录,运转mk_patt.exe

会弹出相机的设置选项，默许简直定就行，然后相机启动今后，把我们适才天生的图片，瞄准相机然后相机识别今后会出现红绿色边框线，而且出现左上角识此外笔墨，这时请留意笔墨的偏向能否正确。

然后点击鼠标左键，回到号令行，输入文件称号patt.td，然后再当前的Bin目录下找到该文件

回到AR.js-master项目中，翻开data/multi/目录把刚天生的标识文件放进去，接下往返到three.js/examples/dev.html中，在chrome中翻开该页面，这里有个坑，假如是外网想拜候摄像机，必须走https协议，下面是我web办事的url地址:
https://127.0.0.1:18080/AR.js-master/three.js/examples/dev.html
结果以下：

这里声明必须利用两台装备，我的电脑翻开我开辟的网页，手机上保存的是我们适才天生的market！也可以利用两台手机，最好是比力新的android机械，支持webrtc的装备

接下来假如例子运转成功今后，大师会发现我的3D模子和官方的例子并纷歧致，模子怎样替换呢，这就触及到前面我说的第二处留意的地方，替换模子，并不需要改大量的源码，只需要正文掉一小部分就行。

我正文掉的部分是官方的模子运转的代码。上面部分则是three.js中的源码，我这是在红框的地方变动一下模子的定位。我这个模子大师可以间接参考three.js源码中three.js-r82\examples\webgl_loader_collada.html 这个html文件，可以间接运转的例子，将以下代码替换掉dev.html中我正文的部分即可，具体请参考截图，并不是完全替换。

还需要引入依靠的js文件,只需要把这几个文件增加到AR.js-master项目中即可，three.js已经有了，余下的拷曩昔就行。

最初一个自界说标识的ar h5小法式就天生了，大师可以替换自己想用的3D模子，也可以条形码天生market，也可以将标识打印到A4纸上，用手机翻开url掉出拍照机，对着该market一扫，就出现了增强现实的模子，很赞吧！

接下来说说自然图片的标识怎样天生:

先利用SDK工具进入到D:\Program Files (x86)\ARToolKit5\bin目录,我在这新建一个image文件夹，里面拷了一张.jpg的图片,然后用号令行翻开这级目录：

间接enter 利用默许值,到这一步需要输入分辨率


默许是220，然后再输入一个区间，依照提醒输入6和220

然后就会收集图片的坐标点

收集完成今后会天生以下文件


我们将天生的NTF文件拷入到AR.js-master项目中data/dataNTF中，我这里新建了一个目录叫dayan的文件夹，并将文件粘贴进去，标识天生今后需要做测试了，怎样测试呢，找到如图的nft_threejs.html,这是官方用来测试自然图片的demo.



找到加载标识的地方，这里需要替换一下途径，官方的途径在web办事上会有题目

这里需要正文一下这个function回调里的代码，


替换成以下代码:

最初代码以下图，


然后我们来跑一下我们的自然图片例子。结果以下

假如大师需要调剂模子的位置和角度，请变动position和rotation的值，触及到一定的数学道理，不会的自己调调找感受。

最初把我建造的market图片贴一下

参考文档：
Creating and Training Traditional Template Square Markers
Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image
NFT Utilities for ARToolKit

demo list:

测试AR例子
自然图片识别例子

github源码：
dragonHu/ar_test_demo

都是国外的网站，翻开能够比力慢，然后大师阅读英文文档费劲的，可以利用google翻译 翻译一下，我这只是在AR.js上初步研讨了一下，并没有深入，希望大师多提定见交换，我也实现了播放视频的例子，大师可以参考demo列表中的例子，我就不贴代码了。为了精准的展现例子，请大师把摄像头瞄准Market

今朝H5 AR还是有很多壁垒和坑的，文档也相对较少，触及的面比力多，装备性能也是题目，可是对于新技术的摸索还是很风趣的，希望我这篇文章能帮到一些开辟职员。