All examples By author By category About

wboykinm

GeoJSON in Three.js

This example demonstrates how to display a GeoJSON MultiLineString geometry object as a wireframe using Three.js. Each point in the GeoJSON is converted from spherical coordinates (longitude and latitude in degrees) to three-dimensional Cartesian coordinates as follows:

x = cos(φ)cos(λ)
y = cos(φ)sin(λ)
z = sin(φ)

GeoJSON is often represented in equirectangular coordinates, which are planar rather than spherical. A visual artifact of this is extra lines along the antimeridian. You can convert equirectangular coordinates to spherical coordinates using d3.geoStitch; the world-atlas TopoJSON used in this example is already stitched. See also antimeridian cutting.