react-globe.gl 2.23.4 → 2.24.0

package/README.md

@@ -358,6 +358,8 @@ ReactDOM.render(
 | <b>objectLat</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lat` | Object accessor function, attribute or a numeric constant for the latitude coordinate of the object's position. |
 | <b>objectLng</b> | <i>number</i>, <i>string</i> or <i>func</i> | `lng` | Object accessor function, attribute or a numeric constant for the longitude coordinate of the object's position. |
 | <b>objectAltitude</b> | <i>number</i>, <i>string</i> or <i>func</i> | 0.01 | Object accessor function, attribute or a numeric constant for the altitude coordinate of the object's position, in terms of globe radius units. |
+| <b>objectRotation</b> | <i>{[x], [y], [z]}</i>, <i>str</i> or <i>func</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>bool</i>, <i>string</i> or <i>func</i> | `true` | 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`). |
 | <b>objectThreeObject</b> | <i>Object3d</i>, <i>string</i> or <i>func</i> | *A yellow sphere* | 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). |
 | <b>onObjectClick</b> | <i>func</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>func</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/react-globe.gl.d.ts

@@ -224,6 +224,8 @@ interface GlobeProps extends ConfigOptions {
   objectLat?: ObjAccessor<number>;
   objectLng?: ObjAccessor<number>;
   objectAltitude?: ObjAccessor<number>;
+  objectRotation?: ObjAccessor<{ x?: number, y?: number, z?: number } | null>;
+  objectFacesSurfaces?: ObjAccessor<boolean>;
   objectThreeObject?: Object3D | string | ((d: object) => Object3D);
   objectLabel?: ObjAccessor<string>;
   onObjectClick?: (obj: object, event: MouseEvent, coords: { lat: number, lng: number, altitude: number }) => void;

package/dist/react-globe.gl.js

@@ -1,4 +1,4 @@
-// Version 2.23.4 react-globe.gl - https://github.com/vasturiano/react-globe.gl
+// Version 2.24.0 react-globe.gl - https://github.com/vasturiano/react-globe.gl
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
@@ -65075,6 +65075,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
   : {
@@ -67582,6 +67585,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
@@ -67604,6 +67609,10 @@
         "default": 0.01
       },
       // in units of globe radius
+      objectFacesSurface: {
+        "default": true
+      },
+      objectRotation: {},
       objectThreeObject: {
         "default": new THREE$1.Mesh(
         // default object: yellow sphere
@@ -67626,6 +67635,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
@@ -67636,15 +67647,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)));
         }
       });
     }
@@ -67758,7 +67775,7 @@
     return _defineProperty$2({}, p, bindHtmlElementsLayer.linkProp(p));
   })));
   var bindObjectsLayer = linkKapsule$1('objectsLayer', ObjectsLayerKapsule);
-  var linkedObjectsLayerProps = Object.assign.apply(Object, _toConsumableArray$2(['objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectThreeObject'].map(function (p) {
+  var linkedObjectsLayerProps = Object.assign.apply(Object, _toConsumableArray$2(['objectsData', 'objectLat', 'objectLng', 'objectAltitude', 'objectRotation', 'objectFacesSurface', 'objectThreeObject'].map(function (p) {
     return _defineProperty$2({}, p, bindObjectsLayer.linkProp(p));
   })));
   var bindCustomLayer = linkKapsule$1('customLayer', CustomLayerKapsule);
@@ -72437,7 +72454,7 @@
 
   // Expose config from ThreeGlobe
   var bindGlobe = linkKapsule('globe', threeGlobe);
-  var linkedGlobeProps = Object.assign.apply(Object, _toConsumableArray(['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(['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({}, p, bindGlobe.linkProp(p));
   })));
   var linkedGlobeMethods = Object.assign.apply(Object, _toConsumableArray(['getGlobeRadius', 'getCoords', 'toGeoCoords'].map(function (p) {
@@ -74167,6 +74184,12 @@
     objectLat: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
     objectLng: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
     objectAltitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+    objectRotation: PropTypes.oneOfType([PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+      z: PropTypes.number
+    }), PropTypes.string, PropTypes.func]),
+    objectFacesSurface: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
     objectThreeObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
     objectLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     onObjectClick: PropTypes.func,