CODEWITHSUNDEEP
three.js
Kosha Misa
Kosha Misa

Reputation: 351

OrbitControl or TrackballControl

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), but I also need to set sometimes a new camera position/rotation by hand. And this doesn't really work.

My workaround is to disable the trackballcontrols, get the quaternions-object of the new position, apply these to camera.up and then enable the camera

But as mentioned, this doesn't really work stable.

I read that OrbitControls could be a better solution for such a task. But OrbitControls has a "limit" on vertical rotation of objects and I need to rotate my objects without limits.

So my questions are:

1. Which Controls System is more suitable for my task

2. If it's Trackball - how would you set manually a new camera position and rotation? And if it's Orbit - is there a way to disable this vertical rotation limit?

Thanks a lot!!

Regards - Misa

Upvotes: 13

Views: 16134

Answers (2)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 32

user1902830
user1902830

Reputation:

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...

Upvotes: 1

Related Questions