Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

three-globe

Package Overview
Dependencies
Maintainers
1
Versions
226
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

three-globe

Globe data visualization as a ThreeJS reusable 3D object

  • 1.0.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
40K
increased by23.84%
Maintainers
1
Weekly downloads
 
Created
Source

ThreeJS Globe Visualization

NPM

Largely inspired by the 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

MethodDescriptionDefault
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.

Keywords

FAQs

Package last updated on 11 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc