Click any stadium marker and the camera flies to that location, opening a detail panel with capacity, climate data, and the full fixture list for that venue.
The globe uses a custom GLSL atmosphere shader for the outer glow, raycasting for marker interaction, and smooth GSAP-powered camera transitions that arc across the surface when you jump between stadiums. Country borders are drawn from GeoJSON data as LineSegments on the sphere surface.
Each stadium in the detail panel renders a live rotating 3D wireframe model in its own WebGL context, completely independent of the globe renderer. The models were built in Blender using parametric Python scripts, exported as GLB, and rendered in Three.js using EdgesGeometry at a 15° threshold, which shows only clean structural edges rather than internal triangulation. This gives an architectural schematic look that matches the dark cinematic visual style of the globe. Gold wireframes mark the Final and Opening match venues; country colours (blue/green/red) identify the host nation for each stadium.
The full match schedule, all 104 fixtures, is wired to each venue from a hand-structured JSON dataset. The architecture is deliberately lightweight: no framework, no build step, just ES modules served directly in the browser via an importmap.
Technologies: Three.js · WebGL · GLSL · Blender (bpy) · ES Modules · GeoJSON · GLB/glTF