OrbitLens Devlog #2: Adding ISS + Orbit

This session was mainly focused on implementing the ISS first to the satellite tracker. Here are the changes I made:
Satellite Data Extraction and ISS Positioning

To understand what I did in this session, it is important to know how I can get the ‘live’ location of the ISS works:

firstly, satellites don’t broadcast live GPS coordinates to the
internet. Instead, radars track them and publish Two-Line Element (TLE)
sets. A TLE is like a raw string that “acts as a mathematical variable
of an orbit’s shape at a specific moment.” I got these TLE from a
non-profit API called CelesTrak.

these TLEs are kinda useless so I used the satellite.js library to
parse te TLEs. This js engine also allows you to run what is known as
SGP4 models (Simplified General Perturbations 4) which is a mathematical
model used to predict an orbit. Using this, TLEs are then converted to
what’s known as Earth-Centered Inertial (ECI) vectors which is a

“non-rotating 3D coordinate system anchored to the center of the
Earth with its axes fixed relative to the stars, allowing you to
calculate a satellite’s absolute mathematical position in space
independent of the Earth spinning beneath it.”
The ECI is still not useful so I passed it through
satellite.eciToGeodetic which converted the eci to geodetic coordinates
(longitude, latitude and altitude)
But there’s one more step before the data is useful. The thing is
Three.js only understands Cartesian coordinates (x, y, z) so the
geodetic coordinates need to be converted to catesian. I did that using
these mathematical formulas:

x = r * cos(lat) * cos(lon)
y = r * sin(lat)
z = -r * cos(lat) * sin(lon)

Orbit Implementation

Satellites do not orbit in perfect circles; they follow complex
trajectories that shift as the Earth rotates underneath them. The ISS
takes roughly 92 minutes to complete one full orbit around the Earth. I
captured this entire window by running two separate for loops. For these
loops, i created 92 differed Date objects spaced exactly 1 second
apart. here are the loops and how they work in a small nutshell:

The Past: I looped backward from -46 minutes up to 0 (the current
moment) and inputted the X, Y, and Z coordinates in each loop into
THREE.BufferGeometry to draw a solid yellow LineBasicMaterial.

The Future: I looped forward from 0 to +46 minutes. In every single iteration of those loops, and did the same thing.

Challenges:

the hemisphere and orbit were originally flipped or were completely
false so i had to wrack my brain and dind the cause. I spent more than
an hour debugging this. Turns out the formula was wrong and i used sin
instaed of cos.
In te end, I also double checked my orbit and position with official ISS trackers, and they matched!