PlanetAI

VOYAGE BEYOND

Comment 2

PlanetAI: The Interactive Cosmic Explorer

Inspiration

PlanetAI was born from a simple question: How can we make space education as vast and awe-inspiring as space itself? Traditional textbooks often fail to capture the scale and dynamic nature of our universe. We wanted to build a bridge between complex astronomical data and students, creating a "living" star-map that feels more like a voyage than a lesson.

What it does

PlanetAI is an all-in-one educational 3D platform that allows users to:

  • Explore a 3D Solar System: Interactive Three.js model with realistic textures, orbit paths, and cinematic camera controls.
  • Interact with NASA Live Data: Fetches real-time imagery from the DSCOVR satellite (EPIC), latest Mars weather from the InSight lander, and tracks Near-Earth Objects (asteroids) approaching Earth today.
  • Learn with AI: A built-in "Nova" Assistant (powered by Groq) that answers complex space questions and generates dynamic "Galactic Quizzes" to test user knowledge on-the-fly.
  • Experience Premium UX: A futuristic interface featuring glassmorphism, Lottie animations, and a responsive design tailored for the modern explorer.

How we built it

The project was built using a "no-framework" approach to maximize performance and control:

  • Core: Semantic HTML5, CSS3 (Custom Design System), and Vanilla JavaScript (ES6+).
  • 3D Engine: Three.js for rendering the solar system, utilizing OrbitControls, Raycaster for selection, and SpriteMaterial for dynamic labels.
  • APIs:
    • NASA Open APIs: APOD, EPIC, Mars Photos, NEO, and InSight Weather.
    • Groq Cloud API: Utilizing the mixtral-8x7b-32768 model for ultra-fast, intelligent conversational responses and quiz generation.
  • Animations: Lottie for high-fidelity vector animations and CSS IntersectionObserver for scroll-triggered entrance effects.

Challenges we ran into

  • 3D Scaling: Representing the solar system to scale while keeping it navigable was a challenge. We implemented a hybrid scaling system to ensure the Sun didn't dwarf the terrestrial planets while maintaining visual clarity.
  • Async Data Orchestration: Fetching data from multiple NASA endpoints simultaneously could cause UI lag. We implemented robust error handling and loading states (Warp Drive Loader) to ensure a smooth user experience.
  • AI Formatting: Getting the AI to consistently output structured JSON for the Quiz Master required precise system prompting and post-processing logic.

Accomplishments that we're proud of

  • Ultra-Fast Performance: By avoiding heavy frameworks, we achieved a near-instant load time even with a complex 3D scene.
  • Dynamic AI Integration: Creating a quiz system that never repeats the same question because it's generated by AI in real-time.
  • Visual Fidelity: Achieving a "AAA Game" aesthetic using only standard web technologies and glassmorphism.

What we learned

  • Three.js Optimization: Learned the importance of texture mapping and lighting to create realistic planetary bodies.
  • Prompt Engineering: Refined our ability to guide LLMs to provide educational, safe, and structured responses.
  • UX for Data: Figured out how to present "scary" scientific data (like asteroid proximity) in a way that is engaging and informative rather than overwhelming.

What's next for PlanetAI

  • VR/AR Integration: Bringing the solar system into WebXR for a truly immersive classroom experience.
  • Multiplayer Mode: Allowing students to join a shared "Space Lobby" and explore the cosmos together.
  • Advanced Physics: Adding gravity simulations and "What-If" scenarios (e.g., "What if Jupiter was as close as the Moon?").

Built With

Share this project:

Updates