fix(types): added `Object3DEventMap` to `Object3D` generics for point event handling (#491)

src/composables/usePointerEventHandler/index.ts

@@ -1,4 +1,4 @@
-import type { Intersection, Event, Object3D } from 'three'
+import type { Intersection, Object3D, Object3DEventMap } from 'three'
 import type { TresScene } from 'src/types'
 import { computed, reactive, ref } from 'vue'
 import { uniqueBy } from '../../utils'
@@ -6,8 +6,8 @@ import { useRaycaster } from '../useRaycaster'
 
 import type { TresContext } from '../useTresContextProvider'
 
-type CallbackFn = (intersection: Intersection<Object3D<Event>>, event: PointerEvent) => void
-type CallbackFnPointerLeave = (object: Object3D<Event>, event: PointerEvent) => void
+type CallbackFn = (intersection: Intersection<Object3D<Object3DEventMap>>, event: PointerEvent) => void
+type CallbackFnPointerLeave = (object: Object3D, event: PointerEvent) => void
 
 export interface EventProps {
   onClick?: CallbackFn
@@ -24,10 +24,10 @@ export const usePointerEventHandler = (
   },
 ) => {
   const objectsWithEventListeners = reactive({
-    click: new Map<Object3D, CallbackFn>(),
-    pointerMove: new Map<Object3D, CallbackFn>(),
-    pointerEnter: new Map<Object3D, CallbackFn>(),
-    pointerLeave: new Map<Object3D, CallbackFnPointerLeave>(),
+    click: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
+    pointerMove: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
+    pointerEnter: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
+    pointerLeave: new Map<Object3D<Object3DEventMap>, CallbackFnPointerLeave>(),
   })
 
   const blockingObjects = ref(new Set<Object3D>())
@@ -79,7 +79,7 @@ export const usePointerEventHandler = (
     if (intersects.length) objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event)
   })
 
-  let previouslyIntersectedObject: Object3D<Event> | null
+  let previouslyIntersectedObject: Object3D | null
 
   onPointerMove(({ intersects, event }) => {
     const firstObject = intersects?.[0]?.object

src/composables/useRaycaster/index.ts

@@ -1,5 +1,5 @@
 import { Vector2 } from 'three'
-import type { Object3D, type Intersection } from 'three'
+import type { Object3D, Intersection } from 'three'
 import type { Ref } from 'vue'
 import { computed, onUnmounted } from 'vue'
 import type { EventHook } from '@vueuse/core'
@@ -7,7 +7,7 @@ import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
 
 import { type TresContext } from '../useTresContextProvider'
 
-export type Intersects = Intersection<THREE.Object3D<THREE.Event>>[]
+export type Intersects = Intersection<THREE.Object3D<THREE.Object3DEventMap>>[]
 interface PointerMoveEventPayload {
   intersects?: Intersects
   event: PointerEvent

src/types/index.ts

@@ -38,7 +38,7 @@ interface TresBaseObject {
 }
 
 // Custom type for geometry and material properties in Object3D
-export interface TresObject3D extends THREE.Object3D {
+export interface TresObject3D extends THREE.Object3D<THREE.Object3DEventMap> {
   geometry?: THREE.BufferGeometry & TresBaseObject
   material?: THREE.Material & TresBaseObject
   userData: {