Rendering latitude & longitude in THREE.js

Community Help
1

Hi there,

This is more of a conceptual question, but figure some folks around here might be able to help :slight_smile:

I’m trying to wrap my head around how geospatial data is represented in a 3D space, when projected onto a flat Mercator view (ie. not a globe or sphere).

For instance, say I wanted to render the following polygon in Three.js, and be able pan / zoom around the geometry (as you would expect in a web map).

// simple GeoJSON bounding box
"geometry": {
"type": "Polygon",
"coordinates": [
   [
     [-73.996438, 40.6960951],
     [-73.978114, 40.6960951],
     [-73.978114, 40.7051724],
     [-73.996438, 40.7051724],
     [-73.996438, 40.6960951]
   ]
 ]
}

My understanding is the process is something like:

  • convert lat/lng coordinates values in a 3D world space
  • render the geometry with the world coordinates
  • position the camera / viewport to look at the rendered geometry from above

However, the parts I’m having trouble understanding:

  • What is the 3D world space? Is it something like meters, or pixels? (what is generally used for a vector map?)
  • If we’re omitting altitude, is the shape a 2D geometry? (or just have a very small Z value?)

If there are any examples, or other resources that cover this in more detail, would be greatly appreciated. Thanks!

2

Your question seems to be a bit self-contradictory. For example, you say that you want to project your data

onto a flat Mercator view (ie. not a globe or sphere)

But you also say that you want to

convert lat/lng coordinates values in a 3D world space

to render the data with Three.js.

Ultimately, I guess you want to plot the points on a globe but set the viewpoint so that the image appears 2D?

Assuming I understand the question, here are a couple notebooks that might help:

Defines a lnglat_to_globe function to map geodetic points to the globe

Uses native Three.js tools to compute the 3D locations of points in orbit in terms of the geodetic position above the earth.

3

Yeah, maybe that wasn’t quite clear. I’m basically trying to understand how something like a vector map (ie. Mapbox) renders geometries. Basically, how to render a 2D geometry (on a plane?) with the ability to pan & zoom.

To do that with something like THREE.js (or WebGL), I assume latitude & longitude still need to be converted to a 3D coordinate space, and trying to understand what that space is.

4

Fundamentally, this is a two-dimensional problem. That is, you’ve got 2D data (lat/lon pairs) and you want a function that sends that data to a 2D rectangle. There’s a pretty simple formula that accomplishes this task for the Mercator projection given a point with latitude \varphi and longitude \theta given in radian measure, namely:

(\varphi,\theta) \Rightarrow (\theta, \ln\left(|\sec(\varphi)+\tan(\varphi)|\right)).

I’ve implemented exactly that formula in this map. Note that panning and zooming becomes a simple matter of manipulating an SVG transformation, as I’ve done with this map.

More generally, you might be interested in the topic of map projection, which is quite a broad topic. In that context, then yeah, you certainly want to understand that the latitudes and longitudes describe points on the globe and a key question for any projection is - how are shapes on the globe distorted after projection to the plane? There are a number of references for that topic. From a mathematical perspective, I like Tim Freeman’s Portraits of the Earth. I relied on that a bit when I wrote these notes on the topic.