feat(core): allow using window as pointer events source

docs/api/tres-canvas.md

@@ -91,6 +91,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **toneMapping** | Defines the tone mapping exposure used by the renderer. | `NoToneMapping` |
 | **toneMappingExposure** | Exposure level of tone mapping. | `1` |
 | **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
+| **useWindowPointer** | Whether to use the window as the source of pointer events | `false` |
 | **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
 
 ### Defaults

src/components/TresCanvas.vue

@@ -50,6 +50,7 @@ export interface TresCanvasProps
   camera?: TresCamera
   preset?: RendererPresetsType
   windowSize?: boolean
+  useWindowPointer?: boolean
   disableRender?: boolean
 }
 
@@ -60,6 +61,7 @@ const props = withDefaults(defineProps<TresCanvasProps>(), {
   stencil: undefined,
   antialias: undefined,
   windowSize: undefined,
+  useWindowPointer: undefined,
   disableRender: undefined,
   useLegacyLights: undefined,
   preserveDrawingBuffer: undefined,
@@ -134,7 +136,7 @@ onMounted(() => {
     rendererOptions: props,
   })
 
-  usePointerEventHandler({ scene: scene.value, contextParts: context.value })
+  usePointerEventHandler({ scene: scene.value, contextParts: context.value, isWindow: props.useWindowPointer })
 
   const { registerCamera, camera, cameras, deregisterCamera } = context.value
 

src/composables/usePointerEventHandler/index.ts

@@ -17,10 +17,11 @@ export interface EventProps {
 }
 
 export const usePointerEventHandler = (
-  { scene, contextParts }:
+  { scene, contextParts, isWindow }:
   {
     scene: TresScene
     contextParts: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>
+    isWindow?: boolean
   },
 ) => {
   const objectsWithEventListeners = reactive({
@@ -73,7 +74,7 @@ export const usePointerEventHandler = (
     ),
   )
 
-  const { onClick, onPointerMove } = useRaycaster(objectsToWatch, contextParts)
+  const { onClick, onPointerMove } = useRaycaster(objectsToWatch, contextParts, isWindow)
 
   onClick(({ intersects, event }) => {
     if (intersects.length) { objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event) }

src/composables/useRaycaster/index.ts

@@ -1,9 +1,9 @@
 import { Vector2 } from 'three'
 import type { Intersection, Object3D, Object3DEventMap } from 'three'
 import type { Ref } from 'vue'
-import { computed, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
-import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
+import { createEventHook, useElementBounding, usePointer, useWindowSize } from '@vueuse/core'
 
 import type { TresContext } from '../useTresContextProvider'
 
@@ -21,13 +21,21 @@ interface PointerClickEventPayload {
 export const useRaycaster = (
   objects: Ref<Object3D[]>,
   { renderer, camera, raycaster }: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>,
+  isWindow?: boolean,
 ) => {
   // having a separate computed makes useElementBounding work
   const canvas = computed(() => renderer.value.domElement as HTMLCanvasElement)
+  const target = isWindow ? window : canvas
 
-  const { x, y } = usePointer({ target: canvas })
+  const { x, y } = usePointer({ target })
 
-  const { width, height, top, left } = useElementBounding(canvas)
+  const windowSize = {
+    ...useWindowSize(),
+    top: ref(0),
+    left: ref(0),
+  }
+
+  const { width, height, top, left } = isWindow ? windowSize : useElementBounding(canvas)
 
   const getRelativePointerPosition = ({ x, y }: { x: number, y: number }) => {
     if (!canvas.value) { return }
@@ -85,10 +93,18 @@ export const useRaycaster = (
 
   const onPointerLeave = (event: PointerEvent) => eventHookPointerMove.trigger({ event, intersects: [] })
 
-  canvas.value.addEventListener('pointerup', onPointerUp)
-  canvas.value.addEventListener('pointerdown', onPointerDown)
-  canvas.value.addEventListener('pointermove', onPointerMove)
-  canvas.value.addEventListener('pointerleave', onPointerLeave)
+  if (isWindow) {
+    window.addEventListener('pointerup', onPointerUp)
+    window.addEventListener('pointerdown', onPointerDown)
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerleave', onPointerLeave)
+  }
+  else { 
+    canvas.value.addEventListener('pointerup', onPointerUp)
+    canvas.value.addEventListener('pointerdown', onPointerDown)
+    canvas.value.addEventListener('pointermove', onPointerMove)
+    canvas.value.addEventListener('pointerleave', onPointerLeave)
+  }
 
   onUnmounted(() => {
     if (!canvas?.value) { return }