只要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
這個擴增實境應用支援實時地更換特斯拉車身的顏色,讓您瞬間找到一絲擁有多輛特斯拉汽車的恍惚感。
夢醒了該搬磚了。
一步步照著做,最後就能透過您的手機攝像頭,在真實的場景裡能看到一個硬編碼的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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- AqseMarkets,您身邊最專業的理財專家!AQS
- 邊寫 Javascript 程式碼邊玩遊戲 – WarriorJSJavaScript遊戲JS
- 蘋果企業開發者賬號,您身邊的穩定簽名蘋果
- 傲騰加持浪潮伺服器 做您身邊的“資料專家”伺服器
- ul和li 帶有邊框的方格程式碼
- 只要您快速行動,自動化就會創造工作
- 不到200行 JavaScript 程式碼如何實現富文字編輯器JavaScript
- 只要三步!連老師帶你初探Hi3861程式碼結構
- 給你一臺伺服器,你能把你寫的程式碼部署到線上嗎?伺服器
- 身邊的一個可愛女程式媛
- www.baithe.com 百樂健康網——您身邊的貼心護理AI
- 破解一個六位密碼,黑客就能入侵特斯拉汽車密碼黑客
- 只要一行程式碼,實現五種 CSS 經典佈局行程CSS
- 幾行程式碼帶你用TinyEngine低程式碼引擎開發側邊欄外掛行程
- 哈佛商業評論:特斯拉如何顛覆傳統汽車行業行業
- JS不改HTML任何程式碼就達到動態效果JSHTML
- 帶您走進松本行弘的程式世界
- 入侵特斯拉——智慧汽車安全性分析
- 身邊就有大企業,華瑞學子不出遠門也能高薪就業高薪就業
- JavaScript開發區塊鏈只需200行程式碼JavaScript區塊鏈行程
- 突破創意邊界,Nik Collection 6 by DxO帶給您全新後期體驗
- JavaScript的程式碼執行機制JavaScript
- 谷歌開發者工具執行JavaScript程式碼谷歌JavaScript
- 一行神奇的javascript程式碼JavaScript
- 抖音最火彈幕小程式只要100行程式碼行程
- 我們身邊偉大的女程式設計師們程式設計師
- 100行程式碼讓您學會JavaScript原生的Proxy設計模式行程JavaScript設計模式
- javascript帶有毫秒的計時器程式碼例項JavaScript
- 從碼農到工程師:只要做到這6點工程師
- 只要有耐心,就一定能學好LinuxLinux
- 您的 Java 程式碼安全嗎?Java
- 200 行 Python 程式碼做個換臉程式(附原始碼)Python原始碼
- 影片直播原始碼,去掉Button自帶邊框原始碼
- 使用ul和li實現的帶有邊框的方格效果程式碼
- 口袋裡的Linux:在您的隨身碟上執行SLAX(轉)Linux
- 微軟Everyday AI釋出會:四大工具把AI帶到你身邊微軟AI
- JavaScript 檢測程式碼執行時間JavaScript
- 使用acorn對JavaScript程式碼進行解析。JavaScript