🎥 Cenário: o comercial que parece real
Uma fabricante de motos precisa de um comercial premium para digital. Budget zero para estúdio real, mas o produto tem que parecer que saiu de uma concessionária de luxo. Three.js com materiais PBR entrega esse nível de qualidade — sem uma câmera física.
✓ Three.js é ideal quando…
✗ Three.js não é a melhor escolha quando…
💡 Iluminação de Estúdio: três pontos de luz
A iluminação três pontos é o padrão fotográfico de produto que transforma qualquer mesh em objeto desejável. Key light revela a forma. Fill light suaviza as sombras. Rim light separa o produto do fundo escuro.
💡 Rim light é o segredo
O rim light (luz de aro) é o que separa o objeto escuro do fundo escuro. Sem ele, a moto se funde com o background #0a0a0a. Posicione-o diretamente atrás, intensidade 0.3–0.5, e use a cor da marca para personalidade.
🪞 Material PBR: o brilho de concessionária
PBR (Physically Based Rendering) significa que o material responde à luz como material real. Com metalness=0.9 e roughness=0.1, a pintura da moto reflete o ambiente como lacagem automotiva premium.
const material = new THREE.MeshStandardMaterial({
color: 0x1a0050, // roxo escuro da marca
metalness: 0.9, // quase metal puro
roughness: 0.1, // superfície polida
envMap: cubeRenderTarget.texture, // reflexo ambiente
envMapIntensity: 1.2,
});
✓ Configurações que funcionam
✗ Erros comuns de material
🌀 Órbita de Câmera: o arco cinematográfico
A câmera percorre um arco ao redor do objeto via Math.sin e Math.cos do frame atual. O movimento é lento e deliberado — 0.3–0.5 rotação por segundo — como câmera de cinema de alta gama seguindo o objeto.
💡 Velocidade define o caráter
Câmera lenta (0.2–0.4 rad/s) = marca premium, confiante, sofisticada. Câmera rápida (1+ rad/s) = energia, esporte, juventude. Para um comercial de moto de luxo, velocidade lenta é sempre a escolha certa.
💬 O Prompt Completo
Este é o prompt literal que você dá ao Claude Code (com skill Remotion ativa). Cada requisito do prompt mapeia para um elemento da cena Three.js — o Claude gera a composição completa com React Three Fiber integrado.
Build a cinematic motorcycle showcase. Requirements: Studio lighting, Rotating camera orbit, Slow dramatic movement, Metallic reflections, Dark background. Render as a commercial-style product presentation.
💡 "Studio lighting" e "Metallic reflections"
Essas duas palavras ativam o conhecimento de Three.js do Claude para configurar o sistema de três pontos de luz e o material MeshStandardMaterial PBR. Sem elas, o Claude pode usar iluminação plana e material básico — resultado amador.
🏆 Render 4K e Deliverable Premium
Com a composição aprovada no preview, o render 4K com antialias gera o MP4 final. A qualidade é indistinguível de marketing automotivo profissional — e custou horas, não dias.
Build order: da cena ao comercial
Scene e câmera
Crie a cena Three.js dentro de um useEffect no Remotion. Camera perspectiva fov=45, posição inicial em (4, 2, 4).
Mesh e material PBR
Carregue o GLTF da moto com GLTFLoader. Aplique MeshStandardMaterial com metalness/roughness. Valide estático antes de animar.
Sistema de iluminação
Adicione as três luzes. Ajuste intensidades até a moto parecer "de concessionária". Confirme que o rim light separa do fundo.
Conectar câmera ao frame
Camera.position.x = sin(frame/fps * 0.4) * 4. Renderize o frame no Three.js DEPOIS de atualizar a câmera — determinístico.
📋 Resumo do Módulo 3.3
- ✓Three.js é a única lib da lista que cria 3D convincente — câmeras, luzes, materiais
- ✓Iluminação três pontos transforma qualquer mesh em produto desejável
- ✓PBR (metalness + roughness + envMap) entrega o brilho de concessionária
- ✓Órbita de câmera via sin/cos é determinística e proporcional ao frame
- ✓Deliverable: comercial premium indistinguível de marketing automotivo profissional
Próximo módulo:
🏦 Módulo 3.4 — Banking Onboarding (Lottie) →