Leaflet vs Three.js for Equirectangular Map Projection


Goal is to utilize an equirectangular projection of earth as a background image to implement an animation loop of a satellite path.


How do I interpolate over an array of vectors for 90min?
The animation loop must be for 90min and it must reach the last vector.

What did i try?
I tried splitting the vectors into 3240000 values and tried




Expected a slow moving object interpolating over for 90min,but resulted in lag of the movement and direct change from one vector to another.
Amusingly this behavior changes if x,y+=1000.

At the end,

Is something like this possible?
Is it better to go with leaflet over Three.js?


@hofk @prisoner849

As for the questions prior asked,

I have solved the joining of lines as it was an issue with the vectors themselves unrelated to three.js.

Can I use codepen for an example?
That would be difficult as data is restricted by inbuilt modules calculating realtime latitude longitudes.

What am i using to draw?
Initially lines,but due to the vectors starting and ending at similar positions,a loop is formed causing me to not use the line but go with points drawn.

Since time is JavaScript is far more relevant and mysterious than in other cases - try doing it the other way around.
You have an array of N vectors that you want to iterate over 90 minutes.
90 minutes = 5400 seconds = 5400000ms (default JS time unit.)

Calculate how long each element in the array should be visible (ie. time equivalent of each array step):

t = 5400000 / N;
// For 5400000 elements in the array
t = 5400000 / 540000 = 1; // [ms] per element
// For 3240000 elements in the array
t = 5400000 / 3240000 = 1.6; // [ms] per element
// For 270000 elements in the array
t = 5400000 / 270000 = 20; // [ms] per element
// For 1000 elements
t = 5400; // [ms] per element = 5.4s per element
// Etc.

Using either Three.Clock or dt from useFrame / requestAnimationFrame determine the elapsed time (mind, afair, Three.Clock is using seconds instead of ms.) Then simply calculate which vector to show at the given frame, by rounding the elapsed time to the nearest frame:

const [ clock ] = useState(new Three.Clock()); // NOTE It starts automatically

useFrame(() => {
  const elapsedTime = clock.getElapsedTime() / 1000.0; // NOTE Convert s to ms

  const ninetyMinutes = 5400000;
  const totalFrames = 3240000; // NOTE You can just read array length here

  const frameInterval = ninetyMinutes / totalFrames;
  const currentFrame = Math.floor(elapsedTime / frameInterval);

  const currentVector = arrayOfVectors[currentFrame];

  obj.position.set(currentVector.x, currentVector.y, 0);

This way you make your app independent of frame rate drops and device performance.

Hey, thanks for the solution . It informative and beneficial.

Do you know why the render loop via useFrame() stops, waits, or interrupts when I am scrolling up and down?

Further, it triggers a functional component( such as DrawCurve) to execute again.

Update- @mjurczyk Seems like a garbage collection issue of vectors and other variables within the functional component.