En Three.js, ¿cómo puedo cambiar de una cámara a otra, idealmente con una transición/interpolación suave?
Supongamos que nuestra escena tiene dos objetos, una roca y un árbol. Para cada objeto, hay una cámara dedicada configurada para mirarlo. Quiero poder hacer una transición fluida entre esas dos cámaras.
PD: Para evitar cualquier confusión, mi configuración tiene dos cámaras, pero una ventana de visualización.
Ejemplo:
// 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);Utilice una cámara e interpole entre la posición/rotación inicial y la posición/rotación a lo largo del tiempo. p.ej:
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 es un valor de punto flotante que está en el rango [0.0, 1.0]. Cambia el valor con el tiempo y cambia la cámara en cada cuadro:
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);Necesitas cambiar un poco tu perspectiva sobre la cámara.
La cámara es lo que renderiza en el lienzo, por lo que no hay forma de realizar una transición fluida al cambiar entre 2 cámaras con posiciones diferentes.
En lugar de tener rockCamera y treeCamera . Podrías cambiarlo en objetos vacíos, rockObject y treeObject . Y utilícelo como pivote de posición para interpolar su cámara principal.
Una cosa que podría ayudarlo con la interpolación de la cámara es usar el motor de interpolación como Tween.js.
Aquí hay un ejemplo https://sbcode.net/threejs/tween/
Si está buscando crear una transición donde (a) en algún momento, se renderiza la cámara del árbol; (b) en algún momento posterior, se renderiza la cámara de roca; y (c) en algún momento intermedio, se procesan bits de ambas cámaras, luego querrá usar el procesamiento posterior . Three.js proporciona un ejemplo de este tipo de transición; ese ejemplo usa dos escenas diferentes, pero modificarlo para usar una escena con dos cámaras es trivial.