JavaScript怎么實(shí)現(xiàn)特斯拉汽車

本篇內(nèi)容主要講解“JavaScript怎么實(shí)現(xiàn)特斯拉汽車”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript怎么實(shí)現(xiàn)特斯拉汽車”吧!

ViroReact的官網(wǎng)有一個(gè)步驟非常詳細(xì)的向?qū)В?br/>

一步步照著做，最后就能通過您的手機(jī)攝像頭，在真實(shí)的場景里能看到一個(gè)硬編碼的Hello World字符串和一些3D物體。

這個(gè)Hello World級別的源代碼在ViroReact官網(wǎng)上能下載，所以本文還是重點(diǎn)介紹Leo做的demo的實(shí)現(xiàn)原理。

打開Leo的項(xiàng)目工程，找到package.json，項(xiàng)目名稱為ViroSample, 里面聲明了對React-Native和React-viro的依賴。

React-Native加ViroReact這套組合的妙處在于“一次編寫，到處運(yùn)行”的跨平臺特性。編寫一次JavaScript代碼，能在iOS和Android兩套操作系統(tǒng)里以原生應(yīng)用的方式運(yùn)行。

以Android為例，執(zhí)行命令行react-native start 加上react-native run-android 后，在android文件夾里能找到針對Android平臺生成的原生應(yīng)用部分源代碼。最重要的兩個(gè)應(yīng)用引導(dǎo)文件，一個(gè)是MainActivity.java, 通過回調(diào)函數(shù)的方式返回了AR應(yīng)用的項(xiàng)目名稱：

MainApplication.java的getJSMainModuleName通過回調(diào)函數(shù)的方式指明了JavaScript入口模塊的名稱：

因?yàn)楸疚牟皇荝eact-Native的講解文章，所以不深入闡述React-Native應(yīng)用在Android平臺的啟動(dòng)原理，感興趣的朋友可以自行搜索。React-Native生態(tài)圈非常活躍，類似的原理分析文章數(shù)不勝數(shù)。

React-Native + ViroReact開發(fā)的增強(qiáng)現(xiàn)實(shí)應(yīng)用，其典型實(shí)現(xiàn)套路Jerry歸納起來就三步：Match - Replace - Augment

(1) Match - 匹配

由于增強(qiáng)現(xiàn)實(shí)應(yīng)用都是將代碼生成的虛擬物品疊加到現(xiàn)實(shí)場景中，因此應(yīng)用開發(fā)人員需要幫助ViroReact找到現(xiàn)實(shí)場景中的一個(gè)依附平面，這樣ViroReact可以把這個(gè)依附平面映射到手機(jī)的二維屏幕上，接下來ViroReact就能在二維屏幕上繪制虛擬物體了。

ViroReact提供了一個(gè)標(biāo)簽ViroARImageMarker, 顧名思義，該標(biāo)簽?zāi)軌蛟试S應(yīng)用開發(fā)人員定義一個(gè)“Marker”(標(biāo)識，標(biāo)記)。

用編程術(shù)語來說，這個(gè)標(biāo)簽定義的就是一個(gè)place holder，通過target屬性，關(guān)聯(lián)一個(gè)應(yīng)用開發(fā)人員指定的圖片。當(dāng)用戶使用增強(qiáng)現(xiàn)實(shí)應(yīng)用通過攝像頭在現(xiàn)實(shí)世界掃描到和ViroARImageMarker指定的圖片相匹配的圖形時(shí)，ViroReact就會(huì)將Marker指定的圖形替換成應(yīng)用開發(fā)人員事先準(zhǔn)備好的3D模型。這個(gè)匹配 - 替換過程是ViroReact自動(dòng)完成的，應(yīng)用開發(fā)人員只需要提供Marker指向的圖片和待替換的3D模型即可。采用這種方式實(shí)現(xiàn)的AR應(yīng)用也稱為Marker based AR應(yīng)用(當(dāng)然還有不借助Marker實(shí)現(xiàn)的AR應(yīng)用).

回到Leo的demo，從上圖能看出target指向的Marker內(nèi)容為一個(gè)名為logo的對象，這個(gè)對象通過API ViroARTrackingTargets.createTargets創(chuàng)建，輸入?yún)?shù)是該圖片在AR項(xiàng)目里的相對路徑：

該圖片如下所示。這是為什么Leo在演示這個(gè)應(yīng)用時(shí)，第一步總是先在電腦上打開這張圖片，然后再用手機(jī)攝像頭去掃描的原因。

(2) Replace - 替換

ViroReact將現(xiàn)實(shí)世界的圖形和AR應(yīng)用的Image Marker匹配后，就會(huì)自動(dòng)使用一個(gè)3D對象替換并渲染到Marker所在的位置上。

待替換的3D對象通過標(biāo)簽Viro3DObject定義，有三個(gè)重要的屬性需要指定：

source和resources：3D模型文件，一般通過專業(yè)的3D軟件生成。Windows10自帶的Paint 3D軟件可以打開.obj結(jié)尾的模型文件：

我們很容易觀察到，在Paint 3D里看到的這輛特斯拉汽車，表面毫無光澤，而Leo視頻中的特斯拉，外表可以更換不同的顏色，這是通過給3D模型添加不同的texture(紋理)來實(shí)現(xiàn)的。

我們通過ViroMaterials.createMaterials，傳入不同的texture參數(shù)，生成不同的Material對象，最后賦給上圖Viro3DObject的materials屬性，即完成了待替換3D對象的聲明。

通過使用React編程動(dòng)態(tài)修改Viro3DObject materials屬性的值，我們就能實(shí)現(xiàn)動(dòng)態(tài)修改攝像頭里觀察到的特斯拉車身的顏色。

當(dāng)然這些不同的texture對應(yīng)的圖形文件也需要專業(yè)人員制作才行：

(3) Augment 增強(qiáng)

這一步是即使從未接觸過AR應(yīng)用開發(fā)的程序員也非常熟悉的：標(biāo)簽Viro3DObject支持各種事件響應(yīng)函數(shù)，比如點(diǎn)擊之后觸發(fā)的onClick回調(diào)函數(shù):

我們把自己實(shí)現(xiàn)的_toggleButtons函數(shù)注冊到onClick事件上，當(dāng)特斯拉模型被點(diǎn)擊之后，我們就可以彈出演示視頻里的顏色選擇菜單，允許用戶指定新的車身顏色。

因?yàn)閂iro3DObject的materials屬性綁定的React模型字段為this.state.texture, 因此用戶選擇了新的顏色后，調(diào)用React的this.setState方法將texture屬性設(shè)置成選中的顏色，即可實(shí)現(xiàn)車身顏色的動(dòng)態(tài)刷新。

到此，相信大家對“JavaScript怎么實(shí)現(xiàn)特斯拉汽車”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！