AstroAtlas

Landing Page
3D App
Mobile View
Learn About Planets
Learn About Planets 2
Designing the website in figma

Inspiration

We were inspired by NASA's 3d model of the solar system and wanted to take a similar approach. However, NASA's version is filled with a lot of information and is meant for more hard-core space enthusiasts. We wanted to create a more user-friendly and casual interactive website that would educate people about interesting things about Astronomy.

What it does

AstroAtlas provides an engaging and informative way to learn about the solar system. It allows users to explore the planets and moons in a realistic 3d environment, with immersive animations that simulate space travel. Users can access detailed information about each celestial body, including its size, composition, and orbit. The website is designed to be both fun and educational, catering to space enthusiasts, students, and anyone who is curious about the universe.

How we built it

We built this website by using Spline to model the solar system and make it interactive. The project is a Next.js + React.js web application and has been deployed on Vercel.

Challenges we ran into

• Figuring out how we would approach and accomplish an interactive 3d website.
• Adjusting to Spline's Creation System to create and design the models.
• Finding out Spline's limitation where you cannot interact with objects and set up logic within React. This led to having to learn how to migrate the project over to Three.js.
• Three.js has a steep learning curve which takes a lot of effort and time to use.

Accomplishments that we're proud of

• We're proud of incorporating 3d interactivity within our web app.
• We're proud of the high-quality and accurate models that we have developed.
• We also think the presentation slides for this project are also noteworthy.

What we learned

• Designing 3d models and using Spline & Three.js within React.js.
• Navigating objects in 3d space through code.
• Teaching a member who has no knowledge of web development.