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

aframe-globe-component

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aframe-globe-component

A 3D Globe component for A-Frame.

  • 1.3.6
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

aframe-globe-component

Version License

A 3D Globe component for data visualization using A-Frame.

An A-Frame entity component to represent data visualization layers on a globe, using a spherical projection. Uses three-globe as the underlying ThreeJS component to manage the globe object.

API

Globe Layer
PropertyDescriptionDefault Value
globe-image-urlGetter/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
bump-image-urlGetter/setter for the URL of the image used to create a bump map in the material, to represent the globe's terrain.null
show-atmosphereGetter/setter for whether to show a bright halo surrounding the globe, representing the atmosphere.true
show-graticulesGetter/setter for whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees.false
Points Layer
PropertyDescriptionDefault Value
points-dataGetter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicularly from the surface of the globe.[]
point-latPoint object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate.lat
point-lngPoint object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate.lng
point-colorPoint object accessor function or attribute for the cylinder color.() => '#ffffaa'
point-altitudePoint 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
point-radiusPoint object accessor function, attribute or a numeric constant for the cylinder's radius, in angular degrees.0.25
point-resolutionGetter/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
points-mergeGetter/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
points-transition-durationGetter/setter for duration (ms) of the transition to animate point changes involving geometry modifications. A value of 0 will move the objects immediately to their final position. New objects are animated by scaling them from the ground up. Only works if points-merge is disabled.1000
Arcs Layer
PropertyDescriptionDefault Value
arcs-dataGetter/setter for the list of links to represent in the arcs map layer. Each link is displayed as an arc line that rises from the surface of the globe, connecting the start and end coordinates.[]
arc-start-latArc object accessor function, attribute or a numeric constant for the line's start latitude coordinate.startLat
arc-start-lngArc object accessor function, attribute or a numeric constant for the line's start longitude coordinate.startLng
arc-end-latArc object accessor function, attribute or a numeric constant for the line's end latitude coordinate.endLat
arc-end-lngArc object accessor function, attribute or a numeric constant for the line's end longitude coordinate.endLng
arc-colorArc object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors.() => '#ffffaa'
arc-altitudeArc object accessor function, attribute or a numeric constant for the arc's maximum altitude (ocurring at the half-way distance between the two points) in terms of globe radius units (0 = 0 altitude (ground line), 1 = globe radius). If a value of null or undefined is used, the altitude is automatically set proportionally to the distance between the two points, according to the scale set in arc-altitude-auto-scale.null
arc-altitude-auto-scaleArc object accessor function, attribute or a numeric constant for the scale of the arc's automatic altitude, in terms of units of the great-arc distance between the two points. A value of 1 indicates the arc should be as high as its length on the ground. Only applicable if arc-altitude is not set.0.5
arc-strokeArc object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a TubeGeometry is used.null
arc-curve-resolutionGetter/setter for the arc's curve resolution, expressed in how many straight line segments to divide the curve by. Higher values yield smoother curves.64
arc-circular-resolutionGetter/setter for the radial geometric resolution of each line, expressed in how many slice segments to divide the tube's circumference. Only applicable when using Tube geometries (defined arc-stroke).6
arc-dash-lengthArc object accessor function, attribute or a numeric constant for the length of the dashed segments in the arc, in terms of relative length of the whole line (1 = full line length).1
arc-dash-gapArc object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.0
arc-dash-initial-gapArc object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.0
arc-dash-animate-timeArc object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.0
arcs-transition-durationGetter/setter for duration (ms) of the transition to animate arc changes involving geometry modifications. A value of 0 will move the arcs immediately to their final position. New arcs are animated by rising them from the ground up.1000
Polygons Layer
PropertyDescriptionDefault Value
polygons-dataGetter/setter for the list of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe.[]
polygon-geo-json-geometryPolygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.geometry
polygon-cap-colorPolygon object accessor function or attribute for the color of the top surface.() => '#ffffaa'
polygon-side-colorPolygon object accessor function or attribute for the color of the cone sides.() => '#ffffaa'
polygon-stroke-colorPolygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking.-
polygon-altitudePolygon object accessor function, attribute or a numeric constant for the polygon cone's altitude in terms of globe radius units (0 = 0 altitude (flat polygon), 1 = globe radius).0.01
polygon-cap-curvature-resolutionPolygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the cap surface curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.5
polygons-transition-durationGetter/setter for duration (ms) of the transition to animate polygon altitude changes. A value of 0 will size the cone immediately to their final altitude. New polygons are animated by rising them from the ground up.1000
Paths Layer
PropertyDescriptionDefault Value
paths-dataGetter/setter for the list of lines to represent in the paths map layer. Each path is displayed as a line that connects all the coordinate pairs in the path array.[]
path-pointsPath object accessor function, attribute or an array for the set of points that define the path line. By default, each path point is assumed to be a 2-position array ([<lat>, <lon>]). This default behavior can be modified using the path-point-lat and path-point-lng methods.pnts => pnts
path-point-latPath point object accessor function, attribute or a numeric constant for the latitude coordinate.arr => arr[0]
path-point-lngPath point object accessor function, attribute or a numeric constant for the longitude coordinate.arr => arr[1]
path-point-altPath point object accessor function, attribute or a numeric constant for the point altitude, in terms of globe radius units (0 = 0 altitude (ground), 1 = globe radius).0.001
path-resolutionGetter/setter for the path's angular resolution, in lat/lng degrees. If the ground distance (excluding altitude) between two adjacent path points is larger than this value, the line segment will be interpolated in order to approximate the curvature of the sphere surface. Lower values yield more perfectly curved lines, at the cost of performance.2
path-colorPath object accessor function or attribute for the line's color. Also supports color gradients by passing an array of colors. Transparent colors are not supported in Fat Lines with set width.() => '#ffffaa'
path-strokePath object accessor function, attribute or a numeric constant for the line's diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a FatLine is used.null
path-dash-lengthPath object accessor function, attribute or a numeric constant for the length of the dashed segments in the path line, in terms of relative length of the whole line (1 = full line length).1
path-dash-gapPath object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.0
path-dash-initial-gapPath object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.0
path-dash-animate-timePath object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.0
path-transition-durationGetter/setter for duration (ms) of the transition to animate path changes. A value of 0 will move the paths immediately to their final position. New paths are animated from start to end.1000
Hex Bin Layer
PropertyDescriptionDefault Value
hex-bin-points-dataGetter/setter for the list of points to aggregate using the hex bin map layer. Each point is added to an hexagonal prism 3D object that represents all the points within a tesselated portion of the space.[]
hex-bin-point-latPoint object accessor function, attribute or a numeric constant for the latitude coordinate.lat
hex-bin-point-lngPoint object accessor function, attribute or a numeric constant for the longitude coordinate.lng
hex-bin-pointWeightPoint object accessor function, attribute or a numeric constant for the weight of the point. Weights for points in the same bin are summed and determine the hexagon default altitude.1
hex-bin-resolutionThe geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe's surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.4
hex-marginThe radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons and serve only a visual purpose, as the data points within the margin still contribute to the hexagon's data. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below 0 or above 1 are disadvised. This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: hexMargin(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.0.2
hex-altitudeThe altitude of each hexagon, in terms of globe radius units (0 = 0 altitude (flat hexagon), 1 = globe radius). This property also supports using an accessor method based on the hexagon's aggregated data, following the syntax: hex-altitude(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.({ sumWeight }) => sumWeight * 0.01
hex-top-curvature-resolutionThe resolution (in angular degrees) of the top surface curvature. The finer the resolution, the more the top area is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.5
hex-top-colorAccessor method for each hexagon's top color. The method should follow the signature: hexTopColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.() => '#ffffaa'
hex-side-colorAccessor method for each hexagon's side color. The method should follow the signature: hexSideColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.() => '#ffffaa'
hex-bin-mergeGetter/setter for whether to merge all the hexagon 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
hex-transition-durationGetter/setter for duration (ms) of the transition to animate hexagon changes related to geometry modifications (altitude, radius). A value of 0 will move the hexagons immediately to their final position. New hexagons are animated by scaling them from the ground up. Only works if hex-bin-merge is disabled.1000
Hexed Polygons Layer
PropertyDescriptionDefault Value
hex-polygons-dataGetter/setter for the list of polygon shapes to represent in the hexed polygons map layer. Each polygon is displayed as a tesselated group of hexagons that approximate the polygons shape according to the resolution specified in hex-polygon-resolution.[]
hex-polygon-geo-json-geometryHexed polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.geometry
hex-polygon-colorHexed polygon object accessor function or attribute for the color of each hexagon in the polygon.() => '#ffffaa'
hex-polygon-altitudeHexed polygon object accessor function, attribute or a numeric constant for the polygon's hexagons altitude in terms of globe radius units (0 = 0 altitude, 1 = globe radius).0.001
hex-polygon-resolutionHexed polygon object accessor function, attribute or a numeric constant for the geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe's surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.3
hex-polygon-marginHexed polygon object accessor function, attribute or a numeric constant for the radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons within a polygon. The margin is specified in terms of fraction of the hexagon's surface diameter. Values below 0 or above 1 are disadvised.0.2
hex-polygon-curvature-resolutionHexed polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of each hexed polygon surface curvature. The finer the resolution, the more the polygon hexes are fragmented into smaller faces to approximate the spheric surface, at the cost of performance.5
hex-polygons-transition-durationGetter/setter for duration (ms) of the transition to animate hexed polygons altitude and margin changes. A value of 0 will move the hexagons immediately to their final state. New hexed polygons are animated by sizing each hexagon from 0 radius.0
Labels Layer
PropertyDescriptionDefault Value
labels-dataGetter/setter for the list of label objects to represent in the labels map layer.[]
label-latLabel object accessor function, attribute or a numeric constant for the latitude coordinate.lat
label-lngLabel object accessor function, attribute or a numeric constant for the longitude coordinate.lng
label-textLabel object accessor function or attribute for the label text.text
label-colorLabel object accessor function or attribute for the label color.() => 'lightgrey'
label-altitudeLabel object accessor function, attribute or a numeric constant for the label altitude in terms of globe radius units.0
label-sizeLabel object accessor function, attribute or a numeric constant for the label text height, in angular degrees.0.5
label-type-faceGetter/setter for the text font typeface JSON object. Supports any typeface font generated by Facetype.js.helvetiker regular
label-rotationLabel object accessor function, attribute or a numeric constant for the label rotation in degrees. The rotation is performed clockwise along the axis of its latitude parallel plane.0
label-resolutionGetter/setter for the text geometric resolution of each label, expressed in how many segments to use in the text curves. Higher values yield smoother labels.3
label-include-dotLabel object accessor function, attribute or a boolean constant for whether to include a dot marker next to the text indicating the exact lat, lng coordinates of the label. If enabled the text will be rendered offset from the dot.true
label-dot-radiusLabel object accessor function, attribute or a numeric constant for the radius of the dot marker, in angular degrees.0.1
label-dot-orientationLabel object accessor function or attribute for the orientation of the label if the dot marker is present. Possible values are right, top and bottom.() => 'bottom'
labels-transition-durationGetter/setter for duration (ms) of the transition to animate label changes involving position modifications (lat, lng, altitude, rotation). A value of 0 will move the labels immediately to their final position. New labels are animated by scaling their size.1000
Custom Layer
PropertyDescriptionDefault Value
custom-layer-dataGetter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the customThreeObject method.[]
custom-three-objectObject 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. The callback method's signature includes the object's data as well as the globe radius: customThreeObject((objData, globeRadius) => { ... }).null
custom-three-object-updateObject accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don't need to be removed and recreated at each update. The callback method's signature includes the object to be update, its new data and the globe radius: customThreeObjectUpdate((obj, objData, globeRadius) => { ... }).null

There are also internal methods that can be invoked via the components object:

MethodArgumentsDescription
globeMaterial-Access the internal ThreeJS MeshPhongMaterial used to wrap the globe. Can be used for more advanced styling of the globe.
getCoordslat: number, lng: number [, altitude: number]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} cartesian spatial coordinates.
toGeoCoords{ x: number, y: number, z: number }Utility method to translate cartesian coordinates to the geographic domain. Given a set of 3D cartesian coordinates {x, y, z}, returns the equivalent {lat, lng, altitude} spherical coordinates. Altitude is defined in terms of globe radius units.
Interaction
PropertyDescriptionDefault Value
labelGlobe item accessor function or attribute for name (shown in label). The item's data and object type are passed as an object: { data, type }.-
descGlobe item accessor function or attribute for description (shown under label). The item's data and object type are passed as an object: { data, type }.-
on-center-hoverCallback function for globe item's hover events at the center of the viewport. The item's data and object type (or null if there's no object under the central line of sight) is included as the first argument, and the previous item (or null) as second argument.-

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-globe-component/dist/aframe-globe-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity globe="points-data: [{ lat: 9.2, lng: 49.37 }, { lat: 23, lng: -125.4 }]"></a-entity>
  </a-scene>
</body>
npm

Install via npm:

npm install aframe-globe-component

Then require and use.

require('aframe');
require('aframe-globe-component');

Giving Back

paypal If this project has helped you and you'd like to contribute back, you can always buy me a ☕!

Keywords

FAQs

Package last updated on 05 Nov 2020

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