Tour 3D elegante del campus corporativo con videos explicativos

Construye un tour 3D elegante del campus corporativo con zonas semánticas, hotspots y videos explicativos multilingüe. **Entregables:** index.html, styles.css, app.js, carpeta assets/ con modelos GLB, texturas HDR, videos MP4, locuciones y subtítulos SRT. **Stack:** Three.js (CDN), GSAP para transiciones, video HTML5 como texturas, Draco para compresión GLB, IntersectionObserver para lazy-load. **Descripción:** Tour 3D inmersivo de la sede corporativa. El visitante explora zonas (recepción, auditorio, I+D) y, al activar un hotspot, reproduce un video explicativo de 30–90s con locución y subtítulos en varios idiomas. **Estructura de escena:** Modelo GLB dividido en nodos semánticos (lobby, auditorio, lab). Cada nodo tiene un hotspot 3D (esfera translúcida) con aria-label. La cámara inicia en vista amplia con vistas predefinidas accesibles por teclado (1: Lobby, 2: Auditorio, 3: Terraza). **Activación de hotspot:** (1) Fly-to suave con easing cinematográfico (GSAP). (2) Video en panel HTML superpuesto o como textura en plano 3D. (3) Subtítulos SRT sincronizados y transcripción descargable. (4) Métricas animadas en 3D (capacidad, proyectos, años). **Interacciones:** Drag para rotar, scroll/pinch para zoom, teclado para vistas rápidas. Táctil optimizado: doble toque para centrar, dos dedos para zoom. Botón "Iniciar tour" con narración completa y guía automática. **Formato de video:** H.264 MP4 720p para web, 1080p opcional para desktop. Cada video incluye SRT y JSON de metadatos. Precarga progresiva: thumbnails primero, streaming adaptativo si es necesario. **Rendimiento:** Compresión Draco; texturas 512–1024px; lazy-load por sección. Render loop pausado fuera de viewport (IntersectionObserver). LOD, draw calls reducidos, requestAnimationFrame optimizado. **Accesibilidad y fallback:** prefers-reduced-motion desactiva fly-to y partículas. Alternativa 2D con video hero por capítulos y transcripción completa. Hotspots con aria-label; panel de video con role="dialog" y aria-modal. **Pruebas y métricas:** Chrome, Safari iOS, Firefox; FPS y TTFB. Registrar: hotspots activados, videos reproducidos, tiempo de visualización. A/B test autoplay vs. control manual.