block by mbostock 2b85250396c17a79155302f91ec21224

GeoJSON in Three.js

Full Screen

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.

Updated Example →

index.html