Curso de Animaciones 3D en la Web

Aprende a pensar en escena, cámara, malla, geometría y material para dejar de tratar Three.js como un CSS con eje Z. Esta lección te da el vocabulario base y te lleva a una primera escena mínima en React Three Fiber.

Aprende a usar `gsap.to()`, `gsap.from()`, `gsap.set()` y `timeline()` para animar objetos 3D con intención. La meta no es mover por mover, sino secuenciar entradas, énfasis y respiración visual en una escena R3F.

Aprende a configurar `Canvas`, `PerspectiveCamera`, FOV, clipping planes y `frameloop="demand"` con criterio de producción. La meta no es solo ver un objeto 3D, sino decidir cómo se encuadra, cuándo se renderiza y por qué esa decisión importa en UX y rendimiento.

Aprende a usar `ScrollTrigger` con `scrub`, `pin` y una estructura de secciones que convierta el desplazamiento en narrativa visual. La meta no es fijar un canvas porque sí, sino decidir cuándo una escena debe quedarse en pantalla y cómo repartir el viaje para que el usuario entienda qué está ocurriendo.

Aprende a dividir una landing 3D en capítulos, definir presets de cámara y sincronizar rotaciones de modelo con cambios de sección. La meta no es mover la cámara por gusto, sino construir continuidad visual entre hero, detalle, argumento y cierre.

Aprende a combinar luces básicas, un entorno HDR y partículas optimizadas con `InstancedMesh` para que la escena gane atmósfera sin convertirse en un gasto de GPU injustificado. La meta es iluminar con intención y usar detalle ambiental donde realmente aporta lectura.

Aprende a animar opacidad, color, `metalness` y `roughness` en materiales PBR para reforzar narrativa de producto, cambios de estado y jerarquía visual. La meta no es tocar parámetros al azar, sino dirigir cómo se percibe la superficie.

Aprende a usar uniforms en shaders para construir efectos de reveal, máscara y distorsión controlados por GSAP o por interacción. La meta no es escribir un shader enorme, sino entender el puente entre tiempo, GPU y dirección visual.

Aprende a separar estado de carga, estado de interfaz y estado de escena con Zustand para que una experiencia 3D compleja siga siendo mantenible. La meta no es añadir otro store por moda, sino evitar dependencias circulares y entradas con flicker.

Aprende a optimizar para móvil con reducción de densidad, control de DPR, `frameloop="demand"`, `InstancedMesh` y `View` de Drei para múltiples escenas en un solo canvas. La meta es diseñar recortes inteligentes, no mutilar la experiencia sin criterio.

Aprende a situar WebGPU y TSL dentro del stack real de Three.js y R3F en 2026. La meta no es migrarlo todo por hype, sino entender cuándo merece la pena explorar `WebGPURenderer`, qué aporta TSL y cómo conviven todavía con WebGL.

Aprende a integrar asistentes de IA en un flujo real de GSAP + Three.js + R3F para idear escenas, depurar animaciones, generar prompts de assets y revisar bloques de código. La meta no es delegar a ciegas, sino construir un pipeline de trabajo mejor.

Reúne en una sola lección seis patrones reales del curso para aprender cuándo conviene usar microinteracciones magnéticas, escenas orbitales, morph tipográfico, scroll editorial, olas de partículas y trazados SVG antes de construir el proyecto final.

Construye la arquitectura de una landing e-commerce 3D con hero, capítulos scroll-driven, materiales dirigidos, carga coordinada, optimización móvil y cierre orientado a conversión. La meta es integrar todo el curso en una pieza coherente, no sumar efectos sueltos.