fix: group should recursive search for child elements (#728) (#731)

* fix: group should recursive search for child elements (#728)

* fix: rename variable

---------

Co-authored-by: hexianWeb <hexianweb@gmail.com>
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>
Co-authored-by: Garrett Walker <garbwalk@gmail.com>

src/composables/useRaycaster/index.ts

@@ -9,14 +9,13 @@ import type { DomEvent, TresCamera, TresEvent } from 'src/types'
 import type { TresContext } from '../useTresContextProvider'
 
 export const useRaycaster = (
-  objects: Ref<Object3D[]>,
+  objectsWithEvents: Ref<Object3D[]>,
   ctx: TresContext,
 ) => {
   // having a separate computed makes useElementBounding work
   const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
   const intersects: ShallowRef<Intersection[]> = shallowRef([])
   const { x, y } = usePointer({ target: canvas })
-  const objectWihtEvents = computed(() => objects.value.filter(obj => obj.__tres?.eventCount > 0))
   let delta = 0
 
   const { width, height, top, left } = useElementBounding(canvas)
@@ -35,7 +34,7 @@ export const useRaycaster = (
 
     ctx.raycaster.value.setFromCamera(new Vector2(x, y), ctx.camera.value)
 
-    intersects.value = ctx.raycaster.value.intersectObjects(objectWihtEvents.value, true)
+    intersects.value = ctx.raycaster.value.intersectObjects(objectsWithEvents.value, true)
     return intersects.value
   }
 

src/composables/useTresEventManager/index.ts

@@ -31,10 +31,10 @@ export function useTresEventManager(
   if (scene) { _scene.value = scene }
   if (context) { _context.value = context }
 
+  const hasEvents = object => object.__tres?.eventCount > 0
+  const hasChildrenWithEvents = object => object.children?.some(child => hasChildrenWithEvents(child)) || hasEvents(object)
   // TODO: Optimize to not hit test on the whole scene
-  const sceneChildren = computed(() =>
-    _scene.value ? _scene.value.children : [],
-  )
+  const objectsWithEvents = computed(() => _scene.value?.children?.filter(hasChildrenWithEvents) || [])
 
   function executeEventListeners(
     listeners: Function | Function[],
@@ -111,7 +111,7 @@ export function useTresEventManager(
     onPointerMissed,
     onWheel,
     forceUpdate,
-  } = useRaycaster(sceneChildren, context)
+  } = useRaycaster(objectsWithEvents, context)
 
   onPointerUp(event => propogateEvent('onPointerUp', event))
   onPointerDown(event => propogateEvent('onPointerDown', event))