v5.0.2

Author: chrisrzhou

changelog.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## [5.0.2](https://github.com/chrisrzhou/react-globe/compare/v5.0.2...v5.0.1) (2020-08-08)
+
+Various bugfixes.
+
+- Fixed bug to allow `cameraDistanceRadiusScale` to affect the initial globe camera distance.  This prop has the same exact behavior as `initialCameraDistanceRadiusScale`, which is now reserved as a useful semantic prop alias.
+- Fixed bug where the globe's glow was not removed when `options` is updated.  This led to creation and attachment of increasing amounts of glow meshes, and also not honoring the `enableGlobeGlow` prop.
+- Remove `console.log`
+- Increase `cameraMaxDistanceRadiusScale` default value to better support the `initialCameraDistanceRadiusScale` prop.
+- Add names to three objects for easier development/debugging.
+
 ## [5.0.1](https://github.com/chrisrzhou/react-globe/compare/v5.0.1...v5.0.1) (2020-08-08)
 
 Add `delay` support to exported `tween` utility.

docs/usage/camera.mdx

@@ -19,9 +19,9 @@ Use the playground code editor to play around with the respective camera options
 <Playground>
   <ReactGlobe
     options={{
-      cameraDistanceRadiusScale: 5,
-      cameraMaxDistanceRadiusScale: 15,
-      cameraZoomSpeed: 2,
+      cameraDistanceRadiusScale: 10,
+      cameraMaxDistanceRadiusScale: 20,
+      cameraZoomSpeed: 5,
       enableCameraZoom: true,
     }}
   />
@@ -34,7 +34,7 @@ Use the playground code editor to play around with the respective camera options
 <Playground>
   <ReactGlobe
     options={{
-      cameraAutoRotateSpeed: 1,
+      cameraAutoRotateSpeed: 2,
       cameraMaxPolarAngle: (Math.PI * 9) / 16,
       cameraMinPolarAngle: (Math.PI * 7) / 16,
       cameraRotateSpeed: 0.5,

docs/usage/globe.mdx

@@ -75,7 +75,7 @@ You can set the `initialCameraDistanceRadiusScale` prop to control how far the c
 
 <Playground>
   <ReactGlobe
-    initialCameraDistanceRadiusScale={12}
+    initialCameraDistanceRadiusScale={15}
     initialCoordinates={[29.7604, -95.3698]}
   />
 </Playground>

lib/camera.js

@@ -1,9 +1,9 @@
 import { PerspectiveCamera } from 'three';
 
-import { RADIUS } from './enums';
+import { CAMERA_FAR_RADIUS_SCALE, RADIUS } from './enums';
 import { coordinatesToPosition } from './utils';
 
-const CAMERA_FAR = RADIUS * 100;
+const CAMERA_FAR = RADIUS * CAMERA_FAR_RADIUS_SCALE;
 const CAMERA_FOV = 45;
 const CAMERA_NEAR = 1;
 
@@ -12,6 +12,8 @@ export function createCamera(
   initialCameraDistanceRadiusScale,
 ) {
   const camera = new PerspectiveCamera();
+
+  camera.name = 'camera';
   camera.far = CAMERA_FAR;
   camera.fov = CAMERA_FOV;
   camera.near = CAMERA_NEAR;

lib/component.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
+import { defaultOptions } from './defaults';
 import Globe from './globe';
 import { resize } from './utils';
 
@@ -13,7 +14,7 @@ export default function ReactGlobe({
   initialCameraDistanceRadiusScale,
   initialCoordinates,
   markers,
-  options,
+  options = defaultOptions,
   width = '100%',
   onClickMarker,
   onDefocus,
@@ -32,10 +33,10 @@ export default function ReactGlobe({
   useEffect(() => {
     const canvasElement = canvasRef.current;
     const tooltipElement = tooltipRef.current;
-    console.log(globeBackgroundTexture, globeTexture);
     const globe = new Globe({
       canvasElement,
-      initialCameraDistanceRadiusScale,
+      initialCameraDistanceRadiusScale:
+        initialCameraDistanceRadiusScale || options.cameraDistanceRadiusScale,
       initialCoordinates,
       textures: {
         globeBackgroundTexture,
@@ -55,6 +56,7 @@ export default function ReactGlobe({
     globeCloudsTexture,
     globeTexture,
     initialCameraDistanceRadiusScale,
+    options.cameraDistanceRadiusScale,
     initialCoordinates,
     onGetGlobe,
   ]);

lib/defaults.js

@@ -1,4 +1,4 @@
-import { MarkerTypes } from './enums';
+import { BACKGROUND_RADIUS_SCALE, MarkerTypes } from './enums';
 
 export const defaultCallbacks = {
   onClickMarker: (_marker, _markerObject, _event) => {},
@@ -26,7 +26,7 @@ export const defaultOptions = {
   ambientLightIntensity: 0.8,
   cameraAutoRotateSpeed: 0.1,
   cameraDistanceRadiusScale: 3,
-  cameraMaxDistanceRadiusScale: 4,
+  cameraMaxDistanceRadiusScale: BACKGROUND_RADIUS_SCALE,
   cameraMaxPolarAngle: Math.PI,
   cameraMinPolarAngle: 0,
   cameraRotateSpeed: 0.2,

lib/earth.js

@@ -13,16 +13,31 @@ import {
   defaultGlobeCloudsTexture,
   defaultGlobeTexture,
 } from './defaults';
-import { RADIUS } from './enums';
+import { BACKGROUND_RADIUS_SCALE, RADIUS } from './enums';
 
-const BACKGROUND_RADIUS_SCALE = 10;
 const CLOUDS_RADIUS_OFFSET = 1;
 const GLOBE_SEGMENTS = 50;
 
 export function createEarth() {
-  const clouds = new Mesh();
   const globe = new Mesh();
+  globe.geometry = new SphereGeometry(RADIUS, GLOBE_SEGMENTS, GLOBE_SEGMENTS);
+  globe.name = 'earth';
+
+  const clouds = new Mesh();
+  clouds.geometry = new SphereGeometry(
+    RADIUS + CLOUDS_RADIUS_OFFSET,
+    GLOBE_SEGMENTS,
+    GLOBE_SEGMENTS,
+  );
+  clouds.name = 'clouds';
+
   const background = new Mesh();
+  background.name = 'background';
+  background.geometry = new SphereGeometry(
+    RADIUS * BACKGROUND_RADIUS_SCALE,
+    GLOBE_SEGMENTS,
+    GLOBE_SEGMENTS,
+  );
 
   return {
     clouds,
@@ -52,28 +67,24 @@ export function updateEarth(earth, { callbacks, options, textures }) {
   } = textures;
   let { clouds, globe, glow, background } = earth;
 
-  globe.children = [];
+  if (enableGlobeGlow) {
+    glow = createGlowMesh(globe.geometry, {
+      backside: true,
+      coefficient: globeGlowCoefficient,
+      color: globeGlowColor,
+      power: globeGlowPower,
+      size: RADIUS * globeGlowRadiusScale,
+    });
+    glow.name = 'glow';
+  }
 
   if (globeTexture) {
     new TextureLoader().load(
       globeTexture,
       map => {
-        globe.geometry = new SphereGeometry(
-          RADIUS,
-          GLOBE_SEGMENTS,
-          GLOBE_SEGMENTS,
-        );
         globe.material = new MeshLambertMaterial({ map });
-        if (enableGlobeGlow) {
-          glow = createGlowMesh(globe.geometry, {
-            backside: true,
-            coefficient: globeGlowCoefficient,
-            color: globeGlowColor,
-            power: globeGlowPower,
-            size: RADIUS * globeGlowRadiusScale,
-          });
-          globe.add(glow);
-        }
+        globe.remove(globe.getObjectByName('glow'));
+        globe.add(glow);
         onGlobeTextureLoaded();
       },
       () => {},
@@ -85,36 +96,28 @@ export function updateEarth(earth, { callbacks, options, textures }) {
     new TextureLoader().load(
       globeBackgroundTexture,
       map => {
-        background.geometry = new SphereGeometry(
-          RADIUS * BACKGROUND_RADIUS_SCALE,
-          GLOBE_SEGMENTS,
-          GLOBE_SEGMENTS,
-        );
         background.material = new MeshBasicMaterial({ map, side: BackSide });
         onGlobeBackgroundTextureLoaded();
       },
       () => {},
       onGlobeBackgroundTextureLoaded,
     );
+    globe.remove(globe.getObjectByName('background'));
     globe.add(background);
   }
 
   if (globeCloudsTexture) {
     new TextureLoader().load(
       globeCloudsTexture,
       map => {
-        clouds.geometry = new SphereGeometry(
-          RADIUS + CLOUDS_RADIUS_OFFSET,
-          GLOBE_SEGMENTS,
-          GLOBE_SEGMENTS,
-        );
         clouds.material = new MeshLambertMaterial({ map, transparent: true });
         clouds.material.opacity = globeCloudsOpacity;
         onGlobeCloudsTextureLoaded();
       },
       () => {},
       onGlobeCloudsTextureLoaded,
     );
+    globe.remove(globe.getObjectByName('clouds'));
     globe.add(clouds);
   }
 }

lib/enums.js

@@ -1,3 +1,5 @@
+export const CAMERA_FAR_RADIUS_SCALE = 1000;
+export const BACKGROUND_RADIUS_SCALE = CAMERA_FAR_RADIUS_SCALE / 10;
 export const RADIUS = 300;
 
 export const MarkerTypes = {

lib/lights.js

@@ -6,6 +6,9 @@ export function createLights() {
   const ambient = new AmbientLight('white');
   const point = new PointLight('white');
 
+  ambient.name = 'ambientLight';
+  point.name = 'pointLight';
+
   return {
     ambient,
     point,

lib/markers.js

@@ -18,7 +18,10 @@ const MARKER_SEGMENTS = 10;
 const MARKER_UNIT_RADIUS_SCALE = 0.01;
 
 export function createMarkerObjects() {
-  return new Group();
+  const markerObjects = new Group();
+  markerObjects.name = 'markers';
+
+  return markerObjects;
 }
 
 export function updateMarkerObjects(
@@ -155,6 +158,8 @@ function createMarkerObject(marker, options, size) {
   markerObject.position.set(...position);
   markerObject.lookAt(new Vector3(0, 0, 0));
 
+  markerObject.name = marker.id;
+
   return markerObject;
 }