Realtime Webgl Globe

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

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

License

askmike/realtime-webgl-globe

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Error
Looks like something went wrong!

Packages