Some data is inherently geographic. Office locations, delivery routes, sensor networks, customer distribution, supply chain pathways. Plotting this on a flat map works for regional views. But when the data spans continents, when routes wrap around the globe, or when elevation matters, a 3D globe or terrain view provides context that flat projections distort.
Three.js renders globes, terrain, and geographic data layers in the browser. The ecosystem (Globe.GL, three-globe, three-geo) provides foundations. Production implementations need custom data layers, performant rendering of thousands of markers, and meaningful interaction when users click or hover on geographic features.
Supply Chain Control
A Three.js globe with supply chain data overlaid at real coordinates. Inbound freight routes (cyan) carry parts from suppliers to distribution hubs. Outbound routes (amber) distribute finished product to markets. Filter by region, investigate alerts, or adjust velocity to simulate network conditions.
Network
The Constraint: Coordinates and Scale
Geographic data uses latitude and longitude. Three.js uses Cartesian coordinates (x, y, z). The conversion is straightforward, but three subtleties determine whether the result looks correct at every zoom level.
Floating-Point Precision
At globe scale (radius ~6,371 km), a 1-metre position offset requires sub-millimetre precision. For city-level data this is irrelevant. For building-level accuracy and terrain, precision matters.
Scale Transitions
Globe view to street level is a ~10,000,000:1 scale change. Default near/far clipping planes cannot handle this range. Adaptive planes or logarithmic depth buffers prevent z-fighting artefacts.
Tile Loading
High-resolution terrain and imagery use tiled data. Tiles load on demand based on camera position and zoom. This is streaming architecture, not static scene loading.
The Naive Approach
The tutorial globe produces a visually impressive but functionally useless result. It looks good in a screenshot. It does nothing useful with data.
Globe Rendering
The globe is the foundation. Everything else is positioned relative to its surface. Getting the base right determines how everything layered on top looks and performs.
Geometry
A SphereGeometry with 64+ segments for smooth curvature. The sphere is the spatial reference; all markers, arcs, and overlays are positioned relative to its surface.
Base texture
A moderate-resolution Earth texture (4K-8K) for the zoomed-out view. Tile-based loading (Mapbox, Cesium, OpenStreetMap) for higher zoom levels. Progressive loading as the camera zooms in.
Atmosphere
A subtle atmospheric glow using a shader on a slightly-larger sphere. Sells the 3D illusion without significant rendering cost. Optional night/day terminator based on UTC time.
Markers and Data Layers
Markers represent data points on the globe surface. The conversion from latitude/longitude to Cartesian positions is the entry point for all geographic data.
Coordinate conversion: x = radius * cos(lat) * cos(lon), y = radius * sin(lat), z = radius * cos(lat) * sin(lon). For markers that protrude from the surface (pins, bars), extend along the surface normal, which on a sphere is the normalised position vector.
Use InstancedMesh for markers. All markers of the same type render in one draw call. Per-instance attributes encode position, scale (proportional to a data value), and colour (encoding a category or metric). For bar markers showing values, set the Y scale to the data value. This creates a "bar chart on a globe" where each location shows a proportional spike.
Data Arcs and Connections
Flight paths, trade routes, supply chain connections. Rendered as curved lines (great-circle arcs) between two points on the globe surface. Longer arcs rise higher above the surface to avoid clipping through the globe.
Rendering Options
Single LineSegments geometry for all arcs (performance), or TubeGeometry for thicker, more visible connections (visual quality). Choose based on arc count and visual requirements.
Animation
Animate arcs to show direction: a moving dash pattern or a particle travelling along the path. Makes flow direction immediately readable without labels.
Interaction
A globe without interaction is a decoration. Four interaction patterns make geographic data explorable.
Globe rotation
Orbit controls constrained to not go below the surface. Damping for smooth deceleration. Auto-rotation on load (respecting prefers-reduced-motion) stops on first interaction.
Marker hover/click
GPU picking or throttled raycasting against the instanced mesh. On hover, show a tooltip with location name and data values. On click, open a detail panel.
Region zoom
Double-click a marker or region to smoothly animate the camera to focus on that area. Load higher-resolution tiles. Show additional markers and labels hidden at the global view.
Filtering
UI controls (date range, category, threshold) filter visible markers. Set instance scale to zero for hidden markers (faster than recreating the InstancedMesh).
Terrain and Elevation
For regional views where terrain matters (construction sites, agricultural land, flood zones), render terrain with elevation data applied to a plane geometry.
Mapbox Terrain RGB
Elevation encoded in RGB pixel values. Fetch tiles, decode elevation, apply to PlaneGeometry vertex Y positions. Good coverage and resolution.
SRTM / ASTER
Free global elevation datasets at 30m-90m resolution. Pre-process into tiles for web delivery. Suitable for large-area terrain rendering.
LiDAR Point Clouds
High-resolution elevation. Render as particles (THREE.Points) or generate a mesh surface. Performance-intensive; use LOD aggressively.
Overlay data layers (boundaries, routes, heatmaps) on the terrain surface by sampling terrain elevation at each vertex and adjusting Y positions. Add a small offset to prevent z-fighting between the overlay and the terrain mesh.
Libraries and Ecosystem
The library choice depends on how much customisation you need versus how quickly you need to ship.
The Business Link
Geographic visualisation provides spatial context for business decisions. A renewable energy company plotted 800 sensor stations across three continents as instanced markers on a globe, with bar height encoding daily output and colour encoding deviation from forecast. Spinning the globe revealed that underperformance clustered geographically: stations in West Africa and Southeast Asia were consistently 15-20% below forecast, while European stations tracked closely. The pattern was invisible in the tabular data because station IDs bore no geographic relationship. On the globe, it was obvious in seconds, and pointed to a regional calibration issue in the forecasting model.
-
Spatial awareness Distribution patterns, coverage gaps, and regional concentrations visible immediately rather than inferred from data.
-
Route and logistics insight Supply chain pathways, delivery coverage, and connection density shown in geographic context.
-
Stakeholder communication A rotating globe with data arcs communicates global scope more intuitively than a spreadsheet of country codes.
For mapping and geospatial capabilities in broader application contexts, see Maps and Location.
Visualise Geographic Data
We build geospatial visualisations that make location-based data explorable. Globe views, terrain rendering, marker clustering, and data arcs: positioned accurately, rendered performantly, interactive and informative.
Let's talk about your geographic data →