How to use TWEEN to animate the camera's position

Question

function moveCameraTo(position, duration) {
           var tween =  new TWEEN.Tween( camera.position )
                .to( position, duration )
                .easing(TWEEN.Easing.Linear.None)
                .onUpdate(function () {
                    camera.position = new THREE.Vector3().copy(position)
                    camera.lookAt({x:0,y:0,z:0})
                })
                .onComplete(function () {
                    camera.lookAt({x:0,y:0,z:0})
                })
                .start()
        }

I use this method to move the camera to a specific position, and it moves the camera correctly at the beginning. Then the TrackballControls does not work, and there is an error in the console.

TrackballControls.js:318 Uncaught TypeError: _this.object.position.addVectors is not a function
at THREE.TrackballControls.update (TrackballControls.js:318)
at animate ((index):456)

Free tips: (1) Do not call `new` in a tight loop. Think how many `Vector3` objects are you instantiating. (2) The arg to `lookAt()` must be a `Vector3`. (3) `object.position = newValue` is not valid three.js code. Use `object.position.copy( value )` instead. — WestLangley, Jul 22 '17 at 17:38

score 5 · Answer 1 · answered Jul 22 '17 at 17:14

The camera's position is immutable, so you can't tween it directly.

However, you can use Tween to animate the camera's position by using a pattern like the one below. It is a good idea to disable the camera controls, if you are using one of them, and then reenable it on completion.

function tweenCamera( targetPosition, duration ) {

    controls.enabled = false;

    var position = new THREE.Vector3().copy( camera.position );

    var tween = new TWEEN.Tween( position )
        .to( targetPosition, duration )
        .easing( TWEEN.Easing.Back.InOut )
        .onUpdate( function () {
            camera.position.copy( position );
            camera.lookAt( controls.target );
        } )
        .onComplete( function () {
            camera.position.copy( targetPosition );
            camera.lookAt( controls.target );
            controls.enabled = true;
        } )
        .start();

}

var targetPosition = new THREE.Vector3( 10, 10, 10 );
var duration = 5000;

tweenCamera( targetPosition, duration );

Be sure to call TWEEN.update() in your animation loop.

three.js r.86

How to use TWEEN to animate the camera's position

1 Answers1