Cada objeto 3D e posição de câmera é calculado deterministicamente pelo número do frame — sem surpresas no render.
🌐 O que é Three.js no contexto Remotion
Three.js é a biblioteca JavaScript mais usada para criar gráficos 3D na web via WebGL. No contexto do Remotion, ela transforma cenas tridimensionais em frames de vídeo — cada frame é uma renderização estática calculada a partir do número do frame.
✗ Sem Three.js
- ✗Cenas 3D exigem software especializado (Blender, Cinema 4D, After Effects + plugins).
- ✗Workflow fechado: exportar, reimportar, re-renderizar a cada mudança.
- ✗Difícil de versionar e praticamente impossível de automatizar via prompt.
✓ Com Three.js + Remotion
- ✓Cena 3D descrita em código — Claude gera, você itera na mesma sessão.
- ✓Frame N sempre gera a mesma imagem: render determinístico, sem artefatos.
- ✓Versionável em git, parametrizável, reusável como componente React.
🎯 Casos de uso: quando 3D resolve
Three.js brilha em três tipos de cena que seriam impraticáveis com CSS ou SVG animado: rotação de produto, flythrough de ambiente e animações explicativas com perspectiva real.
Rotação de produto
Um modelo 3D de produto girando lentamente com iluminação limpa. O Claude gera a geometria, configura a luz e amarra a rotação ao frame count. Resultado: render sólido, luz consistente, movimento suave — num único prompt.
Flythrough de ambiente
Câmera percorre um espaço 3D seguindo uma curva paramétrica — arquitetura, infográfico espacial, visualização de dados em 3D. A câmera orbita conforme o frame avança.
Animações explicativas
Objetos explodem em partes, moléculas se montam, estruturas de dados se formam em 3D. Perspectiva real transmite profundidade que CSS plano não consegue.
🧪 O teste de qualidade Three.js
Para avaliar a qualidade de uma saída Three.js, dê ao Claude um modelo 3D e peça uma rotação lenta com órbita de câmera. O resultado esperado: iluminação limpa, movimento suave e render sólido sem piscadas — saído de um único 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
💡 O que avaliar na saída
- •Iluminação limpa: sombras suaves, sem highlight estourado.
- •Movimento suave: rotação proporcional ao frame — sem saltos.
- •Render sólido: sem piscadas ou z-fighting entre faces.
⚖️ Vanilla Three.js vs React Three Fiber
Existem dois caminhos para usar Three.js no Remotion: o Vanilla Three.js (controle direto do pipeline WebGL) e o React Three Fiber (R3F) (wrapper React com JSX para 3D). A escolha importa para render determinístico.
| Critério | Vanilla Three.js | React Three Fiber |
|---|---|---|
| Controle do pipeline | Direto (scene/camera/renderer) | Via JSX + reconciler |
| Timing determinístico | Preciso — amarrado ao frame | Pode introduzir inconsistência |
| Confiabilidade do Claude | Alta (API bem documentada) | Menor (abstração extra) |
| Composição com 2D | Manual | Natural (JSX + hooks Remotion) |
| Quando usar | Cenas simples e contidas | Complexidade que exige componentes |
🔷 Recomendação
Use Vanilla para cenas 3D simples e contidas — o Claude gera vanilla mais confiável porque a API é bem documentada e está sólida no treino. Reserve o R3F para quando a complexidade exige composição em componentes e integração com camadas 2D do Remotion.
🏗️ O pipeline Three.js → Remotion
O fluxo do Three.js dentro do Remotion segue quatro etapas: criar a cena, posicionar a câmera, calcular o estado pelo frame number e renderizar o frame para o canvas. Cada etapa é pura — sem efeito colateral externo.
💡 A chave do determinismo
A posição de todo objeto 3D e a posição da câmera são calculadas como funções puras do frame number. Não há estado de física ou interação do usuário — só matemática. Isso é o que garante que o render seja idêntico em qualquer máquina.
📐 Boas práticas de Three.js com Claude
Prompts de Three.js funcionam melhor quando você descreve a geometria, o material e o movimento separadamente. O Claude entende melhor quando a instrução é física ("cubo rotacionando" ou "câmera orbitando") do que abstrata ("faça parecer dinâmico").
✗ Prompt vago
- ✗"Crie uma animação 3D legal com objetos."
- ✗"Faça parecer que está voando no espaço."
- ✗Sem especificar geometria, material ou iluminação.
✓ Prompt específico
- ✓"Esfera com MeshPhongMaterial, rotação Y = frame × 0.015."
- ✓"Câmera em posição (0,2,5), olhando para a origem."
- ✓"DirectionalLight em (1,2,3) com intensidade 1.5."
🔷 Iterar na mesma sessão
Three.js é uma biblioteca onde a iteração rápida dentro da mesma sessão compensa muito. O Claude mantém o contexto da cena e você pode ajustar iluminação, câmera e geometria com prompts de follow-up sem reescrever tudo.
📌 Resumo do módulo
Próximo módulo:
2.5 — Lottie: o caminho mais rápido de prompt a saída usável.