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