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.

3D Globe Examples

The two most popular examples of a 3D globe being implemented on a major website come from Stripe and GitHub. Both are marvels of web development, and make use of some really cool, interesting, and advanced JavaScript techniques.

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:

• To design and develop an interactive globe (Stripe)
• How we built the GitHub globe (GitHub)

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!

How To Add a 3D Globe To Your Website

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:

1) Miniature Earth - 3D Globe for JavaScript

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.

2) ThreeJS Globe Visualization

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.

3) GitHub Globe

This is basically a copy of the GitHub globe that you can easily install using webpack and customize to suit your needs.

RIP - Globekit

GlobeKit was a project that built some really awesome globes. Sadly the market wasn't big enough and they closed operations in 2020.

Conclusion

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!