From acb7ad498f08336227b248b4a8adcb19a46e1b17 Mon Sep 17 00:00:00 2001
From: Chau <25516557+nartc@users.noreply.github.com>
Date: Sun, 15 Mar 2026 08:30:23 -0400
Subject: [PATCH] fix(core): skip invisible objects before intersectObject

---
 libs/core/src/lib/events.ts                   | 14 +++++++-
 .../soba/src/performances/detailed.stories.ts | 33 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/libs/core/src/lib/events.ts b/libs/core/src/lib/events.ts
index 574dc09c..88c6cf89 100644
--- a/libs/core/src/lib/events.ts
+++ b/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
diff --git a/libs/soba/src/performances/detailed.stories.ts b/libs/soba/src/performances/detailed.stories.ts
index 1595b28d..57c8cffe 100644
--- a/libs/soba/src/performances/detailed.stories.ts
+++ b/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,
+});