H5实现AR

教程地址：https://zhuanlan.zhihu.com/p/26364493  

教程GitHub地址：https://github.com/dragonHu/ar_test_demo

1. 到GitHub下载ar.js   搜索ar.js或者https://github.com/jeromeetienne/AR.js
2. AR.js-master/three.js/examples/dev.html下

patternUrl:THREEx.ArToolkitContext.baseURL+examples/marker-training/examples/pattern-files/logo.dt',

改为

patternUrl : '../../data/multi/patt.td',

修改后的路径为识别的文件

3.安装ARToolKit

4.自定义一个标记，最外层的边框 最好为黑白色，这个是官方的文档上建议的，例：

                    

5.把图片保存到ARToolKit5\bin\image下，没有image目录就新建一个

6.用cmd到D:\Program Files (x86)\ARToolKit5\bin目录,运行mk_patt.exe(前提：带摄像头的电脑或手机)

7.会弹出相机的配置选项，默认的肯定就行，而后相机启动之后，把咱们刚才生成的图片，对准相机而后相机识别之后会出现红绿色边框线，而且出现左上角识别的文字，这时请注意文字的方向是否正确。效果：

8.而后在摄像头区域点击鼠标左键，回到命令行，输入文件名称patt.td，而后再当前的Bin目录下找到该文件，回到AR.js-master项目中，打开data/multi/目录把刚生成的标识文件放进去(此处的目录与第二条中的目录对应)

9.接下来须要起一个服务，打开AR.js-master/three.js/examples/dev.html，以node为例(须要先安装node)：

   把app.js放在项目根目录下(先npm install express --save 而后node app)，内容：

var express = require('express');
var app = express();
app.use(express.static('./'));
var server = app.listen(8080, function () {
      var host = server.address().address;
      var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

10.在浏览器地址栏输入localhost:8080/three.js/examples/dev.html   而后用手机打开刚才保存的图片，放在摄像头前，成功