Cámaras
¿Qué es una Cámara?
En la vida real, lo que ves de una habitación depende de dónde estás parado y a dónde apuntas tus ojos. En Three.js, la Cámara es el ojo humano. Todo lo que esté delante de ella y dentro de su rango de visión, será dibujado en la pantalla.
PerspectiveCamera vs OrthographicCamera
Existen dos tipos principales de cámara, y elegir una u otra cambia drásticamente cómo se siente tu experiencia web:
1. PerspectiveCamera (La Realista)
Imagina que estás en una autopista. Los coches que están cerca se ven grandes, y los que están lejos se ven pequeñitos hasta desaparecer en el horizonte. Esa es la perspectiva. Esta cámara imita cómo funciona el ojo humano y se usa en el 95% de las experiencias 3D.
2. OrthographicCamera (La Técnica)
Imagina un juego isométrico (como SimCity clásico o Monument Valley). El tamaño de los objetos se mantiene constante sin importar qué tan lejos estén. Es ideal para interfaces de usuario en 3D, mapas arquitectónicos o juegos de estrategia.
Parámetros de PerspectiveCamera
Cuando creas tu cámara: new THREE.PerspectiveCamera(fov, aspect, near, far), le estás pasando cuatro datos vitales:
- FOV (Field of View): Campo de visión en grados. Como hacer zoom con una lente. 75 es lo estándar. Un FOV muy alto (120) crea efecto ojo de pez.
- Aspect Ratio: La relación de aspecto (ancho dividido por alto de tu pantalla). Si no coincide con tu pantalla, todo se verá aplastado.
- Near y Far: Es el rango de renderizado. Los objetos más cerca del valor "near" (ej. 0.1) o más lejos del "far" (ej. 1000) no se dibujarán. Esto se llama "clipping" y ahorra memoria.
Consejo profesional
Si sientes que tus objetos desaparecen misteriosamente cuando se acercan mucho a la pantalla o cuando se alejan demasiado, revisa los valores Near y Far de tu cámara. Aumentar el 'far' a 10000 te dará más profundidad, pero bajará el rendimiento.
Posicionando la cámara en el espacio
const fov = 75;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
// Crear cámara
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// Posicionar la cámara
// [x: izquierda/derecha, y: arriba/abajo, z: adelante/atrás]
camera.position.set(2, 2, 5);
// IMPORTANTE: Por defecto, la cámara mira hacia -Z.
// Si la movimos, debemos ordenarle que mire de nuevo al centro.
camera.lookAt(0, 0, 0); // O camera.lookAt(scene.position);Una cámara moviéndose en órbita alrededor de un objetivo central.
Errores comunes
Practica lo aprendido
Juega con la posición de la cámara y su punto de enfoque.