3D World Explorer

Overview

A 3D world map flag and geography learning tool, built to make exploring the world's countries, flags, and geography interactive rather than rote memorisation. Built with React, react-globe.gl, and Three.js, rendering all 241 countries from Natural Earth boundary data with no runtime network calls — country geometry, metadata, and flags are baked into the app at build time.

Every country is filled with a colour that differs from all of its neighbours, computed with a Welsh–Powell greedy graph colouring over adjacency derived two ways: shared borders from the boundary data's topology, and visual adjacency from a spatial hash over each country's vertices (plain bounding-box checks fail badly for countries like Russia that span half the globe).

Solved a few nontrivial rendering problems along the way: hover and selection are expressed purely through material colour rather than polygon altitude, since changing altitude forces the underlying library to rebuild all ~241 extruded meshes and stalls the main thread; and borders are drawn as their own mesh layer rather than using the built-in polygon stroke, which loses the depth test at the globe's surface and renders invisibly.