An immersive, hardware-accelerated 3D exploration interface pulling live telemetry and mission data from NASA’s deep-space archives.
⚡ Core Integration Stack:
The project was engineered to demonstrate a high-density integration of modern frontend libraries and scientific APIs.
3D Engine | Three.js (r128): Orchestrates the procedural starfield (15k points) and hardware-accelerated WebGL geometry for a smooth 60FPS cosmic environment.
Styling | Tailwind CSS: Utilized to build a custom Glassmorphism HUD, leveraging backdrop-blur and dynamic borders for a futuristic "Space Terminal" aesthetic.
Icons | Lucide React: Provides a consistent, context-aware iconography system used for real-time planetary classification and navigation.
API | NASA Open API: Integrated via live asynchronous fetching to pull official mission intelligence, descriptions, and high-definition imagery directly from NASA archives.
Typography | Google Fonts: Employs Orbitron for high-impact UI headers and JetBrains Mono for the real-time telemetry and coordinate data feeds.
Instead of static cuts, we implemented a Linear Interpolation (Lerp) camera system.
- The Math:
$Camera_{pos} = lerp(current, target, 0.06)$ - Result: Provides a cinematic, fluid transition that conveys the massive scale of the solar system while maintaining 60FPS performance.
We bypassed static data by hooking into the NASA Image & Video Library API.
- Real-time Fetch: Every "Warp" triggers a new fetch request to NASA's servers.
- Data Processing: The app "decrypts" raw JSON into the HUD, displaying official mission timestamps and scientific descriptions for each celestial body.
- Starfield: A
BufferGeometrysystem generating 15,000 unique vertices in 3D space to ensure the environment feels infinite without performance degradation. - Dynamic Lighting: A centralized
PointLightat the Sun's origin creates accurate light-falloff and shadows on planetary surfaces.
The Glassmorphism interface provides live feedback to the "pilot":
- Sector Status: Tracks the current planetary focus in the neural link.
- Mission Clock: Real-time synchronized timestamping for mission logs.
- Coordinate Tracker: Live feed of the Three.js
Vector3camera position. - NASA Intel: Dynamic scrollable feed for mission-critical information.
This project is optimized for zero-config environments.
- Clone:
git clone [repo-url] - Navigate:
cd team-[your-folder] - Launch: Open
index.htmlin any WebGL-enabled browser.- Note: All dependencies are served via optimized CDNs for maximum load speed and reliability.
[Click here to view the Demo Video]
https://drive.google.com/file/d/1s5n7K85nJYXhDN4pUfikKWtXo8A_bw40/view?usp=sharing
Built for the devSprint Challenge.