🎥 Escenario: el comercial que parece real
Un fabricante de motos necesita un comercial prémium para medios digitales. Budget cero para un estudio real, pero el producto debe parecer salido de una concesionaria de lujo. Three.js con materiales PBR ofrece ese nivel de calidad — sin una cámara física.
✓ Three.js es ideal cuando…
✗ Three.js no es la mejor opción cuando…
💡 Iluminación de estudio: tres puntos de luz
La iluminación de tres puntos es el estándar fotográfico para productos que transforma cualquier mesh en un objeto deseable. Luz principal revela la forma. Fill light suaviza las sombras. Rim light separa el producto del fondo oscuro.
💡 Rim light es el secreto
La luz de contorno (rim light) es lo que separa el objeto oscuro del fondo oscuro. Sin ella, la moto se funde con el background #0a0a0a. Colócala directamente detrás, con una intensidad de 0.3–0.5, y usa el color de la marca para darle personalidad.
🪞 Material PBR: el brillo de concesionaria
PBR (Physically Based Rendering) significa que el material responde a la luz como un material real. Con metalness=0.9 e roughness=0.1, la pintura de la moto refleja el entorno como una laca automotriz 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,
});
✓ Configuraciones que funcionan
✗ Errores comunes de material
🌀 Órbita de cámara: el arco cinematográfico
La cámara recorre un arco alrededor del objeto mediante Math.sin e Math.cos del frame actual. El movimiento es lento y deliberado — 0.3–0.5 rotaciones por segundo — como una cámara de cine de alta gama siguiendo el objeto.
💡 La velocidad define el carácter
Cámara lenta (0.2–0.4 rad/s) = marca premium, segura, sofisticada. Cámara rápida (1+ rad/s) = energía, deporte, juventud. Para un comercial de motos de lujo, la velocidad lenta siempre es la opción correcta.
💬 El prompt completo
Este es el prompt literal que le das a Claude Code (con la skill Remotion activa). Cada requisito del prompt corresponde a un elemento de la escena Three.js: Claude genera la composición completa con 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" y "Metallic reflections"
Estas dos palabras activan el conocimiento de Three.js de Claude para configurar el sistema de iluminación de tres puntos y el material PBR MeshStandardMaterial. Sin ellas, Claude puede usar iluminación plana y un material básico: el resultado será amateur.
🏆 Render 4K y entregable premium
Con la composición aprobada en la vista previa, el render 4K con antialias genera el MP4 final. La calidad es indistinguible de la de un anuncio automotriz profesional, y costó horas, no días.
Orden de build: de la escena al comercial
Escena y cámara
Crea la escena Three.js dentro de un useEffect en Remotion. Camera perspectiva fov=45, posición inicial en (4, 2, 4).
Mesh y material PBR
Carga el GLTF de la moto con GLTFLoader. Aplica MeshStandardMaterial con metalness/roughness. Valida la escena estática antes de animarla.
Sistema de iluminación
Agrega las tres luces. Ajusta las intensidades hasta que la moto parezca «de concesionaria». Confirma que la luz de contorno la separe del fondo.
Conectar la cámara al frame
Camera.position.x = sin(frame/fps * 0.4) * 4. Renderiza el frame en Three.js DESPUÉS de actualizar la cámara: así es determinista.
📋 Resumen del Módulo 3.3
- ✓Three.js es la única biblioteca de la lista que crea 3D convincente: cámaras, luces, materiales
- ✓La iluminación de tres puntos transforma cualquier mesh en un producto deseable
- ✓PBR (metalness + roughness + envMap) logra el brillo de un concesionario
- ✓La órbita de cámara mediante sin/cos es determinística y proporcional al frame
- ✓Entregable: comercial premium indistinguible del marketing automotriz profesional
Siguiente módulo:
🏦 Módulo 3.4 — Banking Onboarding (Lottie) →