找回密碼
 注冊帳號

掃一掃,訪問微社區

AR醬 WebAR開發指南(1)---使用AR.js實現第一個WebAR demo

2
回復
2491
查看
打印 上一主題 下一主題
[ 復制鏈接 ]
排名
2297
昨日變化

39

主題

267

帖子

1560

積分

Rank: 9Rank: 9Rank: 9

UID
156756
好友
14
蠻牛幣
1032
威望
0
注冊時間
2016-7-13
在線時間
561 小時
最后登錄
2020-11-14

專欄作家

馬上注冊,結交更多好友,享用更多功能,讓你輕松玩轉社區。

您需要 登錄 才可以下載或查看,沒有帳號?注冊帳號

x
本帖最后由 geekli 于 2020-2-29 16:51 編輯

關注微信公眾號:AIRX社區(國內領先的AI、AR、VR技術學習與交流平臺)


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

關于AR.js
AR.js是一個輕量級的增強現實類JavaScript庫,支持基于標記和位置的增強現實。開發人員可以使用幾行HTML將AR特性和功能引入任何網站。該項目是開源的,在GitHub上擁有近14,000個stars,各種平臺的開發人員正在使用它來創建更多新的數字體驗。AR.js框架包括跨瀏覽器兼容性,并且支持WebGL和WebRTC,這意味著它可以在iOS 11以上的和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

你可以訪問這個網站來調節大?。?/font>
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社區(國內領先AI、AR、VR開發者學習與交流平臺)


回復

使用道具 舉報

0

主題

3

帖子

3

積分

Rank: 1

UID
347719
好友
0
蠻牛幣
2
威望
0
注冊時間
2020-5-27
在線時間
0 小時
最后登錄
2020-5-27
沙發
2020-5-27 14:06:01 只看該作者
厲害了!贊贊贊贊贊贊?。?!
回復 支持 反對

使用道具 舉報

5熟悉之中
773/1000

0

主題

641

帖子

773

積分

Rank: 5Rank: 5

UID
346597
好友
0
蠻牛幣
284
威望
0
注冊時間
2020-5-9
在線時間
132 小時
最后登錄
2020-7-4
板凳
2020-6-12 14:37:09 只看該作者
我有流量,尋求個人游戲開發者合作,有意者聯系微信號jim20180688
回復 支持 反對

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 注冊帳號

本版積分規則

内蒙古麻将app 血流麻将怎么玩 安徽快三有多少种玩法 云南麻将下载安装 现金麻将游戏大厅下载 七星彩开奖号码结果 广西快三开奖app 千炮彩金捕鱼免费 微乐吉林长春麻将 17玩麻将下载安装 辉煌棋牌官方正版app下载 江苏体彩七位数走势图 幸运28开奖结果99 云南十一选五走势囹 湖北11选五开奖结果查 2013李逵劈鱼 全民麻将官网