react vr禁用手机陀螺仪的方法

react vr中文网：www.vr-react.com

react vr qq群：481244084

示例源码 github：https://github.com/LiuC520/ReactVR/

现在的react vr(1.4.0以前）还不支持带触摸屏而不带陀螺仪的电脑哦。

鉴于最近有人需要禁用手机的陀螺仪，让react vr能不跟着手机的旋转而旋转，只需要滑动手机来滑动搞就行了。

原生自带的有两个方法可以禁用手指的水平滑动，但是没有禁用陀螺仪的方法。

禁用水平滑动的方法：

一、在client.js里面的VRInstace示例的options添加如下代码：disableTouchPanning：true，

二、给view设置  billboarding=‘on’

禁用陀螺仪的方法需要修改源码：

一、具体操作方法：

打开 node_modules —> ovrui —> lib —> Control —> DeviceOrientationControls.js里面，找到update方法，然后把 alpha、beta、gamma都改成0就好了，也就是去掉this.deviceOrientation.alpha 、this.deviceOrientation.beta、this.deviceOrientation.gamma；

改成如下：

二、给VRInstace设置一个属性就行了。

这样的话修改的地方就很多，但是可以支持禁用陀螺仪，也可以用不禁用，可以正产使用陀螺仪，第一种方法是写死的0，就再也不能使用陀螺仪了。

2.1、node_modules —> react-vr-web —> js --->VRInstace.js

找到 

disableTouchPanning?:boolean,   

在下面增加一行代码：

disableGyro?:boolean,    //新增这行代码

然后在

new Player（{

     ...

disableTouchPanning : options.disableTouchPanning,

disableGyro : options.disableGyro,    //新增这行代码

2.2、在  node_modules —>ovrui —> lib ---> Player ---> Player.js

找到

this.controlOptions  ={

    disableTouchPanning : !!options.disableTouchPanning,

    disableGyro : !! options.disableGyro     //新增这行代码

};

2.3、打开 node_modules —> ovrui —> lib —> Control —> DeviceOrientationControls.js里面，

首先修改如下的代码：

然后找到update方法：

修改alpha 、beta、gamma：

2.4、如果要禁用陀螺仪：只需在client.js里面，新增 disableGyro:true,//禁用陀螺仪

2.5、因为移动设备的俯仰旋转的角度限制成了90度，所以网上滑动的时间看不到顶部的东西，需要修改这个限制角度；

具体的操作方法：

2.5.1、找到 node_modules / ovrui / lib / Control / DeviceOrientationControls.js   

this. mobilePanControls = new _MobilePanControls2 . default(camera, target, options);   //添加一个options的参数

2.5.2、找到 node_modules / ovrui / lib / Control / MobilePanControl.js  找到_moveHandler，然后修改：

function MobilePanControls ( camera, target, options) {     //添加options参数

...

    this._disableGyro = false;    //新增是否禁用了陀螺仪，默认是false，没有禁用

    if(options.disableGyro) this._disableGyro = true;  //新增是否禁用了陀螺仪，禁用

然后找到_moveHandler方法：新增俯仰角变量

然后就可以了哦！