Three.js Holographic Globe — Wireframe WebGL Radar Sphere

The Three.js Holographic Globe snippet renders a glowing, wireframe sphere — the classic sci-fi "network globe" look — with glowing data-point markers and continuously expanding, fading radar-ping rings, using core Three.js and OrbitControls both loaded from a CDN.

Wireframe SphereGeometry gives the latitude/longitude look for free

Rather than manually drawing latitude and longitude lines with custom Line geometry, the snippet simply renders a normal SphereGeometry with wireframe: true on its material. Three.js's sphere geometry is already built from a grid of latitude and longitude segments internally — setting wireframe mode just reveals that existing triangulated grid structure, immediately producing the recognizable globe-lines look with zero extra geometry work.

A second, larger backside sphere fakes a rim glow

True Fresnel-style rim lighting (where edges of a curved surface glow brighter than its center, viewed head-on) requires a custom shader. This snippet fakes the same effect cheaply: a second sphere, very slightly larger than the wireframe globe, rendered with side: THREE.BackSide and very low opacity, sits just outside it. Because BackSide rendering only draws the *interior* surface of that larger sphere (the side facing inward, toward the camera when looking at the globe's edge), it reads as a soft, glowing halo exactly where the globe's silhouette edge is, without any shader code at all.

Data markers placed with the same spherical-coordinate formula used elsewhere

The small glowing "city" or "data point" markers on the globe's surface use the identical uniform-spherical-distribution formula from the network graph snippet — a random azimuthal angle, a polar angle derived from an arc-cosine, projected onto a fixed radius just outside the globe's surface. Because each marker is added as a *child* of the globe mesh rather than the scene directly, every marker automatically rotates along with the globe with zero additional per-marker rotation code.

Radar pings: a spawn-grow-fade-recycle cycle, not one-shot animations

Each of four ring meshes tracks its own life value from 0 to 1, looping back to 0 once it passes 1. That single value simultaneously drives two things every frame: the ring's scale (growing from small to large) and its opacity (fading from visible to fully transparent) — both derived from the same life number, just mapped differently. Because the four rings' life values are initialized at evenly staggered starting points (i / RING_COUNT), they're never all pulsing in sync; a new ring is always mid-expansion while another is just fading out, producing a continuous, overlapping pulse rather than four rings flashing in unison.

One shared value driving two visual properties

Both the rim-glow sphere and the radar pings demonstrate the same underlying idea: deriving multiple visual properties (scale and opacity, or glow color and edge position) from a single tracked number is what keeps looping, pulsing effects feeling coordinated rather than like several independent animations that happen to run near each other.

Where this technique applies

The wireframe-sphere-plus-radar-ping combination is the standard visual shorthand for "network," "global reach," "scanning," or "tracking" concepts across tech and sci-fi interfaces. Pair it with a network graph for a "local nodes, global reach" two-scene visual, or contrast its cool, technical wireframe look against the warm, faceted glow of the crystal cluster.