three.js trackball control without the roll

Question

Does anybody know if/how the trackball control can be modified to keep the horizon level but still allow you to rotate around and over an object?

By setting axis.x and axis.z to 0 it stops the roll but also stops the ability to rotate over the object.

The orbit control is close to what I am looking for but does not have the ability to pan.

Any help?

Answer 1

It's been awhile since this question was asked, but I ran into the same problem and didn't find much discussion online, so I thought I'd post my solution.

If you must use TrackballControls and you want to a flat horizon, you can simply edit the TrackballControls.js library by adding the following line to the end of the 'this.rotateCamera' method

this.object.up = new THREE.Vector3(0,1,0); This locks the camera up direction in the (0,1,0) direction (i.e in the y direction). The entire modified method function would then read:

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);

};