Cada objeto 3D y la posición de la cámara se calculan de forma determinista según el número del frame, sin sorpresas al renderizar.
🌐 Qué es Three.js en el contexto de Remotion
Three.js es la biblioteca de JavaScript más usada para crear gráficos 3D en la web vía WebGL. En el contexto de Remotion, transforma escenas tridimensionales en fotogramas de video: cada fotograma es un renderizado estático calculado a partir del número del fotograma.
✗ Sin Three.js
- ✗Las escenas 3D requieren software especializado (Blender, Cinema 4D, After Effects + plugins).
- ✗Flujo cerrado: exportar, reimportar, volver a renderizar con cada cambio.
- ✗Difícil de versionar y prácticamente imposible de automatizar mediante prompts.
✓ Con Three.js + Remotion
- ✓Escena 3D descrita en código: Claude la genera y tú iteras en la misma sesión.
- ✓El frame N siempre genera la misma imagen: render determinista, sin artefactos.
- ✓Versionable en git, parametrizable, reutilizable como componente de React.
🎯 Casos de uso: cuándo el 3D resuelve problemas
Three.js destaca en tres tipos de escena que serían poco prácticos con CSS o SVG animado: rotación de producto, recorrido por el entorno e animaciones explicativas con perspectiva real.
Rotación de producto
Un modelo 3D de producto que gira lentamente con iluminación limpia. Claude genera la geometría, configura la luz y vincula la rotación al recuento de frames. Resultado: render sólido, luz consistente, movimiento suave — en un único prompt.
Recorrido por un entorno
La cámara recorre un espacio 3D siguiendo una curva paramétrica: arquitectura, infografía espacial, visualización de datos en 3D. La cámara orbita a medida que avanza el fotograma.
Animaciones explicativas
Los objetos explotan en partes, las moléculas se ensamblan y las estructuras de datos se forman en 3D. La perspectiva real transmite una profundidad que el CSS plano no puede lograr.
🧪 La prueba de calidad de Three.js
Para evaluar la calidad de un resultado de Three.js, dale a Claude un modelo 3D y pídele una rotación lenta con órbita de cámara. El resultado esperado: iluminación limpia, movimiento suave y un render sólido sin parpadeos, todo a partir de un solo prompt.
Crie uma composição Remotion com Three.js: - Um cubo com material MeshStandardMaterial - Rotação lenta no eixo Y ligada ao frame count - Câmera em órbita circular com raio=5, altura=2 - Luz direcional limpa + luz ambiente fraca - Render determinístico: frame N → mesma imagem
💡 Qué evaluar en el resultado
- •Iluminación limpia: sombras suaves, sin highlights sobreexpuestos.
- •Movimiento suave: rotación proporcional al fotograma — sin saltos.
- •Renderizado sólido: sin parpadeos ni z-fighting entre caras.
⚖️ Vanilla Three.js vs React Three Fiber
Hay dos caminos para usar Three.js en Remotion: el Vanilla Three.js (control directo del pipeline WebGL) y el React Three Fiber (R3F) (wrapper React con JSX para 3D). La elección importa para el render determinista.
| Criterio | Vanilla Three.js | React Three Fiber |
|---|---|---|
| Control del pipeline | Directo (scene/camera/renderer) | Vía JSX + reconciler |
| Timing determinista | Preciso — vinculado al frame | Puede introducir inconsistencias |
| Confiabilidad de Claude | Alta (API bien documentada) | Menor (abstracción adicional) |
| Composición en 2D | Manual | Natural (JSX + hooks Remotion) |
| Cuándo usar | Escenas simples y concisas | Complejidad que requiere componentes |
🔷 Recomendación
Usa Vanilla para escenas 3D simples y acotadas — Claude genera vanilla con mayor fiabilidad porque la API está bien documentada y tiene una base sólida en el entrenamiento. Reserva el R3F para cuando la complejidad requiere composición en componentes e integración con capas 2D de Remotion.
🏗️ El pipeline Three.js → Remotion
El flujo de Three.js dentro de Remotion sigue cuatro etapas: crear la escena, posicionar la cámara, calcular el estado según el número de frame y renderizar el frame en el canvas. Cada etapa es pura, sin efectos secundarios externos.
💡 La clave del determinismo
La posición de cada objeto 3D y la posición de la cámara se calculan como funciones puras del número de frame. No hay estado de física ni interacción del usuario: solo matemáticas. Eso es lo que garantiza que el render sea idéntico en cualquier máquina.
📐 Buenas prácticas de Three.js con Claude
Los prompts de Three.js funcionan mejor cuando describe la geometría, el material y el movimiento por separado. Claude entiende mejor cuando la instrucción es física («cubo rotando» o «cámara orbitando») que cuando es abstracta («haz que parezca dinámico»).
✗ Prompt vago
- ✗"Crea una animación 3D genial con objetos."
- ✗"Haz que parezca que está volando por el espacio."
- ✗Sin especificar geometría, material o iluminación.
✓ Prompt específico
- ✓"Esfera con MeshPhongMaterial, rotación Y = frame × 0.015."
- ✓"Cámara en la posición (0,2,5), mirando hacia el origen."
- ✓"DirectionalLight en (1,2,3) con intensidad 1.5."
🔷 Iterar en la misma sesión
Three.js es una biblioteca donde la iteración rápida dentro de la misma sesión vale mucho la pena. Claude mantiene el contexto de la escena y puedes ajustar la iluminación, la cámara y la geometría con prompts de seguimiento sin reescribirlo todo.
📌 Resumen del módulo
Siguiente módulo:
2.5 — Lottie: el camino más rápido del prompt a una salida utilizable.