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 這個增強現實應用支援實時地更換特斯拉車身的顔色，讓您瞬間找到一絲擁有多輛特斯拉汽車的恍惚感。
這個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應用的項目名稱：
(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代碼，特斯拉就帶回家! 感謝閱讀。
更多閱讀
本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。