react vr中文網(wǎng)--www.vr-react.com

qq群：481244084

熟悉three.js的同學都知道，如果要實現(xiàn)鼠標滾動，只需要引入TrackballControls.js，就可以控制物體距離的遠近了，

controls = new THREE.TrackballControls( camera , renderer.domElement);

controls.minDistance=200;

controls.maxDistance=500;

但是在React VR里面就沒有這樣的組件可以用了，如果要實現(xiàn)通過鼠標滾輪來控制距離的遠近，可以按照下面的方法實現(xiàn)：

這里我們主要修改的地方是client.js，在Three.js的項目里面，首先我們需要創(chuàng)建相機，但是在React VR里面我們可以不用關(guān)心相機的問題，因為在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方法：

鼠標滾輪控制距離遠近

再次刷新下瀏覽器的頁面，用鼠標滾輪滾動下，是不是可以查看距離的遠近了。

如果控制單個問題的話，就對單個物體下手，先判斷物理是否選中，如果物體聚焦了，鼠標滾動滾動，調(diào)整物理的距離就可以了。