Three.js Globe
with Flight Paths
& Cursor Interaction

1. What is Three.js and Why Use It for Globe Visualisations

Three.js is a JavaScript library that wraps WebGL — the browser's low-level GPU rendering API — into a developer-friendly abstraction layer. Without Three.js, rendering a single 3D sphere would require hundreds of lines of raw GLSL shader code and manual buffer management. Three.js reduces this to about five lines. For globe visualisations specifically, it gives you a SphereGeometry primitive, a texture loader, a camera, lighting, and a render loop — the complete scaffolding needed for a fully interactive 3D Earth.

The alternative approaches — CSS 3D transforms, SVG projections, or canvas-based 2D maps — all break down the moment you need real perspective depth, proper occlusion of continents on the far side of the globe, or smooth 60fps cursor drag rotation. WebGL via Three.js handles all of these natively because the calculations run on the GPU. For aviation dashboards, flight tracking tools, and data-driven globe maps, Three.js is the industry standard precisely because it balances render quality with development velocity. You can read more in our OpenClaw AI real-world use cases guide where interactive geospatial dashboards built on WebGL are a primary deployment pattern.

2. WebGL Scene Setup — Renderer, Camera, and Lighting

Every Three.js application begins with three objects: a WebGLRenderer, a PerspectiveCamera, and a Scene. The renderer creates a <canvas> element and communicates with the GPU. The camera defines the viewpoint — for a globe you want a perspective camera with a field of view between 45° and 60° so the sphere feels three-dimensional rather than flat. The scene is the container that holds every object, light, and helper in your 3D world.

Lighting for a globe typically uses two lights: a dim AmbientLight to prevent the night side from going completely black, and a DirectionalLight positioned to simulate the Sun. Setting the directional light at position(5, 3, 5) gives a convincing north-hemisphere illumination. This is the foundational setup that every globe visualisation — from flight trackers to climate data maps — builds on. The renderer.setPixelRatio(window.devicePixelRatio) call is critical for sharp rendering on retina displays; skipping it makes text and coastlines look blurry on high-DPI screens.

// Minimal Three.js scene setup
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(canvas.clientWidth, canvas.clientHeight);

const camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000);
camera.position.z = 2.8;

const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff, 0.4));

const sun = new THREE.DirectionalLight(0xffffff, 1.2);
sun.position.set(5, 3, 5);
scene.add(sun);

3. Building the 3D Sphere with Earth Texture

The globe itself is a SphereGeometry(1, 64, 64) — radius 1 unit, 64 width segments, 64 height segments. Higher segment counts produce smoother silhouettes but increase vertex count. For a typical globe at standard browser window sizes, 64×64 is the sweet spot. The material is a MeshPhongMaterial with your Earth texture map applied — this material responds to the directional light and creates the shaded day/night appearance. For a lightweight build without loading external texture files, you can generate a procedural dotted-grid globe using a canvas texture, which is what the demo on this page uses.

A second, slightly larger transparent sphere with a MeshPhongMaterial set to transparent: true and low opacity creates the atmospheric glow effect — the soft blue halo visible on real globe visualisations. This atmosphere sphere is scaled to 1.02 and uses a blue tint with additive blending. The combination of the textured sphere, the atmosphere sphere, and the directional light gives you the core visual of any professional globe without requiring external assets beyond a single JPEG texture.

4. Cursor Interaction and Drag-to-Rotate Controls

Cursor interaction is what transforms a static globe render into an engaging interactive experience. The standard implementation tracks three things: whether the mouse button is pressed (isPointerDown), the previous mouse position (prevX, prevY), and a rotation velocity (rotVelX, rotVelY) for momentum. On pointermove, the delta between the current and previous mouse position maps directly to rotation angles applied to the globe mesh's rotation.x and rotation.y properties. The delta is multiplied by a sensitivity constant (typically 0.005) to make the rotation feel natural.

The momentum effect — where the globe continues spinning after you release the mouse — is implemented with a damping multiplier. Every animation frame, if isPointerDown is false, the velocity values are multiplied by 0.94 (the damping coefficient) and then added to the globe's rotation. This exponential decay naturally brings the rotation to rest, mimicking real physical inertia.

5. Converting Lat/Long Coordinates to 3D Points

Latitude and longitude are spherical coordinates — they describe positions on a sphere in degrees. Three.js works in Cartesian (x,y,z) coordinates. Converting between the two requires a simple trigonometric formula that converts degrees to radians, then computes the 3D position on the surface of a unit sphere. The y axis in Three.js points up, which corresponds to the north pole. The formula is: x = R * cos(lat) * sin(lon), y = R * sin(lat), z = R * cos(lat) * cos(lon) — where R is the sphere radius and angles are in radians.

For flight path visualisations, this conversion is applied to both the departure and arrival airports. The two resulting 3D points become the start and end of each flight arc. A key detail: longitude in geographic systems runs from -180° to +180° with 0° at Greenwich, but the Three.js sphere's default orientation places 0° longitude at a different position. A rotation offset of the globe mesh (typically Math.PI / 2 around Y) is needed to align the texture's prime meridian with the geographic convention.

6. Drawing Animated Flight Arc Paths with CatmullRom Curves

A flat straight line between two points on a sphere looks wrong — real flight paths follow great circle routes that arc upward away from the globe surface. In Three.js, this is achieved with THREE.CatmullRomCurve3. You generate intermediate points along the arc by interpolating between the start and end 3D positions, and at each step, pushing the midpoint outward away from the sphere centre by a height factor (typically 0.3 to 0.6 radius units). This creates the elegant arcing flight path geometry you see on aviation dashboards.

The animation of the arc — where a glowing dot travels along the path — is implemented using the curve's getPoint(t) method where t runs from 0 to 1 over time. Each frame, a small sphere (the "aircraft" indicator) is repositioned to curve.getPoint(t % 1). Multiple flight arcs each with their own time offset produces the layered animated globe seen in professional data visualisations.

7. Adding Particle Trail Effects on Flight Paths

Particle trails give flight path animations a cinematic quality that differentiates them from basic line animations. The implementation uses Three.js Points geometry — a collection of vertices that render as individual sized dots rather than connected lines. Each particle is assigned a position along the flight arc, an initial opacity, and a speed. Every frame, particles move forward along the arc, their opacity decreasing from 1.0 to 0.0 as they age, then reset to the start of the arc when they reach the end. With 20–50 particles per arc, each with a slight random offset in spawn timing, you get a convincing trailing glow effect.

The shader for the particles uses a PointsMaterial with blending: THREE.AdditiveBlending — this causes overlapping particles to add their colours together rather than overwrite each other, producing bright bloom-like hotspots at high particle density points. Combining additive blending with a radial gradient circle texture makes each particle look like a glowing orb rather than a hard dot.

8. Performance Optimisation and Mobile Considerations

A Three.js globe can easily drop below 30fps on mid-range mobile devices if not carefully optimised. The primary optimisation levers are: geometry complexity (sphere segments), the number of active flight arcs, texture resolution, and shadow map usage. For mobile, reduce sphere segments from 64 to 32, limit concurrent animated arcs to 4–6, use a 1024×512 texture instead of 2048×1024, and disable shadow maps entirely — shadows on a globe visualisation add minimal visual value but double GPU load.

The renderer.setPixelRatio(Math.min(devicePixelRatio, 2)) call is the single most impactful mobile optimisation — it caps the pixel ratio at 2× even on 3× or 4× screens, halving the number of pixels rendered on high-DPI phones while remaining visually crisp. Combining this with renderer.powerPreference: "high-performance" in the renderer constructor tells the browser to use the discrete GPU on devices with dual-GPU setups.