使用React 360創(chuàng)建虛擬現(xiàn)實(shí)（VR）體驗(yàn)
React的虛擬現(xiàn)實(shí)(VR)體驗(yàn)?
這真的有可能嗎?是的。隨著React 360的引入，現(xiàn)在可以使用JavaScript創(chuàng)建虛擬現(xiàn)實(shí)體驗(yàn)。
如今在設(shè)備中如何使用VR
在介紹什么是React 360之前，讓我快速回顧一下當(dāng)今設(shè)備中VR的使用方式。虛擬現(xiàn)實(shí)是當(dāng)前的一個熱門話題，大多數(shù)游戲和娛樂都專注于虛擬現(xiàn)實(shí)，以提供出色的用戶體驗(yàn)。
React 360的引入為未來的用戶界面帶來了廣泛應(yīng)用的希望，從字面上為現(xiàn)代Web應(yīng)用程序提供了3D和VR體驗(yàn)。
不用再廢話了，讓我們開始吧。
什么是React 360?
React 360是一個框架，用于創(chuàng)建在網(wǎng)絡(luò)瀏覽器中運(yùn)行的互動360體驗(yàn)。來源：NPM.js
這是一個NPM軟件包，可以按以下方式安裝。
- npm i react-360
- // Command line tool
- npm install -g react-360-cli
它與React和React Native非常相似，但有一些差異有助于構(gòu)建VR體驗(yàn)。
它使用three.js來促進(jìn)較低級別的WebVR(用于訪問VR設(shè)備)和WebGL(渲染3D圖像)API，以便在瀏覽器上創(chuàng)建VR體驗(yàn)。
如果你有過使用React和React Native的經(jīng)驗(yàn)，那么使用React 360會更容易。此外，如果你使用React 360創(chuàng)建一個新項(xiàng)目，那么你的項(xiàng)目中將有三個重要文件。
- index.js——你的應(yīng)用程序的主要代碼，將包含決定你的應(yīng)用程序的外觀和感覺的代碼/文件導(dǎo)入。
- client.js——該文件是將你的瀏覽器連接到React應(yīng)用程序的運(yùn)行時。該文件中的代碼將創(chuàng)建一個新的React 360實(shí)例，加載你的React代碼并將其附加到DOM中的特定位置。
- index.html——你將加載的網(wǎng)頁。這將指向加載你的應(yīng)用程序的JavaScript代碼。
此外，static_assets 文件夾用于存儲資源，包括圖像，全景圖，音頻文件和其他用于增強(qiáng)Web體驗(yàn)的外部內(nèi)容。
運(yùn)行時負(fù)責(zé)將你的React組件變成屏幕上的3D元素。
在實(shí)踐中使用React 360
成功安裝React 360之后，你可以使用以下命令初始化新項(xiàng)目。
- react-360 init new-react-360-app
這將創(chuàng)建一個名為 new-react-360-app 的新項(xiàng)目目錄，并將安裝所有必需的依賴項(xiàng)。
項(xiàng)目結(jié)構(gòu)如下所示。
你可以使用 npm start 命令啟動項(xiàng)目，你可以在http://localhost:8081/index.html上訪問瀏覽器上的輸出。
你可以使用鼠標(biāo)指針在此框架中進(jìn)行360度導(dǎo)航。
React 360框架的一個重要特性是它提供了可重用的內(nèi)置UI組件。例如，其中一些如下。
- View
- Image
- Entity
- VrButton
當(dāng)你開發(fā)React 360應(yīng)用程序時可以使用它們。
在我前面提到的三個重要文件中，index.js 和 index.html 非常簡單。
讓我們看一下 client.js 文件，以更好地了解其內(nèi)容。
在這里，根目錄使用 r360.createRoot 設(shè)置為 index.js 中的 hello_vr React 組件。
React 360的功能
React 360具有許多有用的功能，讓我們來看看其中的一些。
- 跨平臺開發(fā)——借助React 360，單個React開發(fā)人員可以創(chuàng)建VR應(yīng)用程序以在臺式機(jī)，移動設(shè)備和Web上運(yùn)行，而無需使用不同的語言和技術(shù)編寫大量代碼，從而節(jié)省了開發(fā)成本和工作量。
- 使用像素——React 360使開發(fā)者能夠創(chuàng)建嵌入3D空間的2D界面。React 360的Surfaces庫允許將UI面板集成到應(yīng)用程序中。Surfaces將允許開發(fā)者用像素而不是其他測量單位來開發(fā)環(huán)境，并使用常規(guī)工具實(shí)現(xiàn)所創(chuàng)建的規(guī)格。
- 3D媒體支持——React 360擁有更好地處理沉浸式媒體的環(huán)境特性。這樣，開發(fā)人員就可以精確地控制應(yīng)用程序的外觀和感覺。
- 增強(qiáng)的性能——運(yùn)行時體系結(jié)構(gòu)旨在通過提高幀率和減少垃圾收集來優(yōu)化整體應(yīng)用程序性能。
支持的設(shè)備
- 桌面網(wǎng)絡(luò)瀏覽器(Chrome，F(xiàn)irefox等)
- 移動網(wǎng)絡(luò)瀏覽器
- VR設(shè)備
總結(jié)
React 360是創(chuàng)建3D Web應(yīng)用程序的有趣方式，可為用戶提供VR體驗(yàn)。這是一個開放源代碼框架，因此在構(gòu)建VR應(yīng)用程序方面具有成本效益。
任何有過React經(jīng)驗(yàn)的開發(fā)者都可以輕松地學(xué)習(xí)這個框架，并立即開始構(gòu)建VR應(yīng)用程序。React VR應(yīng)用支持廣泛使用的設(shè)備和平臺，包括iOS和Android。
謝謝閱讀!
原文：https://blog.bitsrc.io/creating-virtual-reality-experiences-with-react-360-9f354623731e
作者：Viduni Wickramarachchi
本文轉(zhuǎn)載自微信公眾號「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端全棧開發(fā)者眾號。
