chore: tinkering on possible solutions concerning pointer event handling

Tresjs · alvarosabu · Jun 19, 2023 · Jun 1, 2023 · Jun 1, 2023 · Jun 13, 2023
commit efcfcbf301195c50f45752ad3336bf2c4e970556
diff --git a/playground/src/components/TheEvents.vue b/playground/src/components/TheEvents.vue
@@ -49,7 +49,7 @@ function onPointerLeave(ev) {
     <template v-for="x in [-2.5, 0, 2.5]">
       <template v-for="y in [-2.5, 0, 2.5]">
         <TresMesh
-          v-for="z in [-2.5, 0, 2.5]"
+          v-for="z in [-2.5, 0, 1.5]"
           :key="[x, y, z]"
           :position="[x, y, z]"
           @click="onClick"

diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TheExperience />
+    <TheEvents />
   </Suspense>
 </template>
@@ -1,7 +1,6 @@
-import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, watchEffect, VNode } from 'vue'
+import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, VNode } from 'vue'
 import * as THREE from 'three'
 import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
-import { useEventListener } from '@vueuse/core'
 import { isString } from '@alvarosabu/utils'
 import { createTres } from '../core/renderer'
 import { TresCamera } from '../types/'
@@ -12,8 +11,8 @@ import {
   useCamera,
   useRenderer,
   useRenderLoop,
-  useRaycaster,
   useTres,
+  usePointerEventHandler,
 } from '../composables'
 import { extend } from '../core/catalogue'
 import { type RendererPresetsType } from '../composables/useRenderer/const'
@@ -68,11 +67,13 @@ export const TresScene = defineComponent<TresSceneProps>({
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLElement>()
     const scene = new THREE.Scene()
+    const pointerEventHandler = usePointerEventHandler()
     const { setState } = useTres()
 
     setState('scene', scene)
     setState('canvas', canvas)
     setState('container', container)
+    setState('pointerEventHandler', pointerEventHandler)
 
     const isCameraAvailable = ref()
 
@@ -105,41 +106,8 @@ export const TresScene = defineComponent<TresSceneProps>({
         pushCamera(props.camera as any)
       }
 
-      const { raycaster, pointer } = useRaycaster()
-
-      // TODO: Type raycasting events correctly
-      let prevInstance: any = null
-      let currentInstance: any = null
-
-      watchEffect(() => {
-        if (activeCamera.value) raycaster.value.setFromCamera(pointer.value, activeCamera.value)
-      })
-
       onLoop(() => {
         if (activeCamera.value && props.disableRender !== true) renderer.value?.render(scene, activeCamera.value)
-
-        if (raycaster.value) {
-          const intersects = raycaster.value.intersectObjects(scene.children)
-
-          if (intersects.length > 0) {
-            currentInstance = intersects[0]
-            if (prevInstance === null) {
-              currentInstance.object?.events?.onPointerEnter?.(currentInstance)
-            }
-            currentInstance.object?.events?.onPointerMove?.(currentInstance)
-          } else {
-            if (prevInstance !== null) {
-              currentInstance?.object?.events?.onPointerLeave?.(prevInstance)
-              currentInstance = null
-            }
-          }
-          prevInstance = currentInstance
-        }
-      })
-
-      useEventListener(canvas.value, 'click', () => {
-        if (currentInstance === null) return
-        currentInstance.object?.events?.onClick?.(currentInstance)
       })
     }
 

@@ -7,3 +7,5 @@ export * from './useTres'
 export * from './useRaycaster'
 export * from './useLogger'
 export * from './useSeek'
+export * from './useRaycaster2'
+export * from './usePointerEventHandler'
@@ -0,0 +1,34 @@
+import { computed } from 'vue'
+import { useRaycaster2 } from '../useRaycaster2'
+import type { Object3D } from 'three'
+
+type EventProps = {
+  // TODO this should not be here but in the type that is used for mesh props
+  // TODO deep
+  onClick?: () => void
+  onPointerEnter?: () => void
+  onPointerMove?: () => void
+  onPointerLeave?: () => void
+}
+
+export const usePointerEventHandler = () => {
+  const objectsWithEventListeners = {
+    click: new Map<Object3D, () => void>(),
+  }
+
+  const registerObject = (object: Object3D, { onClick }: EventProps) => {
+    if (onClick) objectsWithEventListeners.click.set(object, onClick)
+  }
+
+  const objectsToWatch = computed(() => Array.from(objectsWithEventListeners.click.keys()))
+
+  const { onClick } = useRaycaster2(objectsToWatch)
+
+  onClick(({ intersects }) => {
+    console.log(intersects)
+  })
+
+  return {
+    registerObject,
+  }
+}
diff --git a/src/composables/useRaycaster2/index.ts b/src/composables/useRaycaster2/index.ts
@@ -0,0 +1,99 @@
+import { useTres } from '../useTres'
+import { Raycaster, Vector2 } from 'three'
+import { Ref, computed, onUnmounted, ref, watchEffect } from 'vue'
+import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
+
+export type Intersects = THREE.Intersection<THREE.Object3D<THREE.Event>>[]
+interface ClickEventPayload {
+  intersects: Intersects
+  event: PointerEvent
+}
+
+export const useRaycaster2 = (objects: Ref<THREE.Object3D[]>) => {
+  const { state } = useTres()
+
+  const canvas = computed(() => state.canvas?.value) // having a seperate computed makes useElementBounding work
+
+  const { x, y } = usePointer({ target: canvas }) // TODO advanced pointer options?
+
+  const { width, height, top, left } = useElementBounding(canvas)
+
+  const raycaster = new Raycaster()
+
+  const getRelativePointerPosition = ({ x, y }: { x: number; y: number }) => {
+    if (!canvas.value) return
+
+    return {
+      x: ((x - left.value) / width.value) * 2 - 1,
+      y: -((y - top.value) / height.value) * 2 + 1,
+    }
+  }
+
+  const getIntersectsByRelativePointerPosition = ({ x, y }: { x: number; y: number }) => {
+    if (!state.camera) return
+
+    raycaster.setFromCamera(new Vector2(x, y), state.camera)
+
+    return raycaster.intersectObjects(objects.value, false)
+  }
+
+  const getIntersects = (event?: PointerEvent) => {
+    const pointerPosition = getRelativePointerPosition({
+      x: event?.clientX ?? x.value,
+      y: event?.clientY ?? y.value,
+    })
+    if (!pointerPosition) return []
+    console.log(pointerPosition)
+
+    return getIntersectsByRelativePointerPosition(pointerPosition) || []
+  }
+
+  // const intersects = ref<Intersects>([])
+
+  // watchEffect(() => {
+  //   intersects.value = getIntersects()
+  // })
+
+  const eventHookClick = createEventHook<ClickEventPayload>()
+
+  const triggerEventHookClick = (event: PointerEvent) => {
+    eventHookClick.trigger({ event, intersects: getIntersects(event) })
+  }
+
+  //distinguishing between clicks and drags (in cas of panning or dollying for example)
+  let clicked = false
+
+  const onPointerDown = () => {
+    clicked = true
+  }
+  const onPointerMove = () => {
+    clicked = false
+  }
+  const onPointerUp = (event: PointerEvent) => {
+    if (!(event instanceof PointerEvent)) return // prevents triggering twice on mobile devices
+
+    if (clicked) triggerEventHookClick(event)
+  }
+
+  const unwatch = watchEffect(() => {
+    if (!canvas?.value) return
+
+    canvas.value.addEventListener('pointerdown', onPointerDown)
+    canvas.value.addEventListener('pointermove', onPointerMove)
+    canvas.value.addEventListener('pointerup', onPointerUp)
+
+    unwatch()
+  })
+
+  onUnmounted(() => {
+    if (!canvas?.value) return
+    canvas.value.removeEventListener('pointerdown', onPointerDown)
+    canvas.value.removeEventListener('pointermove', onPointerMove)
+    canvas.value.removeEventListener('pointerup', onPointerUp)
+  })
+
+  return {
+    // intersects,
+    onClick: (fn: (value: ClickEventPayload) => void) => eventHookClick.on(fn).off,
+  }
+}
@@ -4,7 +4,7 @@ import { withSetup } from '../../utils/test-utils'
 
 const [composable, app] = withSetup(() => useSeek())
 
-describe('useRaycaster', () => {
+describe('useSeek', () => {
   afterEach(() => {
     app.unmount()
   })

@@ -1,7 +1,8 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
 import { generateUUID } from 'three/src/math/MathUtils'
-import { computed, ComputedRef, inject, provide, shallowReactive, toRefs } from 'vue'
+import { computed, ComputedRef, inject, provide, Ref, shallowReactive, toRefs } from 'vue'
 import { Camera } from '../useCamera'
+import type { usePointerEventHandler } from '../usePointerEventHandler'
 
 export interface TresState {
   /**
@@ -88,6 +89,9 @@ export interface TresState {
    * @memberof TresState
    */
   controls?: (EventDispatcher & { enabled: boolean }) | null
+
+  canvas?: Ref<HTMLElement>
+  pointerEventHandler?: ReturnType<typeof usePointerEventHandler> // TODO comment
   [key: string]: any
 }
 
@@ -113,9 +117,11 @@ export function useTresProvider() {
     uuid: generateUUID(),
     camera: undefined,
     cameras: [],
+    canvas: undefined,
     scene: undefined,
     renderer: undefined,
-    aspectRatio: computed(() => window.innerWidth / window.innerHeight),
+    aspectRatio: computed(() => window.innerWidth / window.innerHeight), //TODO
+    pointerEventHandler: undefined,
   })
   /**
    * Get a state value.
@@ -155,8 +161,10 @@ export const useTres = () => {
     state: shallowReactive({
       camera: undefined,
       cameras: [],
+      canvas: undefined,
       scene: undefined,
       renderer: undefined,
+      pointerEventHandler: undefined,
     }),
   })
 

@@ -1,10 +1,11 @@
-import { RendererOptions } from 'vue'
-import { BufferAttribute, BufferGeometry, Material } from 'three'
-import { useCamera, useLogger } from '../composables'
+import { RendererOptions, getCurrentInstance } from 'vue'
+import { BufferAttribute } from 'three'
+import { useCamera, useLogger, useTres } from '../composables'
 import { isFunction } from '@alvarosabu/utils'
 import { catalogue } from './catalogue'
 import { EventHandlers, TresObject } from '../types'
 import { isHTMLTag, kebabToCamel } from '../utils'
+import type { Object3D, Material, BufferGeometry } from 'three'
 
 const onRE = /^on[^a-z]/
 export const isOn = (key: string) => onRE.test(key)
@@ -155,6 +156,21 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       if (isOn(key)) {
         const eventHandlerKey: keyof EventHandlers = key as keyof EventHandlers // This is fine
         node.events[eventHandlerKey] = nextValue
+
+        if (getCurrentInstance()) {
+          // the following should only happen if a setup context is available
+          const ctx = useTres()
+
+          if (ctx && eventHandlerKey === 'onClick') {
+            console.log(ctx)
+
+            ctx.state.pointerEventHandler?.registerObject(node as Object3D, {
+              [eventHandlerKey]: nextValue,
+            })
+          }
+        }
+
+        // if (!ctx.state.pointerEventHandler) throw 'pointerEventHandler should be available'
       }
       let value = nextValue
       if (value === '') value = true