EL TIEMPO,DESARMADO.

- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA WEBGL
- ESTADO
- EN LÍNEA
02 / LA IDEA
Una foto quieta no justifica el precio. La mecánica, sí.
El AX-01 es un calibre 100% procedural que se desarma pieza por pieza con el scroll —caja, bisel, corona, esfera, agujas, tren de engranajes, espiral, escape, rotor, tourbillon— y se rearma por el camino inverso exacto.
01 / PELÍCULA
Quince escenas con canvas fijo, guion en un único archivo y cámara con damping: la arquitectura heredada de Aurex Motors.

02 / EXPLOSIÓN
Cada <Part> tiene posición de origen, desplazamiento, rotación y una ventana (delay/span). Un smoothstep lee el valor global de explosión y cada pieza sale y vuelve en cascada.

03 / CONFIGURAR
Configurador con cambio de material en tiempo real y galería 360° por arrastre; cuatro expresiones del mismo calibre.

PELÍCULA
EXPLOSIÓN
CONFIGURAR
04 / BAJO EL CAPÓ
- 01CAJAv=0.00
- 02BISELv=0.00
- 03CORONAv=0.00
- 04ESFERAv=0.00
- 05MANECILLASv=0.00
- 06TREN DE ENGRANAJESv=0.00
- 07MUELLE REALv=0.00
- 08ESCAPEv=0.00
- 09ROTORv=0.00
- 10TOURBILLONv=0.00
SISTEMA DE EXPLOSIÓNVentana delay/span por pieza + smoothstep sobre un progreso global; el rearmado es el camino inverso, no otra animación.+
Hereda la arquitectura de estado compartido de AUREX MOTORS (canvas fijo, guion de escenas en archivo único, cámara con damping), pero el diferencial es el sistema de desarme. Cada componente del reloj es un <Part> con posición de origen, desplazamiento, rotación y una ventana de progreso (delay/span) propia. Una función de smoothstep lee un valor global de 'explosión' y cada pieza sale y vuelve en cascada dentro de su ventana. El rearmado no es una animación separada: es el camino de salida recorrido al revés.
RELOJ PROCEDURALCaja en anillo (ExtrudeGeometry), 5 engranajes paramétricos con dientes instanciados, espiral de Arquímedes, escape, tourbillon.+
El reloj es 100% procedural: caja en anillo (ExtrudeGeometry con agujero, no un cilindro sólido), bisel, corona estriada, esfera con índices instanciados, cinco engranajes paramétricos con dientes instanciados, muelle real como tubo en espiral de Arquímedes, escape oscilante y la jaula giratoria del tourbillon con su propio volante. Un bug real ilustra el valor de instrumentar en vez de adivinar. La caja empezó como cilindro sólido, y la tapa frontal, invisible para la intuición, tapó la esfera durante toda una sesión de trabajo. El diagnóstico solo vino de un raycast desde el centro de la pantalla listando los hits en orden, que expuso el cilindro a 6cm delante del dial.
RAYCAST DEBUGUna tapa invisible cubrió la esfera durante una sesión entera; un raycast desde el centro de la pantalla listó los hits y expuso el bug.+
El reloj es 100% procedural: caja en anillo (ExtrudeGeometry con agujero, no un cilindro sólido), bisel, corona estriada, esfera con índices instanciados, cinco engranajes paramétricos con dientes instanciados, muelle real como tubo en espiral de Arquímedes, escape oscilante y la jaula giratoria del tourbillon con su propio volante. Un bug real ilustra el valor de instrumentar en vez de adivinar. La caja empezó como cilindro sólido, y la tapa frontal, invisible para la intuición, tapó la esfera durante toda una sesión de trabajo. El diagnóstico solo vino de un raycast desde el centro de la pantalla listando los hits en orden, que expuso el cilindro a 6cm delante del dial.
MATERIALESCanvasTexture en la esfera fue el mayor salto de realismo a costo cero; vidrio en MeshBasicMaterial para matar el velo de Fresnel.+
El mayor salto de realismo costó cero geometría extra: una CanvasTexture impresa sobre la esfera (minutería, nombre de la marca, numerales) resolvió lo que ningún cambio de material resolvía por sí solo. El vidrio también exigió un ajuste contraintuitivo. Un MeshPhysicalMaterial transparente en ángulo rasante refleja casi el 100% de la luz directa por Fresnel, creando un velo lechoso sobre la esfera independiente de la opacidad. La solución fue un MeshBasicMaterial con tinte constante, dejando los reflejos solo a cargo de los metales.
CONSTRUIDO CON — Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCÓDIGO ↗
05 / DETALLES
15
ESCENAS
10
PIEZAS QUE SE DESARMAN
05
ENGRANAJES PARAMÉTRICOS
360°
GALERÍA POR ARRASTRE
06 / RESULTADO



Kavita Institucional
