Merge branch 'main' into blog/tresjs-nuxt-module-announcement

CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [2.2.0](https://github.com/Tresjs/tres/compare/2.1.3...2.2.0) (2023-06-19)
+
+
+### Features
+
+* removed `useCamera` logic from nodeOps ([#308](https://github.com/Tresjs/tres/issues/308)) ([e9509ba](https://github.com/Tresjs/tres/commit/e9509bab177a7a23f802ad2716f42d1f36f7654b))
+
+
+### Bug Fixes
+
+* banner image link ([b793c77](https://github.com/Tresjs/tres/commit/b793c77a2b456ddac0fdd4cf18ad4d94f19db439))
+* main button colors ([3aab827](https://github.com/Tresjs/tres/commit/3aab8273dace80ba6e5ee210b0e17f0b8bc61449))
+* raycaster does not work properly when scene is not in full screen ([#304](https://github.com/Tresjs/tres/issues/304)) ([20a5b9e](https://github.com/Tresjs/tres/commit/20a5b9eee94755ca58ff4936aef20a070f920a7e))
+
 ### [2.1.3](https://github.com/Tresjs/tres/compare/2.1.2...2.1.3) (2023-06-14)
 
 

docs/api/events.md

@@ -1,6 +1,6 @@
 # Events
 
-**TresJS** Mesh objects emit pointer events when they are interacted with using `raycaster` and `pointer` objects under the hood.
+**TresJS** components emit pointer events when they are interacted with. This is the case for the components that represent Three.js classes that derive from [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (like meshes, groups,...).
 
 <StackBlitzEmbed project-id="tresjs-events" />
 
@@ -8,24 +8,18 @@
 
 ```html
 <TresMesh
-  @click="(ev) => console.log('click', ev)"
-  @pointer-move="(ev) => console.log('click', ev)"
-  @pointer-enter="(ev) => console.log('click', ev)"
-  @pointer-leave="(ev) => console.log('click', ev)"
+  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
+  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
+  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
+  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
 />
 ```
 
-## Event Data
+| Event         | fires when ...                                                                        | Event Handler Parameter Type(s)                                                                                                                                                                       |
+| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-move  | ... the pointer is moving above the object                                            | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-enter | ... the pointer is entering the object                                                | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-leave | ... the pointer is leaves the object                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
 
-The event data is a `TresEvent` object that contains the following properties:
-
-```ts
-;({
-  object: Object3D, // The mesh object that emitted the event
-  distance: number, // The distance between the camera and the mesh
-  point: Vector3, // The intersection point between the ray and the mesh
-  uv: Vector2, // The uv coordinates of the intersection point
-  face: Face3, // The face of the mesh that was intersected
-  faceIndex: number, // The index of the face that was intersected
-})
-```
+The returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) includes the [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) that triggered the event. You can access it via `intersection.object`.

docs/guide/getting-started.md

@@ -27,15 +27,15 @@ TresJS is written in Typescript and it's fully typed. If you are using Typescrip
 ::: code-group
 
 ```bash [npm]
-npm install @three/types -D
+npm install @types/three -D
 ```
 
 ```bash [yarn]
-yarn add @three/types -D
+yarn add @types/three -D
 ```
 
 ```bash [pnpm]
-pnpm add @three/types -D
+pnpm add @types/three -D
 ```
 
 :::

docs/guide/index.md

@@ -29,15 +29,15 @@ TresJS is written in Typescript and it's fully typed. If you are using Typescrip
 ::: code-group
 
 ```bash [npm]
-npm install @three/types -D
+npm install @types/three -D
 ```
 
 ```bash [yarn]
-yarn add @three/types -D
+yarn add @types/three -D
 ```
 
 ```bash [pnpm]
-pnpm add @three/types -D
+pnpm add @types/three -D
 ```
 
 :::

docs/guide/migration-guide.md

@@ -163,8 +163,6 @@ watch(modelRef, model => {
 
 The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work.
 
-Read more about it here: [Troubleshooting](/guide/troubleshooting.md)
-
 Change this:
 
 ```vue {3,5}

docs/guide/troubleshooting.md

@@ -12,27 +12,6 @@ You followed the [Getting started guide](/guide/getting-started.md) but you stil
 
 These are the most common reasons why you might not be able to see your scene:
 
-### Make sure you have a camera 🎥
-
-The first thing you need to do is to make sure you have a camera in your scene. If you don't have a camera, you won't be able to see anything.
-
-![No camera found](/no-camera-found.png)
-
-```vue
-<!-- Wrong ❌ -->
-<TresCanvas>
-  <TresOrbitControls />
-</TresCanvas>
-```
-
-```vue
-<!-- Correct ✅ -->
-<TresCanvas>
-  <TresPerspectiveCamera />
-  <TresOrbitControls />
-</TresCanvas>
-```
-
 ### Check the height of your canvas 📏
 
 Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.

docs/guide/your-first-scene.md

@@ -103,7 +103,7 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
 ```
 
 ::: warning
-A common issue is that the camera default position is the origin of the scene (0,0,0), if you still can see your scene try adding a position to the camera `<TresPerspectiveCamera :position="[3, 3, 3]" />`
+A common issue is that the camera default position is the origin of the scene (0,0,0), TresJS will automatically set the position of your camera to `[3,3,3]` if the prop `position`. If no camera is defined in you scene, a perspective camera is added automatically.`
 :::
 
 ## Adding a 🍩

docs/package.json

@@ -11,6 +11,6 @@
   "devDependencies": {
     "unocss": "^0.53.0",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.1"
+    "vitepress": "1.0.0-beta.2"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",

playground/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     Cameras: typeof import('./src/components/Cameras.vue')['default']
     DanielTest: typeof import('./src/components/DanielTest.vue')['default']
+    DeleteMe: typeof import('./src/components/DeleteMe.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     MeshWobbleMaterial: typeof import('./src/components/meshWobbleMaterial/index.vue')['default']

playground/src/components/TheEvents.vue

@@ -36,11 +36,15 @@ function onPointerMove(ev) {
     console.log(ev)
   }
 }
+
+const visible = ref(true)
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+  <button @click="visible = !visible"></button>
+  <div v-if="visible">
+    <TresCanvas window-size v-bind="gl">
+  
     <OrbitControls />
 
     <template v-for="x in [-2.5, 0, 2.5]">
@@ -62,4 +66,5 @@ function onPointerMove(ev) {
     <TresDirectionalLight :intensity="1" />
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
+  </div>
 </template>

pnpm-lock.yaml

@@ -141,8 +141,8 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0
       vitepress:
-        specifier: 1.0.0-beta.1
-        version: 1.0.0-beta.1(@algolia/client-search@4.17.2)(react@18.2.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.2
+        version: 1.0.0-beta.2(@algolia/client-search@4.17.2)(react@18.2.0)(search-insights@2.6.0)
 
   playground:
     dependencies:
@@ -6846,49 +6846,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress@1.0.0-beta.1(@algolia/client-search@4.17.2)(react@18.2.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
-    hasBin: true
-    dependencies:
-      '@docsearch/css': 3.5.0
-      '@docsearch/js': 3.5.0(@algolia/client-search@4.17.2)(react@18.2.0)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
-      '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
-      body-scroll-lock: 4.0.0-beta.0
-      focus-trap: 7.4.3
-      mark.js: 8.11.1
-      minisearch: 6.1.0
-      shiki: 0.14.2
-      vite: 4.3.9(@types/node@20.3.1)
-      vue: 3.3.4
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - fuse.js
-      - idb-keyval
-      - jwt-decode
-      - less
-      - nprogress
-      - qrcode
-      - react
-      - react-dom
-      - sass
-      - search-insights
-      - sortablejs
-      - stylus
-      - sugarss
-      - terser
-      - universal-cookie
-    dev: true
-
   /vitepress@1.0.0-beta.2(@algolia/client-search@4.17.2)(react@18.2.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
     hasBin: true

src/components/TresScene.ts

@@ -1,8 +1,6 @@
-import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, watchEffect, VNode } from 'vue'
+import { App, defineComponent, h, onMounted, onUnmounted, ref, watch } 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/'
 import {
@@ -12,11 +10,12 @@ import {
   useCamera,
   useRenderer,
   useRenderLoop,
-  useRaycaster,
   useTres,
+  usePointerEventHandler,
 } from '../composables'
 import { extend } from '../core/catalogue'
 import { type RendererPresetsType } from '../composables/useRenderer/const'
+import { OBJECT_3D_USER_DATA_KEYS } from '../keys'
 
 export interface TresSceneProps {
   shadows?: boolean
@@ -67,24 +66,18 @@ export const TresScene = defineComponent<TresSceneProps>({
 
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLElement>()
+
     const scene = new THREE.Scene()
+
+    const pointerEventHandler = usePointerEventHandler()
     const { setState } = useTres()
 
+    scene.userData[OBJECT_3D_USER_DATA_KEYS.REGISTER_AT_POINTER_EVENT_HANDLER] = pointerEventHandler.registerObject
+
     setState('scene', scene)
     setState('canvas', canvas)
     setState('container', container)
-
-    const isCameraAvailable = ref()
-
-    const internal = slots && slots.default && slots.default()
-
-    if (internal && internal?.length > 0) {
-      isCameraAvailable.value =
-        internal.some((node: VNode) => isString(node.type) && node.type.includes('Camera')) || props.camera
-      if (!isCameraAvailable.value) {
-        logWarning('No camera found in the scene, please add one!')
-      }
-    }
+    setState('pointerEventHandler', pointerEventHandler)
 
     const { onLoop, resume } = useRenderLoop()
 
@@ -98,6 +91,22 @@ export const TresScene = defineComponent<TresSceneProps>({
 
     const { activeCamera, pushCamera, clearCameras } = useCamera()
 
+    function setCamera() {
+      const camera = scene.getObjectByProperty('isCamera', true)
+
+      if (!camera) {
+        // eslint-disable-next-line max-len
+        logWarning('No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.')
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
+        camera.position.set(3,3,3)
+        camera.lookAt(0,0,0)
+        pushCamera(camera)
+      } else {
+
+        pushCamera(camera as TresCamera)
+      }
+    }
+
     function initRenderer() {
       const { renderer } = useRenderer(props)
 
@@ -105,41 +114,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)
       })
     }
 
@@ -152,6 +128,7 @@ export const TresScene = defineComponent<TresSceneProps>({
       app.provide(TRES_CONTEXT_KEY, tres)
       app.provide('extend', extend)
       app.mount(scene as unknown)
+      setCamera()
     }
     mountApp()
 
@@ -165,8 +142,7 @@ export const TresScene = defineComponent<TresSceneProps>({
       app = createTres(slots)
       app.provide('extend', extend)
       app.mount(scene as unknown)
-      const camera = scene.children.find((child: any) => child.isCamera)
-      pushCamera(camera as TresCamera)
+      setCamera()
       resume()
     }
 

src/composables/index.ts

@@ -7,3 +7,4 @@ export * from './useTres'
 export * from './useRaycaster'
 export * from './useLogger'
 export * from './useSeek'
+export * from './usePointerEventHandler'

src/composables/usePointerEventHandler/index.ts

@@ -0,0 +1,83 @@
+import { uniqueBy } from '../../utils'
+import { useRaycaster } from '../useRaycaster'
+import { computed, reactive } from 'vue'
+import type { Intersection, Event, Object3D } from 'three'
+
+type CallbackFn = (intersection: Intersection<Object3D<Event>>, event: PointerEvent) => void //TODO document
+type CallbackFnPointerLeave = (object: Object3D<Event>, event: PointerEvent) => void
+
+type EventProps = {
+  onClick?: CallbackFn
+  onPointerEnter?: CallbackFn
+  onPointerMove?: CallbackFn
+  onPointerLeave?: CallbackFnPointerLeave
+}
+
+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>(),
+  })
+
+  const deregisterObject = (object: Object3D) => {
+    Object.values(objectsWithEventListeners).forEach(map => map.delete(object))
+  }
+
+  const registerObject = (object: Object3D & EventProps) => {
+    const { onClick, onPointerMove, onPointerEnter, onPointerLeave } = object
+
+    if (onClick) objectsWithEventListeners.click.set(object, onClick)
+    if (onPointerMove) objectsWithEventListeners.pointerMove.set(object, onPointerMove)
+    if (onPointerEnter) objectsWithEventListeners.pointerEnter.set(object, onPointerEnter)
+    if (onPointerLeave) objectsWithEventListeners.pointerLeave.set(object, onPointerLeave)
+
+    object.addEventListener('removed', () => {
+      object.traverse((child: Object3D) => {
+        deregisterObject(child)
+      })
+
+      deregisterObject(object)
+    })
+  }
+
+  const objectsToWatch = computed(() =>
+    uniqueBy(
+      Object.values(objectsWithEventListeners)
+        .map(map => Array.from(map.keys()))
+        .flat(),
+      ({ uuid }) => uuid,
+    ),
+  )
+
+  const { onClick, onPointerMove } = useRaycaster(objectsToWatch)
+
+  onClick(({ intersects, event }) => {
+    if (intersects.length) objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event)
+  })
+
+  let previouslyIntersectedObject: Object3D<Event> | null
+
+  onPointerMove(({ intersects, event }) => {
+    const firstObject = intersects?.[0]?.object
+
+    const { pointerLeave, pointerEnter, pointerMove } = objectsWithEventListeners
+
+    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject)
+      pointerLeave.get(previouslyIntersectedObject)?.(previouslyIntersectedObject, event)
+
+    if (firstObject) {
+      if (previouslyIntersectedObject !== firstObject) pointerEnter.get(firstObject)?.(intersects[0], event)
+
+      pointerMove.get(firstObject)?.(intersects[0], event)
+    }
+
+    previouslyIntersectedObject = firstObject || null
+  })
+
+  return {
+    registerObject,
+    deregisterObject,
+  }
+}

src/composables/useRaycaster/index.ts

@@ -1,59 +1,108 @@
 import { useTres } from '../useTres'
-import { Raycaster, Vector2 } from 'three'
-import { onUnmounted, Ref, ref, ShallowRef, shallowRef } from 'vue'
-
-/**
- * Raycaster composable return type
- *
- * @export
- * @interface UseRaycasterReturn
- */
-export interface UseRaycasterReturn {
-  /**
-   * Raycaster instance
-   *
-   * @type {ShallowRef<Raycaster>}
-   * @memberof UseRaycasterReturn
-   */
-  raycaster: ShallowRef<Raycaster>
-  /**
-   * Pointer position
-   *
-   * @type {Ref<Vector2>}
-   * @memberof UseRaycasterReturn
-   */
-  pointer: Ref<Vector2>
+import { Object3D, Raycaster, Vector2 } from 'three'
+import { Ref, computed, onUnmounted, watchEffect } from 'vue'
+import { EventHook, createEventHook, useElementBounding, usePointer } from '@vueuse/core'
+
+export type Intersects = THREE.Intersection<THREE.Object3D<THREE.Event>>[]
+interface PointerMoveEventPayload {
+  intersects?: Intersects
+  event: PointerEvent
+}
+
+interface PointerClickEventPayload {
+  intersects: Intersects
+  event: PointerEvent
 }
 
-/**
- * Composable to provide raycaster support and pointer information
- *
- * @see https://threejs.org/docs/index.html?q=raycas#api/en/core/Raycaster
- * @export
- * @return {*} {UseRaycasterReturn}
- */
-export function useRaycaster(): UseRaycasterReturn {
-  const raycaster = shallowRef(new Raycaster())
-  const pointer = ref(new Vector2())
-  const currentInstance = ref(null)
-  const { setState, state } = useTres()
+export const useRaycaster = (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 })
+
+  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 | MouseEvent) => {
+    const pointerPosition = getRelativePointerPosition({
+      x: event?.clientX ?? x.value,
+      y: event?.clientY ?? y.value,
+    })
+    if (!pointerPosition) return []
+
+    return getIntersectsByRelativePointerPosition(pointerPosition) || []
+  }
+
+  const intersects = computed<Intersects>(() => getIntersects())
+
+  const eventHookClick = createEventHook<PointerClickEventPayload>()
+  const eventHookPointerMove = createEventHook<PointerMoveEventPayload>()
+
+  const triggerEventHook = (eventHook: EventHook, event: PointerEvent | MouseEvent) => {
+    eventHook.trigger({ event, intersects: getIntersects(event) })
+  }
+
+  const onPointerMove = (event: PointerEvent) => {
+    triggerEventHook(eventHookPointerMove, event)
+  }
+
+  // a click event is fired whenever a pointerdown happened after pointerup on the same object
 
-  setState('raycaster', raycaster.value)
-  setState('pointer', pointer)
-  setState('currentInstance', currentInstance)
+  let mouseDownObject: Object3D | undefined = undefined
 
-  function onPointerMove(event: MouseEvent) {
-    pointer.value.x = (event.clientX / window.innerWidth) * 2 - 1
-    pointer.value.y = -(event.clientY / window.innerHeight) * 2 + 1
+  const onPointerDown = (event: PointerEvent) => {
+    mouseDownObject = getIntersects(event)[0]?.object
   }
 
-  state?.renderer?.domElement.addEventListener('pointermove', onPointerMove)
+  const onPointerUp = (event: MouseEvent) => {
+    if (!(event instanceof PointerEvent)) return // prevents triggering twice on mobile devices
+
+    if (mouseDownObject === getIntersects(event)[0]?.object) triggerEventHook(eventHookClick, event)
+  }
+
+  const onPointerLeave = (event: PointerEvent) => eventHookPointerMove.trigger({ event, intersects: [] })
+
+  const unwatch = watchEffect(() => {
+    if (!canvas?.value) return
+
+    canvas.value.addEventListener('pointerup', onPointerUp)
+    canvas.value.addEventListener('pointerdown', onPointerDown)
+    canvas.value.addEventListener('pointermove', onPointerMove)
+    canvas.value.addEventListener('pointerleave', onPointerLeave)
+
+    unwatch()
+  })
 
   onUnmounted(() => {
-    state?.renderer?.domElement.removeEventListener('pointermove', onPointerMove)
+    if (!canvas?.value) return
+    canvas.value.removeEventListener('pointerup', onPointerUp)
+    canvas.value.removeEventListener('pointerdown', onPointerDown)
+    canvas.value.removeEventListener('pointermove', onPointerMove)
+    canvas.value.removeEventListener('pointerleave', onPointerLeave)
   })
+
   return {
-    raycaster,
-    pointer,
+    intersects,
+    onClick: (fn: (value: PointerClickEventPayload) => void) => eventHookClick.on(fn).off,
+    onPointerMove: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerMove.on(fn).off,
   }
 }

src/composables/useRaycaster/useRaycaster.test.ts

@@ -1,23 +0,0 @@
-import { Raycaster, Vector2 } from 'three'
-/* import { useRaycaster } from '.' */
-import { withSetup } from '../../utils/test-utils'
-
-/* const [composable, app] = withSetup(() => useRaycaster()) */
-
-describe.skip('useRaycaster', () => {
-  /*   afterEach(() => {
-    app.unmount()
-  }) */
-  /*   test.skip('provides raycaster', () => {
-    const { raycaster } = composable
-    expect(raycaster).toBeDefined()
-    expect(raycaster.value).toBeInstanceOf(Raycaster)
-  })
-  test.skip('provides pointer', () => {
-    const { pointer } = composable
-    expect(pointer).toBeDefined()
-    expect(pointer.value).toBeInstanceOf(Vector2)
-  }) */
-})
-
-// TODO: find a way to test this with useTresProvider approach

src/composables/useRenderer/index.ts

@@ -159,7 +159,7 @@ export function useRenderer(options: UseRendererOptions) {
   const aspectRatio = computed(() => width.value / height.value)
 
   setTimeout(() => {
-    if (!toValue(windowSize) && !state.canvas.value.offsetHeight) {
+    if (!toValue(windowSize) && !state.canvas?.value.offsetHeight) {
       logWarning(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
   You could set windowSize=true to force the canvas to be the size of the window.`)
     }

src/composables/useSeek/useSeek.test.ts

@@ -4,7 +4,7 @@ import { withSetup } from '../../utils/test-utils'
 
 const [composable, app] = withSetup(() => useSeek())
 
-describe('useRaycaster', () => {
+describe('useSeek', () => {
   afterEach(() => {
     app.unmount()
   })

src/composables/useTres/index.ts

@@ -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 { ComputedRef, inject, provide, Ref, shallowReactive, toRefs } from 'vue'
 import { Camera } from '../useCamera'
+import type { usePointerEventHandler } from '../usePointerEventHandler'
 
 export interface TresState {
   /**
@@ -88,6 +89,15 @@ export interface TresState {
    * @memberof TresState
    */
   controls?: (EventDispatcher & { enabled: boolean }) | null
+
+  canvas?: Ref<HTMLElement>
+
+  /**
+   * The entity that handles pointer events
+   * @type {ReturnType<typeof usePointerEventHandler>}
+   * @memberof TresState
+   */
+  pointerEventHandler?: ReturnType<typeof usePointerEventHandler>
   [key: string]: any
 }
 
@@ -113,9 +123,11 @@ export function useTresProvider() {
     uuid: generateUUID(),
     camera: undefined,
     cameras: [],
+    canvas: undefined,
     scene: undefined,
     renderer: undefined,
-    aspectRatio: computed(() => window.innerWidth / window.innerHeight),
+    aspectRatio: undefined,
+    pointerEventHandler: undefined,
   })
   /**
    * Get a state value.
@@ -155,8 +167,10 @@ export const useTres = () => {
     state: shallowReactive({
       camera: undefined,
       cameras: [],
+      canvas: undefined,
       scene: undefined,
       renderer: undefined,
+      pointerEventHandler: undefined,
     }),
   })
 

src/core/nodeOps.ts

@@ -1,10 +1,12 @@
 import { RendererOptions } from 'vue'
-import { BufferAttribute, BufferGeometry, Material, Scene } from 'three'
-import { useCamera, useLogger } from '../composables'
+import { BufferAttribute, Scene } from 'three'
 import { isFunction } from '@alvarosabu/utils'
+import {  useLogger } from '../composables'
 import { catalogue } from './catalogue'
-import { EventHandlers, TresObject } from '../types'
+import { TresObject } from '../types'
 import { isHTMLTag, kebabToCamel } from '../utils'
+import { OBJECT_3D_USER_DATA_KEYS } from '../keys'
+import type { Material, BufferGeometry, Object3D } from 'three'
 
 const onRE = /^on[^a-z]/
 export const isOn = (key: string) => onRE.test(key)
@@ -15,14 +17,9 @@ function noop(fn: string): any {
 
 let fallback: TresObject | null = null
 let scene: Scene | null = null
-const OBJECT_3D_USER_DATA_KEYS = {
-  GEOMETRY_VIA_PROP: 'tres__geometryViaProp',
-  MATERIAL_VIA_PROP: 'tres__materialViaProp',
-}
 
 const { logError } = useLogger()
 
-let firstCamera = true
 export const nodeOps: RendererOptions<TresObject, TresObject> = {
   createElement(tag, _isSVG, _anchor, props) {
     if (!props) props = {}
@@ -48,16 +45,13 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       instance = new target(...props.args)
     }
 
-    if (instance.isCamera && firstCamera) {
+    if (instance.isCamera) {
       if (!props?.position) {
         instance.position.set(3, 3, 3)
       }
       if (!props?.lookAt) {
         instance.lookAt(0, 0, 0)
       }
-      const { setFirstCamera } = useCamera()
-      setFirstCamera(instance)
-      firstCamera = false
     }
 
     if (props?.attach === undefined) {
@@ -70,12 +64,10 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     const { GEOMETRY_VIA_PROP, MATERIAL_VIA_PROP } = OBJECT_3D_USER_DATA_KEYS
 
     if (instance.isObject3D) {
-      if (props?.material?.isMaterial) (instance as TresObject).userData[MATERIAL_VIA_PROP] = true
-      if (props?.geometry?.isBufferGeometry) (instance as TresObject).userData[GEOMETRY_VIA_PROP] = true
+      if (props?.material?.isMaterial) (instance as Object3D).userData[MATERIAL_VIA_PROP] = true
+      if (props?.geometry?.isBufferGeometry) (instance as Object3D).userData[GEOMETRY_VIA_PROP] = true
     }
 
-    instance.events = {}
-
     return instance
   },
   insert(child, parent) {
@@ -96,6 +88,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     if (child?.isObject3D && parent?.isObject3D) {
       parent.add(child)
       child.dispatchEvent({ type: 'added' })
+      scene?.userData?.[OBJECT_3D_USER_DATA_KEYS.REGISTER_AT_POINTER_EVENT_HANDLER]?.(child)
     } else if (child?.isFog) {
       parent.fog = child
     } else if (typeof child?.attach === 'string') {
@@ -110,17 +103,19 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     // remove is only called on the node being removed and not on child nodes.
 
     if (node.isObject3D) {
-      const object3D = node as unknown as TresObject
+      const object3D = node as unknown as Object3D
 
-      const disposeMaterialsAndGeometries = (object3D: TresObject) => {
+      const disposeMaterialsAndGeometries = (object3D: Object3D) => {
         const { GEOMETRY_VIA_PROP, MATERIAL_VIA_PROP } = OBJECT_3D_USER_DATA_KEYS
 
-        if (!object3D.userData[MATERIAL_VIA_PROP]) (object3D as TresObject & { material: Material }).material?.dispose()
+        if (!object3D.userData[MATERIAL_VIA_PROP]) (object3D as Object3D & { material: Material }).material?.dispose()
         if (!object3D.userData[GEOMETRY_VIA_PROP])
-          (object3D as TresObject & { geometry: BufferGeometry }).geometry?.dispose()
+          (object3D as Object3D & { geometry: BufferGeometry }).geometry?.dispose()
       }
 
-      object3D.traverse((child: TresObject) => disposeMaterialsAndGeometries(child))
+      object3D.traverse((child: Object3D) => {
+        disposeMaterialsAndGeometries(child)
+      })
 
       disposeMaterialsAndGeometries(object3D)
     }
@@ -153,10 +148,6 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         finalKey = key.toLowerCase()
         if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
       }
-      if (isOn(key)) {
-        const eventHandlerKey: keyof EventHandlers = key as keyof EventHandlers // This is fine
-        node.events[eventHandlerKey] = nextValue
-      }
       let value = nextValue
       if (value === '') value = true
       // Set prop, prefer atomic methods if applicable

src/keys.ts

@@ -1 +1,7 @@
 export const UseTresStateSymbol = Symbol('UseTresState')
+
+export const OBJECT_3D_USER_DATA_KEYS = {
+  GEOMETRY_VIA_PROP: 'tres__geometryViaProp',
+  MATERIAL_VIA_PROP: 'tres__materialViaProp',
+  REGISTER_AT_POINTER_EVENT_HANDLER: 'tres__registerAtPointerEventHandler',
+}

src/types/index.ts

@@ -30,7 +30,6 @@ export interface InstanceProps<T = any, P = any> {
 
 interface TresBaseObject {
   attach?: string
-  events: EventHandlers
   removeFromParent?: () => void
   dispose?: () => void
   [prop: string]: any // for arbitrary properties

src/utils/index.ts

@@ -38,3 +38,18 @@ export function makeMap(str: string, expectsLowerCase?: boolean): (key: string)
   }
   return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
 }
+
+export const uniqueBy = <T, K>(array: T[], iteratee: (value: T) => K): T[] => {
+  const seen = new Set<K>()
+  const result: T[] = []
+
+  for (const item of array) {
+    const identifier = iteratee(item)
+    if (!seen.has(identifier)) {
+      seen.add(identifier)
+      result.push(item)
+    }
+  }
+
+  return result
+}