【AR優(yōu)秀開源項目】專欄會定期為大家推薦一些可移植性強(qiáng)的、可二次開發(fā)應(yīng)用的、可落地實際場景使用的實戰(zhàn)工程源碼分享給大家。本部分分享的是使用ARKit實現(xiàn)在Web端的AR效果！

要求

WebARonARKit建立在iOS ARKit的基礎(chǔ)上，iOS ARKit需要具有A9 +處理器且運(yùn)行iOS 11的iOS設(shè)備。為獲得最佳效果，我們建議以下操作之一：

iPad（2017）

iPad Pro（9.7、10.5或12.9英寸）

iPhone 7及以上設(shè)備

Step 1:下載鏈接

作者：google-ar

下載鏈接：

https://github.com/google-ar/WebARonARKit

或點擊下方的‘閱讀原文’進(jìn)行下載

Step 2:項目效果預(yù)覽

Step 3:如何使用

1. 克隆WebARonARKit GitHub存儲庫。

2. 啟動Xcode 9。

3. 使用Xcode 9從克隆的WebARonARKit存儲庫中打開Xcode項目（.xcodeproj）。

4. 從項目導(dǎo)航器中選擇WebARonARKit項目文件（左列頂部的藍(lán)色圖標(biāo)），然后在下選擇WebARonARKit目標(biāo)Targets。

5. 確保設(shè)備已連接到計算機(jī)，然后從Product >> Destination菜單或從用戶界面左上角的運(yùn)行按鈕旁邊的下拉菜單中選擇設(shè)備，將其設(shè)置為構(gòu)建目標(biāo)。

6. 構(gòu)建完成并將其推送到設(shè)備后，該應(yīng)用會自動打開。你可能必須按照屏幕上的說明授權(quán)開發(fā)人員帳戶將其推送到設(shè)備上。請注意，首次運(yùn)行應(yīng)用程序時，安裝正確的用戶配置文件可能需要一些時間。

要構(gòu)建可與適用于Android的 WebARonARKit和WebARonARCore一起使用的AR Web體驗，我們建議使用three.ar.js，這是一個與流行的three.js WebGL框架一起使用的程序庫。Three.ar.js提供了常見的AR構(gòu)建塊，例如在現(xiàn)實世界表面上繪制的可見光罩和示例場景。

調(diào)試

可以使用MacOS Safari遠(yuǎn)程檢查和調(diào)試WebARonARKit中的頁面，但這需要MacOS Safari 11.0（作為Safari Technology Preview提供）或更高版本。你可以從https://developer.apple.com/safari/technology-preview/下載MacOS Safari 11 。

Step 4:WebARonARKit如何工作

WebARonARKit建立在以下基礎(chǔ)上：

1. WKWebView：WKWebView是一個iOS類，使開發(fā)人員可以將Web視圖嵌入其本機(jī)應(yīng)用程序中，并通過自定義API向網(wǎng)絡(luò)內(nèi)容公開本機(jī)設(shè)備功能。在我們的案例中，我們使用WKWebView將ARKit功能公開給Web內(nèi)容。諸如Cordova之類的本機(jī)/ Web應(yīng)用程序框架使用類似的方法。

2. WebVR API的擴(kuò)展：WebVR API（v1.1）為我們提供了AR所需的大部分功能。然后，我們對其進(jìn)行擴(kuò)展以添加其他一些要點：運(yùn)動跟蹤，相機(jī)視頻饋送的渲染以及對現(xiàn)實世界的基本了解。

詳細(xì)信息參考：

https://github.com/google-ar/WebARonARKit