diff --git a/changelog.md b/changelog.md index 4767bcc..2629eef 100644 --- a/changelog.md +++ b/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. diff --git a/docs/usage/camera.mdx b/docs/usage/camera.mdx index 01a3460..7b06e04 100644 --- a/docs/usage/camera.mdx +++ b/docs/usage/camera.mdx @@ -19,9 +19,9 @@ Use the playground code editor to play around with the respective camera options @@ -34,7 +34,7 @@ Use the playground code editor to play around with the respective camera options diff --git a/lib/camera.js b/lib/camera.js index a3c2f18..b55efa6 100644 --- a/lib/camera.js +++ b/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; diff --git a/lib/component.js b/lib/component.js index cf20525..c00860c 100644 --- a/lib/component.js +++ b/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, ]); diff --git a/lib/defaults.js b/lib/defaults.js index 5add18c..841d0bf 100644 --- a/lib/defaults.js +++ b/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, diff --git a/lib/earth.js b/lib/earth.js index db0e208..d693b87 100644 --- a/lib/earth.js +++ b/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,17 +96,13 @@ 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); } @@ -103,11 +110,6 @@ export function updateEarth(earth, { callbacks, options, textures }) { 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(); @@ -115,6 +117,7 @@ export function updateEarth(earth, { callbacks, options, textures }) { () => {}, onGlobeCloudsTextureLoaded, ); + globe.remove(globe.getObjectByName('clouds')); globe.add(clouds); } } diff --git a/lib/enums.js b/lib/enums.js index 7d688ea..e98c547 100644 --- a/lib/enums.js +++ b/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 = { diff --git a/lib/lights.js b/lib/lights.js index a295b01..ae5eb8d 100644 --- a/lib/lights.js +++ b/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, diff --git a/lib/markers.js b/lib/markers.js index adb9065..5d9445a 100644 --- a/lib/markers.js +++ b/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; } diff --git a/package.json b/package.json index 3cfd53e..5f6d6d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-globe", - "version": "5.0.1", + "version": "5.0.2", "description": "Create beautiful and interactive React + ThreeJS globe visualizations with ease.", "license": "MIT", "homepage": "https://react-globe.netlify.com/", @@ -22,7 +22,7 @@ "build:docs": "docz build", "clean": "rm -rf dist", "clean:docs": "rm -rf .docz", - "docs": "docz dev", + "docs": "npm run clean; docz dev", "lint": "xo --fix; tsc", "prepare": "npm run clean; npm run build" }, @@ -44,7 +44,7 @@ }, "devDependencies": { "@types/d3-scale": "^2.1.1", - "@types/react": "^16.9.44", + "@types/react": "^16.9.45", "css-loader": "^4.2.1", "docz": "^1.2.0", "docz-theme-default": "^1.2.0",