天天看點

react vr-打包代碼放到網站上

很多人不知道在編譯了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哦

react vr-打包代碼放到網站上

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/

寶貝後的檔案夾下面應該是下面的樣子哦

react vr-打包代碼放到網站上

檔案夾下面的内容

九、修改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'}

具體可以看下圖的對比哦:

react vr-打包代碼放到網站上

打包前後的對比

然後把你的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下面的檔案如下圖所示:

react vr-打包代碼放到網站上

package.json