OrbitControl or TrackballControl

Question

I\'ve read a lot about these 2 controls and currently I\'m using TrackballControls.

I need to rotate an object along all three axis (Both controls already do that),

Answer 1

To force TrackballControls' to rotates only horizontal, find the implementation of function getMouseProjectionOnBall and add a single line:

var getMouseProjectionOnBall = (function() {
    var vector = new THREE.Vector3();
    var objectUp = new THREE.Vector3();
    var mouseOnBall = new THREE.Vector3();

    return function(pageX, pageY) {
      mouseOnBall.set(
        (pageX - _this.screen.width * 0.5 - _this.screen.left) / (_this.screen.width * 0.5),
        (_this.screen.height * 0.5 + _this.screen.top - pageY) / (_this.screen.height * 0.5),
        0.0);

      mouseOnBall.setY(0); // add this

      var length = mouseOnBall.length();

I'm still working on limit the angle in a range rather than disabling it...

Answer 2

First of all, TrackballControls and OrbitControls rotate the camera, not the objects.

Second, OrbitControls enforces the camera up direction, and TrackballControls allows the camera to rotate upside-down.

TrackballControls has a reset() method, which restores the target (center of rotation), camera position, and camera up vector to their original settings.

controls.reset();

The above code will restore the original position, target, and up vector. You can change those too, if you want, before you call controls.reset().

controls.position0.set( 0, 0, 10 ); // set a new desired position
controls.target0.set( 0, 0, 0 ); // set a new target
controls.up0.set( 0, 1, 0 ); // set a new up vector
controls.reset();

Read the reset() function source code so you understand what it is doing.

EDIT: OrbitControls now has a reset() method, too. Check the source code.

three.js r.82