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   而後用手機打開剛纔保存的圖片，放在攝像頭前，成功