Day 41. Africa on a 3D globe 🐘
A small visual experiment: what happens when you center a 3D Earth globe on Africa?
Built with Three.js and WebGL this globe uses elevation data from NOAA’s ETOPO1 dataset to render global terrain in three dimensions. The sphere combines a textured surface derived from elevation with a displacement map that adds real geometric relief, allowing mountains and valleys to emerge as the globe rotates.
When centered on Africa, some familiar features become more noticeable. The Atlas Mountains rise clearly in the north. The Great Rift Valley cuts through East Africa. The contrast between the relatively flat Sahara and the more varied terrain further south becomes easier to see in 3D.
But the real inspiration for this view is something simpler. When you rotate the globe and frame Africa in the center, the continent’s outline begins to resemble an elephant. It is a playful observation, but one that becomes surprisingly clear once the terrain and curvature of the Earth are visible.
Technically the implementation is straightforward: Three.js sphere geometry, elevation-derived textures, and real-time rendering that allows rotation and zoom. Sometimes a small shift in perspective is enough to reveal something new in geography we think we already know.
Live demo: Africa 3D Globe
The project
| Piece | Role |
|---|---|
| Data | NOAA ETOPO1 global relief |
| Stack | Three.js + WebGL sphere + displacement |
| View | Africa-centered; rotation and zoom |
| Note | Playful elephant outline when framed on Africa |
How to follow
- Blog: blog.maptheclouds.com
- LinkedIn: Day 41 post
- Live demo: Africa 3D Globe
- Hashtag: #100DayMapChallenge
#100DayMapChallenge · Day 41/100 · LinkedIn
Previous: Day 40: Corgi Routes