How To Add A 3D Globe To Your Website (Like Stripe / Github)

By James LePage
 on July 8, 2022

How To Add A 3D Globe To Your Website (Like Stripe / Github)

By James LePage
 on July 8, 2022

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:

Github Globe
Stripe Globe

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!

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.



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!

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Inline Feedbacks
View all comments
Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram