Three.js Globe: Building an Interactive 3D Earth

A globe is a SphereGeometry with a texture mapped onto it: a day-map Earth texture at minimum, often layered with a normal map (for terrain bump) and a specular/roughness map (oceans reflect differently than land). A separate, slightly larger transparent sphere with a Fresnel-based glow shader is the common technique for the soft atmospheric rim visible around most globe visualizations. It's a cheap effect that adds significant perceived polish.

Rotation is usually just mesh.rotation.y += delta * speed for a slow idle spin, paused on user drag via OrbitControls or custom pointer handling.

Every data point or city marker needs converting from latitude/longitude to a 3D position on the sphere's surface, using the standard spherical-to-Cartesian formula:

function latLngToVector3(lat, lng, radius) {
  const phi = (90 - lat) * (Math.PI / 180)
  const theta = (lng + 180) * (Math.PI / 180)
  return new THREE.Vector3(
    -radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.cos(phi),
    radius * Math.sin(phi) * Math.sin(theta)
  )
}

The sign and offset conventions (the - and +180) depend on how your texture is UV-mapped. If points appear mirrored or rotated relative to the texture, this is almost always where to look first, not the data itself.

The "flight path" arcs common in globe visualizations are QuadraticBezierCurve3 or CubicBezierCurve3 paths between two surface points, with a control point lifted above the surface (along the midpoint's normal) so the arc curves outward rather than cutting straight through the sphere. Animate them by progressively revealing the curve (drawing more of its length over time) or by animating a small sprite/point moving along the curve's getPoint(t). Both read as "data flowing" far more effectively than a static line.