fix(core): skip invisible objects before intersectObject

Author: nartc

libs/core/src/lib/events.ts

@@ -140,6 +140,13 @@ export function createEvents(store: SignalState<NgtState>) {
 				if (objState.raycaster.camera === undefined) objState.raycaster.camera = null!;
 			}
 
+			// skip invisible objects
+			let currentObj: THREE.Object3D | null = obj;
+			while (currentObj) {
+				if (!currentObj.visible) return [];
+				currentObj = currentObj.parent;
+			}
+
 			// Intersect object by object
 			return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
 		}

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,
+});