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?

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

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

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.