fix: raycaster events listener on canvas rather than windows

src/components/TresScene.ts

@@ -6,7 +6,7 @@ import { useLogger } from '/@/composables'
 import { useCamera, useRenderer, useRenderLoop, useRaycaster, useTres } from '/@/composables'
 import { extend } from '/@/core/catalogue'
 import { RendererPresetsType } from '/@/composables/useRenderer/const'
-import { TresObject } from '../types'
+import { TresEvent, TresObject } from '../types'
 import { useEventListener } from '@vueuse/core'
 
 export interface TresSceneProps {
@@ -101,7 +101,7 @@ export const TresScene = defineComponent<TresSceneProps>({
             }
           } else {
             if (prevInstance !== null) {
-              currentInstance.object.events.onPointerLeave?.(prevInstance)
+              currentInstance?.object.events.onPointerLeave?.(prevInstance)
               currentInstance = null
             }
           }
@@ -110,7 +110,7 @@ export const TresScene = defineComponent<TresSceneProps>({
         }
       })
 
-      useEventListener(window, 'click', () => {
+      useEventListener(canvas.value, 'click', () => {
         if (currentInstance === null) return
         currentInstance.object.events.onClick?.(currentInstance)
       })

src/composables/useRaycaster/index.ts

@@ -1,6 +1,6 @@
 import { useTres } from '/@/composables'
 import { Raycaster, Vector2 } from 'three'
-import { Ref, ref, ShallowRef, shallowRef } from 'vue'
+import { onUnmounted, Ref, ref, ShallowRef, shallowRef } from 'vue'
 
 /**
  * Raycaster composable return type
@@ -36,7 +36,7 @@ export function useRaycaster(): UseRaycasterReturn {
   const raycaster = shallowRef(new Raycaster())
   const pointer = ref(new Vector2())
   const currentInstance = ref(null)
-  const { setState } = useTres()
+  const { setState, state } = useTres()
 
   setState('raycaster', raycaster.value)
   setState('pointer', pointer)
@@ -47,11 +47,11 @@ export function useRaycaster(): UseRaycasterReturn {
     pointer.value.y = -(event.clientY / window.innerHeight) * 2 + 1
   }
 
-  window.addEventListener('pointermove', onPointerMove) //TODO listener should be on canvas
+  state?.renderer?.domElement.addEventListener('pointermove', onPointerMove) //TODO listener should be on canvas
 
-  /*  onUnmounted(() => { TODO
-    window.removeEventListener('pointermove', onPointerMove)
-  }) */
+  onUnmounted(() => {
+    state?.renderer?.domElement.removeEventListener('pointermove', onPointerMove)
+  })
   return {
     raycaster,
     pointer,