Add pointerEventsFilter prop

README.md

@@ -292,6 +292,7 @@ Globe({ configOptions })(<domElement>)
 | <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>enablePointerInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your globe performance it's recommended to switch off this property. | `true` |
+| <b>pointerEventsFilter</b>([<i>fn</i>]) | Getter/setter for the filter function which defines whether a particular object can be the target of pointer interactions. In general, objects that are closer to the camera get precedence in capturing pointer events. This function allows having ignored object layers so that pointer events can be passed through to deeper objects in the various globe layers. The ThreeJS object and its associated data (if any) are passed as arguments: `pointerEventsFilter(obj, data)`. The function should return a boolean value. | `() => true` |
 | <b>onZoom</b>(<i>fn</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>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). | |

src/globe.js

@@ -167,6 +167,11 @@ export default Kapsule({
     onCustomLayerClick: { default: () => {}, triggerUpdate: false },
     onCustomLayerRightClick: { default: () => {}, triggerUpdate: false },
     onCustomLayerHover: { default: () => {}, triggerUpdate: false },
+    pointerEventsFilter: {
+      default: () => true,
+      triggerUpdate: false,
+      onChange: (filterFn, state) => state.renderObjs.hoverFilter(obj => filterFn(obj, obj.__data))
+    },
     ...linkedGlobeProps,
     ...linkedRenderObjsProps
   },

src/index.d.ts

@@ -1,4 +1,4 @@
-import { Scene, Camera, WebGLRenderer, WebGLRendererParameters } from 'three';
+import { Object3D, Scene, Camera, WebGLRenderer, WebGLRendererParameters } from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { ThreeGlobeGeneric, ConfigOptions as ThreeGlobeConfigOptions } from 'three-globe';
 
@@ -21,6 +21,8 @@ interface GeoCoords {
   altitude: number;
 }
 
+type PointerEventsFilterFn = (object: Object3D, data: object) => boolean;
+
 export interface GlobeGenericInstance<ChainableInstance> extends ThreeGlobeGeneric<ChainableInstance> {
   (element: HTMLElement): ChainableInstance;
   resetProps(): ChainableInstance;
@@ -87,6 +89,8 @@ export interface GlobeGenericInstance<ChainableInstance> extends ThreeGlobeGener
   resumeAnimation(): ChainableInstance;
   enablePointerInteraction(): boolean;
   enablePointerInteraction(enable: boolean): ChainableInstance;
+  pointerEventsFilter(): PointerEventsFilterFn;
+  pointerEventsFilter(filterFn: PointerEventsFilterFn): ChainableInstance;
   onZoom(callback: (pov: GeoCoords) => void): ChainableInstance;
   scene(): Scene;
   camera(): Camera;