只要200行JavaScript程式碼，就能把特斯拉汽車帶到您身邊

Jerry的前一篇文章  如何使用JavaScript開發AR(擴增實境)移動應用 (一) 介紹了用React-Native + ViroReact開發擴增實境應用的一些預備知識。

本文我們們開始進入擴增實境開發的編碼部分。我們們還是用一個實際的例子來講解：只需要200多行JavaScript程式碼，就能滿足您把特斯拉汽車帶到身邊的願望，雖然只是特斯拉汽車的模型。

下面這些視訊是我的同事，SAP成都研究院數字創新空間的開發人員Wang Leo做的一個小demo：

https://v.qq.com/x/page/o3003z9y4m7.html
https://v.qq.com/x/page/q3003wozfve.html

這個擴增實境應用支援實時地更換特斯拉車身的顏色，讓您瞬間找到一絲擁有多輛特斯拉汽車的恍惚感。

夢醒了該搬磚了。

ViroReact的官網有一個步驟非常詳細的嚮導：
https://docs.viromedia.com/docs/tutorial-ar

一步步照著做，最後就能通過您的手機攝像頭，在真實的場景裡能看到一個硬編碼的Hello World字串和一些3D物體。

這個Hello World級別的原始碼在ViroReact官網上能下載，所以本文還是重點介紹Leo做的demo的實現原理。

開啟Leo的專案工程，找到package.json，專案名稱為ViroSample, 裡面宣告瞭對React-Native和React-viro的依賴。

React-Native加ViroReact這套組合的妙處在於“一次編寫，到處執行”的跨平臺特性。編寫一次JavaScript程式碼，能在iOS和Android兩套作業系統裡以原生應用的方式執行。

以Android為例，執行命令列react-native start 加上react-native run-android 後，在android資料夾裡能找到針對Android平臺生成的原生應用部分原始碼。最重要的兩個應用引導檔案，一個是MainActivity.java, 通過回撥函式的方式返回了AR應用的專案名稱：

MainApplication.java的getJSMainModuleName通過回撥函式的方式指明瞭JavaScript入口模組的名稱：

因為本文不是React-Native的講解文章，所以不深入闡述React-Native應用在Android平臺的啟動原理，感興趣的朋友可以自行搜尋。React-Native生態圈非常活躍，類似的原理分析文章數不勝數。

React-Native + ViroReact開發的擴增實境應用，其典型實現套路Jerry歸納起來就三步：Match - Replace - Augment

(1) Match - 匹配

由於擴增實境應用都是將程式碼生成的虛擬物品疊加到現實場景中，因此應用開發人員需要幫助ViroReact找到現實場景中的一個依附平面，這樣ViroReact可以把這個依附平面對映到手機的二維螢幕上，接下來ViroReact就能在二維螢幕上繪製虛擬物體了。

ViroReact提供了一個標籤ViroARImageMarker, 顧名思義，該標籤能夠允許應用開發人員定義一個“Marker”(標識，標記)。

用程式設計術語來說，這個標籤定義的就是一個place holder，通過target屬性，關聯一個應用開發人員指定的圖片。當使用者使用擴增實境應用通過攝像頭在現實世界掃描到和ViroARImageMarker指定的圖片相匹配的圖形時，ViroReact就會將Marker指定的圖形替換成應用開發人員事先準備好的3D模型。這個匹配 - 替換過程是ViroReact自動完成的，應用開發人員只需要提供Marker指向的圖片和待替換的3D模型即可。採用這種方式實現的AR應用也稱為Marker based AR應用(當然還有不借助Marker實現的AR應用).

回到Leo的demo，從上圖能看出target指向的Marker內容為一個名為logo的物件，這個物件通過API ViroARTrackingTargets.createTargets建立，輸入引數是該圖片在AR專案裡的相對路徑：

該圖片如下所示。這是為什麼Leo在演示這個應用時，第一步總是先在電腦上開啟這張圖片，然後再用手機攝像頭去掃描的原因。

(2) Replace - 替換

ViroReact將現實世界的圖形和AR應用的Image Marker匹配後，就會自動使用一個3D物件替換並渲染到Marker所在的位置上。

待替換的3D物件通過標籤Viro3DObject定義，有三個重要的屬性需要指定：

source和resources：3D模型檔案，一般通過專業的3D軟體生成。Windows10自帶的Paint 3D軟體可以開啟.obj結尾的模型檔案：

您可以檢視下面的視訊來360度全方位觀察Leo的demo中使用的特斯拉的3D模型：
https://v.qq.com/x/page/s3003qkje8u.html
我們很容易觀察到，在Paint 3D裡看到的這輛特斯拉汽車，表面毫無光澤，而Leo視訊中的特斯拉，外表可以更換不同的顏色，這是通過給3D模型新增不同的texture(紋理)來實現的。

我們通過ViroMaterials.createMaterials，傳入不同的texture引數，生成不同的Material物件，最後賦給上圖Viro3DObject的materials屬性，即完成了待替換3D物件的宣告。

通過使用React程式設計動態修改Viro3DObject materials屬性的值，我們就能實現動態修改攝像頭裡觀察到的特斯拉車身的顏色。

當然這些不同的texture對應的圖形檔案也需要專業人員製作才行：

(3) Augment 增強

這一步是即使從未接觸過AR應用開發的程式設計師也非常熟悉的：標籤Viro3DObject支援各種事件響應函式，比如點選之後觸發的onClick回撥函式:

我們把自己實現的_toggleButtons函式註冊到onClick事件上，當特斯拉模型被點選之後，我們就可以彈出演示視訊裡的顏色選擇選單，允許使用者指定新的車身顏色。

因為Viro3DObject的materials屬性繫結的React模型欄位為this.state.texture, 因此使用者選擇了新的顏色後，呼叫React的this.setState方法將texture屬性設定成選中的顏色，即可實現車身顏色的動態重新整理。

講了這麼多，您不想自己動手試試？只需要200行JavaScript程式碼，特斯拉就帶回家! 感謝閱讀。

更多閱讀

• 如何使用JavaScript開發AR(擴增實境)移動應用 (一)
• 在SAP UI中使用純JavaScript顯示產品主資料的3D模型檢視
• SAP C/4HANA與人工智慧和擴增實境(AR)技術結合的又一個創新案例

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2659671/，如需轉載，請註明出處，否則將追究法律責任。