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

滑鼠滾輪控制距離遠近

再次重新整理下浏覽器的頁面，用滑鼠滾輪滾動下，是不是可以檢視距離的遠近了。

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