Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Realtime Webgl Globe

A webgl earth making it easy to add custom shapes at coordinates in realtime.

example gif

Demo!

Or check out this demo that shows the position of the International Space Station!

Features

  • Makes it easy to add custom shapes to the globe at lat/long positions.
  • Interactive (mousewheel scroll & mouse drags).
  • Easy API for adding elements on the globe while it's running.

Basic Usage

var div = document.getElementById('globe');
var urls = {
  earth: 'img/world.jpg',
  bump: 'img/bump.jpg',
  specular: 'img/specular.jpg',
}

// create a globe
var globe = new Globe(div, urls);

// start it
globe.init();

// random data
var data = {
  color: '#FF0000',
  size: 20,
  lat: 52.3747158, // Amsterdam!
  lon: 4.8986231,  // Amsterdam!
  size: 20
};

// add a block on Amsterdam
globe.addBlock(data);

API


Class: Globe

Realtime Globe is a WebGL based earth globe that makes it super simple to add shapes in realtime on specific lat/lon positions on earth.

Globe.init()

Initializes the globe

Globe.zoomRelative(delta)

Zoom the earth relatively to its current zoom (passing a positive number will zoom towards the earth, while a negative number will zoom away from earth).

Parameters

  • delta: Integer

Returns: this

Globe.zoomTo(altitute)

Transition the altitute of the camera to a specific distance from the earth's core.

Parameters

  • altitute: Integer

Returns: this

Globe.zoomImmediatelyTo(altitude)

Set the altitute of the camera to a specific distance from the earth's core.

Parameters

  • altitude: Integer

Returns: this

Globe.center(pos)

Transition the globe from its current position to the new coordinates.

Parameters

  • pos: Object, the position
  • pos.lat: Float, latitute position
  • pos.lon: Float, longtitute position

Returns: this

Globe.centerImmediate(pos)

Center the globe on the new coordinates.

Parameters

  • pos: Object, the position
  • pos.lat: Float, latitute position
  • pos.lon: Float, longtitute position

Returns: this

Globe.addLevitatingBlock(data)

Adds a block to the globe. The globe will spawn just below the earth's surface and levitate out of the surface until it is fully out of the earth.

Parameters

  • data: Object
  • data.lat: Float, latitute position
  • data.lon: Float, longtitute position
  • data.size: Float, size of the block
  • data.color: String, color of the block

Returns: this

Globe.addBlock(data)

Adds a block to the globe.

Parameters

  • data: Object
  • data.lat: Float, latitute position
  • data.lon: Float, longtitute position
  • data.size: Float, size of the block
  • data.color: String, color of the block

Returns: this

Globe.removeAllBlocks()

Remove all blocks from the globe.

Returns: this


About

A webgl earth making it easy to add shapes at coordinates in realtime

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.