Making a 3D-globe from a 2D map layer with threejs and some geodesic transformation.

Posted by Johnnie on May 29, 2017

Recently by the same author:

Setting up PostGIS with Dokku

Note to self on how to set up a PostGIS datbase on a Dokku host.

A couple of months back we had a course in geodesy and where doing some exercises with doing transformations between different coordinate systems. One of the steps in such a conversion is to transform the map lat/lon coordinates into geocentric XYZ coordinates (these can then be transformed into the target coordinate system).

During the exercise I realised that these coordinates could be more than just an intermediate step, you can plot them in 3D-space and get a globe!

I began creating the visualisation in p5js, generating a grid of lat/lng coordinates, applying the gecentric conversion to them and plotting them to see if I could make a basic sphere.

fist attempt Live demo

As can already be seen in this very basic example, the frame rate in p5js for 3D stuff isn’t all that great, and it quickly got worse when I introduced more complex geometry. So I started to look around for alternatives and found three.js, which seems to be the standard for doing 3D stuff in the browser and started learning how to use that.

Here’s the final result, from a flat lat/lng coastlines shapefile from Natural Earth, to an interactive (eh, somewhat at least) 3d-globe.

fist attempt Live demo

The code for the experiment can be found here