AUREX MOTORS

Experiência cinematográfica · carro 3D em tempo real

Site de produto premium quase sempre vira catálogo estático: não transmite a sensação da marca nem dá vontade de explorar.

• 01A arquitetura separa o mundo DOM do mundo 3D por um estado mutável compartilhado (world.ts). Um ScrollTrigger por seção escreve (cena, progr…+

  LER O DETALHE TÉCNICO

  A arquitetura separa o mundo DOM do mundo 3D por um estado mutável compartilhado (world.ts). Um ScrollTrigger por seção escreve (cena, progresso) e o rig de câmera lê isso a cada frame dentro do canvas, então o scroll nunca re-renderiza React. O roteiro do filme vive num arquivo só (scenes.ts), com keyframes de posição, alvo e fov da câmera, rotação do carro e intensidade de cada luz por cena, interpolados com damping exponencial. É o damping que transforma cortes secos em movimentos de dolly. Por cima, parallax de mouse desloca câmera e key light, então os reflexos na lataria seguem o cursor.

• 02O carro é o Ferrari 458 dos exemplos oficiais do three.js (GLB com Draco, decoder servido localmente, zero CDN), rebrandizado por nome de ma…+

  LER O DETALHE TÉCNICO

  O carro é o Ferrari 458 dos exemplos oficiais do three.js (GLB com Draco, decoder servido localmente, zero CDN), rebrandizado por nome de material em runtime: pintura vira MeshPhysicalMaterial configurável com clearcoat, acentos amarelos viram vermelho AUREX, faróis e lanternas viram emissivos ligados ao roteiro (acendem na cena certa), cromados viram satin escuro e o interior vira couro preto com friso vermelho. O configurador escreve direto no estado compartilhado e o carro faz lerp dos materiais por frame, então a troca de cor é líquida, sem nenhum re-render da árvore 3D. O estúdio é 100% procedural: Lightformers no lugar de HDRI, piso MeshReflectorMaterial e cones aditivos como luz volumétrica.

• 03Performance e robustez: o PerformanceMonitor degrada o DPR automaticamente em GPU fraca, o canvas principal pausa (frameloop never) quando a…+

  LER O DETALHE TÉCNICO

  Performance e robustez: o PerformanceMonitor degrada o DPR automaticamente em GPU fraca, o canvas principal pausa (frameloop never) quando a galeria, que tem canvas próprio, cobre a tela, o Lenis desliga em touch e o prefers-reduced-motion troca todo damping por poses instantâneas. O debug rendeu gotchas documentados: o GSAP interpreta translateY(115%) inline como pixels (o certo é animar y, não yPercent), CSS fora de @layer vence qualquer utility no Tailwind v4, e o Chromium headless renderiza a ~1fps. Câmera com damping nunca converge em screenshot, e isso virou um modo ?snap de validação visual.

CONSTRUÍDO COM — Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCÓDIGO ↗

Filme em 14 cenas · configurador 3D

PROJETO AUTORAL · NO AR

[ QUERO ALGO PARECIDO ]