How to tween a camera to an object in three.js?

Question

I've created some objects in my scene, and set up raycasting/tweening code so that whenever I click on an object, the object animates directly to the position and rotation of the camera.

This is my code for raycasting/tweening the object:

function onDocumentMouseDown( event ) {

            event.preventDefault();

            mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

            raycaster.setFromCamera( mouse, camera );

            var intersects = raycaster.intersectObjects( scene.children );

            if ( intersects.length > 0 ) {

                new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
                    x: 0,
                    y: 0,
                    z: -100 }, 2000 )
                .easing( TWEEN.Easing.Elastic.Out).start();

                new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
                    x: 0,
                    y: 0,
                    z: 0 }, 2000 )
                .easing( TWEEN.Easing.Elastic.Out).start();
                object.lookAt.camera;

            }
        }

However, I was wondering, how can I make the tween animate the camera to the object, rather than the object to the camera? I want to do this because I want the objects to be constantly rotating and moving around the scene, and would like the camera to be able to stay on and track individual objects.

This is all in perspective camera, by the way.

score 0 · Answer 1 · answered Dec 07 '16 at 07:55

Let's assume you are using OrbitControls.js to control your camera.
What you need to do then is set the controls target by controls.target = new THREE.Vector3(0, 0, -100); to the center of you object(or tween it). You are setting your objects rotation to (0, 0 ,0), so let's say you want to look at your object from top, you set your camera position to (0, 10, -100) - same as you target, just offset in the direction you want to be looking form.
Assuming your objects rotation is not (0, 0 ,0), you need to calculate its forward vector (or any other vector you want to be looking at it from), and put the camera position somewhere along the axis of this vector.

score 0 · Answer 2 · answered Dec 16 '16 at 23:57

I am trying to do something similar, here is what i have so far but struggling with getting the objects face direction vector

function toObj(obj) {

var lookAtVector = new THREE.Vector3(0, 0, 1);
lookAtVector.applyQuaternion(obj.quaternion);
console.log(lookAtVector);
var rotateTween = new TWEEN.Tween(controls.target)
    .to({
        x: obj.position.x,
        y: obj.position.y,
        z: obj.position.z
    }, 4000)
    .interpolation(TWEEN.Interpolation.CatmullRom)
    .easing(TWEEN.Easing.Quintic.InOut)
    .start();

var goTween = new TWEEN.Tween(camera.position)
    .to({
        x: obj.position.x,
        y: obj.position.y,
        z: obj.position.z + 10
    }, 4000)
    .interpolation(TWEEN.Interpolation.CatmullRom)
    .easing(TWEEN.Easing.Quintic.InOut);

goTween.start();
goTween.onComplete(function() {
    console.log('done!');

});

}

you will need to add controls = new THREE.TrackballControls(camera);

How to tween a camera to an object in three.js?

2 Answers2