3D Interactive Coworking Lobby with Welcome Videos and Guided Tour - Partner Edition
A bright professional 3D lobby as the entry portal for a coworking space. The scene includes a reception desk, info screen panels, and doors to zones (meeting rooms, private offices, open areas). Each door is a 3D hotspot with an accessible aria-label and a 20-60s video explaining the space (tour, rules, hours). On load, camera starts in a wide view; a floating 'Start Tour' button activates a guided tour with smooth GSAP fly-tos (easeOutCubic, 800-1200ms) toward each hotspot, playing video in an HTML overlay with synchronized SRT subtitles. Video also projects as a texture on a 3D plane. Navigation combines orbit controls for free exploration and numeric shortcuts (1: reception, 2: rooms, 3: open area). On mobile, hotspots activate on double-tap. Proximity detection: camera within 3.5m triggers micro-animation (scale 1.06 + glow) and muted video preview. Progressive video loading: WebP thumbnail, 480p proxy for scrubbing, 720/1080p for full playback. Performance: LOD for furniture, 512-1024px textures, pause render offscreen. Accessibility: SRT subtitles, downloadable transcripts, role=dialog, prefers-reduced-motion disables fly-to. Analytics: hotspots activated, playback time, tour starts. **Deliverables:** index.html, styles.css, lobby3d.js, assets/ (GLB lobby models, MP4 welcome videos, WebP thumbnails, voiceovers, SRT). **Stack:** Three.js, GSAP, video HTML5 textures, Draco GLB compression, IntersectionObserver. **Interactions:** Orbit controls, guided tour, numeric shortcuts (1/2/3), click hotspot opens video overlay with SRT, proximity glow animation, double-tap on mobile, download transcripts, light filter for progressive video.
