globe.gl 2.27.3 → 2.28.0

package/README.md

@@ -367,6 +367,8 @@ Globe({ configOptions })(<domElement>)
 | <b>objectLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the latitude coordinate of the object's position. | `lat` |
 | <b>objectLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the longitude coordinate of the object's position. | `lng` |
 | <b>objectAltitude</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the altitude coordinate of the object's position, in terms of globe radius units. | 0.01 |
+| <b>objectRotation</b>([<i>{[x], [y], [z]}</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a `{x, y, z}` object for the object's rotation (in degrees). Each dimension is optional, allowing for rotation only in some axes. Rotation is applied in the order **X**->**Y**->**Z**. | - |
+| <b>objectFacesSurface</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a boolean constant for whether the object should be rotated to face (away from) the globe surface (`true`), or be left in its original universe orientation (`false`). | `true` |
 | <b>objectThreeObject</b>([<i>Object3d</i>, <i>str</i> or <i>fn</i>]) | Object accessor function or attribute for defining a custom 3d object to render as part of the objects map layer. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). | *A yellow sphere* |
 | <b>onObjectClick</b>(<i>fn</i>) | Callback function for object (left-button) clicks. The object itself, the event and the clicked coordinates are included as arguments: `onObjectClick(obj, event, { lat, lng, altitude })`. | - |
 | <b>onObjectRightClick</b>(<i>fn</i>) | Callback function for object right-clicks. The object itself, the event and the clicked coordinates are included as arguments: `onObjectRightClick(obj, event, { lat, lng, altitude })`. | - |

package/dist/globe.gl.js

@@ -1,4 +1,4 @@
-// Version 2.27.3 globe.gl - https://github.com/vasturiano/globe.gl
+// Version 2.28.0 globe.gl - https://github.com/vasturiano/globe.gl
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -64911,6 +64911,9 @@
       altitude: r / GLOBE_RADIUS - 1
     };
   }
+  function deg2Rad$1(deg) {
+    return deg * Math.PI / 180;
+  }
 
   var THREE$f = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
   : {
@@ -67418,6 +67421,8 @@
 
   var THREE$1 = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
   : {
+    Euler: Euler,
+    Group: Group$1,
     Mesh: Mesh,
     MeshLambertMaterial: MeshLambertMaterial,
     SphereGeometry: SphereGeometry
@@ -67440,6 +67445,10 @@
         "default": 0.01
       },
       // in units of globe radius
+      objectFacesSurface: {
+        "default": true
+      },
+      objectRotation: {},
       objectThreeObject: {
         "default": new THREE$1.Mesh(
         // default object: yellow sphere
@@ -67462,6 +67471,8 @@
       var latAccessor = index$1(state.objectLat);
       var lngAccessor = index$1(state.objectLng);
       var altitudeAccessor = index$1(state.objectAltitude);
+      var parallelAccessor = index$1(state.objectFacesSurface);
+      var rotationAccessor = index$1(state.objectRotation);
       var threeObjAccessor = index$1(state.objectThreeObject);
       threeDigest(state.objectsData, state.scene, {
         // objs need to be recreated if this prop has changed
@@ -67472,15 +67483,21 @@
             // clone object if it's a shared object among all points
             obj = obj.clone();
           }
-          obj.__globeObjType = 'object'; // Add object type
+          var g = new THREE$1.Group();
+          g.add(obj);
+          g.__globeObjType = 'object'; // Add object type
 
-          return obj;
+          return g;
         },
-        updateObj: function updateObj(obj, d) {
+        updateObj: function updateObj(objG, d) {
           var lat = +latAccessor(d);
           var lng = +lngAccessor(d);
           var alt = +altitudeAccessor(d);
-          Object.assign(obj.position, polar2Cartesian(lat, lng, alt));
+          Object.assign(objG.position, polar2Cartesian(lat, lng, alt));
+          parallelAccessor(d) ? objG.setRotationFromEuler(new Euler(deg2Rad$1(-lat), deg2Rad$1(lng), 0, 'YXZ')) : objG.rotation.set(0, 0, 0);
+          var obj = objG.children[0];
+          var rot = rotationAccessor(d);
+          rot && obj.setRotationFromEuler(new Euler(deg2Rad$1(rot.x || 0), deg2Rad$1(rot.y || 0), deg2Rad$1(rot.z || 0)));
         }
       });
     }
@@ -67594,7 +67611,7 @@
     return _defineProperty$1({}, p, bindHtmlElementsLayer.linkProp(p));
   })));
   var bindObjectsLayer = linkKapsule$1('objectsLayer', ObjectsLayerKapsule);
-  var linkedObjectsLayerProps = Object.assign.apply(Object, _toConsumableArray$1(['objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectThreeObject'].map(function (p) {
+  var linkedObjectsLayerProps = Object.assign.apply(Object, _toConsumableArray$1(['objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectRotation', 'objectFacesSurface', 'objectThreeObject'].map(function (p) {
     return _defineProperty$1({}, p, bindObjectsLayer.linkProp(p));
   })));
   var bindCustomLayer = linkKapsule$1('customLayer', CustomLayerKapsule);
@@ -72145,7 +72162,7 @@
 
   // Expose config from ThreeGlobe
   var bindGlobe = linkKapsule('globe', threeGlobe);
-  var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray$5(['globeImageUrl', 'bumpImageUrl', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'globeMaterial', 'onGlobeReady', 'pointsData', 'pointLat', 'pointLng', 'pointColor', 'pointAltitude', 'pointRadius', 'pointResolution', 'pointsMerge', 'pointsTransitionDuration', 'arcsData', 'arcStartLat', 'arcStartLng', 'arcEndLat', 'arcEndLng', 'arcColor', 'arcAltitude', 'arcAltitudeAutoScale', 'arcStroke', 'arcCurveResolution', 'arcCircularResolution', 'arcDashLength', 'arcDashGap', 'arcDashInitialGap', 'arcDashAnimateTime', 'arcsTransitionDuration', 'polygonsData', 'polygonGeoJsonGeometry', 'polygonCapColor', 'polygonCapMaterial', 'polygonSideColor', 'polygonSideMaterial', 'polygonStrokeColor', 'polygonAltitude', 'polygonCapCurvatureResolution', 'polygonsTransitionDuration', 'pathsData', 'pathPoints', 'pathPointLat', 'pathPointLng', 'pathPointAlt', 'pathResolution', 'pathColor', 'pathStroke', 'pathDashLength', 'pathDashGap', 'pathDashInitialGap', 'pathDashAnimateTime', 'pathTransitionDuration', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonCurvatureResolution', 'hexPolygonsTransitionDuration', 'tilesData', 'tileLat', 'tileLng', 'tileAltitude', 'tileWidth', 'tileHeight', 'tileUseGlobeProjection', 'tileMaterial', 'tileCurvatureResolution', 'tilesTransitionDuration', 'ringsData', 'ringLat', 'ringLng', 'ringAltitude', 'ringColor', 'ringResolution', 'ringMaxRadius', 'ringPropagationSpeed', 'ringRepeatPeriod', 'labelsData', 'labelLat', 'labelLng', 'labelAltitude', 'labelRotation', 'labelText', 'labelSize', 'labelTypeFace', 'labelColor', 'labelResolution', 'labelIncludeDot', 'labelDotRadius', 'labelDotOrientation', 'labelsTransitionDuration', 'htmlElementsData', 'htmlLat', 'htmlLng', 'htmlAltitude', 'htmlElement', 'htmlTransitionDuration', 'objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
+  var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray$5(['globeImageUrl', 'bumpImageUrl', 'showGlobe', 'showGraticules', 'showAtmosphere', 'atmosphereColor', 'atmosphereAltitude', 'globeMaterial', 'onGlobeReady', 'pointsData', 'pointLat', 'pointLng', 'pointColor', 'pointAltitude', 'pointRadius', 'pointResolution', 'pointsMerge', 'pointsTransitionDuration', 'arcsData', 'arcStartLat', 'arcStartLng', 'arcEndLat', 'arcEndLng', 'arcColor', 'arcAltitude', 'arcAltitudeAutoScale', 'arcStroke', 'arcCurveResolution', 'arcCircularResolution', 'arcDashLength', 'arcDashGap', 'arcDashInitialGap', 'arcDashAnimateTime', 'arcsTransitionDuration', 'polygonsData', 'polygonGeoJsonGeometry', 'polygonCapColor', 'polygonCapMaterial', 'polygonSideColor', 'polygonSideMaterial', 'polygonStrokeColor', 'polygonAltitude', 'polygonCapCurvatureResolution', 'polygonsTransitionDuration', 'pathsData', 'pathPoints', 'pathPointLat', 'pathPointLng', 'pathPointAlt', 'pathResolution', 'pathColor', 'pathStroke', 'pathDashLength', 'pathDashGap', 'pathDashInitialGap', 'pathDashAnimateTime', 'pathTransitionDuration', 'hexBinPointsData', 'hexBinPointLat', 'hexBinPointLng', 'hexBinPointWeight', 'hexBinResolution', 'hexMargin', 'hexTopCurvatureResolution', 'hexTopColor', 'hexSideColor', 'hexAltitude', 'hexBinMerge', 'hexTransitionDuration', 'hexPolygonsData', 'hexPolygonGeoJsonGeometry', 'hexPolygonColor', 'hexPolygonAltitude', 'hexPolygonResolution', 'hexPolygonMargin', 'hexPolygonCurvatureResolution', 'hexPolygonsTransitionDuration', 'tilesData', 'tileLat', 'tileLng', 'tileAltitude', 'tileWidth', 'tileHeight', 'tileUseGlobeProjection', 'tileMaterial', 'tileCurvatureResolution', 'tilesTransitionDuration', 'ringsData', 'ringLat', 'ringLng', 'ringAltitude', 'ringColor', 'ringResolution', 'ringMaxRadius', 'ringPropagationSpeed', 'ringRepeatPeriod', 'labelsData', 'labelLat', 'labelLng', 'labelAltitude', 'labelRotation', 'labelText', 'labelSize', 'labelTypeFace', 'labelColor', 'labelResolution', 'labelIncludeDot', 'labelDotRadius', 'labelDotOrientation', 'labelsTransitionDuration', 'htmlElementsData', 'htmlLat', 'htmlLng', 'htmlAltitude', 'htmlElement', 'htmlTransitionDuration', 'objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectRotation', 'objectFacesSurface', 'objectThreeObject', 'customLayerData', 'customThreeObject', 'customThreeObjectUpdate'].map(function (p) {
     return _defineProperty$3({}, p, bindGlobe.linkProp(p));
   })));
   var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray$5(['getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {