Controles de cámara
Dejando que el usuario explore
Hemos animado la cámara matemáticamente, pero la magia del 3D en la web es la interactividad. Queremos que el usuario pueda hacer clic, arrastrar para rotar el mundo, y usar la rueda del ratón para hacer zoom. Programar esto desde cero es una pesadilla matemática de quaternions y vectores.
OrbitControls al rescate
Three.js viene con un paquete de "addons" (ejemplos o complementos). El más famoso es OrbitControls. Este script toma el control de tu cámara y permite que "orbite" alrededor de un punto central automáticamente usando los eventos del ratón o los dedos en pantallas táctiles.
Damping (Inercia)
Si usas OrbitControls por defecto, al soltar el ratón la cámara se detiene de golpe, sintiéndose rígido y barato. Si activas controls.enableDamping = true, la cámara continuará deslizándose suavemente con inercia, dando una sensación premium y ultra suave.
Consejo profesional
Siempre restringe a tus usuarios. Si no pones límites en el OrbitControls (como maxDistance, minDistance o maxPolarAngle), el usuario podría hacer zoom infinito hacia atrás y perder tu escena en el vacío negro del universo.
Implementando OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 1. Instanciamos el control pasándole la cámara y el DOM element del renderer
const controls = new OrbitControls(camera, renderer.domElement);
// 2. Activamos el damping para la sensación premium
controls.enableDamping = true;
controls.dampingFactor = 0.05; // Ajusta la fricción
// 3. Restringimos al usuario (Buenas prácticas)
controls.enablePan = false; // Bloquear arrastre lateral
controls.minDistance = 2; // Zoom in máximo
controls.maxDistance = 10; // Zoom out máximo
controls.maxPolarAngle = Math.PI / 2; // Evitar que vea por debajo del suelo
function animate() {
requestAnimationFrame(animate);
// IMPORTANTE: Si usas Damping, DEBES actualizar los controles cada frame
controls.update();
renderer.render(scene, camera);
}Haz clic y arrastra. Usa la rueda del ratón. Observa la suavidad al soltar.
Errores comunes
Practica lo aprendido
Toma el control de la cámara.