React 360 初體驗介紹與環境搭建

React 360 初體驗介紹

---

從這章節內容呢，我們來學習並瞭解下什麼是react 360,並使用它來開發一個360度可旋轉大屏的案例項目。接下來，我們就一起來逐步揭開它神祕的面紗吧！

我們本章節將會從下面幾個方面分別對我們的react 360進行介紹：

• 什麼是 react 360 ?
• react 360 它有哪些優點？
• 相關的案例 ?
• 本地搭建react 360開發環境？

什麼是 React 360 ?

首先，我們需要明確什麼是 React 360，它有什麼作用?

• 在前兩年，大家可能聽說過一款vr前端框架叫做react-vr,而這個框架呢，就是我們今天要學習的react 360的前身，這個react 360是facebook團隊在2017年發佈的一個項目，而後面呢，就更名爲我們現在的react 360
• react 360我們從命名上就可以很清晰的分辨出了這個框架，它是基於react框架開發的
• 說了這麼多，它到底是幹啥的呢？官方文檔的解釋是：React 360 針對創建支持豐富多媒體體驗的用戶界面進行了優化，它提供了創建高質量界面所需的工具，併爲圍繞360和3D內容構建的應用程序提供了堅實的可行性。React 360創建的的目標就是把用戶和web應用的交互性帶入360空間。 結合2D或3D界面的應用程序很容易實現。 迄今爲止呢，市面上的一些3D照片牆，VR視頻，360遊覽，經典冒險遊戲和3D棋盤遊戲等等，諸如此內的應用基本都是使用React 360構建的，所以呢，面向未來，react 360，作爲一名與時俱進的合格前端開發工程師，是一定要去學習和了解的。
• 官方的解釋，可能大家沒聽懂，這裏呢，一句話總結：react 360就是一款可以在web上實現的且面向未來的vr 3d視覺交互的前端框架。
• 如果大家想基於網頁創建一個360度的VR全景效果，那麼使用react 360就是一個很不錯的選擇
• 接下來我們就來看一下它有哪些優點？

React 360 優點有哪些 ？

• react 360給我們提供了很多類型的控件，可以非常方便的構建360度全景應用
• react 360支持跨平臺性，支持電腦、移動設備、VR設備等
• react 360支持多種格式的全景視頻

相關的案例

在我們學習到什麼是react 360這款框架以及它的優點後，我們就需要來了解下使用react 360製作的案例，以及使用它可以做出那種應用出來？

• 第一個案例：
  
• 第二個案例：
  
• 第三個案例：
  
• 第四個案例：
  
• 這裏有蒐集的一些相關的精彩案例：
  （1）https://blog.pusher.com/6-coolest-react-vr-projects/
  （2）https://react.rocks/tag/WebVR

本地搭建react 360開發環境

光看不練假把式，我們呢，也來嘗試着使用腳手架工具，在本地快速的搭建我們的react 360開發環境

npm install -S react-vr-cli
npx react-vr-cli init newapp
cd newapp
npm start

通過上面這些命令呢，我們就可以初步完成react 360項目的完成，在下一章節中，我將帶着大家來開發一個360度全景，可交互的項目 ， 大家加油啦 ！