CODEWITHSUNDEEP
three.js
pete80
pete80

Reputation: 545

three.js trackball control without the roll

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?

Upvotes: 11

Views: 3585

Answers (3)

Magnus
Magnus

Reputation: 370

To build upon WestLangley comment, enabling screenSpacePanning on OrbitControls, gives you equivalent functionality to TrackballControls without roll.

  let controls = new THREE.OrbitControls(camera);
  controls.screenSpacePanning = true;

Upvotes: -1

Daniel Kocevski
Daniel Kocevski

Reputation: 381

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

};

Upvotes: 5

geedew
geedew

Reputation: 1388

This seems to work for me, working on the math behind it still. [edit] I use camera.lookAt(someObj) first, then this.

camera.rotation.z = Math.sin(camera.rotation.y)/3.5

Upvotes: 0

Related Questions