Convert Latitude / Longitude to Tube Geometry


I have a JSON file with many coordinates (latitude, longitude, and elevation). These coordinates are very close together on the map, meaning that the values don’t change much.

What I want to do is draw a TubeGeometry with these coordinates, in other words, create a THREE.CatmullRomCurve3 with them.

I’ve tried two methods, but neither gives me a 100% satisfactory result:

The first method I tried is to directly pass the latitudes and longitudes to Vector3. However, the result I get is just a point (I suppose this happens because the coordinates are very close).

The second method is to calculate the minimum and maximum longitude and map each one between 0 and 1. Then I multiply it by a value to scale it.

coordinates.forEach((coordinate, index) => {
    const scale = 100000

    const lat = scale * mapValue(coordinate.latitude, minLatitude, maxLatitude, 0, 1)
    const lon = scale * mapValue(coordinate.longitude, minLongitude, maxLongitude, 0, 1)

    let vectorToPush = new THREE.Vector3(
    setPoints(prevVectors => [...prevVectors, vectorToPush]);

With this second method, I get a shape similar to the desired one, but it’s not exact.

Does anyone know how I can correctly convert longitude and latitude into 3D coordinates?

Thanks a lot!

You’re on the right track with scaling. I assume mapValue is a wrapper around MathUtils.mapLinear.

Can you show what you mean by “its not exact”,

Do you have a codesandbox with the scaled coordinates to repeat the problem you’re seeing?

Hi @anidivr

so here you have the codesandbox that i have created bahrain - CodeSandbox

As you can see, the JSON result (green) should have the same shape (or more similar) as the 3D mesh.
I am converting the latitude and longitude to line points correctly?

thanks for your help!

After getting the curve, use getPoints(divisions) to smooth it out. Try the default, if that doesn’t help, try a higher value, but as the cost of more geometry. Depending on the spacing of your points, there’s usually diminishing returns for division values higher than 20.

curvepoints = curve.getPoints(20);

Here’s an example at 5

At 10

At 15

Hope this helps