Inspiration
Seeing the creativity in many personal project websites we have seen online, we decided that we wanted to use three.js to create a 3D project, experimenting with lighting and geometry.
What it does
-3D model of the milky ways planets and orbits.
How we built it
- MERN Stack
- React: Allowed us to manage state on the frontend and create pop-ups for the varying positions out tour will take. React props were also very useful for displaying JSON API data in order to display information for each planet.
- Three.js: Created 3D graphics rapidly and in an optimized way. This also embeds well into React, allowing us to integrate our educational elements by overlaying them over the 3D canvas. This was also useful for fast development. The learning curve wasn't enormous, and it allowed us to focus on other aspects of the project after the first few hours.
- Tailwind CSS
- Express.js: Allowed us to create our own API endpoints to store planet data, player scores in their tests, and the quiz questions.
- MongoDB: as database
Challenges we ran into
- Lack of experience: After a few hours we began running into bugs, which would then lead on to take up the vast majority of our remaining time rather than developing new features. These bugs were a product of us having little experience of coding as a team, and a beginner's understanding of many aspects of our tech stack.
Accomplishments that we're proud of
- Rendering a fully functional 3D model - fairly accurate to the real-life physics of the solar system
- Learning new technologies in a very short space of time
- Maintaining a steady pace throughout our project, and not losing motivation even when failing
What we learned
- The importance of planning ahead
- Integrating different parts of a project, especially when working separately
What's next for GalaxyGuide
We aim to maintain this project, and complete it with the ambitions we embarked upon it with.
Some features we would like to add:
- Physical light simulations of day and night, including a solar eclipse
- A teacher-student tracking and feedback system
Log in or sign up for Devpost to join the conversation.