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哦

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