很多人不知道在編譯了react vr代碼後不知道如何放到網站上顯示,這裡我就把官方的示例代碼先編譯,然後放到網站上哦!
大家按照我的步驟一步步來,就可以在你自己的網站上顯示VR啦!
一、下載下傳官方示例代碼
可以去github上下載下傳哦:https://github.com/facebook/react-vr,下面的example裡面就是示例代碼了。
也可以去我的網站下載下傳: http://www.vr-react.com/example/Examples.zip
二、先按照官網步驟,一步步搭建好環境
http://www.vr-react.com/start.html ,然後建立一個項目:這裡我是拿ControllerDemo舉個例子哦
react-vr init ControllerDemo
三、拷貝示例
把示例ControllerDemo中的所有檔案拷貝到你建立的ControllerDemo項目下面
四、添加依賴
然後把項目下面的inputs檔案夾也放到你的項目下面哦,這是依賴檔案
五、修改client.js檔案路徑
5.1、打開ControllerDemo/vr/client.js
5.2、修改導入檔案路徑,去掉一層路徑,也可以直接複制我下面的代碼
import ThreeDOFRayCaster from '../inputs/3dof/ThreeDOFRayCaster';
六、運作項目
6.1、然後在指令行重新進入到你的項目ControllerDemo目錄下,然後運作:
npm start
6.2、在浏覽器中輸入 http://localhost:8081/vr/
6.3、也可以在你的終端輸入下面的指令打開浏覽器哦
npm run open
然後就可以看到東西啦,隻不過這是一個controller的執行個體,如果沒有VR輸入裝置,顯示的是no controller哦
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIwQjMx8CX39CXy8CXycXZpZVZnFWbpN0NlAXayR3cvwFduVWay9WLvRXdh9CXyI3Zv1UZnFWbp9zZlBnauYTM3MGOzgjN0ADM5gjM1EWLwIDMzYDNz8CXzV2Zh1WafRWYvxGc19CXvlmL1h2cuFWaq5ycldWYtlWLkF2bsBXdvw1LcpDc0RHaiojIsJye.jpeg)
ControllerDemo
七、打包項目
在指令行輸入:
npm run bundle
這時會在你的項目的vr下面生成一個build檔案夾,檔案夾下面就是打包後的内容哦,一般會生成4個檔案
八、移動檔案
8.1、首先在任意地方吧,建立一個檔案夾 new,主要是放打包後的項目的
8.2、把ControllerDemo目錄下的幾個檔案拷貝到建立的檔案夾new下面,主要有index.html、static_assets整個資源檔案、build下面的檔案。分别把
ControllerDemo/vr/index.html ----> new/
整個ControllerDemo/static_assets檔案夾 -----> new/
ControllerDemo/vr/build下面的四個檔案 ----> new/
寶貝後的檔案夾下面應該是下面的樣子哦
檔案夾下面的内容
九、修改index.html
9.1、修改client路徑
< script src="./client.bundle?platform=vr"> 修改成----> < script src="./client.bundle.js">
'../index.vr.bundle?platform=vr&dev=true', 修改成----> './index.bundle.js',
在document.body,下面添加資源檔案路徑:
變成:
document.body,
{assetRoot:'./static_assets'}
具體可以看下圖的對比哦:
打包前後的對比
然後把你的new檔案夾下面的東西整個放到網站背景上,在浏覽器中打開就可以了,我這裡是放到網站的example/ControllerDemo檔案夾下面,然後我的位址就是
http://www.vr-react.com/example/ControllerDemo/index.html
其他的幾個例子大家還是自己打開React VR中文網看下哦:網址:www.vr-react.com
十、特殊情況----DashSample
對于這個例子稍微特殊點兒,需要先下載下傳資源檔案,然後才能正常播放視訊的哦。
10.1、具體就是把DashSample下面的package.json裡面的依賴也放到你建立的項目中哦;
10.2、需要科學上網,然後運作指令下載下傳資源:
npm run postinstall
當然你也可以直接下載下傳:https://www.dropbox.com/s/4h5iuryd3myfha8/asset.tar.gz?dl=1,也需要科學上網的哦。
或者直接在我的網站下載下傳:http://www.vr-react.com/example/DashSample/asset.tar.gz
10.3、下載下傳好了,解壓檔案,把asset下面的兩個檔案夾拷貝到項目的static_assets下面就行了。
10.4、package.json下面的檔案如下圖所示:
package.json