In Three.js, how can I switch from one camera to another, ideally with a smooth transition/tween?
Let's assume our scene has two objects, a rock and a tree. For each object, there is a dedicated camera set up to look at it. I want to be able to transition smoothly between those two cameras.
PS: To avoid any confusion, my setup has two cameras, but one viewport.
Example:
// Rock camera
const rockCamera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
rockCamera.rotation.x = THREE.MathUtils.degToRad(-50);
rockCamera.position.set(2, 13, 8,);
scene.add(rockCamera);
// Tree camera
const treeCamera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
treeCamera.rotation.x = THREE.MathUtils.degToRad(25);
treeCamera.position.set(7, 5, 12,);
scene.add(treeCamera);
Use one camera and interpolate between the start position/rotation and position/rotation over time. e.g.:
const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
camera.rotation.x = THREE.MathUtils.degToRad(-50);
camera.position.set(2, 13, 8,);
let pos0 = new THREE.Vector3(2, 13, 8);
let rot0 = new THREE.Vector3(THREE.MathUtils.degToRad(-50), 0, 0);
let pos1 = new THREE.Vector3(7, 5, 12);
let rot1 = new THREE.Vector3(THREE.MathUtils.degToRad(25), 0, 0);
w is a floating point value that in range [0.0, 1.0]. Change the value over time and change the camera in every frame:
let pos = new THREE.Vector3().lerpVectors(pos0, pos1, w);
let rot = new THREE.Vector3().lerpVectors(rot0, rot1, w);
camera.position.set(pos.x, pos.y, pos.z);
camera.rotation.set(rot.x, rot.y, rot.z);
You need to change you're perspective about the camera a bit.
The camera is what you render on the canvas so there is no way to smoothly transition by switching between 2 cameras with a different positions.
Instead of having rockCamera and treeCamera.
You could change it into empty objects, rockObject and treeObject.
And use it as position pivots to interpolate your main camera.
One thing that could help you with camera interpolation is using the tween engine like Tween.js.
Here is an example https://sbcode.net/threejs/tween/
If you're looking to create a transition where (a) at some time, the tree camera is rendered; (b) at some later time, the rock camera is rendered; and (c) at some time in between, bits of both cameras are rendered, then you'll want to use post-processing. Three.js provides an example of this kind of transition; that example uses two different scenes, but modifying it to use one scene with two cameras is trivial.