I randomly came across this awesome project by makc. At first I thought it was a rendered photo of a model made by dedicated 3D software like Maya and Blender. But no, it was actually running live on the web using Three.js! Wow.
It is basically the explosion effect I’ve been after, whereby the whole country, not just a bar, extrudes outwards to indicate the value of a data point.
I had been working at this problem for sometime, but my results were rather unspectacular. Also my approach of using only the outlines of the countries meant I was limited in how the coutries could be rendered. Getting the countries' surfaces would require using triangulation, a rabbit hole I wasn’t particularly keen on entering.
Makc had already done all the hard work. And it looked great. And he wants people to use it. So… I decided to use it. And channel my energy to other aspects of the project yet to be implemented.
Here's how I went about customizing the globe
Tweaked so that it generates geometry only for the “top” parts of the continents.
How about combined? (The tween looks snazzy)
The look for now. Combines a bunch of effects.
Warning, the following can never be unseen. These are my earlier attempts, and inevitably why I scrapped that approach.
- As particles
- As extruded borders. I was going for a tron light-cycle look but got ribbon spaghetti instead