Inspiration
Una plataforma interactiva premium de última generación diseñada para la Clínica Dental Pablo Domínguez & Aritza Maté en Vitoria-Gasteiz, Álava. Este desarrollo fusiona una interfaz de usuario web exquisita con un visualizador interactivo 3D interactivo en tiempo real que permite a los pacientes explorar las instalaciones vanguardistas del gabinete dental (incluyendo configuraciones de odontopediatría y adultos).
What it does
El espacio de trabajo está organizado con la lógica de un desarrollo escalable y modular:
How we built it
Como arquitecto de software, se ha seleccionado un stack optimizado para la máxima tasa de frames por segundo (FPS) sin comprometer la fidelidad estética:
Capa Tecnología Justificación de Ingeniería Núcleo SPA React 18.3 Reconciliación de estado eficiente y diseño modular por componentes. Build Tool Vite 5.3 Hot Module Replacement (HMR) instantáneo en milisegundos gracias al pre-empaquetado con Esbuild. Motor 3D Three.js r167 API nativa de WebGL potente para la gestión matemática de matrices, geometrías y materiales. Abstracción Reactiva React Three Fiber v8 Permite declarar la escena 3D como componentes reactivos, facilitando el control de props y el árbol de nodos. Utilidades 3D @react-three/drei v9 Wrappers óptimos de cargadores, sombras de contacto, grids procedimentales e instrumentación de cámaras. Diseño Estético Vanilla CSS + Glassmorphism Evita la sobrecarga de selectores innecesarios y hojas CSS gigantestas mediante tokens CSS limpios y propiedades nativas de backdrop-filter.
Challenges we ran into
Para evitar saltos abruptos de cámara al interactuar con el HUD, implementamos un algoritmo matemático en App.jsx que traslada tanto la posición de la cámara (camera.position) como su objetivo de enfoque (controls.target) usando una curva de atenuación cúbica personalizada (Ease In-Out Cubic). Esto se ejecuta a través de requestAnimationFrame garantizando 60 FPS estables durante la transición:
Accomplishments that we're proud of
La aplicación se desmarca por su excelencia visual:
Glassmorphism HUD: Diseño flotante utilizando desenfoque gaussiano (backdrop-filter: blur(16px)), gradientes armónicos y colores seleccionados meticulosamente de la paleta HSL neutra/azul clínico. Responsive Total: Diseño adaptado tanto a pantallas 4K como a pantallas de smartphones mediante un menú móvil colapsable e interactivo. Accesibilidad & Semántica: Uso riguroso de etiquetas HTML5 semánticas (
, , , ), estructura jerárquica de encabezados (h1-h4) y tipografía prémium de Google Fonts (Inter y Outfit).What we learned
Auto-detección de Vite: Vercel detectará automáticamente que la subcarpeta studio-viewer es un proyecto de Vite + React. Configurará de forma nativa los comandos npm run build y la carpeta de salida dist sin necesidad de scripts manuales propensos a fallos. Caché Inteligente de Node Modules: Vercel guardará en caché la carpeta node_modules de studio-viewer entre compilaciones. Si ejecutas comandos desde la raíz del repositorio, Vercel no podrá cachear las dependencias del subdirectorio y tus despliegues tardarán hasta 10 veces más. Enrutamiento SPA Limpio: Hemos incluido un archivo vercel.json dentro de la carpeta studio-viewer/ que configura de forma transparente: Clean URLs: Eliminación de extensiones .html en rutas estáticas. SPA Routing Fallback: Redirección inteligente de cualquier ruta del lado del cliente hacia index.html para soportar futuros sistemas de rutas en React sin errores 404 del servidor. Optimización de Recursos 3D: Configuración del CDN de Vercel (Edge Network) para entregar archivos .glb, .gltf y .bin con compresión óptima y latencia ultra-baja.
