Groups will emit children events...mostly

playground/src/components/TheExperience.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import TheSphere from './TheSphere.vue'
+import { extend } from '@tresjs/core';
+
+import { reactive } from 'vue';
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three';
+import { TresCanvas } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
 
 const gl = {
   clearColor: '#82DBC5',
@@ -12,75 +13,39 @@ const gl = {
   shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
-}
-
-const wireframe = ref(true)
-
-const canvas = ref()
-
-watchEffect(() => {
-  if (canvas.value) {
-    console.log(canvas.value.context)
-  }
-})
+};
 </script>
 
 <template>
-  <div>
-    <button @click="wireframe = !wireframe">
-      Click
-    </button>
-  </div>
-  <pre>{{ wireframe }}</pre>
-  <TresCanvas
-    v-bind="gl"
-    ref="canvas"
-    window-size
-    class="awiwi"
-    :style="{ background: '#008080' }"
-  >
-    <TresPerspectiveCamera
-      :position="[7, 7, 7]"
-      :look-at="[0, 4, 0]"
-    />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[9, 9, 9]" />
     <OrbitControls />
-    <TresFog
-      :color="gl.clearColor"
-      :near="5"
-      :far="15"
-    />
-    <TresMesh
-      :position="[-2, 6, 0]"
-      :rotation="[0, Math.PI, 0]"
-      cast-shadow
-    >
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, 4, 0]"
-      cast-shadow
-    >
-      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-      <TresMeshToonMaterial
-        color="#4F4F4F"
-        :wireframe="wireframe"
-      />
-    </TresMesh>
-    <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
-      receive-shadow
+    <TresGroup 
+      @pointer-move="console.log('Group pointer-move')"
+      @pointer-enter="console.log('Group pointer-enter')"
+      @pointer-leave="console.log('Group pointer-leave')"
+      @click="console.log('Group click')"
     >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshToonMaterial color="#D3FC8A" />
-    </TresMesh>
-    <TheSphere />
-    <TresAxesHelper :args="[1]" />
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="2"
-      cast-shadow
-    />
-    <TresOrthographicCamera />
+      <TresMesh 
+        @pointer-move="console.log('child pointer-move')"
+        @pointer-enter="console.log('child pointer-enter')"
+        @pointer-leave="console.log('child pointer-leave')"
+        @click="console.log('child click')"
+        :position="[-2, 2, 0]"
+        :rotation="[0, Math.PI, 0]"
+      >
+        <TresConeGeometry :args="[1, 1.5, 3]" />
+        <TresMeshToonMaterial color="#82DBC5" />
+      </TresMesh>
+      <TresMesh :position="[0, 0, 0]" cast-shadow>
+        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+        <TresMeshToonMaterial color="#4F4F4F" />
+      </TresMesh>
+      <TresMesh :position="[2, -2, 0]">
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+    </TresGroup>
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1.2" cast-shadow />
   </TresCanvas>
 </template>

src/composables/usePointerEventHandler/index.ts

@@ -1,4 +1,4 @@
-import type { Intersection, Event, Object3D } from 'three'
+import type { Intersection, Event, Object3D  } from 'three'
 import type { TresScene } from 'src/types'
 import { computed, reactive, ref } from 'vue'
 import { uniqueBy } from '../../utils'
@@ -77,22 +77,37 @@ export const usePointerEventHandler = (
 
   onClick(({ intersects, event }) => {
     if (intersects.length) objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event)
+    if (intersects.length && intersects[0].object?.parent?.isGroup) objectsWithEventListeners.click.get(intersects[0].object?.parent)?.(intersects[0], event);
   })
 
   let previouslyIntersectedObject: Object3D<Event> | null
 
   onPointerMove(({ intersects, event }) => {
+    if (intersects?.length > 0) 
+      console.log(intersects)
     const firstObject = intersects?.[0]?.object
+    const parentObject = intersects?.[0]?.object?.parent
 
     const { pointerLeave, pointerEnter, pointerMove } = objectsWithEventListeners
 
-    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject)
+    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject){
       pointerLeave.get(previouslyIntersectedObject)?.(previouslyIntersectedObject, event)
 
+      if(parentObject ?? parentObject?.isGroup)
+        pointerLeave.get(parentObject)?.(previouslyIntersectedObject, event)
+    }
+
     if (firstObject) {
-      if (previouslyIntersectedObject !== firstObject) pointerEnter.get(firstObject)?.(intersects[0], event)
+      if (previouslyIntersectedObject !== firstObject) {
+        pointerEnter.get(firstObject)?.(intersects[0], event)
+
+        if(parentObject ?? parentObject?.isGroup)
+          pointerEnter.get(parentObject)?.(previouslyIntersectedObject, event)
+      }
 
       pointerMove.get(firstObject)?.(intersects[0], event)
+      if(parentObject ?? parentObject?.isGroup)
+        pointerMove.get(parentObject)?.(previouslyIntersectedObject, event)
     }
 
     previouslyIntersectedObject = firstObject || null