Inspiration
I have always been intrigued by making 3D websites as I believe they are much more appealing and a great break from the usual website style. When I saw this hackathon, I thought of Google Earth and how they have model of the Earth but no satellites to look at. I then remembered that something like the ISS is sometimes visible from Earth and I thought that if I could make an easy to see tracker that looked interesting due to being 3D, that would work well.
What it does
The website functions by taking in the location of the International Space Station from an API and translates that data into an interactive 3D model where the user can play with and visualize the location of the ISS.
How I built it
I used three.js and models from NASA to place a model of the Earth and the ISS into a website. Three.js takes care of much of the rendering and shaders which allowed me to just focus on the implementation of the basic idea rather than focusing on the behind the scenes coding.
Challenges I ran into
The main challenge that I ran into was taking the latitude and longitude of the ISS given by the API I used, and converting that data into the vector3 position used by three.js. However, after a lot of research, I found a complicated mathematical method of translating the data into usable numbers for the website.
Accomplishments that I'm proud of
I'm proud of adding every feature that I planned to add. When brainstorming for this hackathon, I tried to limit how complicated the project would be but I still expected to have to make some compromises to finish in time. However, I was able to finish in time while still including every feature I wanted and making the website look great.
What I learned
Before this project, I had never used three.js. I had heard about it many times and was always intrigued, but this project was a true introduction of how to use this framework. I feel like I learned a lot about the three.js workflow and how 3D models work in applications.
What's next for Follow ISS
In the future, a better skybox could be used to make the website look even nicer. Additionally, possibly adding more satellites and maybe even rocket launches could make the website even more functional and appealing.
Log in or sign up for Devpost to join the conversation.