three-globe

ThreeJS Globe Visualization

Largely inspired by WebGL Globe, this is a ThreeJS WebGL class to represent data visualization layers on a globe, using spherical projection.

Quick start

import ThreeGlobe from 'three-globe';

or

const ThreeGlobe = require('three-globe');

or even

<script src="//unpkg.com/three-globe"></script>

then

const myGlobe = new ThreeGlobe()
    .globeImageUrl(<imageUrl>)
    .pointsData(<myData>);

const myScene = new THREE.Scene();
myScene.add(myGlobe);

API reference

Method	Description	Default
globeImageUrl([string])	Getter/setter for the URL of the image used in the material that wraps the globe. If no image is provided, the globe is represented as a black sphere.	null
pointsData([array])	Getter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicular from the surface of the globe.	[]
pointLat([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate.	lat
pointLng([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate.	lat
pointColor([str or fn])	Point object accessor function or attribute for the cylinder color.	() => '#ffffaa'
pointHeight([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's altitude in terms of globe radius units (0 = 0 altitude (flat circle), 1 = globe radius).	0.1
pointRadius([num, str or fn])	Point object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees.	0.25
pointResolution([num])	Getter/setter for the radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders.	12
pointsMerge([boolean])	Getter/setter for whether to merge all the point meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects.	false
customLayerData([array])	Getter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the customThreeObject method.	[]
customThreeObject([Object3d, str or fn])	Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of ThreeJS Object3d.	customThreeObject([Object3d, str or fn])
getCoords(lat, lng [,altitude])	Utility method to translate spherical coordinates. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the equivalent {x, y, z} euclidean spatial coordinates.