Control de Cámara para Animaciones en Three.js

En Three.js, las animaciones de cámara se logran manipulando la posición y la orientación del objeto cámara. Dos métodos clave son la propiedad .position para definir la ubicación y el método .lookAt() para indicar el punto de enfoque.

Uso de .lookAt() y .position

El método .lookAt() ajusta la dirección de la cámara hacia un objetiov, actualizando la rotación de la vista. Debe llamarse después de establecer la posición, y si la posición cambia, se requiere una nueva invocación para mantener el enfoque correcto.

La propiedad .position modifica exclusivamente la traslación de la cámara en el mundo 3D. Sin usar .lookAt(), la cámara se moverá sin alterar su dirección de visión, similar a desplazarse sin girar la cabeza.

Animación de Movimiento Lineal

Para desplazar la cámara en línea recta, se incrementa su posición en un eje específico y se reorienta constantemente hacia un objetivo. Esto simula un recorrido con vista fija.

function animarLineal() {
  const desplazamiento = 0.03;
  camara.position.x += desplazamiento;
  camara.lookAt(origen);
  renderizador.render(escena, camara);
  requestAnimationFrame(animarLineal);
}

En este ejemplo, la cámara avanza a lo largo del eje X y mantiene la vista en el punto de origen de la escena. El cambio gradual crea una animación fluida.

Animación de Movimiento Circular

Para un movimiento orbital, se calcula la posición usando funciones trigonométricas con un ángulo variable. La cámara circunda un centro mientras enfoca hacia él, generando un efecto de rotación del entorno.

let theta = 0;
const radioOrbita = 4;
const incrementoAngular = 0.015;

function animarCircular() {
  theta += incrementoAngular;
  camara.position.x = radioOrbita * Math.sin(theta);
  camara.position.z = radioOrbita * Math.cos(theta);
  camara.lookAt(origen);
  renderizador.render(escena, camara);
  requestAnimationFrame(animarCircular);
}

Aquí, la trayectoria circular se define por un radio y un ángulo que se actauliza en cada cuadro. La vista siempre se dirige al centro de la órbita.

Consideraciones Técnicas

• La sincronización entre .position y .lookAt() es esencial para comportamientos predecibles.
• En el bucle de animación, ambos componentes deben actualizarse continuamente si hay movimiento.
• El orden de operaciones importa: fijar la posición antes de llamar a .lookAt() evita cálculos incorrectos de la matriz de vista.
• Para animaciones más complejas, se pueden combinar múltiples ejes o usar interpolaciones.

Estas técnicas forman la base para crear experiencias inmersivas como recorridos virtuales o cámaras dinámicas en aplicaciones Three.js.