Orbit Controls update after camera Tween

Questions
, ,
1

Hey everyone,
I’m working on smooth camera tweening to an object on click. I’m able to navigate to the object smoothly but after the update when orbit controls get updated the controls won’t start from the tweened position, it starts somewhere from the origin or so. How to get orbit controls to work smoothly after tweening is done?
Here is my tween function

function tweenTheCamera( targetPosition, duration ) {
    // controls.enabled=false;
    position = new THREE.Vector3().copy( camera.position );
    var startRotation = new THREE.Euler().copy( camera.rotation );
    camera.lookAt(targetPosition);
    var endRotation = new THREE.Euler().copy( camera.rotation );
    TWEEN.removeAll();
    new TWEEN.Tween( position )
        .to( {x:targetPosition.x,y:targetPosition.y+20,z:targetPosition.z} , duration )
        .onUpdate( function () {
          console.log("on update?");
            camera.position.copy( position );
            new TWEEN.Tween(startRotation).to({x: endRotation.x, y: endRotation.y, z: endRotation.z}, 500).start();
        } )
        .onComplete( function () {
          camera.position.copy( position );

          // controls.update();
        } )
        .start();
    
    }

If I update orbit controls while tweening it doesn’t give me a smooth effect. With the above code camera tweens smoothly to the target object but when orbit controls start it doesn’t pick up from there. I tried enabling disabling controls and also save and reset. Any help is appreciated. Thanks.

1 Like
2

Maybe it’s easier to implement this with GSAP: https://jsfiddle.net/xbor2z1L/1/

controls.update(); is called in onUpdate() to make sure the camera focuses the target (which is the origin in this case).