AUREX MOTORS
- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA WEBGL
- ESTADO
- EN LÍNEA
02 / LA IDEA
Experiencia cinematográfica · auto 3D en tiempo real
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.
01 / 01
14 escenas con keyframes de cámara, rotación y luces, dirigidas por el scroll con damping exponencial.
02 / 02
El panel escribe en un estado compartido; el auto hace lerp de materiales por frame.
03 / 03
Modelo local, decoder Draco local y ambiente por Lightformers, sin HDRI ni CDN.
01020304 / BAJO EL CAPÓ
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.
CONSTRUIDO CON — Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCÓDIGO ↗
06 / RESULTADO
Lumen
