Interactive World Globe

A globe of 2,000 light-blue points turns slowly against a dark background, with a fine network of lines between them. Three coloured markers pulse on the surface: red for the Netherlands, yellow for Suriname and green for England. On the right is a panel with the name of the selected country and a short text. The idea comes from the globe on anthropic.com.

The points sit on a Fibonacci spiral. Point i gets its height from phi = acos(1 − 2(i + 0.5) / 2000) and moves on from the previous point by a fixed angle derived from the golden ratio. That spreads them evenly over the sphere. All points together are a single THREE.Points object with additive blending, in the site's accent colour (#7fd8ff).

For the network, the code compares every point with every other point on load. If two points are closer than 0.5, on a sphere with radius 2.5, a line is drawn between them at 15 per cent opacity. With 2,000 points that is 1,999,000 comparisons, worked out once; after that only the group turns. The glow comes from a bloom pass (UnrealBloomPass) at strength 0.8. It is set lower than in the 3D WebGL demo on erik.php, so the text in the panel stays readable.

The markers sit at coordinates: the Netherlands at 52.37 N, 4.90 E, Suriname at 5.85 N, 55.20 W, England at 51.51 N, 0.13 W. A small function converts latitude and longitude to a point on the sphere. Each marker is a sprite with a glow texture the code draws itself: a radial gradient on a 64 by 64 pixel canvas. The markers keep growing and shrinking by 15 per cent, each with its own phase, so they do not pulse in step.

Move the mouse over a marker and a raycaster works out which one it is. The name appears next to the cursor, the marker grows and the globe stops turning for as long as you stay on it. Click it, or pick the NL, SR or EN tab at the bottom, and the code works out that country's angle around the vertical axis; GSAP then turns the globe to face you in a second and a half. Mouse control is off during that turn. In the panel the old text fades out in 0.3 seconds, then the name, the divider and the text come back one shortly after the other. A second and a half after loading, the page selects the Netherlands by itself.

Dragging turns the globe (OrbitControls, with damping); zoom and pan are off. On screens up to 768 pixels wide the globe sits at the top, at 40 per cent of the screen height, with the panel below. The countries live in one list in the code, and the markers and tabs are built from it: adding a country means one more entry with coordinates, colour and text. The country texts are in Dutch. Everything is in one PHP file; Three.js 0.160 and GSAP 3.12.5 load through an import map from jsDelivr.