react vr通过鼠标滚轮放大缩小场景

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

熟悉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方法：



鼠标滚轮控制距离远近

再次刷新下浏览器的页面，用鼠标滚轮滚动下，是不是可以查看距离的远近了。

如果控制单个问题的话，就对单个物体下手，先判断物理是否选中，如果物体聚焦了，鼠标滚动滚动，调整物理的距离就可以了。