El reto
Mostrar a un cliente que una visualización 3D científica seria — no una caja con un cubo girando — puede correr directamente en su navegador, sin plugins ni instalaciones. Y que la barrera de entrada para llevar este tipo de UX a una custom app empresarial (configuradores de producto, gemelos digitales, equipo industrial, planos CAD interactivos, training inmersivo) es mucho más baja de lo que la gente cree.
Para eso elegimos el modelo más denso que conseguimos: el SARS-CoV-2 científicamente validado, ~80 MB de geometría, 181 mallas, materiales explícitos para subunidades S1/S2/S3, glicanos y átomos individuales (oxígeno, nitrógeno, sulfuro). Si esto corre fluido, casi cualquier modelo industrial real lo hará.
La solución
Un showroom 3D autocontenido construido como una página dentro del sitio Hugo, accesible vía URL directa (no indexada, no listada en el menú — es una demo, no contenido SEO). Toda la lógica vive en un layout reutilizable (layouts/_default/showroom-3d.html) que acepta cualquier GLTF en su page bundle.
Visor
<model-viewer>4.x de Google como base — web component nativo, sin Three.js manual, soporte transparente de Draco compression (nuestro modelo lo usa) y WebXR/Scene Viewer/Quick Look para AR en mobile.- Auto-rotate continuo a 20°/s desde el primer frame para que se sienta vivo.
- Drag para rotar manualmente, scroll para zoom, pinch en touch — controles nativos del web component.
Feedback de carga
Como el modelo pesa ~80 MB, el primer load puede tomar varios segundos según la conexión. En lugar de un canvas en blanco:
- Loading poster custom dentro del slot
posterdel web component: spinner cyan, título “Cargando modelo del SARS-CoV-2”, barra de progreso con gradient brand, porcentaje en vivo alimentado por el eventoprogressy un hint sobre el peso. - El poster se oculta automáticamente cuando termina la descarga (lo gestiona model-viewer internamente).
Hotspots educativos
Cuatro etiquetas ancladas a coordenadas 3D del modelo, usando el sistema nativo de hotspots de model-viewer (slot hotspot-N + data-position + data-visibility-attribute):
- Proteína espícula (S) — el “trídente” que se une a las células
- Glicanos — azúcares que evaden el sistema inmune
- Subunidades S1 / S2 — S1 reconoce ACE2; S2 fusiona membranas
- Membrana viral — bicapa lipídica robada de la célula huésped
Cada hotspot es un punto cyan pulsante sobre el modelo. Hover/tap revela un tooltip con título + descripción biomédica corta. Cuando un hotspot queda detrás del modelo (por la rotación), model-viewer lo oculta automáticamente.
Controles flotantes
Panel con backdrop-blur sobre el stage oscuro:
- Rotación: Pausar / Lenta (10°/s) / Normal (20°/s) / Rápida (45°/s)
- Cámara: Frontal / Cenital / Lateral / Acercar — con interpolación animada vía la propiedad
cameraOrbitdel web component
AR mode
En móviles aparece automáticamente un botón AR. En Android abre Scene Viewer, en iOS abre Quick Look, en navegadores con WebXR usa el inmersivo. El usuario ve el virus a escala en su entorno real sin instalar nada.
Dev helper
Para calibrar nuevos hotspots con precisión, Shift+click sobre el modelo imprime en consola las coordenadas world exactas del punto clickeado (positionAndNormalFromPoint), listas para pegar en data-position. Convierte un trabajo de adivinanza en un copy-paste.
Resultados
- End-to-end funcionando en Chrome, Safari, Firefox, Edge sin instalar nada.
- Patrón reutilizable: el mismo layout
showroom-3d.htmlsirve para cualquier futuro showroom — basta con copiar el GLTF al page bundle, ajustar 4 hotspots, y se tiene una nueva URL en producción. - Caso comercial directo: prueba viva para clientes que evalúan llevar visualizaciones 3D a sus plataformas — sectores médico, industrial, educativo, real estate, e-commerce.
- HTML/CSS/JS de la página: < 100 KB. Los 80 MB son sólo el modelo, lazy-loaded.