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方法:新增俯仰角变量
然后就可以了哦!