Lumen
- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA WEBGL
- ESTADO
- EN LÍNEA
02 / LA IDEA
Sitio cinematográfico 3D para arquitectura · React Three Fiber
Los estudios de arquitectura necesitan transmitir sofisticación y dominio del espacio, y un sitio común no transmite la sensación de su trabajo.
01 / 01
Ningún GLB: volúmenes, vidrio, mobiliario y piscina son geometría Three.js generada en código, con fallback documentado para cambiar por un modelo real.
02 / 02
6 posiciones interpoladas con smoothstep, manejadas por GSAP ScrollTrigger + Lenis fuera del ciclo de render de React.
03 / 03
PerformanceMonitor mide la GPU en ~1,2s y ajusta la resolución del canvas entre 0.6 y 1.6 automáticamente.
04 / 04
Vidrio, sombras y Bloom más baratos en mobile; parallax y micro-loops se apagan con prefers-reduced-motion.
0102030404 / BAJO EL CAPÓ
01La casa que ancla el hero no es un modelo importado. Es geometría procedural, armada en código con primitivas de Three.js (boxGeometry, plan…+
La casa que ancla el hero no es un modelo importado. Es geometría procedural, armada en código con primitivas de Three.js (boxGeometry, planeGeometry, icosahedronGeometry): losa en voladizo, fachada de vidrio, mobiliario, piscina y vegetación, todo posicionado por coordenadas explícitas dentro de un único componente House. El motivo es práctico: sin GLB que descargar, decodificar (Draco/Meshopt) ni hospedar, el hero empieza a renderizar en el primer frame del Canvas. El componente Residence ya deja la puerta abierta para cambiarlo por un modelo real. Una constante RESIDENCE_GLB y un SceneBoundary (error boundary de clase que captura fallas de WebGL y de R3F) garantizan que, si el GLB no existe o falla al cargar, la escena vuelve a la casa procedural sin romper la página.
02La cámara no sigue una timeline de biblioteca externa. Es un sistema de keyframes escrito a mano en CameraRig, con seis pares de posición y …+
La cámara no sigue una timeline de biblioteca externa. Es un sistema de keyframes escrito a mano en CameraRig, con seis pares de posición y lookAt (fachada, entrada, sala, escalera, balcón, piscina) interpolados con smoothstep según un valor journey.progress entre 0 y 1. Ese progreso lo escribe un ScrollTrigger de GSAP pineado en la sección del hero, con Lenis manejando el rAF del scroll suave y emitiendo eventos que el ScrollTrigger consume (lenis.on('scroll', ScrollTrigger.update)). El puente entre el DOM y el loop de render de R3F es un objeto mutable (journey.progress) fuera de React, leído dentro de useFrame. Eso evita re-render del componente en cada tick de scroll, que a 60fps serían cientos de renders por segundo.
03El rendimiento en WebGL en el navegador se trató como presupuesto, no como suerte. El DPR del canvas es adaptativo: un PerformanceMonitor de…+
El rendimiento en WebGL en el navegador se trató como presupuesto, no como suerte. El DPR del canvas es adaptativo: un PerformanceMonitor de drei mide el fps real por ~1,2s y un hook (useAdaptiveDpr) recalcula la resolución interna dentro de un rango mínimo y máximo. Una GPU débil baja hasta 0.6, una GPU con margen sube hasta 1.6, en vez de trabarse a 17fps con DPR fijo. Mobile recibe una escena más barata por decisión explícita: material de vidrio simple (reflejo transparente) en vez de MeshTransmissionMaterial con transmisión real, sombras suaves (SoftShadows/PCSS) y Bloom apagados, resolución del ContactShadows reducida a la mitad. El canvas 3D también solo se monta después del primer paint, vía requestIdleCallback con timeout de 1200ms como red de seguridad, para no pesar en el LCP ni en el TBT. Y el frameloop de R3F alterna entre always y never según un IntersectionObserver (useInView), así que la escena deja de renderizar apenas sale del viewport.
04La accesibilidad de movimiento entró en la propia escena 3D, no solo en las animaciones de DOM. El usePrefersReducedMotion apaga el parallax…+
La accesibilidad de movimiento entró en la propia escena 3D, no solo en las animaciones de DOM. El usePrefersReducedMotion apaga el parallax de la cámara que sigue al puntero y los micro-loops de vida (respiración del agua en la piscina, pulso de la luz interna cálida) tanto en CameraRig como en House, manteniendo los valores de reposo ya definidos en el JSX. El scroll suave de Lenis también sale de escena por completo cuando prefers-reduced-motion: reduce está activo, y la página vuelve al scroll nativo del navegador. Ese cuidado, sumado al poster estático (mismo encuadre del fallback) mostrado detrás del Canvas antes del montaje, fue lo que mantuvo el hero rápido y accesible sin renunciar al efecto cinematográfico como diferencial del producto.
CONSTRUIDO CON — React · Vite · TypeScript · Three.js · R3F · SCSSCÓDIGO ↗
06 / RESULTADO
ALVA Odontologia
