Three.jsを使用してローカルX軸でカメラXを回転させます

Question

私はThree.jsと新しい3D空間エンジンに慣れています。私が達成しようとしているのは360の等角度画像ビューアです。

これまでのスクリプトでは、0,0,0のカメラと同じ位置の球面メッシュを作成し、法線を反転させ、360度の画像の放射マップを作成しました。 Blenderのビューポートを使用して、シーンの

表現。ユーザは、私はカメラのY軸（青）とX軸（赤）に回転量を算出ドラッグ機能を作成したマウスリスナーを使用して、マウスのドラッグやキーボードの矢印キーを使用してカメラを回転させるために有効にされるべきである

各レンダリングフレームで。次のように私はまた、X（ユーザが後方に回転できませんでした）上で最小および最大回転制限を作成した：sp​​eedXかつ迅速に各軸に回転量を表す

var render = function() { 
    requestAnimationFrame(render); 

    if((camera.rotation.x < Math.PI/6 && speedX >= 0) || (camera.rotation.x > -Math.PI/6 && speedX <= 0)) 
     camera.rotation.x += speedX * (Math.PI/180); 
    camera.rotation.y += speedY * (Math.PI/180); 

    renderer.render(scene, camera); 
}; 

。

これまでのところ、回転座標は世界に関連し、カメラ自体ではないので、X回転はカメラを野生にします。なぜなら、Y軸で数回転した後、カメラのX軸はもはや世界のX軸と同じではありません。

最後に私の質問は、各フレームで自分のX軸にカメラを回転させることですか？あなたがカメラの回転がヨー（見出し）、ピッチ、ロールの面で意味を持つようにしたい場合は

Answer 1

は、あなたが設定する必要が：

camera.rotation.order = 'YXZ'; // default is 'XYZ' 

は、詳細については、this stackoverflow answerを参照してください。

three.js r.82