Three.js tween camera.lookat

Question

I'm attempting to tween the camera.lookAt in Three.js using Tween.js with little success.

This works

    selectedHotspot = object;

    var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start();

But rotates the camera directly to the object.position.

How do I get a nice smooth rotation?

This is the render function

  function update() {

    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);

    target.x = 512 * Math.sin(phi) * Math.cos(theta);
    target.y = 512 * Math.cos(phi);
    target.z = 512 * Math.sin(phi) * Math.sin(theta);


    if(!selectedHotspot)
        camera.lookAt(target);


    renderer.render(scene, camera);

}

UPDATE

OK I can't actually tween the camera on anything. I think there must be something else wrong. Should there be something else in the render function?

Lymanlymann

You are not hooking up your update method anywhere? The reason it "works" is because it does nothing but actually SET camera.lookAt(...) to the end location. – Mirabel

Answer 1

I think your code should look something like this:

// backup original rotation
var startRotation = new THREE.Euler().copy( camera.rotation );

// final rotation (with lookAt)
camera.lookAt( object.position );
var endRotation = new THREE.Euler().copy( camera.rotation );

// revert to original rotation
camera.rotation.copy( startRotation );

// Tween
new TWEEN.Tween( camera ).to( { rotation: endRotation }, 600 ).start();

Ilyse

Thank you. It still goes straight there, no nice tween. Any ideas? – Lymanlymann

Should it be new TWEEN.Tween(camera.rotation).to({x: endRotation.x, y: endRotation.y, z: endRotation.z}, 500).start() now? – Quintessence

Answer 2

Quaternion version of mrdoob's answer

// backup original rotation
var startRotation = camera.quaternion.clone();

// final rotation (with lookAt)
camera.lookAt( lookAt );
var endRotation = camera.quaternion.clone();

// revert to original rotation
camera.quaternion.copy( startRotation );

// Tween
var lookAtTween = new TWEEN.Tween( camera.quaternion ).to( endRotation, 600 ).start();

Lamanna

Works very well on three.js 0.98. – Pescara

Was experiencing a weird camera roll/unnecessary rotation with the accepted answer, but not with this quaternion solution. Thank you! – Roxana

This works well, the only problem is that the camera snaps back to its original starting position when clicking on another element to which the camera must animate afterwards. – Magi

Answer 3

For a positional tween (but you get the gist) I am using this code which does have a duration parameter and does move the camera smoothly:

function setupTween (position, target, duration)
{
    TWEEN.removeAll();    // remove previous tweens if needed

    new TWEEN.Tween (position)
        .to (target, duration)
        .easing (TWEEN.Easing.Bounce.InOut)
        .onUpdate (
            function() {
                // copy incoming position into capera position
                camera.position.copy (position);
            })
        .start();
}

and I call it like so:

setupTween (camera.position.clone(), new THREE.Vector3 (x, y, z), 7500);

to get a 7.5 seconds smooth tween.

Rutheruthenia

Answer 4

Thanks all,

I gave up trying to tween the camera and instead added

if (target.y < selectedHotspot.position.y - 2)
        lat += 0.1;
    else if (target.y > selectedHotspot.position.y + 2)
            lat -= 0.1; 

    if (target.x < selectedHotspot.position.x - 5)
        lon += 0.5;
    else if (target.x > selectedHotspot.position.x + 5)
        lon -= 0.5;
    else {

        camera.lookAt(selectedHotspot.position);

        if (camera.fov > selectedHotspot.bubble.distance*0.05){
            camera.fov -= 0.1;

        }
        if(sceneReady)
            loadScene();
    }

    camera.updateProjectionMatrix();

To a function called in the render loop. This works well.

Lymanlymann

Answer 5

I use controls.target to tween camera'rotation and it work well.

createjs.Tween.get(controls.target)
.to({
  x: tweenPos.x,
  y: tweenPos.y - 11,
  z: tweenPos.z + 0.001
}, 800,createjs.Ease.linear);

Monstrosity