Skip to content

Animated globe built using three.js. Made to replicate Stripe & Githubs world displays.

Notifications You must be signed in to change notification settings

Wondr-design/threejs-globe

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

threejs-globe

This is inspired by Github & Stripes webgl globes.

The dots clustered together resembling continents are achieved by reading an image of the world. Getting the image data for each pixel and iterating over each pixel. If the pixels r,g,b values exceed 100, display dot. The position of the dot is worked out by determining the lat and long position of the pixel.

Each dot within the canvas independently changes colour to give off a twinkling effect. This is achieved by shaders.

If the globe is clicked and dragged, the globe rotates in the direction of the drag. Along with this functionality, each dot independently extrudes off the globe creating a scattered effect. This is achieved by shaders.

To view, checkout: https://hydeit.co/globe/

alt text

About

Animated globe built using three.js. Made to replicate Stripe & Githubs world displays.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 77.7%
  • HTML 15.8%
  • CSS 6.5%