This is a personal project I built to have a proper play with Three.js. It is an interactive globe carrying all 16 World Cup 2026 venues, across the United States, Mexico and Canada.
Click any stadium marker and the camera flies over to it. A panel opens with the capacity, the climate data and the full fixture list for that venue.
The globe
The atmosphere glow is a custom GLSL shader rather than a texture, because a texture falls apart the moment you spin the thing quickly. Marker clicks go through raycasting. The camera moves are handled by GSAP so they arc across the surface instead of cutting straight through the middle of the planet.
That last one sounds like a detail. It is the difference between it feeling like a globe and feeling like a menu.
Country borders are drawn from GeoJSON as LineSegments on the sphere, and the markers take the host nation colours, so you can read the three countries without a legend.
The stadium panels
Each venue renders a live rotating wireframe model in its own WebGL context, completely separate from the globe renderer. I built the models in Blender with parametric Python scripts, exported them as GLB, then rendered them with EdgesGeometry at a 15 degree threshold.
That threshold is the whole trick really. It keeps the clean structural edges and drops all the internal triangulation, so a stadium reads as an architectural drawing rather than a mesh. Gold wireframes mark the Final and the Opening match.
The full schedule is in there as well, all 104 fixtures, wired to each venue from a JSON dataset I structured by hand. That took a good deal longer than the shader did.
The architecture
Deliberately light. No framework, no build step, just ES modules served straight to the browser through an importmap.
For something this size that is plenty. I have gone back to old projects with a two year old toolchain and spent most of a day getting them to compile before changing a single line, and I did not fancy that again. There is nothing here to go stale.
Built with Three.js, WebGL, GLSL, Blender, ES Modules, GeoJSON and GLB. It is still up, and I tidy the fixture data as the schedule firms up at the moment.