Satellites - OrbitScope

A 3D interactive visualization project that showcases how different types of satellites orbit around Earth. Built with Three.js, this project offers a scroll-driven experience to explore:

Comment

🌌 Inspiration

As space technology becomes more accessible and essential — from GPS navigation to weather forecasting and internet connectivity — understanding where satellites are and how they work is more relevant than ever. We wanted to build an educational and immersive tool that not only visualizes Earth’s orbital zones (LEO, MEO, GEO) but also explains satellite components and celebrates the history of satellite launches — all in an engaging, scroll-driven experience.

🛰️ What it does

Satellites - OrbitScope is a 3D interactive visualization that allows users to:

  • Explore the Low Earth Orbit (LEO), Medium Earth Orbit (MEO), and Geostationary Orbit (GEO) in real-time 3D.
  • Understand the structure of the Van Allen radiation belts.
  • View geo-stationed satellites orbiting around the equator.
  • Break down the components of a satellite with interactive visuals.

🧰 How we built it

  • Three.js was used to build the 3D globe, orbits, satellite models, and interactive camera paths.
  • GSAP & ScrollTrigger powered the smooth scroll-based animations and scene transitions.
  • React + Vite served as the front-end framework for structuring the app and managing component logic.
  • TailwindCSS provided quick and responsive UI styling.
  • Custom shaders were written to simulate Earth’s atmosphere, clouds, and Van Allen belts, giving the experience a cinematic look.
  • Satellite data and orbit positioning were either procedurally created or mocked to represent realistic positioning.

⚠️ Challenges we ran into

  • Positioning satellites and orbit belts accurately in 3D space while maintaining performance and visual clarity.
  • Coordinating complex scroll-driven animations across multiple scenes and content sections.
  • Balancing technical depth and user-friendly design for both space enthusiasts and casual learners.

🏆 Accomplishments that we're proud of

  • Built a compelling end-to-end space visualization in under a week.
  • Achieved a seamless scroll-to-explore experience with real-time 3D animations.
  • Created a highly educational interface that explains both orbital mechanics and satellite hardware.
  • Designed the project to be modular and extensible for adding more satellites or real-time tracking features in the future.

📚 What we learned

  • Deepened our understanding of satellite systems, orbital layers, and space science.
  • Mastered scroll-based animations with GSAP and integrated them into complex 3D scenes.
  • Learned how to combine shader programming with educational design to create immersive experiences.
  • Understood the nuances of performance optimization for WebGL and real-time rendering on the web.

🚀 What’s next for Satellites - OrbitScope

  • 🎯 Real-Time Satellite Tracking: Integrate TLE data to show live satellite positions.
  • 🧭 Navigation Panel: Add user controls to switch between orbits and components manually.
  • 📱 Mobile Support: Optimize the experience for smaller screens and touch gestures.
  • 🧠 AI Narration or Voiceover: Add educational narration synced with scroll timeline.
  • 🛰️ Launch Simulation Mode: Simulate the launch and insertion of satellites into their respective orbits.

Let me know if you want a short summary pitch version for the top of your Devpost page too!

Built With

Share this project:

Updates