SatTracker

A 3D-rendered Earth with the real-time positions of orbiting satellites and telescopes, an informative and interesting site that gives descriptions, speed, longitude, and latitude fetched from an API.

Comment

Discord: lvl 2 daniel#0883, gatorevan#3530

Inspiration

The theme inspired us to make digital information consumable in a visual and interactive environment, combined with the team's interest in space and "the unknown".

What it does

The webpage renders a 3D globe, creates satellite objects and trails in real-time, and has a selector for each satellite which will bring up its many statistics fetched from an API, such as speed, coordinates, pictures, and descriptions.

How we built it

We used a variety of frameworks, such as three.js to render an interactable 3D globe as well as render the satellites in real-time, and shoelace to create dropdown menus and slide-out drawers with information about the selected satellite. We used N2YO as our satellite API and used equations to transform the longitude and latitude coordinates into x, y, and z coordinates on our 3D plane.

Challenges we ran into

We attempted to make the satellites themselves clickable on the 3D globe by using a raycaster instrument. Unfortunately, the way the program had been set up, it was too large of a time commitment to complete. We also had issues rendering the correct satellites in their respective positions, not aware of the reason the array was being sorted differently on each instance. We found the solution through a grueling process of trial-and-error and overcame this large roadblock. Three.JS was also a framework that our team was not familiar with, proving to have a large learning curve.

Accomplishments that we're proud of

Set a goal out of our comfort zone and successfully achieved it. Used technologies we were not initially familiar with. Created an educational and perplexing model for experts to beginners to navigate easily through.

What we learned

We learned the many different ways in which to import modules, packages, frameworks, etc. into our program. We learned how to utilize an API to its fullest extent. We learned how to manipulate data to our will. We learned how to use Git in a collaborative sense. We learned how to 3D render models and apply textures in three.js framework. We learned how to implement shoelace framework into our program. We learned how to work under a tight schedule and deadline in our first hackathon!

What's next for SatTracker

More interactivity for our rendered models, as well as more data at quicker processing speeds.

Built With

Share this project:

Updates