react-globe.gl 2.26.0 → 2.27.0

package/README.md

@@ -426,7 +426,8 @@ ReactDOM.render(
 | <b>pointOfView</b> | { <i>lat</i>, <i>lng</i>, <i>altitude</i> } [,<i>ms</i>=`0`] | By default the camera will aim at the cross between the equator and the prime meridian (`0,0` coordinates), at an altitude of `2.5` globe radii. | Camera position, in terms of geographical `lat`, `lng`, `altitude` coordinates. Each of the coordinates is optional, allowing for motion in just some direction. The 2nd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. |
 | <b>pauseAnimation</b>| *-* |Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient. |
 | <b>resumeAnimation</b>| *-* |Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with `pauseAnimation` for performance optimization purposes. |
-| <b>onZoom</b> | <i>func</i> | *-* | Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax `{ lat, lng, altitude }`) is included as sole argument. |
+| <b>onZoom</b> | <i>func</i> | Callback function for point-of-view changes by zooming or rotating the globe using the orbit controls. The current point of view (with the syntax `{ lat, lng, altitude }`) is included as sole argument. |
+| <b>lights</b> | <i>array</i> | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light). |
 | <b>scene</b>| *-* |Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). Can be used to extend the current scene with additional objects not related to globe.gl. |
 | <b>camera</b>| *-* |Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). |
 | <b>renderer</b>| *-* |Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). |

package/dist/react-globe.gl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Material, Object3D, Scene, Camera, WebGLRenderer } from 'three';
+import { Material, Object3D, Light, Scene, Camera, WebGLRenderer } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ConfigOptions, GlobeInstance } from 'globe.gl';
@@ -272,6 +272,8 @@ interface GlobeMethods {
   pointOfView(pov: { lat?: number, lng?: number, altitude?: number }, transitionMs?: number): GlobeInstance;
   pauseAnimation(): GlobeInstance;
   resumeAnimation(): GlobeInstance;
+  lights(): Light[];
+  lights(lights: Light[]): ChainableInstance;
   scene(): Scene;
   camera(): Camera;
   renderer(): WebGLRenderer;

package/dist/react-globe.gl.js

@@ -1,4 +1,4 @@
-// Version 2.26.0 react-globe.gl - https://github.com/vasturiano/react-globe.gl
+// Version 2.27.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) :
@@ -73566,31 +73566,31 @@
   var css_248z$1 = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject$1(css_248z$1);
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-    if (null != _i) {
-      var _s,
-        _e,
-        _x,
-        _r,
-        _arr = [],
-        _n = !0,
-        _d = !1;
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
       try {
-        if (_x = (_i = _i.call(arr)).next, 0 === i) {
-          if (Object(_i) !== _i) return;
-          _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-      } catch (err) {
-        _d = !0, _e = err;
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
       } finally {
         try {
-          if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
         } finally {
-          if (_d) throw _e;
+          if (o) throw n;
         }
       }
-      return _arr;
+      return a;
     }
   }
   function _defineProperty$1(obj, key, value) {
@@ -73706,6 +73706,9 @@
       objects: {
         "default": []
       },
+      lights: {
+        "default": []
+      },
       enablePointerInteraction: {
         "default": true,
         onChange: function onChange(_, state) {
@@ -74166,6 +74169,15 @@
         }
       }
       changedProps.hasOwnProperty('showNavInfo') && (state.navInfo.style.display = state.showNavInfo ? null : 'none');
+      if (changedProps.hasOwnProperty('lights')) {
+        (changedProps.lights || []).forEach(function (light) {
+          return state.scene.remove(light);
+        }); // Clear the place
+        state.lights.forEach(function (light) {
+          return state.scene.add(light);
+        }); // Add to scene
+      }
+
       if (changedProps.hasOwnProperty('objects')) {
         (changedProps.objects || []).forEach(function (obj) {
           return state.scene.remove(obj);
@@ -74368,7 +74380,7 @@
   var linkedRenderObjsProps = Object.assign.apply(Object, _toConsumableArray(['width', 'height', 'backgroundColor', 'backgroundImageUrl', 'enablePointerInteraction'].map(function (p) {
     return _defineProperty({}, p, bindRenderObjs.linkProp(p));
   })));
-  var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['postProcessingComposer'].map(function (p) {
+  var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['lights', 'postProcessingComposer'].map(function (p) {
     return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
   })));
 
@@ -74672,7 +74684,8 @@
           rendererConfig: rendererConfig,
           waitForLoadComplete: waitForGlobeReady,
           extraRenderers: [new THREE.CSS2DRenderer()] // Used in HTML elements layer
-        }).skyRadius(globe.getGlobeRadius() * 500).showNavInfo(false)
+        }).skyRadius(globe.getGlobeRadius() * 500).showNavInfo(false).objects([globe]) // Populate scene
+        .lights([new THREE.AmbientLight(0xcccccc, Math.PI), new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI)])
       };
     },
     init: function init(domNode, state) {
@@ -74763,9 +74776,7 @@
         }
       };
       state.renderObjs.renderer().useLegacyLights = false; // force behavior of three < 155
-      state.renderObjs.objects([
-      // Populate scene
-      new THREE.AmbientLight(0xcccccc, Math.PI), new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI), state.globe]).hoverOrderComparator(function (a, b) {
+      state.renderObjs.hoverOrderComparator(function (a, b) {
         var aObj = getGlobeObj(a);
         var bObj = getGlobeObj(b);
 
@@ -76151,7 +76162,7 @@
   var Globe = index$3(globe, {
     methodNames: [
     // bind methods
-    'pauseAnimation', 'resumeAnimation', 'pointOfView', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getGlobeRadius', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
+    'pauseAnimation', 'resumeAnimation', 'pointOfView', 'lights', 'scene', 'camera', 'renderer', 'postProcessingComposer', 'controls', 'getGlobeRadius', 'getCoords', 'getScreenCoords', 'toGeoCoords', 'toGlobeCoords'],
     initPropNames: ['animateIn', 'waitForGlobeReady', 'rendererConfig']
   });
   Globe.displayName = 'Globe';