React Globe Versions Save

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.

Add delay support to exported tween utility.

Refactoring and simplification of codebase and exposed public APIs.

Changes

• New props (see section below).
• Flattened options prop (improves and simplifies component rendering lifecycle with hooks).
• Improved Globe instance support.
• Bugfixes and performance improvements.
  • Fixed various GH issues.
  • Memory leaks with marker callbacks.
• Simplified and decoupled internal implementation.
• Detypescriptify source code to improve future OSS development.
• Updated dev tools and build pipeline (microbundle, xo).
• Updated docs and examples.

Breaking Changes

Named Exports

Only the Globe class, ReactGlobe component, defaultCallbacks, defaultInitialCoordinates, defaultOptions, and tween util are now exported to limit the exposed public API.

Types

Various exported types have changed. The new types form a smaller and simplified set.

Props

Various props are replaced, updated (interface updates), removed, or unchanged. The following table tracks the status of old vs new props.

Status	Old	New
updated	animations	animations
updated	onDefocus	onDefocus
replaced	cameraOptions	options
replaced	focusOptions	options
replaced	globeOptions	options
replaced	lightOptions	options
replaced	markerOptions	options
replaced	size	height, width
unchanged	focus	focus
unchanged	initialCoordinates	initialCoordinates
unchanged	markers	markers
unchanged	onClickMarker	onClickMarker
unchanged	onMouseOutMarker	onMouseOutMarker
unchanged	onMouseOverMarker	onMouseOverMarker
renamed	onGetGlobeInstance	onGetGlobe
renamed	onTextureLoaded	onGlobeTextureLoaded
added		globeBackgroundTexture
added		globeCloudsTexture
added		globeTexture
added		onGlobeBackgroundTextureLoaded
added		onGlobeCloudsTextureLoaded

Options

react-globe provides useful and convenient configurations to customize the globe. These configurations still exist, but are managed in a flat options object. This allows easier code/documentation management of globe configuration.

Most options are renamed in an organized way that allows easy refactoring.

Status	Old	New
removed	globeOptions.enableBackground
removed	globeOptions.enableClouds
removed	markerOptions.activeScale
renamed	cameraOptions.autoRotateSpeed	options.cameraAutoRotateSpeed
renamed	cameraOptions.distanceRadiusScale	options.cameraDistanceRadiusScale
renamed	cameraOptions.enableAutoRotate	options.enableCameraAutoRotate
renamed	cameraOptions.enableRotate	options.enableCameraRotate
renamed	cameraOptions.enableZoom	options.enableCameraZoom
renamed	cameraOptions.maxDistanceRadiusScale	options.cameraMaxDistanceRadiusScale
renamed	cameraOptions.maxPolarAngle	options.cameraMaxPolarAngle
renamed	cameraOptions.minPolarAngle	options.cameraMinPolarAngle
renamed	cameraOptions.rotateSpeed	options.cameraRotateSpeed
renamed	cameraOptions.zoomSpeed	options.cameraZoomSpeed
renamed	focusOptions.animationDuration	options.focusAnimationDuration
renamed	focusOptions.distanceRadiusScale	options.focusDistanceRadiusScale
renamed	focusOptions.easingFunction	options.focusEasingFunction
renamed	focusOptions.enableDefocus	options.enableDefocus
renamed	globeOptions.backgroundTexture	options.globeBackgroundTexture
renamed	globeOptions.cloudsOpacity	options.globeCloudsOpacity
renamed	globeOptions.cloudsTexture	options.globeCloudsTexture
renamed	globeOptions.enableGlow	options.enableGlobeGlow
renamed	globeOptions.glowCoefficient	options.globeGlowCoefficient
renamed	globeOptions.glowColor	options.globeGlowColor
renamed	globeOptions.glowPower	options.globeGlowPower
renamed	globeOptions.glowRadiusScale	options.globeGlowRadiusScale
renamed	globeOptions.texture	options.globeTexture
renamed	lightOptions.ambientLightColor	options.ambientLightColor
renamed	lightOptions.ambientLightIntensity	options.ambientLightIntensity
renamed	lightOptions.pointLightColor	options.pointLightColor
renamed	lightOptions.pointLightIntensity	options.pointLightIntensity
renamed	lightOptions.pointLightPositionRadiusScales	options.pointLightPositionRadiusScales
renamed	markerOptions.enableGlow	options.enableMarkerGlow
renamed	markerOptions.enableTooltip	options.enableMarkerTooltip
renamed	markerOptions.enterAnimationDuration	options.markerEnterAnimationDuration
renamed	markerOptions.enterEasingFunction	options.markerEnterEasingFunction
renamed	markerOptions.exitAnimationDuration	options.markerExitAnimationDuration
renamed	markerOptions.exitEasingFunction	options.markerExitEasingFunction
renamed	markerOptions.getTooltipContent	options.markerTooltipRenderer
renamed	markerOptions.glowCoefficient	options.markerGlowCoefficient
renamed	markerOptions.glowPower	options.markerGlowPower
renamed	markerOptions.glowRadiusScale	options.markerGlowRadiusScale
renamed	markerOptions.offsetRadiusScale	options.markerOffsetRadiusScale
renamed	markerOptions.radiusScaleRange	options.markerRadiusScaleRange
renamed	markerOptions.renderer	options.markerRenderer
renamed	markerOptions.type	options.markerType

Globe instance

As mentioned in the v4.0.0 docs, the Globe instance APIs are unstable and not formally maintained. The Globe class instance is now managed through a new set of class methods, and the old methods are no longer compatible.

v5.0.0 introduces more formal support for the Globe instance.

CSS

Tooltip (tippy) CSS is no longer bundled with the project. You can optionally import it with:

import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';

v4.0.0 brings huge improvements to marker transition behaviors and other features!

Features and Improvements

• Markers now update and apply transitions without resetting the globe or other markers. This creates a simple way to add/remove/update markers with intuitive visual feedback.
• Globe avoids resetting and re-rendering when props change.
• Globe animations are better optimized and less 'lag' is encountered.
• Additional named exports (e.g. Globe, Tooltip) empower useful ways to work with react-globe.
• You can now retrieve the Globe instance via the onGetGlobeInstance prop, which allows you to fully access and control the Globe class outside of the React lifecycle.
  • This also opens up powerful new ways to work with the globe (e.g. freeze and unfreeze methods).
  • Note that we still strongly recommend that you keep to React props to control behaviors of the globe.
• Updated docs and examples.

Breaking Changes

• lookAt prop is renamed to initialCoordinates.
• Some exported Typescript types have changed. Address and import the relevant types accordingly. Noticeably, all *Options prop are now explicitly renamed to *OptionsProp. The former is used internally in the codebase while the *OptionsProp supports specifying optional option key/value pair in the component props.
• The underlying defaultCameraOptions values are updated to reflect changes in dependent libraries. You might need to update these option values if custom values were previously used.
• Tooltip behaviors have changed slightly to improve rendering performance. Tooltips are auto-disabled on non-interactable scenarios (e.g. focusing, animating).
• globeOptions.cloudsSpeed option is removed because it was not very useful, and was overcomplicating the animation cycle. We should explore a better way to implement/customize cloud speeds in every rotation axis in the future.

Internal Changes

• Refactor rendering logic to use Globe.ts class instead of custom React hooks.
  • While React hooks organized the code better, it created unneccessary complexity when dealing with hook dependencies.
  • This refactor decouples the React component and the ThreeJS rendering responsibilities. The React component is basically now a thin wrapper to pass props to the Globe instance and control how the Globe instance should be updated when props change.
  • The refactor was also required to better support and control marker transitions, and optimizing globe re-rendering when props change.

Bug Fixes and Enhancements

• Use three-glow-mesh and react-cached-callback.
• Add onTextureLoaded callback to detect if globe texture has successfully loaded. Updated Texture.mdx docs. (#2)
• Fix focusOptions.distanceRadiusScale not updating on change. (#4)
• Support customizing offset of markers using markersOptions.offsetRadiusScale.(#5)
• Fix Typescript bugs. (#7)
• Type *Options props with optional fields. (#9)

Bug Fixes

• Fix component re-renders when pointLightPositionRadiusScales is updated.
• Export tween method.
• Support customizing markers glow options.
• Dissable min/max polar angles when focus is applied.
• Support TouchEvents on markers
• Export types

Other

• Update dependencies and docs

Check the documentation to begin building interactive globe visualizations!

Notes

• Original development of react-globe begun as react-3d-globe.
• The release of React hooks was a huge motivation to rewrite react-3d-globe. Writing code in hooks allowed complete separation of responsibility of ThreeJS entities (e.g. camera, globe, markers, renderer). These separate effects can be updated in a controlled manner by listening explicitly to their dependencies passed down from the component props.
• The react-globe project is heavily inspired by the metoorising visualization project. Many features in react-globe are based around requirements in this project.
• The react-globe NPM package was transferred to me from the original package. Code is published to this package at version 3.0.0 to dissociate features and goals from the old package.