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

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

本文我們開始進入加強現實開發的編碼部分。我們仍是用一個實際的例子來說解：只須要200多行JavaScript代碼，就能知足您把特斯拉汽車帶到身邊的願望，雖然只是特斯拉汽車的模型。

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

https://v.qq.com/x/page/o3003...
https://v.qq.com/x/page/q3003...

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

夢醒了該搬磚了。

ViroReact的官網有一個步驟很是詳細的嚮導：
https://docs.viromedia.com/do...

一步步照着作，最後就能經過您的手機攝像頭，在真實的場景裏能看到一個硬編碼的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/s3003...
咱們很容易觀察到，在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的原創文章，請關注公衆號"汪子熙":