前面有一篇文章萬字干貨介紹WebAR的實現(xiàn)與應用 分析了目前流行的WebAR框架并簡單的介紹一些實現(xiàn)方法，這個專欄我們具體的來通過一些框架實現(xiàn)WebAR效果。

關于AR.js

AR.js是一個輕量級的增強現(xiàn)實類JavaScript庫，支持基于標記和位置的增強現(xiàn)實。開發(fā)人員可以使用幾行HTML將AR特性和功能引入任何網(wǎng)站。該項目是開源的，在GitHub上擁有近14,000個stars，各種平臺的開發(fā)人員正在使用它來創(chuàng)建更多新的數(shù)字體驗。AR.js框架包括跨瀏覽器兼容性，并且支持WebGL和WebRTC，這意味著它可以在iOS 11以上的Android和iPhone設備上正常工作。通過包裝許多不同的AR框架，包括three.js，a-frame和ARToolKit，AR.js使得將AR引入Web應用程序變得更加簡單高效。它具有以下優(yōu)點：

• 跨瀏覽器兼容性
• 即使在較舊的設備上也可以達到60fps的高性能
• 基于Web，無需安裝
• 開源，可免費訪問
• 使用WebGL和WebRTC在所有移動設備上均可使用
• 無需額外或不常見的硬件
• 可以用不到10行HTML來完成

創(chuàng)建項目

假設你已經(jīng)建立了一個（本地或其他）開發(fā)環(huán)境，并使用SSL證書對其進行了保護。為什么要使用SSL？Chrome要要求攝像機訪問權限的網(wǎng)站都必須嚴格通過https交付。

我們可以僅用8行HTML編寫一個AR.js demo。

將上述代碼編輯到你的開發(fā)環(huán)境中的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文件添加到你的網(wǎng)站。只要應用程序可在何處訪問它，如/img/patterns/my-marker.patt

步驟4：將標記添加到AR.js元素。使用a-frame方法，需要做的就是添加一個a-marker元素，其類型屬性為'pattern'，并將模式文件的相對路徑作為'url'屬性。

使用此方法，我們還需要包含一個a-entity camera以便虛擬相機包含在正在渲染的3D環(huán)境中。

步驟5：最后，添加你要顯示的3D模型。要完成此操作，我們需要添加一個模型，該模型將在發(fā)現(xiàn)此標記時顯示。幸運的是，框架包含了許多原始幾何體，我們可以使用一些簡單的元素名稱輕松地插入它們：

• <a-box></a-box>
• <a-sphere></a-sphere>
• <a-cylinder></a-cylinder>
• <a-plane></a-plane>

對于此示例，我將添加一個紅色球體，該球體剛好在標記上方。

測試效果如下：

縮小黑色標記邊框的大小

我個人認為，默認邊框粗細在標記上很難看到。所以如果你使用的是最新版本的框架，則可以根據(jù)自己的喜好調整邊框大小！

哪個看起來更好？左：0.5，右：0.8

你可以訪問這個網(wǎng)站來調節(jié)大小：https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

一旦確定了所需的圖案比例，就可以生成和保存應用程序的標記圖案和標記圖像，只需進行一些細微的調整即可將其綁定。如下代碼：

使用自己的3D模型

當然，立方體，球體，平面和圓柱體都很酷，但是大多數(shù)時候，你需要在要創(chuàng)建的增強現(xiàn)實場景中利用和顯示自定義的3D模型。最簡單的方法是確保模型為obj或glTF格式。

對于obj模型：在我們的a-entity標簽中，我們將使用obj-model道具，這要求你指定.obj模型文件和隨附的.mtl材質文件的路徑。最終結果應如下所示：

對于glTF模型

創(chuàng)建事件監(jiān)聽器

我們?yōu)槭裁匆幸粋€事件監(jiān)聽器？我可以舉一個真實的例子：每當用戶設備上的標記處于活動狀態(tài)時，客戶都希望顯示一個簡單的內容塊。只要沒有當前活動的標記，內容就應該消失。為了實現(xiàn)這一點，我們需要添加一個事件偵聽器，該偵聽器將在發(fā)現(xiàn)/丟失標記時觸發(fā)，然后將其掛接到主站點的JavaScript捆綁包中，并在觸發(fā)該事件時顯示/隱藏內容。

要實現(xiàn)事件監(jiān)聽器，只需注冊一個aframe組件，然后為markerFound和markerLost設置事件監(jiān)聽器。在它們各自的回調函數(shù)中，編寫你希望在發(fā)現(xiàn)或丟失標記時將被觸發(fā)的任何js內容，如下面的代碼示例：

總結

以上是生活随笔為你收集整理的js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。