Interactive 3D Map Website Build - ThreeJS

I want to launch a web experience that drops visitors straight into a realistic 3-dimensional map. When the page loads, they should see a fully rendered city-like scene; hovering or tapping a marker placed on one of the buildings triggers a smooth GSAP-powered camera move that zooms in and presents rich content. Each stop will reveal a mix of text, images, and occasionally videos, so the content panel needs to handle all three seamlessly.

The core of the build will run on Three.js / WebGL. I’m happy if you set it up in plain JavaScript, but a React or Next.js structure would be ideal for componentising the scene, UI overlays, and future expansions. The feel I’m after is similar to gliding through Google Maps’ 3D view—no jarring jumps, just fluid, natural motion between points.

Key goals
• Single-page, immersive 3D scene with a realistic visual style
• Clickable markers on select buildings, expandable later to landmarks or natural features
• GSAP-driven camera transitions and easing
• Flexible info panel that supports text, images, and video embeds
• Clean, commented code so new locations can be added quickly

Acceptance criteria
1. Scene loads in under five seconds on a modern desktop browser.
2. Camera transitions remain above 60 fps on a mid-range GPU.
3. Each marker reliably opens the correct content and returns to map view without memory leaks.
4. Build passes basic Lighthouse checks for accessibility and performance.

If this sounds like your wheelhouse, tell me how you’d structure the scene graph, organise the asset pipeline, and keep animations butter-smooth.