Travel Globe

What it is

An interactive 3D globe of the places Monte has lived and travelled, drawn as filled countries on an earth you can spin and explore. Ten countries are filled in their own flag-derived colour. Tapping one names it in the read-out at the top left and flies the camera to face it; three of the ten also carry a line about the place, and the rest show the name alone. Left to itself the globe drifts eastward at about five degrees a second — a full turn takes a little over a minute — and it stops the moment you grab it, resuming a couple of seconds after you let go. Turning on reduce-motion in settings stops the drift entirely.

The coastlines are real TopoJSON boundary data rather than a texture map, so the outlines stay sharp on any screen instead of blurring into pixels the way a painted globe does.

Drawing a globe from vector boundaries rather than an image means the coastlines are geometry: they are triangulated once from the TopoJSON and then live in the scene, so they stay crisp at any size rather than resolving into pixels. Every one of them is placed by converting latitude and longitude into a point on the sphere, which is also how the camera knows where to fly when you pick a stop, and why the fills sit exactly on the borders they belong to.

The chevrons at the top right step through the countries in chronological order, newest first, so the globe can be read as a sequence rather than a map; the arrow keys do the same thing. The camera eases between coordinates instead of cutting, and it eases in latitude and longitude rather than along the shortest arc through space — an India-to-US cut the short way passes over a pole, where a fixed up-vector makes the whole view spin. Travelling the long way round keeps the flight at sane latitudes and preserves the sense of distance between one place and the next.

Tapping a country works because the boundary polygons are hit-tested directly against the sphere, so the read-out names whichever country you actually touched and the camera goes there. It is the difference between a globe you look at and one you can ask a question of, and it is only possible because the outlines are geometry rather than a picture painted onto the surface. There is no zoom: the distance is fixed so the globe always fills its frame the same way, and spinning is the only way to move.

How to use it

• Drag to spin the globe.
• Tap a country to name it and fly there.
• Step through the countries with the arrows at the top right, or the arrow keys.
• It drifts on its own until you touch it.

More experiments

• Ferrofluid — webgl, three.js, r3f
• Rocky — webgl, three.js, r3f
• Eiffel Tower — webgl, three.js, r3f

See every experiment