How to align custom layer objects on arcs and paths?

[marcelotten]

I want to visualise airplanes, boats and cars following their routes. For airplanes I'm using arcs, for boats and cars paths. How can I get the position (both coordinates and rotation) for a given position on an arc or path to use this to align my three.js objects on my custom layer? The position would be determined by a percent value of how much of the route has already been travelled.

[vasturiano]

@marcelotten thanks for reaching out.

This is not as easy as it may seem at first. You need to do some spherical geo calculations to get to the result you're looking for.

Simplifying the question, if all that was needed was to get the percentual coordinates of a location along the great circle arc between just two points, I would suggest to use d3-geo's geoInterpolate.

For your case you could build on top of that for the two layers. For arcs the above method should work, you just need to then also interpolate the altitude, along a curved line. In the component's case we use a cubic bezier curve that start and end on the ground. You can find the inner code here, if it helps:
https://github.com/vasturiano/three-globe/blob/7242049d9ee19de7e446a6cb44aa180e7e37d8ab/src/layers/arcs.js#L279-L281

For paths, it's not as easy. But the good news is that you have all the coordinates of the points already on your side. So depending on the complexity of your paths, you can perhaps already calculate a good approximation by using the geoInterpolate function above.