以下內容由公衆號：AIRX社區（國內領先的AI、AR、VR技術學習與交流平臺） 整理
前面有一篇文章萬字乾貨介紹WebAR的實現與應用分析了目前流行的WebAR框架並簡單的介紹一些實現方法，這個專欄我們具體的來通過一些框架實現WebAR效果。
關於AR.js
AR.js是一個輕量級的增強現實類JavaScript庫，支持基於標記和位置的增強現實。開發人員可以使用幾行HTML將AR特性和功能引入任何網站。該項目是開源的，在GitHub上擁有近14,000個stars，各種平臺的開發人員正在使用它來創建更多新的數字體驗。AR.js框架包括跨瀏覽器兼容性，並且支持WebGL和WebRTC，這意味着它可以在iOS 11以上的Android和iPhone設備上正常工作。通過包裝許多不同的AR框架，包括three.js，a-frame和ARToolKit，AR.js使得將AR引入Web應用程序變得更加簡單高效。它具有以下優點：
-
跨瀏覽器兼容性
-
即使在較舊的設備上也可以達到60fps的高性能
-
基於Web，無需安裝
-
開源，可免費訪問
-
使用WebGL和WebRTC在所有移動設備上均可使用
-
無需額外或不常見的硬件
-
可以用不到10行HTML來完成
創建項目
假設你已經建立了一個（本地或其他）開發環境，並使用SSL證書對其進行了保護。爲什麼要使用SSL？Chrome要要求攝像機訪問權限的網站都必須嚴格通過https交付。
我們可以僅用8行HTML編寫一個AR.js demo。
將上述代碼編輯到你的開發環境中的index.html文件中，並在你選擇的兼容瀏覽器中將其打開，將收到訪問相機的請求，點擊允許即可。攝像頭對準識別圖（如下），如果一切順利，你應該會在標記上看到一個半透明的白色立方體。
要從視頻顯示中刪除調試框只需添加如下代碼：
使用自定義標記
步驟1：確定你的標記圖像。爲了獲得最佳結果，這應該是一個簡單的，高對比度的PNG圖像，預先裁剪爲正方形，大小至少爲512x512。這也必須是旋轉不對稱的，這意味着無論旋轉到什麼程度，它始終看起來是唯一的。下面是標記圖像的一些好例子：
步驟2：將圖像轉換爲.patt文件和AR.js標記。使用此標記訓練器（https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html），上傳要用作標記的圖像。
-
Download Marker: AR.js使用.patt文件來識別標記並顯示3D內容。
-
Download Image: 帶有適當黑色邊框的實際.png圖像用作物理標記。
步驟3：將.patt文件添加到你的網站。只要應用程序可在何處訪問它，如/img/patterns/my-marker.patt
步驟4：將標記添加到AR.js元素。使用a-frame方法，需要做的就是添加一個a-marker元素，其類型屬性爲’pattern’，並將模式文件的相對路徑作爲’url’屬性。
使用此方法，我們還需要包含一個a-entity camera以便虛擬相機包含在正在渲染的3D環境中。
步驟5：最後，添加你要顯示的3D模型。要完成此操作，我們需要添加一個模型，該模型將在發現此標記時顯示。幸運的是，框架包含了許多原始幾何體，我們可以使用一些簡單的元素名稱輕鬆地插入它們：
-
<a-box></a-box>
-
<a-sphere></a-sphere>
-
<a-cylinder></a-cylinder>
-
<a-plane></a-plane>
對於此示例，我將添加一個紅色球體，該球體剛好在標記上方。
測試效果如下：
縮小黑色標記邊框的大小
我個人認爲，默認邊框粗細在標記上很難看到。所以如果你使用的是最新版本的框架，則可以根據自己的喜好調整邊框大小！
哪個看起來更好？左：0.5，右：0.8
你可以訪問這個網站來調節大小：
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
一旦確定了所需的圖案比例，就可以生成和保存應用程序的標記圖案和標記圖像，只需進行一些細微的調整即可將其綁定。如下代碼：
使用自己的3D模型
當然，立方體，球體，平面和圓柱體都很酷，但是大多數時候，你需要在要創建的增強現實場景中利用和顯示自定義的3D模型。最簡單的方法是確保模型爲obj或glTF格式。
對於obj模型：在我們的a-entity標籤中，我們將使用obj-model道具，這要求你指定.obj模型文件和隨附的.mtl材質文件的路徑。最終結果應如下所示：
對於glTF模型
創建事件監聽器
我們爲什麼要有一個事件監聽器？我可以舉一個真實的例子：每當用戶設備上的標記處於活動狀態時，客戶都希望顯示一個簡單的內容塊。只要沒有當前活動的標記，內容就應該消失。爲了實現這一點，我們需要添加一個事件偵聽器，該偵聽器將在發現/丟失標記時觸發，然後將其掛接到主站點的JavaScript捆綁包中，並在觸發該事件時顯示/隱藏內容。
要實現事件監聽器，只需註冊一個aframe組件，然後爲markerFound和markerLost設置事件監聽器。在它們各自的回調函數中，編寫你希望在發現或丟失標記時將被觸發的任何js內容，如下面的代碼示例：
關於更多機器學習、人工智能、增強現實資源和技術乾貨，可以關注公衆號：AIRX社區，共同學習，一起進步！
