qq群:481244084
熟悉three.js的同学都知道,如果要实现鼠标滚动,只需要引入TrackballControls.js,就可以控制物体距离的远近了,
controls = new THREE.TrackballControls( camera , renderer.domElement);
controls.minDistance=200;
controls.maxDistance=500;
但是在React VR里面就没有这样的组件可以用了,如果要实现通过鼠标滚轮来控制距离的远近,可以按照下面的方法实现:
这里我们主要修改的地方是client.js,在Three.js的项目里面,首先我们需要创建相机,但是在React VR里面我们可以不用关心相机的问题,因为在react-vr-web里面的ovrui里面默认生成了一个透视相机(PerspectiveCamera)的,下面我们通过控制相机的远近来控制物体显示的远近。
1、在vr示例里面,添加window的鼠标滚轮控制:
在
vr.start();
return vr;
这两行代码之前插入下面的代码:
window.playerCamera = vr.player.camera;
window.vr = vr;
window.onmousewheel = onMouseWheel;
2、再添加onMouseWheel方法:
再次刷新下浏览器的页面,用鼠标滚轮滚动下,是不是可以查看距离的远近了。
如果控制单个问题的话,就对单个物体下手,先判断物理是否选中,如果物体聚焦了,鼠标滚动滚动,调整物理的距离就可以了。