0

Currently I am trying to understand a Codpen where this guy has JSON data being fed into a Javascript app that plots coordinates using x and y.

Instead of using longitude and latitude to plot for example Hong Kong, he uses these coordinates.

{"x": 768,"y": 342,"name": "", "country":"Hong Kong"}

I want to be able to put in x and y a longitude and latitude value, but I can not figure out how to multiply or divide, a simple solution to go with his code. I am new to Javascript, but am trying to understand how to plot coordinates more efficiently on this specific project.

Is there a simple equation I could use to be able to plot more easily on this pen. Thanks.

https://codepen.io/Flamov/pen/MozgXb

ABC
  • 2,068
  • 1
  • 10
  • 21
  • It's funny you should ask that. [This example](https://threejsfundamentals.org/threejs/lessons/threejs-optimize-lots-of-objects.html) uses similar data – gman Mar 09 '19 at 05:13

1 Answers1

0

The example is basically using the Mercator Projection to convert radius, lat, long into euclidean x, y, z coordinates, as mentioned on lines 860+ of the JSFiddle you provided, and is using this S.O. answer as reference. Since radius is constant throughout the globe, you don't need to repeat that value for each point, it's just hard-coded into the example.

Mercator is a bit confusing because the scale stretches towards infinity as you approach the poles. As an easier alternative, you could use Vector3.setFromSphericalCoords(rad, lat, long) as outlined in the docs and it sets x, y, z for you. The main difference is that this approach doesn't cause distortion near the poles. It takes lat, long in radians:

  • lat ranges from [0, Pi] (north pole to south pole)
  • long ranges from [0, 2*Pi] (around the equator)
M -
  • 26,908
  • 11
  • 49
  • 81