Search code examples
javascriptthree.jswebgl-globe

How to get lat long values of point at center of screen in WebGL Globe?


Google's WebGL Globe allow placing markes at a specific lat long. But how can we get the lat long value of point currently at front or at center of screen. May be using camera position or rotation value.

We can use below code to find position on globe from lat long values:

var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
point.position.y = 200 * Math.cos(phi);
point.position.z = 200 * Math.sin(phi) * Math.sin(theta);

Solution

  • As far as I can see there’s no direct way to get it. I see two options:

    • you can either modify globe.js to “export” the rotation object: add the following at the end of globe.js, just after this.scene = scene;:

      this.rotation = rotation;
      
    • or, if you prefer not to modify globe.js, you can use the scene property, find the camera in there, and use its position the find the latitude and longitude. There may be an easier way using the scene directly, not quite sure.

    Note that globe uses three.js, so you can use that in any searches.