Tween an autoRotating camera (OrbitControls) from Point A to Point B

Questions
,
1

I have a scene in which there is a planet (earth) at position (0, 0, 0) with a radius of 100.

When the scene loads, the camera is positioned at (0, 0, 600) to make the planet appear to be further away, and after a few seconds the camera tweens to (0, 150, 200) to give the effect of the planet moving closer and being slightly cropped off the screen.

This works perfectly fine using Tween.js and the camera tweens to the exact correct position. However, I want the planet to appear to be rotating the whole time i.e. before, during, and after the tween, and so I am using OrbitControls with autoRotate set to true.

When I enable autoRotate, the camera tweens to a slightly wrong position which I assume is because autoRotate updates the x and z positions of the camera and so the tween is not moving from one exact position to another.

So my question is, how can I tween an autoRotating camera from one position to another correctly so that it ends up at the exact right coordinates and is rotating the entire time?

My animate function:

props.camera.animate = (duration = 2000) => {
    return new Promise((resolve, reject) => {

        let { x: croppedX, y: croppedY, z: croppedZ } = settings.camera.croppedPosition;

        let from = {
            x: props.camera.position.x,
            y: props.camera.position.y,
            z: props.camera.position.z,
            lookAtX: tools.orbit.target.x,
            lookAtY: tools.orbit.target.y,
            lookAtZ: tools.orbit.target.z
        }

        let to = {
            x: croppedX,
            y: croppedY,
            z: croppedZ,
            lookAtX: 0,
            lookAtY: croppedY,
            lookAtZ: -1
        }
        
        let tween = new TWEEN.Tween(from)
            .to(to, duration)
            .easing(TWEEN.Easing.Sinusoidal.InOut)
            .onUpdate(function() {
                props.camera.position.set(from.x, from.y, from.z);
                tools.orbit.target.copy(new THREE.Vector3(from.lookAtX, from.lookAtY, from.lookAtZ));
                tools.orbit.update();
            })
            .onComplete(function() {
                props.camera.position.set(to.x, to.y, to.z);
                tools.orbit.target.copy(new THREE.Vector3(to.lookAtX, to.lookAtY, to.lookAtZ));
                tools.orbit.update();

                resolve();
            })
            .start();
    });
};

Also welcome to any suggestions if repositioning the camera isn’t the best way to achieve the effect I’m looking for.

2

Correct, autoRotate will produce a certain amount of orbiting and thus interfere the animation of tween.js.

I’m not sure this can be easily achieved. At least I’m not aware of an out-of-the-box solution.

3

Hmm okay thanks, I guess I’ll have to come up with a solution. I feel like it shouldn’t be too difficult but at the same time I’m not really sure where to start… I’ll report back if I find something that works.