Three.js: 3D en el navegador
Escenas, cámaras y movimiento con WebGL — cada ejercicio se puede jugar de verdad, con tu propio código.
17 aulas · 11 horas de práctica · en el navegador, sin instalar nada
Temario
- Escena, cámara y renderer — El trío sin el que no hay nada que ver: una Scene donde viven los objetos, una Camera desde donde se los mira, y un WebGLRenderer que dibuja lo que la cámara ve.
- Geometrías y mallas — La escena ya no está vacía: BoxGeometry y SphereGeometry son la forma, un Mesh las combina con un material, y scene.add() es lo único que hace falta para que dejen de ser invisibles.
- Materiales y luces — MeshBasicMaterial se ve sin luz porque no le importa la luz. MeshStandardMaterial sí reacciona a ella — y eso significa que, sin ninguna luz en la escena, se ve completamente negro.
- Transformaciones — Todo lo que cuelga de una Scene es un Object3D, y todo Object3D comparte las mismas tres propiedades: position (dónde está), rotation (hacia dónde mira) y scale (qué tamaño tiene). Cambiarlas cuadro a cuadro es lo que hace que algo se mueva.
- Taller 1: armá tu vitrina y explorala — Todo lo del Bloque 1 junto: formas, materiales, luz y transformaciones para armar una escena — y un mecanismo nuevo, la cámara orbitando alrededor de un punto, para poder recorrerla con el teclado.
- El loop de animación con dt fijo — Por qué una animación de verdad se mueve con el tiempo y no con los cuadros, y cómo se corrige algo que corre "para siempre" sin esperar un reloj real: llamando la función de actualización un número fijo de veces, con un dt fijo.
- Vectores — Ya viste que `position` es un Vector3 (aula 1) y que actualizar con dt fijo es cómo se anima de verdad (aula 5). Ahora se combinan: una DIRECCIÓN es un vector, y moverse en esa dirección a velocidad constante necesita normalizarlo antes de escalarlo — si no, ir en diagonal es más rápido que ir derecho. Con eso se controla una nave de verdad, con el teclado.
- Grupos y jerarquías — Un objeto puede ser padre de otro: su position deja de ser "un lugar en el mundo" y pasa a ser "un lugar relativo al padre". Girar al padre mueve a todos sus hijos con él — es la forma en que Three.js hace órbitas sin que nadie calcule seno ni coseno a mano.
- Taller: nave con torreta — El taller que junta las tres aulas anteriores: una nave que se mueve por vector (aula 6), con una torreta que es su HIJA y gira con su propio eje (aula 7), animado con dt fijo (aula 5) — y esquivando asteroides que se mueven solos. Se controla con el teclado de verdad.
- Cámara y laberinto — Hasta ahora la cámara se movía a mano, línea por línea. Ahora se mueve sola, en cada cuadro, según lo que el jugador aprieta: girar con rotation.y, avanzar con translateZ en la dirección hacia la que mira.
- Raycasting: cazafantasmas — Un Raycaster tira una línea recta desde un punto en una dirección y te dice con qué se cruza primero. Es cómo se resuelve "¿a qué le está apuntando la cámara?" — la base de cualquier interacción por mira o por click.
- Colisiones por distancia — La forma más simple de saber si dos cosas "se tocan" en 3D no mira mallas ni triángulos: mira la distancia entre sus centros contra la suma de sus radios. Es la misma cuenta detrás de casi cualquier choque en un juego.
- Taller — Mini-nivel interactivo — Las tres aulas anteriores enseñaron por separado: caminar mirando hacia donde apuntás (Aula 8), preguntarle a un rayo qué toca (Aula 9), y decidir si dos cosas se tocan por su distancia (Aula 10). Este taller las junta en un mini-nivel real: caminás, esquivás un obstáculo que se mueve solo, y capturás objetivos con la mira — pero solo si están a tu alcance.
- Texturas — Cómo cambiar el aspecto de un objeto sin tocar su geometría: el color de un material se edita en caliente, y el lugar donde va una imagen (`map`) se puede dejar preparado sin esperar a que ninguna imagen cargue.
- Sombras — Una sombra no es un objeto — es un acuerdo entre tres roles: quién manda luz, quién la tapa, y quién la recibe. Los tres se declaran con propiedades booleanas, una por objeto.
- Composición procedural — Un objeto complejo casi nunca es UNA malla — es un `Group` con varias mallas adentro, y cuando esas mallas se parecen entre sí (los rayos de una rueda, los postes de una cerca), no se ponen una por una: se generan con un `for`.
- Taller final — Cinturón de asteroides — El cierre: una nave que se mueve con aceleración y fricción de verdad, un cinturón de asteroides fijos, y una colisión que se recalcula entero en cada cuadro — nada de banderas que se prenden y nunca se apagan.