06 de 25 · EXPERIENCIA WEBGL
AUREX MOTORS
Experiencia cinematográfica · auto 3D en tiempo real
DEMOSTRACIÓNEN LÍNEA
CONTEXTO
El sitio de un producto premium casi siempre termina en catálogo estático: no transmite la sensación de la marca ni dan ganas de explorar.
QUÉ SE HIZO
Un comercial de auto de lujo navegable: película en 14 escenas dirigida por el scroll (la cámara cambia, el auto gira, las luces se encienden), closeups de diseño, números que cuentan, galería-showroom horizontal y configurador 3D. Pintura, ruedas, luz de cabina y underglow cambian el auto en tiempo real, con precio reactivo.
PELÍCULA EN 14 ESCENAS · CONFIGURADOR 3D
SOLUCIONES
Guion de cámara en archivo único
14 escenas con keyframes de cámara, rotación y luces, dirigidas por el scroll con damping exponencial.
Configurador sin re-render
El panel escribe en un estado compartido; el auto hace lerp de materiales por frame.
Cero descargas externas
Modelo local, decoder Draco local y ambiente por Lightformers, sin HDRI ni CDN.
DETALLE TÉCNICO
01La arquitectura separa el mundo DOM del mundo 3D por un estado mutable compartido (world.ts). Un ScrollTrigger por sección escribe (escena, …
La arquitectura separa el mundo DOM del mundo 3D por un estado mutable compartido (world.ts). Un ScrollTrigger por sección escribe (escena, progreso) y el rig de cámara lo lee en cada frame dentro del canvas, así que el scroll nunca re-renderiza React. El guion de la película vive en un solo archivo (scenes.ts), con keyframes de posición, objetivo y fov de la cámara, rotación del auto e intensidad de cada luz por escena, interpolados con damping exponencial. Es el damping lo que transforma cortes secos en movimientos de dolly. Encima, el paralaje de mouse desplaza cámara y key light, así que los reflejos en la carrocería siguen al cursor.
02El auto es el Ferrari 458 de los ejemplos oficiales de three.js (GLB con Draco, decoder servido localmente, cero CDN), rebrandeado por nombr…
El auto es el Ferrari 458 de los ejemplos oficiales de three.js (GLB con Draco, decoder servido localmente, cero CDN), rebrandeado por nombre de material en runtime: la pintura pasa a ser un MeshPhysicalMaterial configurable con clearcoat, los acentos amarillos pasan a rojo AUREX, faros y luces traseras se vuelven emisivos ligados al guion (se encienden en la escena correcta), los cromados pasan a satín oscuro y el interior se vuelve cuero negro con ribete rojo. El configurador escribe directo en el estado compartido y el auto hace lerp de los materiales por frame, así que el cambio de color es líquido, sin ningún re-render del árbol 3D. El estudio es 100% procedural: Lightformers en lugar de HDRI, piso MeshReflectorMaterial y conos aditivos como luz volumétrica.
03Performance y robustez: el PerformanceMonitor degrada el DPR automáticamente en GPU débil, el canvas principal se pausa (frameloop never) cu…
Performance y robustez: el PerformanceMonitor degrada el DPR automáticamente en GPU débil, el canvas principal se pausa (frameloop never) cuando la galería, que tiene canvas propio, cubre la pantalla, Lenis se apaga en touch y prefers-reduced-motion cambia todo damping por poses instantáneas. El debug dejó gotchas documentados: GSAP interpreta translateY(115%) inline como píxeles (lo correcto es animar y, no yPercent), el CSS fuera de @layer le gana a cualquier utility en Tailwind v4, y Chromium headless renderiza a ~1fps. Una cámara con damping nunca converge en screenshot, y eso se convirtió en un modo ?snap de validación visual.
PANTALLAS
01 Configurador 3D con pintura, ruedas y cabina en tiempo real 
02 Escena trasera de la película con la luz trasera encendida
RESULTADO
Un comercial de auto de lujo navegable: película en 14 escenas dirigida por el scroll (la cámara cambia, el auto gira, las luces se encienden), closeups de diseño, números que cuentan, galería-showroom horizontal y configurador 3D. Pintura, ruedas, luz de cabina y underglow cambian el auto en tiempo real, con precio reactivo.