Mouse移動時にThree.jsシーンを回転させる

Question

シーンを再調整して、マウスがDOM上を移動する際に、水平方向および/または垂直方向に回転させる必要があります。私は、シーンにrotation.yプロパティをchangindことにより、水平方向の回転を行うことができました：

const step = 0.005; 

let halfWindowWidth = window.innerWidth/2; 
let target = (Math.PI/halfWindowWidth * mouseX/2) - 0.785398; 

if (target < y) { 
    if (y - (step * 2) > target) { 
     target = y - (step * 2); 
    } 
} else if (target > y) { 
    if (y + (step * 2) < target) { 
     target = y + (step * 2); 
    } 
} 

scene.rotation.y = target; 

私は多分、私はそれが垂直方向に回転させるためにXとZ軸上で動作する必要があることを知っているが、私は何を知りません計算を行う必要があります。

マウスがDOMの中心からさらに90°から90°（合計180°）進むと回転が行われます。 step定数私は回転をアニメーション化し、マウスがあまりにも速く動いたときにジャンプすることはありません。

Answer 1

が異なるマウスコントロールの他の例であるが、これらの両方は、カメラが回りに回転できるように、以下の例

http://threejs.org/examples/#misc_controls_orbit http://threejs.org/examples/#misc_controls_trackball

を見てみましょうマウスホイールを使用してズームインしたりズームアウトしたりすることができます。主な違いは、OrbitControlsがカメラを上方向に強制し、TrackballControlsがカメラを上に回転させることですサイドダウン。

あなたがしなければならないのは、HTMLドキュメント

<script src="js/OrbitControls.js"></script> 

のコントロールが含まれており、シーンを回転させる必要はありません、あなたのソース

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