Galería 3D de productos de lujo con proyección de video y microinteracciones

Construye una galería 3D premium de productos de lujo con proyección de video activada por proximidad, materiales PBR y microinteracciones ricas. **Entregables:** index.html, styles.css, gallery.js, carpeta assets/ con modelos GLB, videos promocionales, HDRI y sprites. **Stack:** Three.js, video textures, materiales PBR, GSAP para easing, LazySizes para imágenes. **Descripción:** Vitrina 3D por producto con acabado premium: cada vitrina es un pedestal con iluminación suave y una pantalla integrada que reproduce un video promocional cuando el usuario se acerca. Estética minimalista, paleta neutra y tipografía serif para títulos. **Detección de proximidad:** Se calcula la distancia entre la cámara y el centro de la vitrina; al cruzar un umbral (ej. 3.5m) se activa la transición — la vitrina se ilumina, el material gana bloom sutil y el video comienza con fade-in. **Integración de video:** Videos MP4 como texturas en un plano 3D dentro de la vitrina. Alternativa: panel HTML superpuesto sincronizado para accesibilidad. Subtítulos SRT renderizados en HTML. **Microinteracciones:** Hover/Focus — pedestal eleva 6–10px con box-shadow suave. Click — vitrina se abre (animación 3D) mostrando ficha técnica y clip extendido. Drag — rotación del producto con inercia; doble-tap para vista macro. **Rendimiento:** Modelos GLB con LOD; texturas PBR 1024px. Videos 720p con preload="metadata" y streaming adaptativo. Pausar videos fuera de viewport; liberar texturas cuando no se usan. **Accesibilidad:** Panel HTML con controles nativos y aria-describedby. Subtítulos y transcripciones; descripciones alternativas. prefers-reduced-motion reduce animaciones y desactiva rotaciones automáticas. **Navegación y búsqueda:** Barra lateral con filtros (colección, material, año). Filtro activa reordenamiento 3D suave. Breadcrumbs y deep links para compartir una vitrina específica. **Analítica:** Reproducciones de video, tiempo medio de visualización, interacciones de rotación, clicks en "Ver ficha". Heatmaps de cámara para identificar vitrinas más exploradas.