Earth: A 3D Globe in the Browser, All the Way Out to the Observable Universe

I open-sourced a new project, Earth: a pure-frontend 3D globe in the spirit of Google Earth. Drag to rotate, scroll to zoom, click any country to fly over and see its flag, population, GDP, and system of government; the top bar also climbs a cosmic scale ladder — the Moon, the Solar System, the Milky Way, all the way to the observable universe. Try it live at earth.kim.

Why build this

What I wanted was simple: a globe that spins the moment you open the browser, where clicking a country shows you how it's doing today — no client to install, no token to register, no paid API. The professional options (Cesium, say) are far heavier than this calls for, so I assembled a lightweight one myself.

What's inside

Country info: click a country and the camera glides over, with altitude adapted to the country's size. The detail panel shows the flag, bilingual and official names, capital, region, area, population, languages, currency, GDP (nominal and per capita), development status, and system of government, plus an embedded Wikipedia history summary that follows the language setting.

Data layers: a GDP bar layer stands every country's latest GDP up as 3D columns (sqrt-normalized, colored by World Bank income group); a flag layer pins each flag at its country, sized by area; a shipping layer draws the world's major maritime trade corridors — animated arcs segmented by hub ports, with width and color encoding traffic level. Each layer toggles independently.

Global rankings: GDP, exports, and imports (live World Bank data), plus static snapshots of oil and gas production. Click a row to fly straight to that country.

Time-travel mode: the paleogeographic 3D evolution of 16 geological eras, from the supercontinent Rodinia 750 million years ago to the present, with a draggable timeline and autoplay (paleogeographic maps © C.R. Scotese, PALEOMAP Project). You can watch the continents drift, collide, and split apart.

The cosmic scale ladder: the top bar switches between five scales, each with a bilingual fact card — Earth (10⁷ m), the Moon (10⁸ m, lunar textures plus 10 historic landing sites from Apollo, Chang'e, and Luna), the Solar System (10¹³ m, eight planets orbiting), the Milky Way (10²¹ m, a procedural barred spiral of 50,000 particles, with the Solar System's position and Sagittarius A* marked), and the observable universe (10²⁷ m, a cosmic-web point cloud of galaxy clusters and filaments).

Where the data comes from

All free, no API keys. Country basics come from mledoze/countries (the upstream dataset behind REST Countries), statically bundled at build time — zero requests at runtime. Population, GDP, and trade figures come from the World Bank Open Data API, fetched on demand when you click a country and cached in localStorage for 30 days. Flags come from flagcdn.com; country borders are Natural Earth 110m, self-hosted with the app; the Earth textures are the NASA ones bundled with three-globe; planet and Moon textures are from Solar System Scope (CC BY 4.0).

One gotcha: the REST Countries v3.1 API was deprecated in 2026 (the new version requires registration), so the project never depends on it at runtime — the upstream dataset is statically baked in at build time, and updating the data is a single script re-run.

Tech stack

React 18 + TypeScript + Vite, with Three.js (via globe.gl) for the 3D — orders of magnitude lighter than Cesium, no Ion token, and country polygons, fly-to animation, and hover picking all work out of the box. Styling is Tailwind CSS v4, state is Zustand, i18n is react-i18next (browser-language detection plus localStorage memory). Pure frontend, statically deployable, with a right-hand panel on desktop and a bottom drawer on mobile.

What's next

Still planned: country search, major exports and resources, multi-country comparison, and chart visualizations. The code is at github.com/tan-zhuo/earth — give it a spin and file issues.