Cómo hacer una animación 3D con Claude y Three.js, sin modelar nada

Si llegaste comentando "3D", el prompt está más abajo, en su propia sección. Antes de copiarlo, lee qué es gratis y qué no: te ahorra una sorpresa.

Casi todos explicamos nuestro negocio igual: una diapositiva con viñetas que nadie recuerda. Yo también. Y cuando quería algo mejor, la respuesta siempre era la misma: contratar a alguien o aprender Blender.

Hace poco vi un reel que mostraba mundos 3D hechos con Three.js dentro de un chat y quise probarlo con algo concreto: un proceso completo de tostado y empaque de café. Salió una fábrica con camión, tostadora, bandeja de enfriado, línea de bolsas y un brazo robot. Ninguna pieza se modeló: todo es código.

Lo que más me sorprendió fue dónde estuvo lo difícil. No fue el 3D. Te lo cuento al final.

Qué es Three.js, en datos

Three.js es una librería de JavaScript para mostrar 3D en el navegador. Es gratuita y de código abierto, con licencia MIT. Tú no vas a escribirla: se la pides a Claude por su nombre y él escribe el código.

Eso cambia cómo funciona todo. En vez de modelar piezas a mano, cada máquina se describe con formas simples: cajas, cilindros y esferas. Por eso una frase tuya puede cambiar un color en todos los objetos a la vez.

Qué es gratis y qué no

Three.js es gratis. La herramienta con la que lo usas depende de tu plan, y el resultado también. Cuando escribo esto:

Tres avisos para que no te lleves una sorpresa:

• Claude Code no entra en el plan gratuito. Los Artifacts sí, con la opción "Cloud code execution and file creation" activada en Ajustes → Capacidades.
• El video lo hice con Claude Code. No probé estos prompts en Codex, así que allí el resultado puede variar.
• Remotion es gratis para personas y empresas de hasta 3 empleados. Las más grandes necesitan licencia.

Paso 1: elige tu camino

Si solo quieres ver tu proceso en 3D, usa el chat. No instalas nada y en una conversación tienes algo que abrir y enseñar.

Si quieres un video con voz, música y cortes, necesitas el camino del MP4. Ten instalado lo que explico en mi guía para crear videos con Claude y Remotion.

Paso 2: escribe tu proceso en orden

Antes de abrir Claude, anota cada etapa de principio a fin en una línea. Con cuatro o cinco basta:

1. Llega el camión con café verde y lo descarga
2. Se tuesta en un tambor
3. Se enfría en una bandeja giratoria
4. Se empaca en bolsas y se sella
5. Un brazo robot lo coloca en la tarima

Cada línea se convierte en una toma. Si una etapa no se entiende aquí, tampoco se va a entender en 3D.

Paso 3: pega el prompt y revisa

Copia la plantilla, cambia lo que va entre corchetes y envíala. Deberías ver una escena completa moviéndose: en el chat, en el panel lateral del Artifact; en Claude Code, en el Studio de Remotion.

Si sale en blanco o da error, no intentes arreglarlo tú. Pega el mensaje de error y escribe "corrige esto". Si ves algo pero no se mueve, dile qué esperabas ver.

Paso 4: corrige como director

La primera versión casi nunca es la buena, y aquí está el trabajo. Mira cada etapa y pregúntate si es verdad. Cambia una cosa por mensaje: "la cámara va demasiado rápido", "las bolsas deben ser más grandes", "este paso ocurre antes".

Cómo pedirlo bien

Nombra la herramienta. Si dices solo "hazme un video 3D", te puede responder con otra cosa. Di "usa Three.js".

Pide formas simples. Cajas redondeadas, cilindros y esferas se ven limpios. Pedir realismo es el camino más corto a algo que se ve falso.

Da una paleta corta. Con dos o tres colores el resultado parece diseñado. En la mía todo es gris, grafito y un verde esmeralda. Los únicos colores fuera de esa paleta son los del grano, porque ahí manda que se vea real: en negro, el café tostado parece quemado.

Pide cámara isométrica. Da aspecto de maqueta, y en una maqueta se entiende todo el proceso de un vistazo.

Di el formato desde el principio. Un reel vertical obliga a colocar la planta de otra forma. Yo la dispuse en zigzag para que entrara en 9:16.

No describas el dibujo, describe lo que pasa. "El camión levanta la caja y los granos caen al foso" funciona mejor que explicar cómo modelar un camión.

El prompt del video

Una aclaración honesta: la fábrica no salió de un solo mensaje. Salió de una petición corta y varias correcciones. Aquí junté todo lo que funcionó para que lo tengas desde el primer intento. La plantilla de chat es esa misma receta, adaptada a una sola página, así que cada intento te dará algo un poco distinto.

01 · La plantilla para tu proceso

Sirve en el chat de Claude y en Codex. Cambia lo que va entre corchetes.

Usa Three.js para crear una animación 3D de [tu proceso, por
ejemplo: cómo llega un pedido a la casa de un cliente].
 
Entrégala como una sola página HTML, sin modelos externos:
construye todo con formas simples (cajas redondeadas, cilindros
y esferas).
 
Estilo:
- Cámara isométrica ortográfica, como una maqueta.
- Mundo limpio sobre fondo claro, con sombras suaves.
- Paleta: [gris claro, grafito y un color de acento, con su hex].
- Sin degradados y sin texturas realistas.
 
Estas son las etapas, en orden:
1. [etapa 1]
2. [etapa 2]
3. [etapa 3]
4. [etapa 4]
5. [etapa 5]
 
Animación:
- Primero las piezas caen y se arma el mundo.
- Luego la cámara visita cada etapa y se ve funcionando.
- Muestra un rótulo corto con el nombre de cada etapa.
- Al final, plano general con todo en marcha, en bucle.
 
Formato vertical 9:16. Coloca las etapas en zigzag para que
todo el mundo quepa en pantalla.

02 · La fábrica de café

La misma plantilla, ya rellena con mi ejemplo.

Usa Three.js para crear una animación 3D del proceso de tostado
y empaque de café.
 
Entrégala como una sola página HTML, sin modelos externos:
construye todo con formas simples (cajas redondeadas, cilindros
y esferas).
 
Estilo:
- Cámara isométrica ortográfica, como una maqueta.
- Fondo #F1F2F4, máquinas en grafito #1C1E22 y blanco, acento
  verde #176B53. Sin degradados.
- El café crudo es verde pálido, casi amarillo (#BFC18F) y mate.
  El tostado es café oscuro (#4B2D1E) y brillante, no negro.
 
Etapas, en orden:
1. Un camión volquete descarga el café crudo en un foso.
2. Una banda lo sube a una tostadora de tambor. Por una ventana
   redonda se ven los granos cayendo y oscureciéndose.
3. Cae a una bandeja de enfriado con brazos que giran.
4. Otra banda lo lleva a una empacadora; las bolsas avanzan por
   estaciones de llenado, sellado y etiqueta.
5. Un brazo robot las coloca en una tarima.
 
Animación:
- Primero las piezas caen y se arma la planta.
- Luego la cámara visita cada etapa.
- Muestra un contador de temperatura hasta 205 °C en el tostado.
- Al final, plano general con todo en marcha, en bucle.
 
Formato vertical 9:16, con la planta en zigzag.

03 · La corrección que cambió todo

La frase que aparece en el video. Después de esto, todos los granos cambiaron de color.

El café crudo es pálido, casi amarillo. Cámbialo.

Corrígelo así, en una frase y con el dato real. Si no sabes el hex, describe el color. Claude busca uno.

04 · La clínica

Para probar el "cambia el café y sale otro mundo". Envíalo en la misma conversación, así conserva el estilo.

Con el mismo estilo, cámara y paleta, crea otro mundo: una
clínica. Quiero un edificio con helipuerto y un helicóptero que
aterriza, una ambulancia que llega a urgencias y una planta baja
abierta por arriba, como una casa de muñecas, con recepción,
consulta y una sala de resonancia con la camilla entrando en el
anillo.

05 · El puerto

Con el mismo estilo, cámara y paleta, crea otro mundo: un puerto.
Quiero un barco atracado, dos grúas que toman contenedores del
barco y los dejan en camiones que se van, y un patio de
contenedores en filas. El mar va en un tono muy claro con olas
sutiles.

Si quieres el MP4

Abre Claude Code en una carpeta de proyecto de Remotion y usa esto antes de la plantilla. Son las reglas que evitan los fallos que me encontré:

Vamos a hacer esta animación como video en Remotion con
@remotion/three. Instala lo que haga falta.
 
Reglas:
- Todo se mueve con useCurrentFrame(). No uses useFrame ni
  animaciones que corran solas: el render saldría con parpadeos.
- Crea un componente por máquina o zona, con piezas reutilizables.
- Para muchos objetos iguales, usa instancedMesh.
- El texto va fuera del 3D, en una franja propia.
- Antes del render completo, enséñame fotogramas de cada etapa.

Si solo quieres un video rápido y ya tienes la página del chat, grabar la pantalla también sirve. Pierdes control sobre los cortes, pero no instalas nada.

Cómo llevarlo a tu caso

Lo más útil no es la fábrica. Cambia las etapas y sirve para explicar el recorrido de un pedido, un trámite, el onboarding de un cliente o cómo trabaja tu equipo.

Si tu proceso no es físico, conviértelo en objetos: los pedidos son cajas, las revisiones son estaciones, las aprobaciones son compuertas. Es la misma idea de explicar un proceso como una máquina.

Lo que no hace y errores comunes

• No es Pixar. Sale un estilo de maqueta limpia, no realismo.
• Las personas quedan muy simples. Funcionan como figuras pequeñas, no como protagonistas.
• Los mundos grandes tardan. Cada detalle que agregas es más código, y una escena pesada puede ir lenta en el navegador.
• No uses sus datos sin revisar. Claude rellena lo que no le dices. A veces acierta y a veces no, como me pasó con el café.
• No lo corrijas todo en un mensaje. Con cinco cambios a la vez, es difícil saber cuál rompió algo.

Por qué funciona

Este es el paso difícil del que hablaba en el video: saber cómo es tu proceso de verdad.

Claude pintó el café verde brillante. Tiene sentido: al grano crudo se le llama café verde, y mi marca usa esmeralda. Pero el café crudo es pálido, casi amarillo, y eso no te lo corrige la máquina. Te lo corrige quien lo conoce.

No necesitas ser experto en 3D. Necesitas ser experto en lo tuyo. Eso es P = E × IA: Claude pone el 3D y la experiencia la pones tú.

Créditos: Three.js es un proyecto de código abierto de sus autores, con licencia MIT. Conocí esta forma de usarlo por un reel de Joshua Stevenson.

Una diapositiva cuenta tu proceso. Una maqueta que se mueve deja verlo, siempre que alguien que lo conoce revise cada pieza.