fix(core): skip invisible objects before intersectObject (#81)

Author: nartc

libs/core/src/lib/events.ts

@@ -105,7 +105,19 @@ export function createEvents(store: SignalState<NgtState>) {
 		const duplicates = new Set<string>();
 		const intersections: NgtIntersection[] = [];
 		// Allow callers to eliminate event objects
-		const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+		const allEventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+
+		// filter out invisible objects
+		const eventsObjects: THREE.Object3D[] = [];
+		for (const eventsObject of allEventsObjects) {
+			let current: THREE.Object3D | null = eventsObject;
+			while (current) {
+				if (!current.visible) break;
+				current = current.parent;
+			}
+
+			if (!current) eventsObjects.push(eventsObject);
+		}
 
 		if (!state.previousRoot) {
 			// Make sure root-level pointer and ray are set up

libs/soba/src/performances/detailed.stories.ts

@@ -5,6 +5,34 @@ import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsDetailed } from 'angular-three-soba/performances';
 import { storyDecorators, storyFunction } from '../setup-canvas';
 
+@Component({
+	template: `
+		<ngts-detailed [distances]="[0, 50]">
+			<ngt-group>
+				<ngt-mesh (pointermove)="onHover()">
+					<ngt-icosahedron-geometry *args="[10, 3]" />
+					<ngt-mesh-basic-material color="hotpink" wireframe />
+				</ngt-mesh>
+			</ngt-group>
+
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 1]" />
+				<ngt-mesh-basic-material color="lightblue" wireframe />
+			</ngt-mesh>
+		</ngts-detailed>
+
+		<ngts-orbit-controls [options]="{ enablePan: false, enableRotate: false, zoomSpeed: 0.5 }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsDetailed, NgtArgs, NgtsOrbitControls],
+})
+class WithEventDetailedStory {
+	protected onHover() {
+		console.log('hovered');
+	}
+}
+
 @Component({
 	template: `
 		<ngts-detailed [distances]="[0, 50, 150]">
@@ -41,3 +69,8 @@ export const Default = storyFunction(DefaultDetailedStory, {
 	camera: { position: [0, 0, 100] },
 	controls: false,
 });
+
+export const WithEvent = storyFunction(WithEventDetailedStory, {
+	camera: { position: [0, 0, 100] },
+	controls: false,
+});