Web developers all around the world are in awe of the 3D globes built by Stripe and GitHub.
Several months ago when I was building the Agency site for Isotropic, I wanted to add a 3D globe, and went down the technical rabbit hole. In this article, we're going to take a look at how to build a 3d globe, and the best ways to implement this unique effect in your own website.
If you're trying to add a 3D globe to your website, here are the best ways to to it in 2024.
Basically, the two companies said to their engineering teams, "build something fun and cool"! And this is what we got:
There are some other examples of websites that made the use of a globe on the homepage, but these are the two most popular and well-built.
In fact, they made such a splash in the industry, both companies published long blog posts about how they built and implemented the 3D globes:
From both of these articles, we can see that the developers took a similar approach to each other, and made use of WebGL and shaders.
What's crazy about the GitHub globe is that the points are actually dynamically populated from the geography of pull requests - crazy!
If you read the articles that we link above, you'll see that it is incredibly complex to build a globe from scratch. Instead, I'd use one of the solutions below:
This is what I used for the agency site. It's the easiest way to add a globe to a website. It comes with a ton of functionality and the ability to customize. It also comes with support and great documentation, but is a paid solution.
It's really easy to integrate with custom datasets to display points and highlight regions.
This is the most popular open source way to build and implement a 3D globe. It's actively developed, super powerful, and easy to customize.
This is basically a copy of the GitHub globe that you can easily install using webpack and customize to suit your needs.
GlobeKit was a project that built some really awesome globes. Sadly the market wasn't big enough and they closed operations in 2020.
If you've ever wanted to add a 3D globe to your website, these are the best ways to do it. Any questions, comments, or suggestions? Leave them below!