Preparando seu ambiente

Estúdio de desenvolvimentoBrasil → Mundo

🎃 EVENTO DE HALLOWEEN · ATÉ 31/10

Códigos movem o mundo.Sites deoutro mundo.

MILWEB® · Desenvolvimento criativo · Brasil → Mundo

Projetos / AUREX

COLEÇÃO DE RECOMPENSAS · 25 missões

04 de 25

MISSÃO ESPECIALAUREX TIMEPIECESAUREXMW/OS · CASO 04 / 25Experiência cinematográfica · relógio 3D que desmonta no scroll

04 de 25 · EXPERIÊNCIA WEBGL

O TEMPO,DESMONTADO.

Experiência cinematográfica · relógio 3D que desmonta no scroll

DEMONSTRAÇÃONO AR

AUREX TIMEPIECES — tela inicial
ESTÚDIO
MILWEB
Tipo
Landing Page Premium
Stack
Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · Tailwind

CONTEXTO

Foto parada não justifica preço. Mecânica, sim.

Relojoaria de luxo na web quase sempre é foto de produto parada, que não transmite a complexidade mecânica capaz de justificar o preço.

O AX-01 é um calibre 100% procedural que se desmonta peça por peça conforme o scroll — caixa, bezel, coroa, mostrador, ponteiros, trem de engrenagens, espiral, escape, rotor, tourbillon — e remonta no caminho inverso exato.

O QUE FOI FEITO

Um relógio 100% procedural (Calibre AX-01 Tourbillon) que desmonta peça por peça conforme o scroll (caixa, bezel, coroa, mostrador, ponteiros, trem de engrenagens, mola espiral, escape, rotor e a gaiola giratória do tourbillon) e remonta no caminho inverso exato. Filme em 15 cenas, configurador com troca de material em tempo real e galeria 360° por arrasto.

15 CENAS · RELÓGIO 100% PROCEDURAL

SOLUÇÕES

  • Sistema de explosão modular

    Cada peça com janela própria de saída/retorno; remontagem é o caminho inverso exato, não uma animação separada.

  • Debug por raycast

    Bug de geometria sólida tapando o mostrador só foi achado listando hits de um raycast, não por tentativa e erro visual.

  • Realismo via CanvasTexture

    Impressão do mostrador (trilha de minutos, marca) foi o maior ganho visual do projeto, sem custo de geometria.

  1. 01 / FILMEQuinze cenas com canvas fixo, roteiro em arquivo único e câmera com damping — a arquitetura herdada do Aurex Motors.
  2. 02 / EXPLOSÃOCada <Part> tem posição de origem, deslocamento, rotação e uma janela (delay/span). Um smoothstep lê o valor global de explosão e cada peça sai e volta em cascata.
  3. 03 / CONFIGURARConfigurador com troca de material em tempo real e galeria 360° por arrasto; quatro expressões do mesmo calibre.

DETALHE TÉCNICO

  • SISTEMA DE EXPLOSÃOJanela delay/span por peça + smoothstep sobre um progresso global; remontagem é o caminho inverso, não outra animação.

    Herda a arquitetura de estado compartilhado do AUREX MOTORS (canvas fixo, roteiro de cenas em arquivo único, câmera com damping), mas o diferencial é o sistema de desmontagem. Cada componente do relógio é um <Part> com posição de origem, deslocamento, rotação e uma janela de progresso (delay/span) própria. Uma função de smoothstep lê um valor global de 'explosão' e cada peça sai e volta em cascata dentro da sua janela. A remontagem não é uma animação separada: é o caminho de saída percorrido ao contrário.

  • RELÓGIO PROCEDURALCaixa em anel (ExtrudeGeometry), 5 engrenagens paramétricas com dentes instanciados, espiral de Arquimedes, escape, tourbillon.

    O relógio é 100% procedural: caixa em anel (ExtrudeGeometry com furo, não um cilindro sólido), bezel, coroa serrilhada, mostrador com índices instanciados, cinco engrenagens paramétricas com dentes instanciados, mola espiral como tubo em espiral de Arquimedes, escape oscilante e a gaiola giratória do tourbillon com seu próprio balanço. Um bug real ilustra o valor de instrumentar em vez de adivinhar. A caixa começou como cilindro sólido, e a tampa frontal, invisível pra intuição, tapou o mostrador durante toda uma sessão de trabalho. O diagnóstico só veio de um raycast do centro da tela listando os hits em ordem, que expôs o cilindro a 6cm na frente do dial.

  • RAYCAST DEBUGUma tampa invisível tapou o mostrador por uma sessão inteira; um raycast do centro da tela listou os hits e expôs o bug.

    O maior salto de realismo custou zero geometria extra: uma CanvasTexture impressa sobre o mostrador (trilha dos minutos, nome da marca, numerais) resolveu o que nenhuma troca de material resolvia sozinha. O vidro também exigiu um ajuste contraintuitivo. MeshPhysicalMaterial transparente em ângulo raso reflete quase 100% da luz direta por Fresnel, criando um véu leitoso sobre o mostrador independente da opacidade. A solução foi um MeshBasicMaterial com tinta constante, deixando os reflexos por conta só dos metais.

NÚMEROS

  • 15

    CENAS

  • 10

    PEÇAS QUE SE DESMONTAM

  • 05

    ENGRENAGENS PARAMÉTRICAS

  • 360°

    GALERIA POR ARRASTO

TELAS

RESULTADO

Projeto autoral, no ar

RELÓGIO 100% PROCEDURAL EM R3F

QUERO ALGO PARECIDO ↗ABRIR SITE ↗

Enter abre o primeiro resultado · Esc fecha · tecla / abre a busca

AUREX TIMEPIECES — Experiência cinematográfica · relógio 3D que desmonta no scroll | MilWeb