この質問が出されてからしばらく経ちましたが、同じ問題に遭遇し、オンラインであまり議論がなかったので、解決策を投稿すると思いました.
TrackballControls を使用する必要があり、水平線を水平にしたい場合は、「this.rotateCamera」メソッドの末尾に次の行を追加して、TrackballControls.js ライブラリを編集するだけです。
this.object.up = new THREE.Vector3(0,1,0);
これにより、カメラの上方向が (0,1,0) 方向 (つまり、y 方向) にロックされます。変更されたメソッド関数全体は、次のようになります。
this.rotateCamera = function () {
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
if ( angle ) {
var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();
quaternion = new THREE.Quaternion();
angle *= _this.rotateSpeed;
quaternion.setFromAxisAngle( axis, -angle );
_eye.applyQuaternion( quaternion );
_this.object.up.applyQuaternion( quaternion );
_rotateEnd.applyQuaternion( quaternion );
if ( _this.staticMoving ) {
_rotateStart.copy( _rotateEnd );
} else {
quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
_rotateStart.applyQuaternion( quaternion );
}
}
// Lock the camera up direction
this.object.up = new THREE.Vector3(0,1,0);
};