From 46545d54cddd46f9792b2461c9094dd2e2029eb3 Mon Sep 17 00:00:00 2001
From: Peter <petermoldovia@yahoo.ca>
Date: Fri, 13 Sep 2024 01:16:33 +0200
Subject: [PATCH] refactor: events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* (fix) BREAKING - remove `event.intersects` – use `event.intersections`
* (fix) BREAKING - remove `event.stopPropagating` – use `event.stopPropagation`
* (fix) BREAKING – from TresCanvas, don't emit pointer/click events bubbled from Tres objects
* (fix) BREAKING – `event.delta` is now reset to `0` following a `click`.
* (fix) BREAKING – `pointerleave` handlers were sent previous intersections at `event.intersections`, now current intersections.
* (fix) BREAKING – `@dblclick` now fires whenever the canvas `dblclick` is emitted. Any TresObject with an `@dblclick` handler will receive the event if it is under the pointer. (Previously objects not under the initial click did not receive the `@dblclick`.)
* (fix) `event.pointer` is now defined – previously typed but was `undefined` in implementation.
* (fix) `event.unprojectedPoint` is now properly calculated. Was previously left as `TODO`.
* (fix) `event.eventObject` holds the object that registered the event handler. Was previously typed but `undefined` in implementation.
* (fix) use Vue-style ("flatcase") event names, e.g. `@pointerdown`. Keep support for old-style ("kebab-case") event names, e.g. `@pointer-down`, and warn. Mixing both on the same object is not supported and may lead to handlers being overwritten.
* (fix) `@pointer{leave,out}` was fired multiple times on a single "leave" – Issue #801
* (feat) BREAKING – `pointermissed` fires when the object that registered the handler is missed – previously only fired when ALL objects were missed
* (feat) add filtering/sorting for intersections, prior to handling events. `:events={filter: (intersections) => ...}`
* (feat) support Vue event modifiers – `stop, prevent, self, once`. (Tres cannot support `passive` and does not currently support `capture`.)
* (feat) via `:events-target` prop, allow users to specify an HTML `addEventListener` target – allows Tres to respond to events, even if there's an overlay on the canvas.
* (feat) via `:events-enabled` prop, allow `eventManager` to be enabled/disabled while Tres is running.
* (feat) via `:events` prop, allow `eventManager` functions to be set/overwritten (non-reactive).
* (feat) via `:events` prop, allow events system to be disabled completely: `<TresCanvas :events="null" />` (non-reactive)
* (feat) `pointer{leave,out}` is triggered (if necessary) just prior to object removal.
* (feat) `:blocking="true"` makes a subtree "solid"; objects behind objects in the subtree will not be "hit".
---
 playground/vue/src/pages/events/Blocking.vue  |  111 ++
 playground/vue/src/pages/events/Connect.vue   |  163 +++
 .../src/pages/events/DeprecatedEventNames.vue |   87 ++
 .../vue/src/pages/events/DynamicObjects.vue   |   12 +-
 playground/vue/src/pages/events/Filter.vue    |  141 +++
 playground/vue/src/pages/events/NoEvents.vue  |   78 ++
 .../src/pages/events/PointerEnterLeave.vue    |   77 ++
 .../src/pages/events/RemoveInteractivity.vue  |  102 ++
 .../vue/src/pages/events/StopPropagation.vue  |  153 +++
 .../vue/src/pages/events/TargetEnabled.vue    |  137 +++
 playground/vue/src/pages/events/index.vue     |   27 +-
 .../vue/src/pages/events/propagation/Box.vue  |   44 -
 .../src/pages/events/propagation/index.vue    |  188 ---
 .../711/index.vue}                            |    7 +
 playground/vue/src/router/routes/events.ts    |   46 +-
 playground/vue/src/router/routes/issues.ts    |    5 +
 pnpm-lock.yaml                                |  172 ++-
 src/components/TresCanvas.vue                 |   27 +-
 src/composables/index.ts                      |    2 -
 src/composables/useRaycaster/index.ts         |  212 ----
 .../useTresContextProvider/index.ts           |   20 +-
 src/composables/useTresEventManager/index.ts  |  231 ----
 src/core/nodeOps.ts                           |   52 +-
 src/types/index.ts                            |   54 +-
 src/utils/createEventManager/README.md        |   39 +
 src/utils/createEventManager/const.ts         |   83 ++
 .../createEventManager.test.ts                |  365 ++++++
 .../createEventManager/createEventManager.ts  |  146 +++
 .../deprecatedEvents.test.ts                  |   51 +
 .../createEventManager/deprecatedEvents.ts    |   89 ++
 .../createEventManager/eventModifiers.test.ts |  317 +++++
 .../createEventManager/eventModifiers.ts      |  255 ++++
 src/utils/createEventManager/eventsNoop.ts    |   40 +
 .../createEventManager/eventsRaycast.test.ts  | 1066 +++++++++++++++++
 src/utils/createEventManager/eventsRaycast.ts |  430 +++++++
 src/utils/createEventManager/index.ts         |    6 +
 .../useEventsOptions.test.ts                  |  367 ++++++
 .../createEventManager/useEventsOptions.ts    |   78 ++
 src/utils/index.ts                            |    2 +-
 39 files changed, 4594 insertions(+), 888 deletions(-)
 create mode 100644 playground/vue/src/pages/events/Blocking.vue
 create mode 100644 playground/vue/src/pages/events/Connect.vue
 create mode 100644 playground/vue/src/pages/events/DeprecatedEventNames.vue
 create mode 100644 playground/vue/src/pages/events/Filter.vue
 create mode 100644 playground/vue/src/pages/events/NoEvents.vue
 create mode 100644 playground/vue/src/pages/events/PointerEnterLeave.vue
 create mode 100644 playground/vue/src/pages/events/RemoveInteractivity.vue
 create mode 100644 playground/vue/src/pages/events/StopPropagation.vue
 create mode 100644 playground/vue/src/pages/events/TargetEnabled.vue
 delete mode 100644 playground/vue/src/pages/events/propagation/Box.vue
 delete mode 100644 playground/vue/src/pages/events/propagation/index.vue
 rename playground/vue/src/pages/{events/FpsDropsReproduction.vue => issues/711/index.vue} (77%)
 delete mode 100644 src/composables/useRaycaster/index.ts
 delete mode 100644 src/composables/useTresEventManager/index.ts
 create mode 100644 src/utils/createEventManager/README.md
 create mode 100644 src/utils/createEventManager/const.ts
 create mode 100644 src/utils/createEventManager/createEventManager.test.ts
 create mode 100644 src/utils/createEventManager/createEventManager.ts
 create mode 100644 src/utils/createEventManager/deprecatedEvents.test.ts
 create mode 100644 src/utils/createEventManager/deprecatedEvents.ts
 create mode 100644 src/utils/createEventManager/eventModifiers.test.ts
 create mode 100644 src/utils/createEventManager/eventModifiers.ts
 create mode 100644 src/utils/createEventManager/eventsNoop.ts
 create mode 100644 src/utils/createEventManager/eventsRaycast.test.ts
 create mode 100644 src/utils/createEventManager/eventsRaycast.ts
 create mode 100644 src/utils/createEventManager/index.ts
 create mode 100644 src/utils/createEventManager/useEventsOptions.test.ts
 create mode 100644 src/utils/createEventManager/useEventsOptions.ts

diff --git a/playground/vue/src/pages/events/Blocking.vue b/playground/vue/src/pages/events/Blocking.vue
new file mode 100644
index 000000000..f72923bdb
--- /dev/null
+++ b/playground/vue/src/pages/events/Blocking.vue
@@ -0,0 +1,111 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { Vector3 } from 'three'
+import type { ThreeEvent } from '@tresjs/core'
+
+function onClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('red')
+}
+
+function onPointerOver(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FFCC00')
+}
+
+function onPointerOut(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set(ev.eventObject.color)
+}
+
+const blockingIdRef = ref<string>('scene')
+function onChangeBlockingId(id: string) {
+  blockingIdRef.value = id
+}
+
+const COUNT = 12
+const positions0: Vector3[] = []
+const positions1: Vector3[] = []
+for (let i = 0; i < COUNT; i++) {
+  const ang = i / COUNT * 2 * Math.PI
+  positions0.push(new Vector3(Math.cos(ang) * 20, 0, Math.sin(ang) * 20))
+}
+for (let i = 0; i < COUNT; i++) {
+  const ang = i / COUNT * 2 * Math.PI
+  positions1.push(new Vector3(Math.cos(ang) * 30, 0, Math.sin(ang) * 30))
+}
+console.log(positions0)
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1><code>:blocking</code></h1>
+    <p>By default, from the perspective of the pointer/mouse in Tres, 3D objects are <strong>not</strong> "solid".</p>
+    <p>Clicks and other pointer events "hit" all objects under the pointer, event if those objects are behind other objects.</p>
+    <p>But you can make a subtree "solid" by marking it with <code>:blocking="true"</code></p>
+    <h2>Setup</h2>
+    <p><strong>Select "blocking" objects in the scene.</strong> Then interact with the scene to see the effect.</p>
+    <div v-for="id of ['scene', 'cubes', 'spheres', 'none (default Tres behavior)']" :key="id">
+      <input :id="id" :checked="id === blockingIdRef" type="radio" name="target" @change="() => onChangeBlockingId(id)" />
+      <label :for="id">{{ id }}</label>
+    </div>
+  </OverlayInfo>
+  <TresCanvas window-size clear-color="gray" :blocking="blockingIdRef === 'scene'">
+    <OrbitControls />
+    <TresPerspectiveCamera
+      :position="[0, 10, 80]"
+      :look-at="[0, 0, 0]"
+    />
+    <TresGroup :blocking="blockingIdRef === 'scene'">
+      <TresMesh
+        v-for="pos, i of positions0"
+        :key="i"
+        :position="pos"
+        :blocking="blockingIdRef === 'cubes'"
+        :scale="5"
+        color="green"
+        @pointer-over="onPointerOver"
+        @pointer-out="onPointerOut"
+        @click="onClick"
+      >
+        <TresBoxGeometry :args="[]" />
+        <TresMeshBasicMaterial color="green" />
+      </TresMesh>
+
+      <TresMesh
+        v-for="pos, i of positions1"
+        :key="i"
+        :position="pos"
+        :blocking="blockingIdRef === 'spheres'"
+        color="purple"
+        @pointer-over="onPointerOver"
+        @pointer-out="onPointerOut"
+        @click="onClick"
+      >
+        <TresSphereGeometry :args="[]" />
+        <TresMeshBasicMaterial color="purple" />
+      </TresMesh>
+      <TresMesh
+        :scale="10"
+        color="blue"
+        @pointer-over="onPointerOver"
+        @pointer-out="onPointerOut"
+        @click="onClick"
+      >
+        <TresTorusGeometry />
+        <TresMeshBasicMaterial color="blue" />
+      </TresMesh>
+
+      <TresMesh
+        :scale="40"
+        color="gray"
+        @pointer-over="onPointerOver"
+        @pointer-out="onPointerOut"
+        @click="onClick"
+      >
+        <TresCylinderGeometry :scale="[-1, 1, 1]" />
+        <TresMeshBasicMaterial color="gray" />
+      </TresMesh>
+    </TresGroup>
+    <TresDirectionalLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/Connect.vue b/playground/vue/src/pages/events/Connect.vue
new file mode 100644
index 000000000..b07c27b4c
--- /dev/null
+++ b/playground/vue/src/pages/events/Connect.vue
@@ -0,0 +1,163 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import type { ThreeEvent, TresContext } from '@tresjs/core'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+function onClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material?.color.set('#008080')
+}
+
+function onDoubleClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FFAA00')
+}
+
+function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#CCFF03')
+}
+
+function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#efefef')
+}
+
+function onPointerMove(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#F00')
+}
+
+function onContextMenu(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FF4500')
+}
+
+function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#000000')
+}
+
+function onWheel(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FFFF00')
+}
+
+const defaultConnecter = (target: EventTarget, eventManagerHandler: EventListener) => {
+  const POINTER_EVENT_NAMES = ['wheel', 'click', 'pointermove', 'pointerup', 'pointerdown', 'contextmenu', 'dblclick']
+  for (const domEventName of POINTER_EVENT_NAMES) {
+    target.addEventListener(domEventName, eventManagerHandler)
+  }
+
+  return {
+    disconnect: () => {
+      for (const domEventName of POINTER_EVENT_NAMES) {
+        target.removeEventListener(domEventName, eventManagerHandler)
+      }
+    },
+  }
+}
+
+const CONNECTERS: Record<string, (eventTarget: HTMLElement, handler: EventListener) => ({ disconnect: () => void })> = {
+  'default': defaultConnecter,
+  'click': (eventTarget, handler) => {
+    eventTarget.addEventListener('click', handler)
+    return { disconnect: () => { eventTarget.removeEventListener('click', handler) } }
+  },
+  'dblclick, wheel': (eventTarget, handler) => {
+    eventTarget.addEventListener('dblclick', handler)
+    eventTarget.addEventListener('wheel', handler)
+    return { disconnect: () => {
+      eventTarget.removeEventListener('dblclick', handler)
+      eventTarget.removeEventListener('wheel', handler)
+    } }
+  },
+}
+
+const CONNECTER_IDS = Object.keys(CONNECTERS)
+const connecterIdRef = ref<keyof typeof CONNECTERS>('default')
+
+const eventsFns = {
+  connect: CONNECTERS[connecterIdRef.value],
+}
+
+type DisconnectFn = () => void
+type ConnectFn = (target: HTMLElement) => void
+
+let eventManager: {
+  connect: ConnectFn
+  disconnect: DisconnectFn
+  target: HTMLElement
+} | null = null
+
+function onChangeConnecterId(id: keyof typeof CONNECTERS) {
+  if (!eventManager) { return }
+  const target = eventManager.target
+  eventManager.disconnect()
+  connecterIdRef.value = id
+  eventsFns.connect = CONNECTERS[connecterIdRef.value]
+  eventManager.connect(target)
+}
+
+function ready(ctx: TresContext) {
+  eventManager = ctx.eventManager
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1><code>connect</code></h1>
+    <p>By default, <code>eventManager</code> will listen for DOM events emitted from the canvas. But if you don't need some of those events – particularly <code>pointermove</code>, you can get extra performance by not listening for them.</p>
+    <p>:events has a settable <code>connect</code> function.</p>
+    <code>&lt;TresCanvas :events="{connect: ...}" /&gt;</code>
+    <hr />
+    <h2>Example <code>connect</code></h2>
+    <p><strong>Select a connector function below (see function implementation in the Vue playground file) and then interact with the on-screen objects to see its effect.</strong></p>
+    <div v-for="id of CONNECTER_IDS" :key="id">
+      <input :id="id" :checked="id === connecterIdRef" type="radio" name="target" @change="() => onChangeConnecterId(id)" />
+      <label :for="id">{{ id }}</label>
+    </div>
+    <hr />
+    <h2>NOTE</h2>
+    <p>The <code>:events</code> prop is not reactive. But if you have a reference to it, you can redefine functions, which will then be called at some later point during the lifecycle.</p>
+    <p><code>connect</code> is not designed to be changed on the fly. To do so, as we have done here, you will have to get a handle on <code>context.eventManager</code> and call <code>disconnect</code>, then <code>connect</code>.</p>
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    v-bind="gl"
+    :events="eventsFns"
+    @ready="ready"
+  >
+    <TresPerspectiveCamera
+      :position="[15, 15, 15]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+
+    <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]"
+          :key="`${[x, y, z]}`"
+          :position="[x, y, z]"
+          @click="onClick"
+          @dblclick="onDoubleClick"
+          @pointerenter="onPointerEnter"
+          @pointerleave="onPointerLeave"
+          @pointermove="onPointerMove"
+          @contextmenu="onContextMenu"
+          @pointermissed="onPointerMissed"
+          @wheel="onWheel"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </template>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/DeprecatedEventNames.vue b/playground/vue/src/pages/events/DeprecatedEventNames.vue
new file mode 100644
index 000000000..b5b97e230
--- /dev/null
+++ b/playground/vue/src/pages/events/DeprecatedEventNames.vue
@@ -0,0 +1,87 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { ThreeEvent } from '@tresjs/core'
+import '@tresjs/leches/styles'
+
+function onClick(ev: ThreeEvent<MouseEvent>) {
+  console.log('click', ev)
+  ev.eventObject.material.color.set('#008080')
+}
+
+function onDoubleClick(ev: ThreeEvent<MouseEvent>) {
+  console.log('double-click', ev)
+  ev.eventObject.material.color.set('#FFD700')
+}
+
+function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#CCFF03')
+}
+
+function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
+  console.log('pointer-leave', ev)
+}
+
+function onPointerMove(ev: ThreeEvent<MouseEvent>) {
+  console.log('pointer-move', ev)
+}
+
+function onContextMenu(ev: ThreeEvent<MouseEvent>) {
+  console.log('context-menu', ev)
+  ev.eventObject.material.color.set('#FF4500')
+}
+
+function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
+  console.log('pointer-missed', ev)
+  ev.eventObject.material.color.set('#000')
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>Deprecated event names</h1>
+    <h2>Setup</h2>
+    <p>This scene contains TresObjects with deprecated event names.</p>
+    <p>Regardless, interacting with the objects should trigger their handlers. (They will change colors and log to the console.)</p>
+    <h2>Background</h2>
+    <p>Vue event names are written like:</p>
+    <p><strong><code>@</code> + DOM event name</strong>, e.g. <code>@pointerdown</code></p>
+    <p>DOM events names are typically, but not always, written in <a href="https://en.wikipedia.org/wiki/Naming_convention_(programming)#Examples_of_multiple-word_identifier_formats">flatcase</a>.</p>
+    <p>Through Tres v4.x, Tres' multiple-word event names were written in <a href="https://en.wikipedia.org/wiki/Naming_convention_(programming)#Examples_of_multiple-word_identifier_formats">kebab-case</a>, e.g. <code>@pointer-down</code>.</p>
+    <p>Now Tres has adopted the Vue naming convention for supported events.</p>
+    <p>Old-style hyphenated events will still respond, though they will generate a console warning in dev mode the first time they're encountered in a scene.</p>
+    <p>The developper should take care not to mix hyphenated and non-hyphenated event names.</p>
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    clear-color="gray"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <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]"
+          :key="`${[x, y, z]}`"
+          :position="[x, y, z]"
+          @click="onClick"
+          @double-click="onDoubleClick"
+          @pointer-enter="onPointerEnter"
+          @pointer-leave="onPointerLeave"
+          @pointer-move="onPointerMove"
+          @context-menu="onContextMenu"
+          @pointer-missed="onPointerMissed"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </template>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/DynamicObjects.vue b/playground/vue/src/pages/events/DynamicObjects.vue
index c0b94344c..808a6a51d 100644
--- a/playground/vue/src/pages/events/DynamicObjects.vue
+++ b/playground/vue/src/pages/events/DynamicObjects.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Box, OrbitControls, Sphere, StatsGl } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
+import { type ThreeEvent, TresCanvas } from '@tresjs/core'
 import { reactive } from 'vue'
 
 const hotspots = reactive([
@@ -26,11 +26,11 @@ const removeHotspot = () => {
   hotspots.pop()
 }
 
-const grow = (event) => {
+const grow = (event: ThreeEvent<any>) => {
   event.object.scale.set(1.5, 1.5, 1.5)
 }
 
-const shrink = (event) => {
+const shrink = (event: ThreeEvent<any>) => {
   event.object.scale.set(1, 1, 1)
 }
 </script>
@@ -43,7 +43,7 @@ const shrink = (event) => {
     <OrbitControls />
     <TresPerspectiveCamera />
     <TresAmbientLight :args="['white', 0.5]" />
-    <Box :position="[0, 0, 0]" :scale="[1, 1, 1]" @click="addHotspot" @context-menu="removeHotspot">
+    <Box :position="[0, 0, 0]" :scale="[1, 1, 1]" @click="addHotspot" @contextmenu="removeHotspot">
       <TresMeshNormalMaterial />
     </Box>
     <Sphere
@@ -52,8 +52,8 @@ const shrink = (event) => {
       :args="[0.5, 16, 16]"
       :position="hotspot.position"
       @click="console.log('click', index)"
-      @pointer-enter="grow"
-      @pointer-leave="shrink"
+      @pointerenter="grow"
+      @pointerleave="shrink"
     >
       <TresMeshNormalMaterial />
     </Sphere>
diff --git a/playground/vue/src/pages/events/Filter.vue b/playground/vue/src/pages/events/Filter.vue
new file mode 100644
index 000000000..ae4c8eed8
--- /dev/null
+++ b/playground/vue/src/pages/events/Filter.vue
@@ -0,0 +1,141 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
+import type { ThreeEvent, TresObject } from '@tresjs/core'
+import type { Intersection, Object3D } from 'three'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+function getIntersectionIndexForObject(intersections: Intersection[], object: TresObject) {
+  const objects = intersections.map(i => i.object)
+  return objects.indexOf(object as Object3D)
+}
+
+function clamp(a: number, b: number, v: number) { return Math.max(a, Math.min(b, v)) }
+function invLerp(a: number, b: number, v: number) { return clamp(0, 1, (v - a) / (b - a)) }
+function onPointerup(ev: ThreeEvent<PointerEvent>) {
+  const i = getIntersectionIndexForObject(ev.intersections, ev.eventObject) / ev.intersections.length
+  const r = 1 - invLerp(0, 0.75, i)
+  const g = 0
+  const b = invLerp(0.25, 1, i)
+  ev.eventObject.material.color.set(new Color(r, g, b))
+}
+
+function onPointermissed(ev: ThreeEvent<PointerEvent>) {
+  ev.eventObject.material.color.set(new Color('#444'))
+}
+
+const boxesContainerRef = shallowRef()
+
+function getAllBoxes(): TresObject[] {
+  return boxesContainerRef.value?.children ?? []
+}
+
+const FILTERS: Record<string, ((intrs: Intersection[]) => Intersection[]) | undefined> = {
+  undefined,
+  '() => []': (_intersections: Intersection[]) => [],
+  'intrs => intrs.reverse()': (intersections: Intersection[]) => intersections.reverse(),
+  'intrs => intrs.filter((_, i) => !!(i % 2))': (intersections: Intersection[]) => intersections.filter((intr, i) => !!(i % 2)),
+  'intrs => intrs.filter(intr => intr.object.scale.x < 0.75)': (intersections: Intersection[]) => intersections.filter(intr => intr.object.scale.x < 0.75),
+  'intrs => intrs.sort((a, b) => a.object.position.z - b.object.position.z)': (intersections: Intersection[]) => intersections.sort((intrA, intrB) => intrA.object.position.z - intrB.object.position.z),
+  'intrs => intrs.sort((a, b) => b.object.scale.x - a.object.scale.x)': (intersections: Intersection[]) => intersections.sort((intrA, intrB) => intrB.object.scale.x - intrA.object.scale.x),
+  'intrs => intrs.sort((a, b) => distSqToCam(b) - distSqToCam(a))': (intersections: Intersection[]) => intersections.sort((intrA, intrB) => distSqToCam(intrB) - distSqToCam(intrA)),
+}
+
+const FILTER_IDS = Object.keys(FILTERS)
+const filterFnIdRef = ref<keyof typeof FILTERS>('undefined')
+
+const eventsFns = {
+  filter: FILTERS[filterFnIdRef.value],
+  // NOTE: We're going to "lie" and pretend that all boxes were hit.
+  // Normally this function will raycast and return intersections with "hit" objects.
+  // But we'll just return all objects as `{ object }`, a Partial<Intersection>.
+  // We're going to "lie" and pretend that's an Intersection as well.
+  //
+  // We'll use something like THREE's default sort after raycasting, which
+  // returns objects closest to the camera first.
+  getIntersections: () => getAllBoxes().map(object => ({ object } as Intersection)).sort(closestToCamera),
+}
+
+function closestToCamera(intrA: Intersection, intrB: Intersection) { return distSqToCam(intrA) - distSqToCam(intrB) }
+function onChangeFilterId(id: keyof typeof FILTERS) {
+  filterFnIdRef.value = id
+  eventsFns.filter = FILTERS[filterFnIdRef.value]
+}
+
+const cameraRef = ref<Object3D | undefined>(undefined)
+function distSqToCam(intersection: Intersection<Object3D>) {
+  return cameraRef.value ? cameraRef.value.position.distanceToSquared(intersection.object.position) : 1
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1><code>filter</code></h1>
+    <p>context.eventManager has a settable <code>filter</code> function. It allows you to sort and filter intersections before they are handled, possibly sorting intersections to process important "hits" earlier.</p>
+    <p>The filter can be set by passing a filter function on <code>TresCanvas</code> like:</p>
+    <code>&lt;TresCanvas :events="{filter: {{ filterFnIdRef }}}" /&gt;</code>
+    <hr />
+    <h2>Example filters</h2>
+    <p><strong>Select a filter and then click on the canvas to see its effect.</strong> (In this demo, all on-screen objects will be "hit" by any click on the canvas.)</p>
+    <div v-for="id of FILTER_IDS" :key="id">
+      <input :id="id" :checked="id === filterFnIdRef" type="radio" name="target" @change="() => onChangeFilterId(id)" />
+      <label :for="id">{{ id }}</label>
+    </div>
+    <ul>
+      <li>Intersection objects towards the <span class="red">front</span> of the filtered array are <span class="red">redder</span>.</li>
+      <li>Intersection objects towards the <span class="blue">end</span> of the filtered array are <span class="blue">blue</span>.</li>
+      <li>Objects filtered out appear in gray</li>
+    </ul>
+    <hr />
+    <h2>Preview (after click)</h2>
+    <img src="data:image/png;base64,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" />
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    v-bind="gl"
+    :events="eventsFns"
+  >
+    <TresPerspectiveCamera
+      ref="cameraRef"
+      :position="[15, 15, 15]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresGroup ref="boxesContainerRef">
+      <template v-for="x in [10, 8, 6, 4, 2, 0, -2, -4, -6, -8, -10]">
+        <TresMesh
+          v-for="z in [10, 8, 6, 4, 2, 0, -2, -4, -6, -8, -10]"
+          :key="`${z},${x}`"
+          :scale="(Math.sin(x * 0.5) * Math.sin(z * 0.5) * 0.8 + 1.1)"
+          :position="[x, 0, z]"
+          @pointerup="onPointerup"
+          @pointermissed="onPointermissed"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </TresGroup>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.red {
+  color: #f00;
+}
+.blue {
+  color: #00f;
+}
+</style>
diff --git a/playground/vue/src/pages/events/NoEvents.vue b/playground/vue/src/pages/events/NoEvents.vue
new file mode 100644
index 000000000..1b4d5a0ae
--- /dev/null
+++ b/playground/vue/src/pages/events/NoEvents.vue
@@ -0,0 +1,78 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
+import type { ThreeEvent } from '@tresjs/core'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const msgs = ref<string[]>([])
+let n = 0
+
+function logError(ev: ThreeEvent<any>) {
+  n++
+  console.error(`❌ An event handler was called unexpectedly.`)
+  msgs.value.push(`❌ An event handler was called unexpectedly.`)
+  while (msgs.value.length > 10) { msgs.value.shift() }
+  ev.eventObject.material.color = new Color(Math.random(), Math.random(), Math.random())
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>No Events</h1>
+    <p>If you don't need events, you can avoid most of the event system's overhead as follows:</p>
+    <p><code>&lt;TresCanvas :events="null" /&gt;</code></p>
+
+    <h2>Setup</h2>
+    <p>This scene has objects with event handlers. But they don't do anything.</p>
+
+    <p v-if="msgs.length === 0">✅ No event handlers called yet.</p>
+    <ul>
+      <li v-for="msg, i of msgs" :key="i" :style="{ color: (n - i) % 4 === 0 ? 'gray' : 'black' }">{{ msg }}</li>
+    </ul>
+
+    <h2>NOTE</h2>
+    <p>Controls like `OrbitControls` still work even if `:events="[falsy]"`.</p>
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    v-bind="gl"
+    :events="null"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <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]"
+          :key="`${[x, y, z]}`"
+          :position="[x, y, z]"
+          @click="logError"
+          @dblclick="logError"
+          @pointerenter="logError"
+          @pointerleave="logError"
+          @pointermove="logError"
+          @contextmenu="logError"
+          @pointermissed="logError"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </template>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/PointerEnterLeave.vue b/playground/vue/src/pages/events/PointerEnterLeave.vue
new file mode 100644
index 000000000..a9ef4e3fc
--- /dev/null
+++ b/playground/vue/src/pages/events/PointerEnterLeave.vue
@@ -0,0 +1,77 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { Box, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, BoxGeometry, MeshToonMaterial, NoToneMapping, SRGBColorSpace } from 'three'
+import type { ThreeEvent } from '@tresjs/core'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+  eventsEnabled: true,
+}
+
+function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('hotpink')
+}
+
+function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('darkGray')
+}
+
+function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('white')
+}
+
+const Z = 1.2
+const geo = new BoxGeometry(1, 1, 1)
+const numChildren = ref(0)
+const groupRef = ref()
+
+watch(groupRef, () => {
+  numChildren.value = 0
+  groupRef.value?.traverse(() => numChildren.value++)
+})
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1><code>@pointerenter @pointerleave</code></h1>
+    <h2>Setup</h2>
+    <p>This scene is composed of {{ numChildren }} objects, each with <code>@pointerenter</code> and <code>@pointerleave</code> events.</p>
+    <h2>Preview</h2>
+    <p>After interacting with the on-screen objects, they should look something like this.</p>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xu19aZRdV3XmrnmeqzRYeMQ24GBwloEVhxUIIUyhIYYQM0MgeIVA8iM/s7rTK51kkW7S6U6Hhk46iQMNgQRCM6SNJ8zgUZaRZVu2ZdmaLFlSzfM89v7Oe9/TqVPn3nPue0+lkvSe/FxV793x3P2dPX17n6rLL798TSqvyghURsA7AlUVgFQkozICySNQAUhFOiojkDICFYBUxKMyAhWAVGSgMgLFjUBFgxQ3bpW9LpIRqADkInnQldssbgQqAClu3KRa96sy/8fP3Kuq8Bsj51WyKmv6b1X/VV7n4whUAOI8terqaqmqUlHXN174m6/V1byY62eLq8uytLoiC/qeW1uVBQMBAAM/z+zTLrXSVlUrdVKj/3Kv3JYV0JwPgLkoAEKhN7O8JfgU+LW1tcLns7Ozsri4KAsLCzIzMyP4jq/a2logRpb1+5c375S2rjZpamqW5roGaa6qkwZ9NyoUmhQQq7rf6Mq0jCxPy+DKjPSvzsjw2pLRMl0KmpaqGgMawKSiXbYuVM5bgCQJvZmhdaanYNfU1Mjc3Jx5Ly0tGaFfWVlZ90S6urpkamrKaItXvvKV0tysQq/vxsbGws+GhgZp1LciSaYnp2TbeJU0jC9L9fiSVM+u5syrOtU+9VWyVqO/G6lXPaFAWVRgzK4syuTKnIwuz8jg0pScWpmUI6tTsrO6WZoUKIAhdBbNNfyde1cAdC7hs6UAQnMmaOLoiGGGx0xPocfv9qu1tVUAjomJCXnFK14hAAEFvqmpyfyOn/X19QLhx3EAoksuucTs55paPDa1zYqaVWtLK7I2tyQyPS+r43MiI7Miw/OyNrooNe11IgDKmnoqCqqaqmqpUQDid7xWFDhLaqbdMf6EPLw4KJ2qVSZEj2dgYXSddCtwmvPmmULPfFcBzebC5awDJCT0nPGXl5fNzA9BtU0cezgg1PPz88Ycuu666wQg4GwPYYeg20KP7UZGRmT79u3S1tZmDmVrHlfojeCqdgEI7De3I3AJkioIfI2+a3OAqlYw1KjmqFlYkel7n5XqsSXpaWtXbQKQ5IS+oCbyfs4PhvbJkYUR2VHTKo3VdQqIBmmorlFtM6+m2ZS+p1XbzMq0wDyrUdDU6jY584xBgRUFVsVMOzvAKRogrolDIEDI8YYwQZAg+Hgn2fW4LQg2hBjC3tLSYt74nTM9gGFMHP0JAA0MDMg111xj/sZ5MOPTt/AJPa+JZpf90xZ6G0C8PyP4+ob/QS3T2dlprg37VqtmwLxeOI4eZFW1S//398jqiWnp6G6XxaoVmVfkrFWtSctSjSzPLsmagghSvbS2kttXEWTuAf+pmjDuvh4H5tmMmmcTap6NqXk2pIABcE7o3/MKGrx2VTUrYBAxq7zKPQJRADHOqb44q2KWhdBztoddj79tYZ+enjZCjZmbAo+fNG34E8c8dOiQXHvttbJt2zZzjDQThwNAPyJppsd2dMJtc8kIdV7ocR5cN8w1XCcBR7Djvm3g4Z6Gh4cFAMF32A9jgPvCGJw+fdpooPm5eZmfmpZlFfNllfYVFXoYT3hBkOsVG43LVdKyUC0ti9XSqD/rFhQY+jnBsVZ9JnBwJnwM00wjZqtqDq4tyvTKgmqaWXl2YVCmVufzcTKaYTjnquobGGf0Z3KfVV7xIxAECATw+PHj5ogQoPb2dmPa4A3BwEyKN02doaEheeGFF+TNb36z+RyCBEHk2/YvcEz8TbOGWodCb9+G+xmPY//EOfCCtsJ5cX0EA4Fhaxt8Nzk5KWNjY9LT02OuF4DBuerq6gwY8B0nA5h3iHLZEwRAiHHBCz4M77MaWg33l7+JnJDnhBciuqpIoKjCLGvQ+aV5KQeapjxoalRBQLPUqUmFa60xvkyt1KrWqjX+DD6rlu8O/Uz+bWqvNNX0qFbJBSA6FBqtuu2AaiCdyhQmNdKrnzVifwOaMz5NBTTJgEkFCB4+BP+mm24ywgahg1ML4aHg2wLIWRtCBGHDd7Zgu79jezvEysu0hZ7H5Ll5PiMweWeaGgJ/0wSD9urr6ytEtLANBBvf477wO37S0afW4DXiPgEOAB73gze2xznse8f2tqYq3CP8GM+4m3szE0POYTemFXIteNcCAAos9Ws6ptek9+k5aW1plo66ZgOmMxGunA0GwcZnD4wdlMGFSemphR+jPkq1Bh70DWDNqbYZ1zDz6BJMs2kZ0PeJNQ0k6L96BU2XAqZBAWODphJ6PvPgEgFCgYKgffCDHzRASTNr7HwB93WF39YenMltIbdNH2wLQYRgQlChuRCJsv0HhnPpY9DJh7mD/QFkfof7wO84nm02uRqNQ4Pz8Npw3wAS9oWZhZAww8Y4LjUfNSK1lf0T94Lj4BiMptnb643ltIviRH16aZlekb4nMdE0SkutRtlWNIih28DEguYAMGaWFwrjwc8K129NPjSxltXfWVhZUtNsXsZXZxU0OZ8GoHlRQYOsP+C7A4GCik9jhjJVg0BAIJyf+MQnpLu725gaFC7+pMDas75vloeAQMhg0kBAcDxbUN0ZnLMyBAr7YEbHfrgGXBd+h6AyvGtrJ/tYtsBTYO2J3Qa2+zmPad+PHXyAD3L06FFzDTA5XV/HBgD2g/YaHx831w6NXIiYIUOvkbBm9UO6+jW3sqzgXFiT6nkVWQXMumvMq6VcUMwlt5wJEZuv8zdkf4o9uBc0xbICbk6DADPqw0wsz8nE2qwcXxyTUf0b/lLuODlA8q8zpuKFn6NJBQiE+vDhw/LZz35Wdu3aZR6wLdR4cHBuIby28+uaSNgOwgNhR9gVMzscXYAA58B3mJkZ6rU1gy3grpbCd7aWckHrWjhuFIvf29fL40Ez2NqNGs+OamG/hx56yPgqvb29G0xKHJ+mHH5SExFI6wIMeqx6DRN3TKkvoj5I07xqwGU1I9U3MY57LqVis1hynrfnlfsYoeozX+YCZHkRt/Iyxp9BrkVDyyZfoz/vG31Gvjb5pFxT3S5z6sHMq+aZUzBpilUPmKPStKh5BgpNo/6Of7kzXniJzVSAQPCff/55+eQnPylXX331BoBAkKEJ4G9wxqdA2Ha+KyS20ENYIIxwgBketgXXfv4uOO3vfMJPTWJmQSd65fowAADODwADtPBf7P1tcNKXwYSxf/9+oxVggtIfwXF4fGgZe18bxPb9UMAUE+ZVo9KGSFezOurN6rg3K2Aa5hUw+ne1yiiEf01zkXjB9MrdYw4EOK6Ke86Jh5OvQr+gScnZpQXpatDAippsZnvqGIDPmHjql2gu5u6RJ+Wfx38il9Verv5MrXRUNUpHTZO0VTdKa42ae8o/GzIUmiml0MzK4JqqPn2BdwYKTaMVOzvfeWdRGuSWW26RG264wQsQRrUoFKOjo4Vknk8wXKEwgpHnQqUBgNu5x+Ts75p12J7+BsOytqawfQ+eHwIPpxzfwd/Bi+DGJAAgHDhwoKAJ8B2PUyAy2qjNA9P5KPVPaIscWNT5N+FhaA4FnNpaDfpHsyKoZbFGWlXLNE/khLy5rt5oAWgAMw75JKQxi1Tt4BqnFmdlXN99je3SWFtfAAQBZkxH/beoJuzxuWE1uxYUDI0KGE1K4tgGcDTacqBEDmdudUGmludlTMPNwwXQ5HhneDGahoBAzlDLhbzPF+MsCJAXX3xRfuVXfkVe//rXG8GwhRhCAVu6o6PDzL54OKB2wEnGjJxk39sSYm+TJPw0RWCaQau5s79r++NvmGuDg4PmVNAG0Ap2tImhW1fT2ZQV269hzgQTAO4Pb2xLcNnh45j7JuDtsSiMrUlA5pKQ1aoBcveLSJeGsfXvNf0duZRdT81JnSZZ+po7ckCgf5L/iVCyMcv0Pbk4J9NLc9JWp8wvPe6yaoEVRPMQhVM/xGhYfcOJr0VY2SR6c0BlPM6Oy9GXyWms3F3kQKO8M42cTedBA7LmgGqa00rWHAFoFFTbVCOBQnM+ZGSCTjq5TG9961s3zHwQBDicmG0JEPgScKpt88TdkQJEwbYF3mf3I1AAYcR54Ay75hQdZ5o4+AkA4Np5jdQG+AltAG2Ba7UBb2sV3zRPM43HRyQLQEGwANqKPhrvywcCfObTevgcZibuH/fo+nHmelRgTURK/1ezsiaXPDEnteqjdLe2m+jXUrVG29Q2m6/VOVq3aVvU7P+s8tUWdCMAAbmXPGhsciRzIubaTH4kf7IzRphvOAqfcXs7AMBjQlMsri2rRlqSKc3+z6jGObYwLEdXJoz/4oKEdTZnkpvnVtekAgQPGjY0kmg333yzmb3dGR+zOr7ng4egwBRJAggePDSOmy1PE074BRBGBAQgPIym4XoAHNLSbf/Hdt6pOWz7Pw3AqdJgfcnj4fgYJ4aBGXDApgxC2JOAK/z4G9cOQGNcMD72i/fCCQAz/9rSqrSOLAh8lrX6aplXcMyrc7KEzD1mcxXzBppl6sO0Lqgppm/jxxjHHw5LzoyzQlSJjr9vTOxgAM0vAo9JzDq9H5hoDAI0qI+ze/x5+d/jD8vLanvUn8nlcnIJ1FxdzaxqmSm9i848WRPm2RnAbG4gIJhJx8BAAD784Q8b4bTNLDwwPFBEcPjQISgwQ3y+BkFEB9g1RWwn1xZ2gAN/U6jpzEN7YR8IpuuQxwp52nY2yGhu2cJtR7SYPMSEAYDs3r3bjAGE3QUj79seIwIE22KcbdPPdvoZzMB1r4AtbCZ7jRIa7ZKrcaSnYBxk/QMgwO9w/GGamYy9AoWAqaXjb0fKrAiYMbI8ETGCAFn9Bc3TIEfT1dAq9YZFcCacnNNH8DvWjPl2/9gB+erEHtle3amZfrCw9fp1++2af+nRQEBPTbNGyNTn05DzaZQGrGm5ggIGR3TJmmeb4RwECAAAW/7WW281QLBzIRQufE4bHGYGZvykF4QD2zOJB4HAPpg9mdSzbX+Cygc4AgXHiLX73Zk5J1/r46U0pXBcO9EIQLqawD03xgFCfN999xlQI0Bgb2ODDvedFuHzjeE6k9DZICHqmwOMFSoGYMxMr/+rU+Q0GcCohtF3o7L261TjVAF8+agYaPp4IyQMqouhvDAYkI+aDc9NGvr+tia9X8uZ5yXS5AJAfjz6tNw3fVheVt8n7dUN0q4RslYFRlON5ro0apYLOOjYg3dGsqbmaMY0oTmkjAAkNo8raJbyFBqABkVqdQ6FphyhgCBAGOr99Kc/LZdddpk3FwITi+YXBAp5gSSBxecIDTOzTYBgH4KhHLM/j+HO1gSVDQKbK+Zm9hmVg6DDxLP3Z77GJXNCoz388MNmMoG/Y2tG7MPzQdvaoe0krVvO8SiogrwtZPIr4OLnQaAhEAE3eMfJFakdV4A3txrBXTexWAkYmlTDc2oUwQHXgIFhOJMZoEK+sqo+ofoh+Axh5BGlxSCrX68VmEYj5w/OcDW1Qs76y0XhCmaYHm9egwDwZSaWNa+mNJoh1TKo2jyubAAlEyXyzpSLkHkoowHy0Y9+1BQeuclCPGA4zxQEDAI0iE/T4OqwPYQNeQMKRwhUaXflOuy2xsHAMr9BEw1CbvsFab4PviNAYCphXyb88BOTAo5/8uRJE5ggmZE0lCTt5DOxMj+5lB18kxPBxwmgQKrMawIIdT6RYvyanYfnpEGz+l1K8UGdSo6GknudEenc3/gOGgQzfmtdo/l7CYlR/Ruf2SYalAtCxr7I2MYj545vF5H5QANgzmsQYEbNNYBm1ALNC2qmrSo4q1XDXKbRs6wQCQKE2fT3vve9cuONN24QfAi3mwsBQOA8J5lF9vaMQKWBat3shZkpnzehD+A+dDcShigT3rgXZrxtDUNfitdC+x8gh2ZjOS72gXZgCS9AA4o+kqkACMxGOx9TTqH3HctnGroRMlwTJjWAF4Bm4Zh9/456MBGxnYcXpH5wSbrbO6SxRgGSF3SEhREkWFZzCtoDTjfCx6DgAziFpGUOSZFxsOwj5UbaqGk4KUFDGU2jvLMZTWQOLk/JvvlThpiZBSRBgEDYICS/8Au/IG94wxsKuQTeEoQJTiWEns4koliu42xvz9yJ/YAxUyeByn6YpNdTO9BUShIgCCyiXLgmBhSoVXB++hRIEGIbNmsACPA76e/kTdk+CGnvLJ7yabPsj379Hj4QGNnLa0d3krBzQtyO4WiYtRh72w/iNrmpOjdXV6lJtP3IgtSNrUhTo2bd9UOTNwFI8hMU/R2bwlLqvRa7/xkmQS6XAz8HgYI6NeFqNWfUqMzmU/Oj8kf9d8hLqzvUCFvfkyDtvFEAQVTmyiuvlHe84x0bIjIABQTEzoVwxvaFUu3tbVMDuQ48yLTwK7UVwEhmsX1ztsayHX0SHnFsRr5oKkGrAODPPvusPP3008b0w2eYeV3zixqGsxS/T8qixz7wJJPI9pMo+PRboAlwjfbLPQ4nAIwrxoAFbLxe+lAmbKx5lerGWukZWZGuIyhEyXOr8qHggmkTe1Nl3M6AMQ/eHKCRL0V8OxcablbqTKP6SbnAAQw4GoO57+H0H53tl88N3qP8sm4NJZcRIHgwmEUhOL/5m79pBtl+EPiduRA+EMzYiEr5hN04aqrq4ajzBUFgBj4EEDtzbwPCzozjdzcnYmswe9a0QcocDq4FgohXMRnyJNmwx82+dtssw++sZHS1AQQaphx+0pfyaQMXKDQJWcfDsWHwwHoQSmepkrY5jWotVknTrOZNlNKiKRbzgullgJOXP2buy4iF3HmsqCIZBcj+I6dCciU0w/j8jPE9EBioVZaBb6KBB1SvADkwfVL+cviHCpDe8gIEF4wHhUGGow4H23bAab/buRDYuzCZkgACAUDkizMytovJwPu0D0EJwcGbFBcKYJbIEK+XnVJgcgEsDEzEgCWkDXAMmmbMmvO8rgak4BEEuH9oZwKEkcOC2ZM3fzgGmKgYpraPZU9MrnCbnEkeALVqrIMwiSQj8iZN2rSlHoABWRKTegmAsZOM1Ap0/hHpgomE/EqNhn0RVnbzKthneD4XWu5tUoBAo3heMBqRqHx88qj8z9H7zg5AINDHjh0ztHc0VwjlQuBLwOlOEk58btPDISChDDzu3ad9XK0VywHzDmZ+5uKMjmPjXiCUAAvrTxgB4jVRI7kOsh0psr+D4GLCwbjCXHSBYF+bPYa2BmFOxtaUNJkYpACweW1ZZnkaKCa77QAGOZNW1NJrzqRpTmd1zfOtAwzlNCXRaGsFgCCXZdcWTQvaqE//9anAw1wyuRsnpGzuJ38ziJzBL+pras+ZXCkAQfb+78d3l9/EwjmZC0GyEL6Iry7EzoXgoQEgvtmU94Dt7WQhtA78kLQZH8djJMoVIggc9k8z0bIIiW164ZogfAALNB3AQh6XTaB0TSJb8AkmHIsmDwHi3rNtNmGsbZORvleS8+6CNss9+7Y9Y83n6SAWYJCVb4KGUe0CwDSqSVargDH1K1o+nBPmvONszKP8Gz0KbK2AY6qgD85OmO17jcDnOGH2+e3rw3dDc0pn1l/6mtsTo2UAGM77E61x+afJfeqkd5XXSbcBgtLb66+/PrEuhA4wHh4iXy771xYYN1kY0jp88Da1hceDgMUAzDvD5LWGLXAUdDuBCGHGGz4YgIhCKfzNqFqso05tCY3JAAF9AbtgDOfGxITtfJWcpQp+sfsXsvKGOnJGw8AxblTnpEWLVLpmq6W9X7/VjbsbNZigGsKYT/lsn6sV8DE0ATQCniU0gptrca8XxxianTTHhMZJAxK0y11Dj8v/nXlWAdJefoDQxPq1X/s1E+51TSwIB3ICDCHiZqBBXE3Dm7STiwwNM+cQenAYQGgfCJANkBiA+Y7tgmBdAk3VvOsXQMDh6zzwwANGW7F3lz3r29Eu+56ZX8G42GOTpmmz+FChsSvlezfAwHC3oaDkq0LRfGKlVjPxsyuy48k5qdLfjTbIi2+SRgAYljSZB4CgaQX2SRL4wnjqxAYNAucd24de6Pxy99wLcoX2EMuSUQ+GeXFiCA1mzVe/+tWmnY/7QH25kLSwrQ0oZtNDWsfWPuRy2WZQiAO2YQayom8+IeSx7XuliQcf4v777zeHZH057X9qAwINGoBVhUlRrNDD3azv08y2tE421O5GE+j/WrXhRO9T2gFTWcY2QJLuAwBZVLIjnO46dcp7m3JdMNNe0DgACLbvUS2V9kIk65/7H5YntMVrtxIis7Q5igIIZguYMDt37pR3vetdZsawB9OXC0kL27qAooDCLEuiqNgAoXnmXkMaBywNIIUH7JDs6FjzJ6NF8D9gYuE+yOK1Q6cMHMBEYnnuVtEE9jjaY2LnXABuOwOP5w8LgfeQqPGQl1DF3jqhAHlmXqobVBuo8IbMJXyPQq0RBUi9Zu1DAk+NAxMLWX6Ycf4mSzkfCEtVfKX/ATm+PK4lwfpMMuTSowGCBw1h+MAHPlBoAWQPGHMbFI60sC0EC3kVhIxtLZBGUbFNFZv7ZT/wNL/HBxCfP2NvB7BiYiDHipWErCYksLhPmrMdmhE343uagQQDo10uNw3XwmACq0MRbQuC3ABEnXbteN/7zIImHgGQsLkEIUY+AwBBwq+7sTV1OHKAgsaZMEtPdNVrEZ0V7SrIhP4C8w6d9f+m/0cyrdSTrC1aowCCE2IwEb3xtQDCwNvCxsFNiir5wrXYJ42iYgPE9Xf4XZrf4xtxO9xsf09TCtn1Z555xkwMDDjYwrQZQp3lHGkmEu4VkxJD2NSKPo3CSY4ZeNwzEpMxAEGNSjuadgMgTdr8ImD+GDDqv7nlRRldmEoV+MJEZAEK5MiOeqXPJAAEPsqE9v/6q9P35suusoyoXtvll1+eVEaw7kihFkC284zf0wqnKIBushDOLzRPKJuOh4W3KxAxfC53eODPuCYjjgsT4+DBgwYgDD74/JJsw12+rd17t7PxmKwIZGgA+Ge4H+Zc0oICtjbMChCEd5cVIJ2jS9J1QMuHm+uktyHsTwAgs1rDPqp5EAh8Z4LA2wABoEYUUB312m1FO0/6AaITtzr9w4uT8p9O36NNvrWvWgbzyoA3FiDMhUCDoLN6KBcC8yStcMqevWPMMluD+MiOOF4Mn8sVUeZjXGccAnXkyBF5/PHHDUBiw7jlg8D6I9mmqEtQLESRkFtw/CgmN3E/LpM37VppBTAcHaNBCJCu4SXpPDgvtS3qT9THAWQGTR4UIG0pGsEGCLfvrG9WUGnNjVeD5HIgp+fH5D/235U5xFsUQMDH+vmf//lgLgQCFXKaOXsz1BuT7PPRTcyNRPK5XFPKTnDa5gYECk249+7du2kASTKRaJIiB2MnI90QtE/goZExmdFMigWwCxA74590DAKke2hROp5TNnCL+hPqH4Re0CCgzKMtUbtqhPYEjYDjwNxBEnFau7Rg+27t89Vcq6XXCQABzeTY7ID82eDdmbPomQCCAUZh0Jve9KbEFkCub5AWlcJDp3ASIKF6djNAHrIjAZLGIvY9JByLK0/5NAjud8+ePYXirtCDjv3eBwQIpF3XAoAit4NJAy+ul5JVkwEgOE6pGiQLQHoGFqXtkNaTtNZLT11yhKmgEfTe0bdrYnFGTaZWaVOQJJmBBMikbo9WRj1qwjWhz1cKQJ5VouJ/LYKomAkgeHgI3b785S8XtAByVTkJdCxLxUwHnwBC73PufMlCzHQAVZozSP8F2sd+YZ80FrFPeO1rcAGCCQEL9aD5AhkCsQBwt7OP7cvSkwRpO872DI7jMWMf4z/Y5y8FICwOiwUXNUhvv/Yq1oKrhtYG6a7zR5jWPTvVIBNLswqSOdP5sQVViSiK8wy4AQi2VzBNL82bKFmDhnrTAPLk5Avy16M/yUxUzAQQPFgIMEKz73nPeza0ALJDt9QIocIpahwmC2PMMjdiZs9CMSaaPeY+BgC1FAACH+rBBx/cQPHPAhTS1+2MfVoEiedn7glCer4BpO/UgrQcXZRGBUhXJEDG8wJvTKYUgBih1X9ji9OmlWpfY4fmTjQvl6JBHlGi4t8VQVTMBBAKBYTqQx/6UKE+Oy0XEiqcsisRcRwIf2wuw40+Yf+sfCzci1v+awMEAAelBDNo1pmbx4Hf4Gt2FwIZ7ofkyPMNINtOLkjzsUVpatWIVJ0/BOtqEAp8d4rJZO8zOj9tkovoKplGdYeT/tPRA9qM+zHVIF2ZakEyAwSzIMwOsHrR28qtC7HrPEImjy9ZiAuKyWVAWH10k6x8LDuj75pYuFeYJwBIMP6fIO30l9jnKstxXIBwTZGsQD0XJtb2E/PSdHxJmts0R1EbB5DReV1zRRN6PegdnGAy2cM8otujiTaIjch1+F4wx/DdXcOPy7ensxMVMwOEuZCkFkB26JYzelrhFGZX0EbsEGaa38JBwPYu3QTniyU82trQFzKmGQfzBgDJKpT2dSI8bmuQkOawTUZbg5wLgMCnY7MH3EPwlc+kbz8+L40ndO3GNo1I1fpzFO6xoBHmFSBpPoW9z1C+iwqYvL4+XIVxVHPse0pUvHPuWGaiYmaAMBeS1AIIB2ReAb+nzehMxrFtqbmYDNl0H90kxoexBzkpZMxrwfUDIEms5JDA8B59Sc3QvhgLnBdmKl7nD0BEdqh51XBqUVpamxUgujSG+gchdi40AgiLAEiST1GYeEB1V4DgFaLG49z/MvCwPK4LnfYoUfGsJQpxMdQgSS2A3LBpWuGU62wzWRgTqk1zrmN9GNwPzulqMXsGh0aCkx5qJpEk7ARI1OzrHOS8BIjeAyoQdxydNz21WhUgbZEAAdUdrXrSymc5RBD6IS2uQp0HAJL0KpWomFmDMPSJmpA3vvGNXto7m8JBOGKcbjdZGBOqtUPKrvkT48MUZiKL8u4bZJznkUceMeFtl44S0gAEYNYEnQ1QW4PYLXtizs1tSvFBbBMrpAULhVTqDuzQEG+d9tRqa22RVk3ihTQIfAU2ngM9PsmnKAAkXwuCRg1JzF+Gg+HX/E3/T3SZbL0mZXs+28oAACAASURBVGNl7RUfTTXBxdFxTWsBRJ4UQ7dpAutLFsaEanHsJLpJjA9jA8QOLPgE79FHHzWRtWIiWczZZKF4uBoMGpWazi5IiwVJSQDRIMW85rHcSJyZWc0MkPvFrixEx5PLkEVXukm7AqRFF+FJoqIXnkPeZMJ9hnwK7INaEJTnIv+RxPylgw6i4v9QoiJyJ3DlszSNy6xB7BZA73vf+9YtvYaD+XIhocIpONuwr7Nk09PoJln4WEk5FVtIQTU5ffp0UbkQHj8mC+0KPIMO5xIgBlzzChBtHtfakluXhWslojDKrFaoktigvzRrmyA0c2jTuvTFISVILihhUZm8zQlZbvt+kRRE8ZOpR9f6cruv1YZxQfWh+ipDSo1v0pW1kqnuOaLiyOKU/Mnpu3Xl3sZMdSAFGYglK3IHgASq9+Mf/7i3BRAceTjeFPg0hi62sfv0MhmZRnKk6eL21jJoL4KPZUfe7IdB4X7iiScMJ6uYbDqPEUP0CwGk2GhYURpEhR6RoamZac1WL0iTRhubVRtAkGsVIQ26vkgrAIElFBQQTfrTdDfJ989CM2m0Io3NaWSpR2dxFaoPkXFPYv6yWYMhKg4oUbEqWy160QCBSYKlj9ECCBWGbm213XUEwhcqnHJNsphIFE0XH90kxsl3hTGJ8o57eeqpp+TQoUOF5tyxpo2thaKKjTwHRpCDGuRsAsRnLqGBNcK1y7MLMtOnk55ypFo1qd+sTeUaFRBYU0SXTsxpFKc/1ohW+qFfVXdkTgNLUQ+b+vKaVKc7Z9rliqsAEENsVDavj5bCfljH5gblzxQgWTsqlgQQLA2d1ALIzYWk+RQ+XwLCH2pkzZkZmsquHQklJ33CbftBbrIQAEHRFN7sRr+ZAMH4QAPbCcesOZmZPFmx1qK7Fzoi5s0kmEtmwSm9uTqzwA40RI00ndDFn8c1I96sy+wh4UcTCy2rrNyc3WGRDjd6+cKBTuJJFQQw37AB5bMx9egsrkItSIjqDibvwelT8hfD98i1tb3azDq+5WjJAElqAYQDQ3AhXBDYUOGUL8waW/jko5vEOPmuKeWrcWeIFp3bsdRzsTUhGINiNUipAIHAj6uZtLikvCh1aA2RNN/XiitOYeVctBmF/9Cq5lKjaoh67aRYo6gZUVMJSwq0aSSqQzlSiEaZWTylxA4zN9YKyQEEREI/T8oGCBs2YFvUlye9GJliLQiJjb5JgxqERMVNBQi6LKKR9U033bShyYKb5YaZwMVx3BtPShbGONrY10c3iaHM29cBIWSgwNUgiFzBnNy3b1/RAMG5AJBiGtrZACGjNpMGUTA09uvqtqvzMt2mXRwVIE3qP2DptTY0ewMgYC7luyOaiBRQlTeZRhc0iqXgSitrdZ+pvVZIT0M46Wf7FFiopyulHp0AYe1IDNV9z/ghsx7ipplYMS2A7FxImk+RlCyMaWTtAtHMbHmCX1rb0w0P1AoU+ABy4sQJQai3WA1yLgECYd/1vNZlDC3LYm+NOs2tqiG4iKfff7C1A+kfqM9IK2JaN+GAcAoaiP5DTgNkwbRXzqdY0IYN08F6dAJkMk+NT+Nt0Um/T4mKXy2SqGhkqpgoFvg5O3bskHe/+93eFkBuzXha4RSEmiYZI18xjravlqNYPpavCQQDAQjxIlnIFbSy+iDYHuNhN7qLPQbukc2qoUGyZuThVyBpB4A01OXMl4JTnb+INHOpOICgX1WOBhKT9LN9ith6dFDjZ7QWJJ3qniMq3j38hPzr9IGiym2LAgh2ovC8//3vNzOr3WLUdrwp8GnJO1+yMKaRdRLdJCYK5ppYviYQvEcsrIMeWMWEeTlWMLGKzcRzuYNiAGJoH0eU9jGgLZu0wwh6VHnKJhLxCn4UKOVZNAhDtlkAwoYNOE9HSrmtEdh8Lcicmn7oyZumobAtiIp3KFHxyowdFTkomTUIdqSZ9clPftLY7y7tnY43AZJWOAVBZNkrt09bPoEXnkQ3iYmCuQBhXYovigVwg7DorosSqwVwTC52k8l/yE9EBEgxlBWjQRQg9QqQumbtQBjRQMG+LwIE4dSkziHuOCBkO2IRCZO6rhcE0KovT+tQYp8Hmm1R8yymC3wC1d1MToaouFseW+iX3iI6mhStQdJaALk5Cpg9ocIpN1kYU9eRRDfBTWXhYyXVpdA/Yh/eYkwkapDNBIhtMi2p+X+JAqSxXzVISQBR0mFKnbgtvCAcIoqFbDi7tKdNJkY+tNR2QisEO5FrSehQ4gIXUbI0Wgq7L37l9APyQhEdFUvSIKEWQG4uJM1kgoC6i4DG1HWk0U2y8rF8oWYChH142Y4/VnNwOxwHGoqL3WTZH/tOTeryyioMSRqEgIC2cEO4jRqq7Tu6IDXD2rShIdzS0722ERV0ZMQ70FonAiDssYtlnsm0jWk7CqcbDRhM2DahQ4l9bfBxMDZJyx7QmUdC8X8rUXFUo3gNRRAVS9YgSS2AcGA7F5JWCuv6LAAXPoMWSFo+gTNzEt0kpkOjLcC+42BNvCpd5mthbl7uVxNrAet659cei+q0lz9BqQCZBFlxeUVq1Mk2lJX8yQkIJPnwqtHPG0EBQQhXI1UI4TZrCHdCaUGzGiVCwi7U89YFCDQBTBkCJKmRQmG2Va3BnAaYtmhCnQYQ3APC3xO6lBq0CKgpIe6WWfYAyyTovySqOzufTGkrIRAVGbnOSlQsCSCnTp2SX/7lX/a2ALJDsDhJWreSJE0QamTtmnK2TRsTJrYBwjUWN8zuqJNX0t2L339ETtXOyrgW1WHwaymkEeoA14ksfFFOvp5ndmJSZqrUh1CBM4uXWoBo0ow3knztAMRMLqdRAwqI7mewrF0OR5WsB4e2OIBMmsbPnZEz+5km1LrktgGI05cX14TGdviJMVzQLOX8mkxUz+k9LmoPreQWPhxqEhtzyyT4k4oAEb7Hvf+5dlRER3esZrJpAIlpAWRX/IVyIT4BDWXTaQL56CYxYWIbIIlNrAEQnb1H//VRWT49K7N9VdLfuSzjDboibH7WDmmTUgACQd/xnCb5ahZluEeBgJareQ0BkqAvp2FTQOAHINk3p4TDrADBfcHZLgBEiYGhIIPJaajGQY9dXYA5J8Bm+s6jellFd05BsYDFD0H2apSqKzpk/PigzB4eld6uTrPueho9PrfsgXaB12UPkqnuuY6K/fPj8kcDdypRsU0XzSkGHkXkQSBYMS2A6FdgUPFOqvSjJmCfXqPWMrQR9dFNYoqu7Mk/idFrtsG1/9teWTqqi7s05JZ9mOpYlf4uJRLWK1BUkmrypD2fQsH2xfa0wvF2PTsvdaMgSGlxEMKamvU2l5XnQ3HFWTNuDlohsKPq/BYHkBxlBKRD+AZJ3QvdcZxXevzIzKQ0aMMGEBwBhrX5nHBWdanwv6RVqnYqdb63Raram6SqsU5G731S5h4+Kb2X9KqvkE5NQZQM1YTsAp/ccrRWjitR8U8H0FExezcT3ldRYV7uDB/hwx/+8IYWQL4IU5pGsAUUAsVVnEKNrLGtj26SlY+F+/ExenNPVTlJd+yTxWdGpLpd1yXX9cTV4pE1jRCNd6yoRlmRGf0YK8ICLLbA5vC1lrmevMCu1f13qgapmVIfRLus9Cm3KYkk6APnpgEEZhNUqo7NvGJidG1OGo8tSDcWKN2pXRIBiu2apOxslqrm+pxGAZhXcsAZvecJmX9iWPq2d4uudp6oQRgEGNJlD0JUdxAVn1Oi4ueVqJh16ed1oM+aSefOiKrAD/md3/kdbwsgNxcS4le5i3rGLAudRDfJysfCPfmaWBt86MMc+eGTsrB3QKo79eGu5oqGMFuj/mGlVh+wgqRfwTKvv9dhaT4LKDEAsQFhO9+Qocu1CXTd+IpU18UtRrPu4ZZBgywbDeL4BrYvoeOhdpWsLa5K9dSqzP1yt4xe1SrNE9pksLdbpKNJZw/QTQAKHRxsr5MGJx8AZeT2x2Tx0Lj09XSp/vC38DHPQv8hcQmqe5uGg0F1T2sYt3/quPyPkR8XzeQ15ywWIAz1+loAQShsvwIaIq1wyhZ0Jgtjs+ludxM2Owi1MLUFyc7mr7OzEcnShzt239Myd/8Jqe5tNLMkXzZQlhQ7I2p2DbStCPIP0CiQIziVvnrypGgU9mvWaFSL+hodM7qm+sCMrCwu67LI4aiQq0VK1iDqSyDfgKo9VO8Z7YjbX8qbTQqKqnadFXaolrikVap3dsismp1js7rOh4a28WzgwxUAgRHJuyOFa1XADH//Z7J8fFr6urs0GuducOauyNsa1kQhImtJuRkyeR9VouLfjj8o1yjVfaEIqntZAPKRj3xErrvuug2FU+6COqHCKQp61tJbl0dVDB/LzuZvAIiGV8cfelZmfnhMarY1rAPIOqDAxIL/qRPmsAJlsHVFVnQyrFFANdSjZPVMPQXyFYxGARBg2CI8i2hUsx2NUmky1XlrSyZjHGpxU06AGFbu0Jiu96Fs5/YOaVRVuTarF6rrDlZpAdXaJepD7FSTr0d/agfFNV2wE7mimSldJlvZB6AgdXYqQKAtkmQ+HwQZ/r97ZLVfuVXqpFcHADKbX2gnRHWHk37/2LPyfyb2nhsfhNl09Ol9zWte411bEHY9GzOHCqfcZGFMI+skukkxfCxfny2TC1GATDx2SKa/+7zU7FLpX06OhhiNAqDoe65FnclOjdmrOqhtqM+xgVXoahUdAASjUYXwrH6G2dl2viFXo3O5FptYTRY9o9KapJUMEPgGOKmCerWuSoav0Tru42PSPVYjjS/pkFX1JWSb5jZgNqlzXYjXwpfAWCmIp7X+BHkoJEftJfbca6OJtaph9OFv7hGZUupIa2cilmhisRYkLWfCMO89w/vlW9NPKVGxI9PSz+vM1GJNLAg+zJjXve513hZAttmCE6bRRyDQdp9eNodAsjAttJhEN8E+oapEexBwHJuif8aGAkBqZGr/CzL5zQNS85J0gKzTKKpN4LRPt6zI2PZa6WxqlXYtWSUgqhUQxldJiUYZE0kJg8gIFw+QlDyI7UsoKBiCrdL8yeoVzTL8ul5ZWVrWBGOrNHS3yyqWxQaK4UfgTeZjftEellgDIEhqQrsnPj/sjvPMLcrQN3ZLteZDelt1odCUuDnGA8m/CV36oFevqbEG+Q3/Dtj2+0OPye1zh+WqqpbMDeP4LIv2QQAQ+AmXXXaZYP10tyDIpaOnFU7ZyUL8joFOCw3z4pOSjPg+Kx/LDkuvB0itTB98USa+/qTUXNKcqkE2zJIQQI39m/Y0WIoMIe+I8Gzh4dgAya8HnlmDLGmYV82SBo3q9Ji8xPpEnQnBKpirOtWX2NWi5C3VEhpxWtXFb4bHxwyboadPw6/wQaApCCqPSiDvDolajCfeyQDJMRWWp+dl6Gu7jXOOjiZpbGMIPWtBQi1KAZxvDeyRPQunZFuRRMWSfBC3BRBb92CQ8LI5VhikNPoIvvfRPUJCnrQfriELH8vWYD4fZObQKRm/bZ/UXKUChCRXhhfMKiS1IJyc69JmyXXqHdRudUjR/Aw+SAz5b93+GIepSZmdUsJil+YlFKR2oq4KzjVDsF0agm1RH0u1BF4r2vZ0RC2EVQVId3ePaf0TTBTmgzEIyEB7pDabywdAlsZnZPgru6O4YgBIoRZEmbwYV58GyREVV+T/KFHxyPKYtGVc+rksJhYOktYCyGf+JAl8UrIwJOTcz9fdJAsfK5EZbB5ircwNjMjYN/ZJlWqDqladac0MEMqh5zZjRMXM3hlfdu0DAIJjhLoOFmZ4yLmCefz6VqPpG56elJ42ndEvVSDAuc4n6qQe97M+BGsCHQoMPC+Mja9m33crbLsEJgNM1tSm3QTI6JQM/qMuUqSJxdBybYzKoQx4my574BsLPBUYgjBL/06JiiOrc5p8rC4yj15CmBcDZLcAQoWhXRfimk2hFad8ycKQkAMgMPV8dJOYFXP5kNNMNVzXvDaxHjs1IFWH1SfaP2rkqUoz27mYfrrUs/QTs3/Wlw0QmFaJFXqkc+BaNIiwNqdaTkOxMGHG37FD5jrqpWFG2/AgLwEtYWoo4Efk8xLmws6EYO1IYGII3HMzNkAQ9GCZMq2KdbvkAyALA2MydJsuc9fTHLUaVa4WZFm2JXR1NwABhV59lb9WoqKZyDGfZR38/PZF+yDYn7mQT33qU3LVVVdtCPW6uZAQidBNFsZyqhgt4xiE+nG5YwUhSGtivajtN0fUHq+C+TGqnvZT/bJ2aFpDUTXqxOtnVm5kw7HzxLkNxL2IB2ZMCm2dObusa45riKzH1Hjr+XyJOoBCMVvVkw/BXqIaq69NJlaUCKjrHDY2NxlTKZe9thJ1CYLOkoOsAMGkhpB+LEDmT43I8D9ozf8OzZtErCUC+suKmk/QID6msI+ouFI0PErUIATIBz7wAXnVq14VzIWkCbwvWRjDqUqim8QkGikbbmLTlpl1iUejNlUKVcjWTo5L1b5BWRtbzCXL4Ht5zC7OaFlzGGZOR6dIrQeZXlC6SavS1dWJrdP5cI1aAok6mHygc+xSOscO1VIIwTYp50mBhKjt+Mio6YQJHxGmUsyL98wookvnSToGOXQYewAELOZUJ11D6HMnhmREAdKmYeSOmvBaIqYWRP+hWMqXXqHGJlHxKiUqZl3yYN3zLzbMa2RF7XO05Xz729/ubQGEbexcSKhwyk0WxnCqkugmMfvaAElqYr0h8WgSX/poNDGmi+SJHB6WtSdGzKGqWvxmF2a6rA62sQs0FDx1daPJLVQ9MS696mTXwmfoVi1xqZ2oU7NJn4V5gc5hNFouLzE+MV4SQHDIJBqOCxQbIABjaqOLvIk1e7RfRv5xr3Rc3iXt1f71zgvPCbUg2mAO50muBQGT9wxR8aVKVFxCmK7IV0kmFmvToT3e/OY3b7gENxcSKpyyF/WEzxLDqXLDyZx5Y/a1AZJIedeNvIlHAAUmF6bpMTW7nh6Qted0sRuP2RUNECbqIN+qpapOLMrkv+uTmcs0OXdiXDSWJLW7VAu0KSCalNti5lDdOJ+oy93Pel8CJk8pGiQrQBBYweQEUKXWwOQBMvP8SRn9yuPSeVW3RpvSO8GzFiR92QOlOSlAnp8+Lf9lGExepZmcK4BwJda0FkB2hpp2rc9p8yULkU0PNbLGfj66Scy+NqLTKO+JIWpjyuv/YHbBvFKzS55QoAyp2dWx3uzyOti+RB3yEkrnEKW1VGsIduqSphytXmfNbs1H1KumWIOG8CTqfDN6KQAhny1Wg+D8AAgmwliATB84IWNfe1K6X9ojLaawKTnqkasF0WUPtGbEtDDybMuoIYmK5xwgSCRh9oUf4msBZAtvGgUE38FmRXiQycIYyoiPblIMHwsPN4nyHszM22bXXN7selLNLhXiqhYFiv5EkzNUBRqqEUl/WlG3LlGn/CZRX2JNneuqdi0mUi0xpTmFKa0qNABRs6VQ257PN6VZDhiHYgFiMx8SSwE8J8eEhn0BkNROMEaDKEvhyWMy/q1npOfKHmkOAIS1IKFlD6BBfjZ+WP5m/IFzq0EwPgAHBuW3f/u3zaC4oV67pU6aoPmSfrHZdN9iOmmJSZ9QhaI1oaSlOSbNLqVQyNicyDOqTQ5qEzUNCfd26nLFyl5cm0eZaa6iziTqQPrbobNht/7U7LUoiEz2RCcMxPOnNaeAunQIO8Y3S/OHcwkQgCr1WvMm1uTeQzLxvYPSe0WvNGlCL406gnp31IKktULNOem1SlQ8UDJR0RispTjpOABJi5/5zGfkJS95ybpIli+/kFQ4lZT0CwlmUg4jOOs7KPE5+/YmoRLgdYcDUGh2nZ5QJ35Aesbrpb5XF7TcqYk6oyU06qQVdb5EHY+FsDJZ0BD22IRdYf8yaBCY0WzAEcqkc8xh3sYCZGLPQZm6/bD0XtknjWvJ1YR2LUhany6Gee9VouK/lEhULAtA0loAuVqBUY6kRTH5MMjrCm2fm7T9NBXaw1D33kSVAxBmjH2OZVbqSkGbmGiXmlUzWl2nDmh9X4cJwYKkZ8znhESdLeAMdZcKEESU4A/GvHAuBjnwLCDsMc23bY0fDA3nWQrjDzwj0z85Jn2X9klDACDo4YtaELPsQUobIoDp35So+P9KJCqWBSDUIL4WQMx0Y7Aw6HiHMtzuop6h5KKPpmJurAg+lpfRmz9WqCIyUfCQbFfyVZc62I0g/KGA6AwCUuUV91BOgNhr0qedmACB9mZ0LytA+vr60tut5qkmoz9+SuvRX5S+XX3aVim93JYtSrsjauT/VYmKDyyclEtKICqWDSAnT56UN73pTd4WQLSdWReSlvyz/QAWToWy6Wl0kxBVxRYSXzTMnslDQE0TOKOddPZu1Fl8DdGn5KK5dYfB2DF3hN/ZojVk6vhMLGiQYgDC/FAMQOygStCxxzAoFWbkh1qPruXM23bqmjJ2wb0zoGay0IbVYwszpr8XlkpI8lfgzH914AE5tDgm7SUQFcsCELYAetnLXiZve9vbNpgzbi4kVDjlLuoZk03Hjfi6m4S0lQsQXxNraqMsx3LB4svVxJo6AAjAidf5BBBokBhQjdz5uCweGJFtfT3BclvwqyZNLQgW5vG3B2Lrob8//VMZWp2VxhKIimUBSEwLIAo9ThgqnHKThTGNrJPoJjGNHyioSYxeHBv3GNJkIQ2SZL6FTJ1zBRCOO9ecDPlxdmg9Lae07n5Vi6Cl0vLRCdnW0x0st53QZQ+mU5Y9IK1nenlOvnDqx2ZVW8QEiyUqlgUgvOG0FkB2LiRUOGUv6gnBjGlknUQ3ycLHsvMwrglj+wIxs6JPg/jWIAlpEZwXGhemIl4AWZZ1Suwwb1YTiwAh4TQLQOjYp+6DOIUyAIa/+zNZPTkbVY8+rj2+Zs2yBxoy93R1LxAVtUjsL07dU7J5VTaAwMzCQjO+FkBuMVJafsJNFrIoK2kJN3v293U3idE+PEaI0ZsFbD6AeCsWAwiBgJGes9kAoSmcBSDsI5BG2yncst7bmnZrGfpXrUdXwmdfu9ajp5XbKg0HVPeFPED8tSB2R8W7Syq15XWWnAfBgRjJAkA0r7IhF8IMOWfmtMIpl3Yem0330U2y8rG8Taz1/iioyIUUq0GS/JuQiWUDBPeYypB1DlaKBikFIEnEz8Ll5WwhQcOGoX9+RKpndCmDNg2BuwCx61w0uTqyPC3L2rUPK0v5So+ZJDwxNyx/gpajJRIVy6ZBCJCkFkC24KWFX5No56FG1kl0kyx8rBDlPQvYfBrEt0hPjIlFgOD6svoxpQIEEwImLCQKQy+cC+YwnhWed+o+AAIaNuga7IP/pPXoy8p2brHq0UnaRP+taRTM639XtMrI2KgsT2o1YUL3E/KwDs2elv88WDpRsawAOXLkiNx8880bWgC5eQoMZFLI1M2b8KGEsthJDjb8nVBnFNvESjIN+PCzLA5qC1RiSW+EiUVgYmyy+jGlAAQmJXI/WQCCa8UY0QpIvD3kQNQsX56claF/esRw1FDrwpZDa7MKCtS6KGFz7Wqt+7hCE5ydLTKkHRjlqDaY0w6MPk4jAfLU1An5q5EflczDKhtA2ALota99rVkSwefkMhuLhxaKCLnJwlCSLo1uktQ02/fwkqIv+DyLNvJpENfMDM3I5uFYGe3zBSAY72Bxll2P/te6/uMOLbet1sZ6WhaM4rO1l+qyCVcqCLQHl6H1w6GfV3/lW2qOjSuNpa3T6tZ4ZiQJkL0Th+V/jZVOVCwrQBBSveKKK7wtgBiGhSlmJ7989rwvWRhK0qXRTULmmSuobvkuBTVm1askoU+LkIV8EJgt0KBpicykY1Bb49lkjWJRgwSFPX9y+mnQIMFzIUmoZtSiLk409PABaT6iFYiX9Ki20E6M2r4UTGZTN2+oOGg1lHPoB/9Fu5/MaAFXq7+dEH2QB5So+JUSOypyTMvipDPahIEB5QQ/8UBt84VJLnyWZs/bnChm00P5jCS6Cc4VMs9c4UqqfYgJFqQBhFyo2Cw4gWkDJGsk7FwBBNrS9OUFaTPhZbQjfJbREWnVQuKObT3azVH5yxCbQt18jnKAjPvK9JwMav+sRm3104VaEM+xzxAVn1Ki4v6SOiqWFSA4WKgFkO1gYjZOKoSCILqLeoZCrGl0k1DrIPv52drLfQA2ES+UE3BlIi2EHNIgNO0wLpsJEDAYkH/JokEQ+cJ45/rydgYBggAEem+1aSlAO1oSgacGgqdNxcmbY8vaP2tQ+2c1NzWaFa+SwIdM+u3D++T7s4d04ZyWohfOKTtAYD7BUf+93/s92blz54ZQrx3mDBVOucnCtFJdW8B8dJMsfCwMehqdI6u5ZmvQpBByFoBkDRWXokEIkKC5ZJlYmMgAkJi+vEyCYqJMbTKXB8ji8KQMffkRBVOLtGMt9RTtVC6iotFepdaD8AGntQBybXDcXFLvXDviQxMrNpvuW0wnC4fK5kzhd1dThGpTkoQ9LYS8VQECsxa+XxaAAFQIqAT78kLw8kRMACq1yVy+sGr+9Ki2B3pEOndqQ7rq5Np1lOV+beAheW5xZOtk0vGQmQtJagHkzqBJvgEEk2odgmVzfNKEyaWbkEMV8l/sY9qOsAsQXAfLSYsxschpSrsH9zv73n25ntCxStEgBEiMP0F/iQAJ9uXNA4Tbs4eWVyvkAYL2QOif1X1Zt7d2vdBRUddI/AclKg4aomJtkUt3nhnZsmmQtBZAvlxIkunjm21j7H+XMUuAhPwXFyBJdj6EDbMjzL1iAWKvwxgSbgod/TXkdLImG0sBCELx0L5ZAAJQ4bkG+/LmAcLtQWZNZAjka9dnjwyY9kC9L9XS3LWNVHcCZGZlXv7nqR+ZVj/a1q8komJZTSzkQjA4119/vbcFkJ1jwO9Jpk9SsjBk3vjCoFkpIi5vzBZiJt0AuKx0k6R7CoGEGoRrxm91gABUMMuCfXnzAOH2MI0TWwTlNQg6q2hgQgAAHOpJREFU7I9/9QnpvXqbtzSXEayxPFGxVevSS2Hxlt1Jt1sAvetd7zJLsLkqk7XNePBpdR74HtsCdJxJQ9GoJLpJjP/CwUjLeKcxAEKCTm0WW7rqajUmO33NKUI+DAS2mDwIhTfG4eYzwqSHd6rJlL9gTpI4D8YlsQNKHiBT+4/JxDeflm0v3e6tPGRHxYHFCfkPp+8qC1GxrBoEAElrAWT7CDhxGtOWiUWAjI56KBrlE+6sGfCkjDwFIMQACAlrsQBhQONCAwhbEqG4KrEDSh4gXOVr20u3mVW63Nd6oiJ4WB0lNYwruwbBAUMtgJjfwLZpM7sNJgIkFI1KEu4sCb60fAXAlsXh94ElWIbq2QnXfy4AQm0QE5HiBAJthUkk1aewNAgpRACIz+Iwm+YBgnUiZ+89Jtsu69N16f0AQT+sw7P98ueDWPq5W+bVD4msbk6c28rmpOMMoRZAdhw/VDjlJgtDpbdJdJMYB5+jkxaODZmFITML3xcDEF4/nPWsfK5SnPRiAEKNEOzLq2OBa2MXxiBAtDPM6E+floUHT8q2l2gpr8e5IA/raSUq/ncQFUtY2dZ+lmUFCHMhv/VbvyXXXnttal1ImuDaWWNqkFAzajdSZt9kbIIv7RhMbGHWy+qk81qytPC0Qcvr30yAUBvEhGypQTA2CGIE247mb46h/lAHFLNW/T1PyNITw7Jte0+OjuK8CJDHJo/Il0bvLwuT19xXuRKFtgZ53/veJzfeeKPhXFGYfOZLUmTKlywM1WMwUuQupoPriuVjpUWbskbENjxANRWydkbMWRi5pCooJ1n5XKVokM0ACE3HmAYPw3fsk9WDWrvepyzfBICgo+KDYwflyxN7jIlVStNqPr+yAgRggHDj/d73vle2b99e0CKcnblcGlUsBN/NK9j+BDVILN3cRzcJ0eXXqVRV/T5nGtcYAmmameUmMmNMsvMNIOzsnhqVsm4cmhHPFwBJzS1pq6Sh7/1MqrR2vVfXXjctXj0apEbXRv/x8NPyjekny0JULLsGwQHhqMMcgtN1yy23mJAf+/W6uZC0wik38x7jbNvRL4aYiwnP+nwFHCdLyNinQbK2DuUxmMHfTA3ClaJikn68Tobig21H85qRvQbYWNA7aYDqrktRD31rj9SML2stSPLS0iAq/kCJit8rE1HxrACEphZsUdjMoL/DOSdI7FxIUlTI5wvEONu+WTotKel7IDiGzxTKGjJ2jw2As/2Rl1KRolIIEJuCE6OBSjGxigEIrzPV6c5fOMZgaGjImODuIqyFe2Pt+vyi1oI8Ig3aD7xbS3PTxu/b2lHx/jJ0VDwrJpb90BDRwiBfeuml8s53vtOABWYS2+Jj2zQaiK1t7JkUx0hSxy7dxMwAgaRklpk+SwmvDyBu55UYIcc25xIgMVlx9/kE+/LqDnhWAAgbPHjHgqW5qAX5qlLdtVlcZ6M2/k5g8oKo+HUlKh5YHJYOXUqhlLUJzzpA6JQPDg7KNddcY0AC8wtREfJuYNPDP0gSeHdRz5hsuq+7SVY+VtJMTzPPx/QNCTv2ydp0wTVdgrXezkWUQ4PEAoTBBFgKwaiUTlrYDgBhgwev0BdqQaZl8Mu7tc6kWTq0cbW7LXlYCyAq9t8vAytaQalExS0NEDwrguTEiRNmDcNf+qVfKizuSId+YGAgYfJYK7T7p6MeKr1Noptk6Y+VJsgxZl4SUHxcsRCoygmQWNIhtS5DtgAIMvghs5Bjg/sM5XtorgIgqX4Va0GGJmTwtkeko7dN2mq1v7GjQWyi4he1o+KCLu6oxd1bi4uV9LAJkkOHDpmGDtAkMDUwq7PjCNSse9O2uUSAhKgeSXSTLM51SJBjcyo+EytrRSCFlQm1UjTIZgIkFLa1AZKa2ynUgmCp6D3SpbUgLTVaC7IBIGvaRahGDFHx9D1awptb0HRLkRVDsyGTiAj/wgzau3ev7N+/X/7wD//QmFyw721Ty5csDGXTfXSTrM61rYV8plRsTsUHkKwVgS5Agv2mUkysrABhyDa4nHP+nDQ/8WeIc8aIIDQIyJCQh0QTC0tFH9elom9DLQiWafNR3XMdFUFU/KPTd8uVVc0lLf1sD2NZ8yBpIMEAIPT74osvmnwCVqPCoH7oQx9aFwrmMfAd6d3UICFTCefwlbbGhIh953UfWlruJjRB2PcTMlfWPSCLkrHVAWJHpdLyGswpQRtj0oBmTQZIjcwc6Zexf3xMa0GSqe5IEr6oHRX/08DdZcuBmAmqnJn0kJDge5hTcNYxIDC7PvvZz8oll1yyjpZi1KMChPYpARIylXzhYRwri++AcyWpfTzYLElHezx85l/MeNnn3CyA4Lpo1sVqEHLrYhpXk5UAgMSU204/e0LG/+lJ6VOqe4NnkR3STGyiYjmy6OcEIBQKmly33nqrXHnllRsA4mqDGFMJ+wB8PrpJqODK1iBJ+QZcQ4h2nyT05QBIbCNpXoMdxcpiYtkAiSUeMioVU1qM60IyGc8kptx2cv9Rmfzms7LtamX9rmq/LOdFgDwz9aL8t5F75VolKs6vWit5xcxECdtsugbhdZD5+/73v19uuOEGk6W21bJPG8SaSr4oSqzvkGSmmdkkpRIy9AzSNFPavjYotzJA2Nmd1xi6J3ZACZfb1srEz56X6X97XrZftT2V6k6i4gUBEAwg1DFmEpAbfWaWmyy0Y+1JNq4vE57FNKKv5Gu+jOOEImlpGiQrVYSgpNY6FwCJYebaUakYMxDbsx4dx09c8yQfxRp78IDM/ei4bNdakCSqO3yQh8eek9smHikbUfGcmlgECFQzolMf+9jHZNu2bRtMLZciHtIEEHCX80RTA+cJUdWT/BgKayiSlgQQhrtj1wl0zSScdzMBAvMHwZRYgLCze0womhMNak5Sj5/Pg4z+5ClZePi0bN+li8EmMHkNUXFUiYqT5SMqnnOA4ALgM2Bw8fChSeC0kbdlawM66iEnOYlukmXm99FcCJAsWXkbLGmmW8gcYYI0djm0cvggpLfE8McYtrUbV6dF6miqBuvR82btsNaCrDw5In3buxMAguVGquSOocflu7PPa0fFVtPVpByvc+aD2BePBw/BQ1j3N37jNwrkRgwy+UtZsuk+uknWmT+J0Rsq3ErTIDH2ubu/7fdkWXGWgGbThqxOOgFC7lxI4KFtAJCY89jBg9R69PxgDN/xmKw9Nyl9vd0a3kzu9/vtgUflvoUXZVeJSz/bz2BLAAQXRHLjZZddZjrEY6ChWUh1AECgbdivKclUSqKbZBVsX/Ufw5Np/LE0gMREeLYCQOjr2eTSEEBMn101y2L78tKvSmX+oqB8RVm/33lUqvvnpbcjud+vLrUjX+9/SJ5aHJKuMhEVt4SJRYGgjQ5u1stf/nJ5xzveYQABoEAjIM7OBtmYFdMA4nb/yCrYPkefM3IoFxMCSDHN42gecoGfkB9VqolVCkBSM+P5C7ODJvA7fVQjs2m+FmRQa0HqxlekBw2uE3hYC6vLclv/fdJfRqLilgIILoYgeeGFF+T1r3+9vOENbzBmF7KteMFEgYACRGkAcaNFtJFjV4iiaec2M2O0BqZEWqbYBxLmaFKLgzw72pGzcwGQmOInO68R0wUF29OEA0C8z5LLtM1pLcg3dNmDxWrpat647AGJirMri/Kl/ntlToFSLqLilgMIQQLBfO655+RXf/VX5S1veYuhT8Nxh2kDcECjpIV5XboJts2yAI7P0acGyXIcV94hCL4kZpLW4TlZWMYkaOKM6xyo2EShzTyIqaPHeZjXiG3yEKxHX1cL8rC01DZIhy57sIrPrftkR8XxpRn5r6d/KM2SSySWg6i4JQHiggSRLaxc9fTTT8sdd9xhzK8PfvCDqQDxrbIam2Q0g6v+TtJ6gFmO4wp+UnRsKwMkpvjJBkhsiW6wHj0f4l0am9ZlD3arFdEsbbrsQRJAhhYnlah4l1xRRqLilgUIQQKTCgQ4xMuhFXbs2GFyHGhtmtiJT3f2zdRZ+VhJ1PQsx/EJfqhWwgcqRuCK0SAYO/gwMdElntu+x1iAsFN7TIEVj4/zwTrwvpxakM7edmmtbfQCBEnCk3Mj8scDd5WVqLilAcJBg1DQpID/gRcYwHDEXYq8PdA+QczCx0pqFB2TzU/TCKUAhMBP7ELoMbGKAQi1JIufQuezM+MxfXkxhuF6dDWllOrOdUG6d3ZpyW2DFyDoqHhkdkA+Z5Z+Lk+7Hw7llgnzpgmVDRaEBz/xiU8YTcKEortvEt0kdn2PELEwFmi+e8raPI7mC+57swGCcYwBNAMJiC7GAATjG1WPbmpBBmXkH34mPZcrJSWhFgQAOTD9ovzl8L1laxh3XgKEy7z9/u//vum5lQYQH90klIXnoPgKr2xhD9FdksCeFD4O+SB29j4LwOyMdRYTy/azsgIk1JcX1wTNj14FpKV4cyz5dUFmDmstyJcfU6r7NqW6a+Wps0A6mbz7Jo/KF0fvu7gBQoo8NAham9qdG20hS6KbhGrabRs86eHhAYeaR6QBJGtvLIZQ2fIU+6f5X/a5NxMg7OWbSj7Ui2NEEQAJ1qOrBpk+oLUgX39Klz3QDvAptSAgKv5DmYmK54UPYj9wNnrADITolo/ciO19USg7nxBKtIUYvcXWhPiIlCHTcrMB4obEfevGu9dsh5ND5EbmkmBixdSjTz55VKa+hVqQtGUPckTFr08+rhqkqywtR89LEwsXzc6NyJW45EbbRHLrv/FgYvlYIUZvrCZyBQnAjSH/uVqAq/zi85i8ROHh5utXskSxbIDEhqWxHTu7xwAEwZbYevSJR5+XmdsPy7Yrt2ktyMbpJNdbrkruVKLid2YOahSrvWxExfNOg3B44ItA2BGKBbkRESfbH/E52e5MnDZzp2W9abYgeRfSRD6AZG0eh/PZAMliohVjYhULELYJCvXlxfFJbMTzw0SW7IPUCmpB5rUWBOuC+GpBOMbfGXxU7p0/LpddLHmQkOlBcqPW1BtyIzQKw74+J5sPBv5DUhbenbmTmlgXu5AOritr87jzCSAghIaoKbwfro+OyS0RIBriH/3JflncPSDbdvmXPTAmtTru31Ci4v4yExXPWw2CCydv6/Tp0/LKV75S3va2txmuFkCCl49ukpVomER5jzXVfBqEGXqAJRao7CqP422GBmH5bFJ9v88HiVoMR3ekJg/Wo2NbXRdk+O7HtRZk1KwL4qO6o2E1iYqnl7Wjolm8s1xEk3PQ1SSkGbJ875Ib3/jGNxofBSBxq+9c5zN0HuYA3CSZm5cIHcf+HqDI2jzO1nw4Fky0xBVhnYuxTSxEjGKqGelEgwpCcmQMkBnZCzWu5vhh+1BIGLcz/P/2ihye1lqQLllzakFsouL/6v+RzGrr0XISFc9rDUJZgCCT3Pj2t7/dsIDxmc/BzNJ8OiniRBMBD7gYHyRr8zicj5qvFIDE5kGKBQiTpzF9eUlLSQ0Jm1qQVRnUWpDa/kXp8TSXO0NUnJa/PH2v9uPV9WmyzFgR255XmfS0+0HeAgzgd7/73fK6173OhHoZomQ1ImZExN/TOsTzHEkRp6y+jKtBilnr3AYIfJjEJgcpGqQYgPhIn0nPIAtA4MMhEpga8UItyOKyDH7rEamf1Ohf68ZaEPge6Kg4sjgl//70nWUnKl4QGsR+YAQJWgm96lWvMoxcaBeaVwgtsv49rUIOx0xyqO0ZPcb0cAFSzFLOXF0riYafJLTFRrHYgCFLkwiu5R7Tl5dVoYnltqwFmdVakK/vlqblGulsPuPM54pu11RfVEttdY0cnDopnx/5qdailzfEe8EBBDfEbDso8Si4gnAdP35cnnrqKbnzzjvlD/7gD4xmSaKp2BrER3mnCYIZM+srxPHyHc8+37kASOLiNtbFkp1Lvy3N9LRBi0SvlwjJWpCpWRn82m7D4m1vANUdOkNzYQqMmqpq06x639QxuXf6kDTk60CyPpPQ9heMiWXfKB4QqA9YbuHw4cOmSTacW/ggWIE3jcdlA8TnL2R19l0NUsxKtbYGyRImLlWDxPS4MnN5np2L30PrDeKagvXorAUZnTLrgrS3txqQIGIFYEwuz8qTutzznVMHpH91Vq6obi2778HndkECBDcHf+PIkSOmIR3sfjyYgwcPyqc//WlBY4iQH4LZOslfKLZoigEFgDVk4hUeUL4aEhoLAN8MgCCsjPPFAoTjwcBImumJ75BURPIz0aE3AKmVxaFx09W9s69D2hUgk0tzcnDmpNw99awcXh5VYHRIneqTcvXh9WrwzW5eHVJp5fweTiYeHt420RErXsUAJGm2L7ZoimHpmHDrVgBITBM4XCfp6wwLpz1DAMReH91njpHqc+rFk/L8F+6RV7/sWjk1Oyq3T+yX55aH5NLqTmmsrpUl7b9b7qiVe+0XrAZxb5QAQbEVEosxAElimxZbNIX9fMszhCYFhqfxM6kUOMl/oUOcJYpFKgibeIcEnnX6qesN5g8CgDDiBR/E1TbUrBj75w89L3/2p38mr3rZdbJ/9pTsrNYVpqq1cccmAOOCN7Hch8pm2VjA58Ybbww66SFhLqZoKo0lnCaENGG2MkAQIYxtjEdz0fZXmLvCcwLgjh49Kg/c/6C8cOSwVDXWSeNqjZIQ18y6g3bThtDkUur3F40GwcBj0MHb+sVf/MWgBglR3mOrE+0HRNMhJjLkOvfsApIlE4/ZuRgNwiZwMdl3O4SeuiCndUMAE/0VagzShLDA0u7du+Xuu+82eZIOLK4DM7lUSS9y/4sGILB1YTpAONH0AQ8/raY9xOiNrU70ASRr8zhokK0MEJirEPrYddy5NqW9inF/f788/PDD8oMf/MD0G8AKZDguuXVFynfJu100AGFkCwmtn/u5n5O3vvWtBXKjL+oCgHC1JNeRtEOVWegmaaBLe5IMCsD0yEJVKVaDgJULRzrGb2HiFOMaWt6B22LVY5hXiOahz9mjjz4q3/nOd8x4X3311QYUuNet8LqoAIIBhxkAUws5Eqy6yyrFpNBkEqO32KIpH0csJAgMCiDDnVpD4RxoMwECDZLWl5cTDsy3L33pS2b8oSG+/OUvm6tGZBGacqsA46Jz0nnDNrkR/X/hj+AzOomusCY1sc6ynIJ9zPMJILGNqBn18vXlpY+BEDDeKE/44he/KKdOnTLDctVVVxWWwAhNFOfi+4tOg3CQydu6+eab5TWveY2ZvdwXHq6vxBVCXmzRFM4R0ynE9V0YFEhdFbZMGgRdVOBjlQoQag0AA+MFug+cb05S+MleZ+dC+GPOedECBIPjkhtdfhYeoK9ACQApdiGdYgCCfbji02YBBD4INAIy92lZf4wFF+RkX174ENQYGKdnn31W7r33XvMTLAZ855uQYgR2s7e5qAGCwWYC8SMf+Yhcd91168K/SeRACgVb8WR9aFl6W/HYBEjM8gIF+7nIMC8bUcd2amfFI5kH8Ovga2CZ75/+9Kfy2GOPyaWXXmqcePgd5ws4MI4XPUAwCEwifupTnzI2MbPsvvZBZtCsRgpZKe9JZlsIZCxp3QyAsKApBBDmdU6ePGlMMjjabO4HYCCfsXPnThNYgCl1PgGjMMlcyFyskNDxe8x4EHSQG0FmRCMIPFAIgC8xh205axYDkCx15bzGcwGQ0FIGMKVgpoIE+vnPf14+85nPGK0BPwNhXNzn+QqMCkAc9DCfAUH8+Mc/bjrJAwRuWBWzIG1oVCdmfQF0WerKeXwmJmMc51JNLGqQJIDQJ4G2wASxZ88e+du//VtzWuyDsYM/d66TfFmfjW/7iolljQoEn8tSAyRs8wlHlUvAkSHM6sQsiUKcqtjmcQAunOHNAAjXMHfX+rCBgXtB9nvv3r3Gz8AYYWy2UpKvApByjIBzDIAEDiYE8dd//dfNbIhZkeBB/B5OJ8wxdHaMXe2Jp8laFUifZzMBghwPEqEECH0HagxkzQGMb37zm+a24LddCNqiokEiAcXOjYjKfOxjHzMViAAEgIFwJV433HCDaRARWjvDPWWxzePYuTCG/lEOEwtVf6S1QEvijWvYt2+ffO973zN5DTjleG31XEbkY/duVjGxEkYPIMFMidAvtMcDDzxg8gKoUIQZhs9uueWWIOnRB5AsNR3UIJsBEEalUMOPe4T2xD0DLFgC76677hKwbbd69rsUQLj7VgCSMJoUFsyUMB/Y6IEVitgtZqUrH0CyUNYJEDaHjqGgF6tBWHmJ8CwIhOh7DF/ru9/9rml8ceWVVxqNieDFxfKqACTwpKEp8LJtbK7XDkcezmmoQ4p9CgghTZcs7UeLBQh7UIVMM7uSD1Ep8KVAOYfGOF+TfOUAcQUgRYwiQAPzC4lFZMWzAqSY5nFwmiHspJTHXDY5Y9g3CSB2JR98CeQxfvzjH5v7g7bAvZ5v2e+YsYndpgKQ2JGytoN/8sILL5jEWEwLIVeDFNM8jgCJqRO3TawkDWIDAwDA/Tz00EMmZIvsN85zPma+i3icqbtUAFLEiJKa8ru/+7vG/Ag1gCgHQLhabTEAgXkGUCJBSaFniStoIg8++KD88Ic/NN+jkcL5nv0u4pEm7lIBSBGjSYJjbI8tFyDFNI8rBiDwldikDcCCv0SfCnUZLHGFybdr1y5jKm61gqUiHk9Zd6kApIjhpAZBe1P0AMaMG8vJwgweKk11LwnHJkDAfYLfE3qx6cTjjz9ufJdXv/rVJjiA7DfyOd/+9rfNNSOXcaFlv0Njk+X7CkCyjJa1LWZiUNAR6kWNQyxIILipyx97rscunY0FCEO2AMgXvvAFgTmI8Oxtt91mzrBVS1yLfBxnbbcKQIocWpgvmHkxO6OWBEm1GF8EAMnaPM6ORoUAwnAtrg/nQcgWNeDwQUBCvJiSfEU+2nW7VQBSwigyBIqZ+aMf/agxfUIgoekTYyb5olHsPZXWiQXXBTCgafd9991nSI4AFl4XMi2khEdZcdLPxuDhmDa58T3veY8h+KXlRc4GQOzab1QDoj4DuQzQQxBlIwP5bI3BhXzcigYpw9OFAIIBC60AkMCcSQIJKSxZmsexBh58LIRnQXvBZ3YuAwxkECoBDDjhyIIjWnYxJ/nK8GgrJbflGEQ63nDaYeNjrUR7WWr7HNg2y+KY3J50dwAE+QocA8AEAI4dO2aA8cgjj5z3Ja7leB7lPEZFg5RpNAkSZKRf+9rXylve8pZC5aHrL2TpjUWT7MCBA6bhHY4NDYIoFbPfAMeFUuJapsdRtsNUAFK2oTyzdjsEGcu/YVlqX+fGYgCClbI+97nPmRWywKqFtkAf2wutxLWMj6Msh6oApCzDeOYgbIqGFXff+c53yk033WRme/oL3JIr8KadHvvgjcQizKg//uM/Nk43etvide2111aSfGV+fu7hKgA5SwPMpnRw2tG50S1JTeuN5TZFgG+Dgq3777/fmFd4bcU+tmdpKM/pYSsAOYvDb6+4i1Wt7MiWDyAEBhxwlrgiE3777bebctcLufb7LD6Gkg5dAUhJwxfemSBBIvEVr3iFiTrh5fb8ZbSKK/Q+88wzcscddxRKXOG3hJKQ4aupbJF1BCoAyTpiRWxPcuOtt95qHGxkswEQmGG+PrZwvuHoo4EdtrmYSlyLGN6zuksFIGd1eHMHtzs3osgKSTwkE5HIYx9bZL9/9KMfmQ7oID8ij1JJ8m3CwwmcogKQTXoGDPeCF4VuKNdff72JUKHEFc43wrZc070CjE16KBGnqQAkYpDKtQl5W8iGY51ELAeASj4uR1YBRrlGunzHqQCkfGMZdSRqEmTBkeRD/fdWWKwy6uIvwo0qADlHD50OeqXE9Rw9gMjTVgASOVCVzS7OEagA5OJ87pW7jhyBCkAiB6qy2cU5AhWAXJzPvXLXkSNQAUjkQFU2uzhH4P8DyVnXDsVqXEEAAAAASUVORK5CYII=" />
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 0, 8]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresGroup ref="groupRef">
+      <Box v-for="x, xi in [-3, -1.5, 0, 1.5, 3]" :key="xi" :position="[x, 0, 0]" :scale="[1, 5, 0.5]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+        <Box v-for="y, i in [-0.25, 0.25]" :key="i" :position="[0, y, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+          <Box v-for="yy, ii in [-0.25, 0.25]" :key="ii" :position="[0, yy, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+            <Box v-for="yyy, iii in [-0.25, 0.25]" :key="iii" :position="[0, yyy, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+              <Box v-for="yyyy, iiii in [-0.25, 0.25]" :key="iiii" :position="[0, yyyy, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+                <Box v-for="yyyyy, iiiii in [-0.25, 0.25]" :key="iiiii" :position="[0, yyyyy, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed">
+                  <Box v-for="yyyyyy, iiiiii in [-0.25, 0.25]" :key="iiiiii" :position="[0, yyyyyy, Z]" :scale="[1, 0.5, 1]" :geometry="geo" :material="new MeshToonMaterial()" @pointerover="onPointerEnter" @pointerleave="onPointerLeave" @pointermissed="onPointerMissed" />
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </TresGroup>
+    <TresDirectionalLight :intensity="1" :position="[3, 0, 0]" />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/RemoveInteractivity.vue b/playground/vue/src/pages/events/RemoveInteractivity.vue
new file mode 100644
index 000000000..4e8f3a7ca
--- /dev/null
+++ b/playground/vue/src/pages/events/RemoveInteractivity.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref } from 'vue'
+import type { ThreeEvent } from '@tresjs/core'
+
+function onClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#008080')
+}
+
+function onDoubleClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FFD700')
+}
+
+function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#CCFF03')
+}
+
+function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#efefef')
+}
+
+function onPointerMove(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#00F')
+}
+
+function onContextMenu(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FF4500')
+}
+
+const visible = ref(false)
+setInterval(() => {
+  visible.value = !visible.value
+}, 1000)
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1><code>eventManager.remove</code></h1>
+    <p>When an object is removed from the scene, it should trigger <code>@pointer{out,leave}</code> events, if necessary.</p>
+    <h2>Setup</h2>
+    <p>A few boxes are added/removed from the scene. Their events "bubble up" to the larger parent box.</p>
+    <p>Moving the pointer over the small boxes should trigger <code>@pointerenter</code> on the large parent box. If the pointer is still over a small box when it is removed, <code>@pointerleave</code> should be called on the small box and "bubbled up" to the larger parent box.</p>
+    <img src="data:image/png;base64,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" />
+    <img src="data:image/png;base64,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" />
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      @click="onClick"
+      @doubleclick="onDoubleClick"
+      @pointerenter="onPointerEnter"
+      @pointerleave="onPointerLeave"
+      @pointermove="onPointerMove"
+      @contextmenu="onContextMenu"
+    >
+      <TresMesh
+        v-if="visible"
+        :position-x="2"
+        :scale="0.5"
+        @click="onClick"
+        @doubleclick="onDoubleClick"
+        @pointerenter="onPointerEnter"
+        @pointerleave="onPointerLeave"
+        @pointermove="onPointerMove"
+        @contextmenu="onContextMenu"
+      >
+        <TresBoxGeometry :args="[1, 1, 1]" />
+        <TresMeshToonMaterial color="#efefef" />
+        <TresMesh
+          :position-x="2"
+          :scale="0.5"
+          @click="onClick"
+          @doubleclick="onDoubleClick"
+          @pointerenter="onPointerEnter"
+          @pointerleave="onPointerLeave"
+          @pointermove="onPointerMove"
+          @contextmenu="onContextMenu"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </TresMesh>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshToonMaterial color="#efefef" />
+    </TresMesh>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+img {
+  border: 2px solid #ccc;
+}
+</style>
diff --git a/playground/vue/src/pages/events/StopPropagation.vue b/playground/vue/src/pages/events/StopPropagation.vue
new file mode 100644
index 000000000..8b1bfcfa1
--- /dev/null
+++ b/playground/vue/src/pages/events/StopPropagation.vue
@@ -0,0 +1,153 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { ThreeEvent } from '@tresjs/core'
+import '@tresjs/leches/styles'
+
+const msgs0 = ref(['Mouse over cube'])
+const msgs1 = ref(['Mouse over sphere'])
+const msgs2 = ref<string[]>([])
+const MAX_NUM_MSGS = 10
+
+const getColor = (i: number) => i % 5 === 0 ? 'gray' : 'black'
+
+let [n0, n1, n2] = [0, 0, 0]
+
+const unshiftMsg0 = (...msg: string[]) => {
+  n0++
+  msgs0.value.unshift(msg.join(', '))
+  while (msgs0.value.length > MAX_NUM_MSGS) {
+    msgs0.value.pop()
+  }
+}
+
+const unshiftMsg1 = (...msg: string[]) => {
+  n1++
+  msgs1.value.unshift(msg.join(', '))
+  while (msgs1.value.length > MAX_NUM_MSGS) {
+    msgs1.value.pop()
+  }
+}
+
+const unshiftMsgError = (...msg: string[]) => {
+  n2++
+  msgs2.value.unshift(msg.join(', '))
+  while (msgs2.value.length > MAX_NUM_MSGS) {
+    msgs2.value.pop()
+  }
+}
+
+function fnStopPropagation(e: ThreeEvent<any>, handlerName: string) {
+  e.stopPropagation()
+  unshiftMsg0('✅ stopped', handlerName)
+}
+
+function fnStopEventModifier(e: ThreeEvent<any>, handlerName: string) {
+  unshiftMsg1('✅ stopped', handlerName)
+}
+
+function fnError(e: ThreeEvent<any>, handlerName: string) {
+  unshiftMsgError('❌ NOT STOPPED', handlerName, `${e.object?.name ?? 'none'} => ${e.eventObject.name}`)
+}
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>Stop propagation</h1>
+    <h2>Setup</h2>
+    <p>
+      In this scene, there is:
+    </p>
+    <ul>
+      <li>TresGroup "Listener"</li>
+      <li>- TresGroup "Stopper" with `event.stopPropagation()`</li>
+      <li>-- TresMesh</li>
+      <li>- TresMesh "Emitter with event modifier `.stop`"</li>
+    </ul>
+    <p>
+      Interacting with either Mesh causes events to be fired. But the events are stopped before propagating to "Listener".
+    </p>
+    <hr />
+    <h3>Errors (from listener)</h3>
+    <p v-if="!n2">✅ No errors yet.</p>
+    <ul><li v-for="msg, i of msgs2" :key="i" :style="{ color: getColor(n2 - i) }">{{ msg }}</li></ul>
+    <hr />
+    <h3>`.stop` event modifier Messages (from sphere events)</h3>
+    <ul><li v-for="msg, i of msgs1" :key="i" :style="{ color: getColor(n1 - i) }">{{ msg }}</li></ul>
+    <hr />
+    <h3>`event.stopPropagation` Messages (from cube events)</h3>
+    <ul><li v-for="msg, i of msgs0" :key="i" :style="{ color: getColor(n0 - i) }">{{ msg }}</li></ul>
+    <hr />
+    <h4>Note</h4>
+    <p>@pointermissed will only be heard by a single "stopper" because the event is stopped before being handled by another object.</p>
+  </OverlayInfo>
+  <TresCanvas
+    window-size
+    clear-color="gray"
+  >
+    <TresPerspectiveCamera
+      :position="[0, -8, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresGroup
+      name="listener"
+      @click="(e) => fnError(e, '@click')"
+      @contextmenu="(e) => fnError(e, '@contextmenu')"
+      @dblclick="(e) => fnError(e, '@dblclick')"
+      @pointerenter="(e) => fnError(e, '@pointerenter')"
+      @pointerleave="(e) => fnError(e, '@pointerleave')"
+      @pointerover="(e) => fnError(e, '@pointerover')"
+      @pointerout="(e) => fnError(e, '@pointerout')"
+      @pointermove="(e) => fnError(e, '@pointermove')"
+      @pointerdown="(e) => fnError(e, '@pointerdown')"
+      @pointerup="(e) => fnError(e, '@pointerup')"
+      @pointermissed="(e) => fnError(e, '@pointermissed')"
+      @wheel="(e) => fnError(e, '@wheel')"
+    >
+      <TresMesh
+        name="Sphere"
+        :position-y="1"
+        @click.stop="(e) => fnStopEventModifier(e, '@click.stop')"
+        @contextmenu.stop="(e) => fnStopEventModifier(e, '@contextmenu.stop')"
+        @dblclick.stop="(e) => fnStopEventModifier(e, '@dblclick.stop')"
+        @pointerenter.stop="(e) => fnStopEventModifier(e, '@pointerenter.stop')"
+        @pointerleave.stop="(e) => fnStopEventModifier(e, '@pointerleave.stop')"
+        @pointerover.stop="(e) => fnStopEventModifier(e, '@pointerover.stop')"
+        @pointerout.stop="(e) => fnStopEventModifier(e, '@pointerout.stop')"
+        @pointermove.stop="(e) => fnStopEventModifier(e, '@pointermove.stop')"
+        @pointerdown.stop="(e) => fnStopEventModifier(e, '@pointerdown.stop')"
+        @pointerup.stop="(e) => fnStopEventModifier(e, '@pointerup.stop')"
+        @pointermissed.stop="(e) => fnStopEventModifier(e, '@pointermissed.stop')"
+        @wheel.stop="(e) => fnStopEventModifier(e, '@wheel.stop')"
+      >
+        <TresSphereGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <TresGroup
+        name="stopper"
+        :position-y="-1"
+        @click="(e) => fnStopPropagation(e, '@click')"
+        @contextmenu="(e) => fnStopPropagation(e, '@contextmenu')"
+        @dblclick="(e) => fnStopPropagation(e, '@dblclick')"
+        @pointerenter="(e) => fnStopPropagation(e, '@pointerenter')"
+        @pointerleave="(e) => fnStopPropagation(e, '@pointerleave')"
+        @pointerover="(e) => fnStopPropagation(e, '@pointerover')"
+        @pointerout="(e) => fnStopPropagation(e, '@pointerout')"
+        @pointermove="(e) => fnStopPropagation(e, '@pointermove')"
+        @pointerdown="(e) => fnStopPropagation(e, '@pointerdown')"
+        @pointerup="(e) => fnStopPropagation(e, '@pointerup')"
+        @pointermissed="(e) => fnStopPropagation(e, '@pointermissed')"
+        @wheel="(e) => fnStopPropagation(e, '@wheel')"
+      >
+        <TresMesh name="Cube">
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </TresGroup>
+      <TresDirectionalLight :intensity="1" />
+      <TresAmbientLight :intensity="1" />
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/pages/events/TargetEnabled.vue b/playground/vue/src/pages/events/TargetEnabled.vue
new file mode 100644
index 000000000..25b0f2d0d
--- /dev/null
+++ b/playground/vue/src/pages/events/TargetEnabled.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { ThreeEvent } from '@tresjs/core'
+
+function onClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material?.color.set('#008080')
+}
+
+function onDoubleClick(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FFD700')
+}
+
+function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#CCFF03')
+}
+
+function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#efefef')
+}
+
+function onContextMenu(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#FF4500')
+}
+
+function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
+  ev.eventObject.material.color.set('#000000')
+}
+
+const eventsTargetBlueRef = shallowRef<HTMLElement | undefined>()
+const eventsTargetRedRef = shallowRef<HTMLElement | undefined>()
+const eventsTargetIdRef = shallowRef<string>('undefined')
+const eventsTargetRef = computed<HTMLElement | undefined>(() => {
+  if (eventsTargetIdRef.value === 'blue') {
+    return eventsTargetBlueRef.value
+  }
+  else if (eventsTargetIdRef.value === 'red') {
+    return eventsTargetRedRef.value
+  }
+  else {
+    return undefined
+  }
+})
+function onChangeEventTargetId(id: string) {
+  eventsTargetIdRef.value = id
+}
+
+const eventsEnabledRef = shallowRef(true)
+function onChangeEventsEnabled(b: boolean) {
+  eventsEnabledRef.value = b
+}
+</script>
+
+<template>
+  <div ref="eventsTargetBlueRef" :style="{ display: eventsTargetIdRef === 'blue' ? 'block' : 'none' }" class="full-screen checkered blue"></div>
+  <div ref="eventsTargetRedRef" :style="{ display: eventsTargetIdRef === 'red' ? 'block' : 'none' }" class="full-screen checkered red"></div>
+  <TresCanvas
+    window-size
+    clear-color="darkGray"
+    :events-enabled="eventsEnabledRef"
+    :events-target="eventsTargetRef"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls :dom-element="eventsTargetRef" />
+    <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]"
+          :key="`${[x, y, z]}`"
+          :position="[x, y, z]"
+          @click="onClick"
+          @dblclick="onDoubleClick"
+          @pointerenter="onPointerEnter"
+          @pointerleave="onPointerLeave"
+          @contextmenu="onContextMenu"
+          @pointermissed="onPointerMissed"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </template>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+  <OverlayInfo>
+    <h1><code>eventsTarget</code></h1>
+    <p>The <code>eventsManager</code> connects to <code>context.renderer.value.domElement</code> by default. But users can override this by setting <code>:events-target</code> on <code>TresCanvas</code>.</p>
+    <h2>Select an <code>:events-target</code> to <code>connect</code> to.</h2>
+    <div v-for="id of ['undefined', 'blue', 'red']" :key="id">
+      <input :id="id" :checked="id === eventsTargetIdRef" type="radio" name="target" @change="() => onChangeEventTargetId(id)" />
+      <label :for="id">{{ id }}</label>
+    </div>
+    <p>(This will also create/add/remove a DOM element covering the TresCanvas, if necessary.)</p>
+    <p>The on-screen objects should still respond to pointer events.</p>
+    <hr />
+    <h1><code>eventsEnabled</code></h1>
+    <p>Events are enabled by default but can be turned off by setting <code>:events-enabled="false"</code> on <code>TresCanvas</code></p>
+    <input id="enabled" type="checkbox" checked @change="(e) => onChangeEventsEnabled((e.target as null | HTMLFormElement)?.checked ?? false)" />
+    <label for="enabled">Enable events</label>
+    <hr />
+    <h2>NOTE</h2>
+    <p>Tres controls like <code>OrbitControls</code> are unaffected by <code>eventManager</code> settings.</p>
+    <p>Additional steps must be taken to update them appropriately, in the case of changing the event target or disabling events.</p>
+  </OverlayInfo>
+</template>
+
+<style scoped>
+.full-screen {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+.checkered.red {
+  background-image: linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000 75%),
+    linear-gradient(45deg, transparent 75%, #000 75%), linear-gradient(45deg, #000 25%, #f00 25%);
+}
+.checkered.blue {
+  background-image: linear-gradient(45deg, #00f 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #00f 75%),
+    linear-gradient(45deg, transparent 75%, #00f 75%), linear-gradient(45deg, #00f 25%, #000 25%);
+}
+.checkered {
+  opacity: 0.25;
+  background-size: 10px 10px;
+  background-position:
+    0 0,
+    0 0,
+    -5px -5px,
+    5px 5px;
+}
+</style>
diff --git a/playground/vue/src/pages/events/index.vue b/playground/vue/src/pages/events/index.vue
index 41e098405..887bffe6e 100644
--- a/playground/vue/src/pages/events/index.vue
+++ b/playground/vue/src/pages/events/index.vue
@@ -21,25 +21,23 @@ const { stopPropagation } = useControls({
 })
 
 function onClick(ev: ThreeEvent<MouseEvent>) {
-  console.log('click', ev)
   if (stopPropagation.value) { ev.stopPropagation() }
-  ev.object.material.color.set('#008080')
+  ev.eventObject.material?.color.set('#008080')
 }
 
 function onDoubleClick(ev: ThreeEvent<MouseEvent>) {
-  console.log('double-click', ev)
   if (stopPropagation.value) { ev.stopPropagation() }
-  ev.object.material.color.set('#FFD700')
+  ev.eventObject.material.color.set('#FFD700')
 }
 
 function onPointerEnter(ev: ThreeEvent<MouseEvent>) {
   if (stopPropagation.value) { ev.stopPropagation() }
-  ev.object.material.color.set('#CCFF03')
+  ev.eventObject.material.color.set('#CCFF03')
 }
 
 function onPointerLeave(ev: ThreeEvent<MouseEvent>) {
   if (stopPropagation.value) { ev.stopPropagation() }
-  /*  ev.object.material.color.set('#efefef') */
+  ev.eventObject.material.color.set('#efefef')
 }
 
 function onPointerMove(ev: ThreeEvent<MouseEvent>) {
@@ -47,14 +45,13 @@ function onPointerMove(ev: ThreeEvent<MouseEvent>) {
 }
 
 function onContextMenu(ev: ThreeEvent<MouseEvent>) {
-  console.log('context-menu', ev)
   if (stopPropagation.value) { ev.stopPropagation() }
-  ev.object.material.color.set('#FF4500')
+  ev.eventObject.material.color.set('#FF4500')
 }
 
 function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
-  console.log('pointer-missed', ev)
   if (stopPropagation.value) { ev.stopPropagation() }
+  ev.eventObject.material.color.set('#000000')
 }
 </script>
 
@@ -79,12 +76,12 @@ function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
           :key="`${[x, y, z]}`"
           :position="[x, y, z]"
           @click="onClick"
-          @double-click="onDoubleClick"
-          @pointer-enter="onPointerEnter"
-          @pointer-leave="onPointerLeave"
-          @pointer-move="onPointerMove"
-          @context-menu="onContextMenu"
-          @pointer-missed="onPointerMissed"
+          @dblclick="onDoubleClick"
+          @pointerenter="onPointerEnter"
+          @pointerleave="onPointerLeave"
+          @pointermove="onPointerMove"
+          @contextmenu="onContextMenu"
+          @pointermissed="onPointerMissed"
         >
           <TresBoxGeometry :args="[1, 1, 1]" />
           <TresMeshToonMaterial color="#efefef" />
diff --git a/playground/vue/src/pages/events/propagation/Box.vue b/playground/vue/src/pages/events/propagation/Box.vue
deleted file mode 100644
index 3409cdae0..000000000
--- a/playground/vue/src/pages/events/propagation/Box.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { Color } from 'three'
-import { ref, shallowRef } from 'vue'
-
-const props = defineProps(['position', 'name'])
-
-// TODO: Once we have troika text in cientos, display the count over each box
-const count = ref(0)
-const boxRef = shallowRef()
-
-// Event Testing Colors
-const black = new Color('black')
-const green = new Color('green')
-
-const blue = new Color('blue')
-
-// Once the box has flashed green, lerp it back to black
-const { onLoop } = useRenderLoop()
-onLoop(() => {
-  boxRef.value?.material.color.lerp(black, 0.1)
-})
-
-// onClick flash the box a color and update the counter
-function handleClick(color: Color, ev) {
-  count.value++
-  ev?.eventObject?.material.color.set(color)
-  // eslint-disable-next-line no-console
-  console.log(`Box ${boxRef.value.name} count=${count.value}`)
-}
-</script>
-
-<template>
-  <TresMesh
-    ref="boxRef"
-    v-bind="props"
-    @click.self="ev => handleClick(green, ev)"
-    @pointer-missed="ev => handleClick(blue, ev)"
-  >
-    <TresBoxGeometry />
-    <TresMeshStandardMaterial />
-    <slot></slot>
-  </TresMesh>
-</template>
diff --git a/playground/vue/src/pages/events/propagation/index.vue b/playground/vue/src/pages/events/propagation/index.vue
deleted file mode 100644
index f2c921c33..000000000
--- a/playground/vue/src/pages/events/propagation/index.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import {
-  TresCanvas,
-} from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { onUnmounted, ref } from 'vue'
-import Box from './Box.vue'
-import '@tresjs/leches/styles'
-
-const gl = {
-  clearColor: '#202020',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-const showBox = ref(true)
-
-const intervalRef = setInterval(() => {
-  // showBox.value = !showBox.value;
-}, 1000)
-
-onUnmounted(() => {
-  clearInterval(intervalRef)
-})
-</script>
-
-<template>
-  <TresCanvas
-    window-size
-    v-bind="gl"
-    @pointer-missed="event => console.log('pointer-missed', event)"
-  >
-    <TresPerspectiveCamera
-      :position="[0, 0, 6]"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-
-    <TresDirectionalLight
-      :intensity="1"
-      :position="[1, 1, 1]"
-    />
-    <TresAmbientLight :intensity="1" />
-    <Box
-      :position="[0, 1.5, 0]"
-      name="A0"
-    >
-      <Box
-        :position="[-0.66, -1, 0]"
-        name="B0"
-      >
-        <Box
-          :position="[-0.66, -1, 0]"
-          name="C0"
-        >
-          <Box
-            :position="[-0.66, -1, 0]"
-            name="D0"
-          />
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D1"
-          />
-        </Box>
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C1"
-        >
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D2"
-          />
-        </Box>
-      </Box>
-      <Box
-        :position="[0.66, -1, 0]"
-        name="B1"
-      >
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C2"
-        >
-          <Box
-            v-if="showBox"
-            :position="[0.66, -1, 0]"
-            name="D3"
-          />
-        </Box>
-      </Box>
-    </Box>
-    <Box
-      :position="[0, 1.5, -3]"
-      name="A0"
-    >
-      <Box
-        :position="[-0.66, -1, 0]"
-        name="B0"
-      >
-        <Box
-          :position="[-0.66, -1, 0]"
-          name="C0"
-        >
-          <Box
-            :position="[-0.66, -1, 0]"
-            name="D0"
-          />
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D1"
-          />
-        </Box>
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C1"
-        >
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D2"
-          />
-        </Box>
-      </Box>
-      <Box
-        :position="[0.66, -1, 0]"
-        name="B1"
-      >
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C2"
-        >
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D3"
-          />
-        </Box>
-      </Box>
-    </Box>
-    <Box
-      :position="[0, 1.5, -6]"
-      name="A0"
-    >
-      <Box
-        :position="[-0.66, -1, 0]"
-        name="B0"
-      >
-        <Box
-          :position="[-0.66, -1, 0]"
-          name="C0"
-        >
-          <Box
-            :position="[-0.66, -1, 0]"
-            name="D0"
-          />
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D1"
-          />
-        </Box>
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C1"
-        >
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D2"
-          />
-        </Box>
-      </Box>
-      <Box
-        :position="[0.66, -1, 0]"
-        name="B1"
-      >
-        <Box
-          :position="[0.66, -1, 0]"
-          name="C2"
-        >
-          <Box
-            :position="[0.66, -1, 0]"
-            name="D3"
-          />
-        </Box>
-      </Box>
-    </Box>
-  </TresCanvas>
-</template>
diff --git a/playground/vue/src/pages/events/FpsDropsReproduction.vue b/playground/vue/src/pages/issues/711/index.vue
similarity index 77%
rename from playground/vue/src/pages/events/FpsDropsReproduction.vue
rename to playground/vue/src/pages/issues/711/index.vue
index 03a5fd35a..b3984a60a 100644
--- a/playground/vue/src/pages/events/FpsDropsReproduction.vue
+++ b/playground/vue/src/pages/issues/711/index.vue
@@ -22,6 +22,13 @@ const gl = {
 </script>
 
 <template>
+  <OverlayInfo>
+    <h1>FPS Drops Reproduction</h1>
+    <h2>Issue</h2>
+    <p><a href="https://github.com/Tresjs/tres/issues/711">#711: V4 drops fps</a></p>
+    <h2>Setup</h2>
+    <p>This scene contains a geometry with lots of vertices. The containing Mesh does not have any attached events – and neither do its ancestors. It should not be hit-tested.</p>
+  </OverlayInfo>
   <TresCanvas clear-color="#ccc" v-bind="gl" window-size preset="realistic">
     <StatsGl />
     <TresPerspectiveCamera :position="[0, 0, 15]" :args="[45, 1, 0.1, 1000]" />
diff --git a/playground/vue/src/router/routes/events.ts b/playground/vue/src/router/routes/events.ts
index b859082b6..916bbfcf7 100644
--- a/playground/vue/src/router/routes/events.ts
+++ b/playground/vue/src/router/routes/events.ts
@@ -5,13 +5,53 @@ export const eventsRoutes = [
     component: () => import('../../pages/events/index.vue'),
   },
   {
-    path: '/events/fps-drops-repro',
-    name: 'FSP Drops Reproduction',
-    component: () => import('../../pages/events/FpsDropsReproduction.vue'),
+    path: '/no-events',
+    name: 'No Events',
+    component: () => import('../../pages/events/NoEvents.vue'),
   },
   {
     path: '/events/dynamic-objects',
     name: 'Dynamic Objects',
     component: () => import('../../pages/events/DynamicObjects.vue'),
   },
+  {
+    path: '/events/target-enabled',
+    name: 'DOM Target/Enabled',
+    component: () => import('../../pages/events/TargetEnabled.vue'),
+  },
+  {
+    path: '/events/pointer-enter-leave',
+    name: 'PointerEnter/Leave',
+    component: () => import('../../pages/events/PointerEnterLeave.vue'),
+  },
+  {
+    path: '/events/stop-propagation',
+    name: 'PointerEnter/StopPropagation',
+    component: () => import('../../pages/events/StopPropagation.vue'),
+  },
+  {
+    path: '/events/remove-interactivity',
+    name: 'RemoveInteractivity',
+    component: () => import('../../pages/events/RemoveInteractivity.vue'),
+  },
+  {
+    path: '/events/connect',
+    name: 'Connect (add/remove event listeners)',
+    component: () => import('../../pages/events/Connect.vue'),
+  },
+  {
+    path: '/events/filter',
+    name: 'Filter (Intersections)',
+    component: () => import('../../pages/events/Filter.vue'),
+  },
+  {
+    path: '/events/blocking',
+    name: 'Blocking (solid objects)',
+    component: () => import('../../pages/events/Blocking.vue'),
+  },
+  {
+    path: '/events/deprecated-event-names',
+    name: 'Deprecated Event Names',
+    component: () => import('../../pages/events/DeprecatedEventNames.vue'),
+  },
 ]
diff --git a/playground/vue/src/router/routes/issues.ts b/playground/vue/src/router/routes/issues.ts
index 7f4bd2bfe..25760107e 100644
--- a/playground/vue/src/router/routes/issues.ts
+++ b/playground/vue/src/router/routes/issues.ts
@@ -9,6 +9,11 @@ export const issuesRoutes = [
     name: '#701: <primitive> in Cientos v4',
     component: () => import('../../pages/issues/701-cientos-v4/index.vue'),
   },
+  {
+    path: '/events/711-fps-drops-repro',
+    name: '#711: FPS Drops Reproduction (events)',
+    component: () => import('../../pages/issues/711/index.vue'),
+  },
   {
     path: '/issues/717vIf',
     name: '#717: v-if',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 973355679..cc9df31fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -443,10 +443,6 @@ packages:
     resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.22.15':
-    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-module-imports@7.24.7':
     resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
     engines: {node: '>=6.9.0'}
@@ -467,10 +463,6 @@ packages:
     resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.7':
-    resolution: {integrity: sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-plugin-utils@7.24.8':
     resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
     engines: {node: '>=6.9.0'}
@@ -606,8 +598,8 @@ packages:
     resolution: {integrity: sha512-Kf2ZcZVqsKbtYhlA7sP0z5A3q5hmCVYMKMWRWNK/5OVwHIve3JY1djVRmIVAx8FMueLIfZGKQDIILK2w8zO4mg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.24.7':
-    resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
+  '@babel/traverse@7.25.6':
+    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/template@7.25.0':
@@ -1315,8 +1307,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@inquirer/figures@1.0.3':
-    resolution: {integrity: sha512-ErXXzENMH5pJt5/ssXV0DfWUZqly8nGzf0UcBV9xTnP+KyffE2mqyxIMBrZ8ijQck2nU0TQm40EQB53YreyWHw==}
+  '@inquirer/figures@1.0.5':
+    resolution: {integrity: sha512-79hP/VWdZ2UVc9bFGJnoQ/lQMpL74mGgzSYX1xUqCVk7/v73vJCMw1VuyWN1jGkZ9B3z7THAbySqGbCNefcjfA==}
     engines: {node: '>=18'}
 
   '@ioredis/commands@1.2.0':
@@ -1615,8 +1607,8 @@ packages:
     resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
     engines: {node: '>=12.22.0'}
 
-  '@pnpm/npm-conf@2.2.2':
-    resolution: {integrity: sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==}
+  '@pnpm/npm-conf@2.3.1':
+    resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
     engines: {node: '>=12'}
 
   '@polka/url@1.0.0-next.25':
@@ -2215,8 +2207,8 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  '@types/webxr@0.5.19':
-    resolution: {integrity: sha512-4hxA+NwohSgImdTSlPXEqDqqFktNgmTXQ05ff1uWam05tNGroCMp4G+4XVl6qWm1p7GQ/9oD41kAYsSssF6Mzw==}
+  '@types/webxr@0.5.20':
+    resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
 
   '@typescript-eslint/eslint-plugin@8.4.0':
     resolution: {integrity: sha512-rg8LGdv7ri3oAlenMACk9e+AR4wUV0yrrG+XKsGKOK0EVgeEDqurkXMPILG2836fW4ibokTB5v4b6Z9+GYQDEw==}
@@ -2895,8 +2887,8 @@ packages:
   '@vueuse/core@11.0.3':
     resolution: {integrity: sha512-RENlh64+SYA9XMExmmH1a3TPqeIuJBNNB/63GT35MZI+zpru3oMRUA6cEFr9HmGqEgUisurwGwnIieF6qu3aXw==}
 
-  '@vueuse/integrations@10.11.0':
-    resolution: {integrity: sha512-Pp6MtWEIr+NDOccWd8j59Kpjy5YDXogXI61Kb1JxvSfVBO8NzFQkmrKmSZz47i+ZqHnIzxaT38L358yDHTncZg==}
+  '@vueuse/integrations@10.11.1':
+    resolution: {integrity: sha512-Y5hCGBguN+vuVYTZmdd/IMXLOdfS60zAmDmFYc4BKBcMUPZH1n4tdyDECCPjXm0bNT3ZRUy1xzTLGaUje8Xyaw==}
     peerDependencies:
       async-validator: ^4
       axios: ^1
@@ -4058,8 +4050,8 @@ packages:
   electron-to-chromium@1.5.17:
     resolution: {integrity: sha512-Q6Q+04tjC2KJ8qsSOSgovvhWcv5t+SmpH6/YfAWmhpE5/r+zw6KQy1/yWVFFNyEBvy68twTTXr2d5eLfCq7QIw==}
 
-  emoji-regex@10.3.0:
-    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+  emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -4137,10 +4129,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-
   escodegen@2.1.0:
     resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
     engines: {node: '>=6.0'}
@@ -4342,10 +4330,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-
   esquery@1.6.0:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
@@ -4825,8 +4809,8 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
   ignore@5.3.2:
@@ -5116,9 +5100,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-tokens@9.0.0:
-    resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==}
-
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -5366,8 +5347,8 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
-  macos-release@3.2.0:
-    resolution: {integrity: sha512-fSErXALFNsnowREYZ49XCdOHF8wOPWuFOGQrAhP7x5J/BqQv+B02cNsTykGpDgRVx43EKg++6ANmTaGTtW+hUA==}
+  macos-release@3.3.0:
+    resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   magic-string-ast@0.6.2:
@@ -5431,8 +5412,8 @@ packages:
   micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
 
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
   mime-db@1.52.0:
@@ -6196,8 +6177,8 @@ packages:
   potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
 
-  preact@10.22.1:
-    resolution: {integrity: sha512-jRYbDDgMpIb5LHq3hkI0bbl+l/TQ9UnkdQ0ww+lp+4MMOdqaUYdFc5qeyP+IV8FAd/2Em7drVPeKdQxsiWCf/A==}
+  preact@10.23.2:
+    resolution: {integrity: sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==}
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -6251,10 +6232,6 @@ packages:
     resolution: {integrity: sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==}
     engines: {node: '>=12.20'}
 
-  qrcode-terminal@0.12.0:
-    resolution: {integrity: sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==}
-    hasBin: true
-
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -6808,9 +6785,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svg-tags@1.0.0:
-    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
     engines: {node: '>=14.0.0'}
@@ -7088,8 +7062,8 @@ packages:
   ufo@0.8.6:
     resolution: {integrity: sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==}
 
-  ufo@1.5.3:
-    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
@@ -7419,12 +7393,6 @@ packages:
       '@nuxt/kit':
         optional: true
 
-  vite-plugin-qrcode@0.2.3:
-    resolution: {integrity: sha512-TFzhf20v29hnh2XEoZ2kxg8Ff/ui36pR7PGDaHaKEmsQaRagv31XacHxbw5O07HcC1Mkr4tKcYb+PFASSceHmw==}
-    engines: {node: ^14.13.1 || ^16.0.0 || >=18}
-    peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-
   vite-plugin-require-transform@1.0.21:
     resolution: {integrity: sha512-A3SrHhVg9tCW35O7E8kcuB71YTEdVd3EaM1zh6gbH4zxy4WzXSfcNf0UiWmaHHhr6wdFhiiAGdpR6S0SUxXkGQ==}
 
@@ -8084,7 +8052,7 @@ snapshots:
       '@babel/helper-optimise-call-expression': 7.24.7
       '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.7)
       '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/traverse': 7.25.6
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -8161,7 +8129,6 @@ snapshots:
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-module-imports': 7.24.7
       '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
       '@babel/helper-validator-identifier': 7.24.7
     transitivePeerDependencies:
       - supports-color
@@ -8190,6 +8157,7 @@ snapshots:
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-member-expression-to-functions': 7.24.7
       '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/traverse': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8254,7 +8222,7 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.0
 
-  '@babel/parser@7.24.7':
+  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/types': 7.24.7
 
@@ -8403,14 +8371,11 @@ snapshots:
   '@babel/traverse@7.24.7':
     dependencies:
       '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      debug: 4.3.5
+      '@babel/generator': 7.25.6
+      '@babel/parser': 7.25.6
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.6
+      debug: 4.3.6
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -8912,7 +8877,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
@@ -9518,7 +9483,7 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.10
 
-  '@pnpm/npm-conf@2.2.2':
+  '@pnpm/npm-conf@2.3.1':
     dependencies:
       '@pnpm/config.env-replace': 1.1.0
       '@pnpm/network.ca-file': 1.0.2
@@ -10537,6 +10502,14 @@ snapshots:
       meshoptimizer: 0.18.1
 
   '@types/three@0.163.0':
+    dependencies:
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.20
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+
+  '@types/three@0.164.1':
     dependencies:
       '@tweenjs/tween.js': 23.1.2
       '@types/stats.js': 0.17.3
@@ -10591,7 +10564,7 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@types/webxr@0.5.19': {}
+  '@types/webxr@0.5.20': {}
 
   '@typescript-eslint/eslint-plugin@8.4.0(@typescript-eslint/parser@8.4.0(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.1(jiti@1.21.6))(typescript@5.5.4)':
     dependencies:
@@ -10712,6 +10685,7 @@ snapshots:
       vite: 5.4.3(@types/node@22.5.2)(terser@5.31.6)
     transitivePeerDependencies:
       - rollup
+      - supports-color
 
   '@unocss/astro@0.59.4(rollup@4.18.0)(vite@5.4.3(@types/node@22.5.2)(terser@5.31.6))':
     dependencies:
@@ -10773,6 +10747,7 @@ snapshots:
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
       - rollup
+      - supports-color
 
   '@unocss/cli@0.59.4(rollup@4.18.0)':
     dependencies:
@@ -11422,6 +11397,7 @@ snapshots:
       vite: 5.4.3(@types/node@22.5.2)(terser@5.31.6)
     transitivePeerDependencies:
       - rollup
+      - supports-color
 
   '@unocss/vite@0.59.4(rollup@4.18.0)(vite@5.4.3(@types/node@22.5.2)(terser@5.31.6))':
     dependencies:
@@ -11619,13 +11595,13 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
-      debug: 4.3.5
+      debug: 4.3.6
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.1.7
-      magic-string: 0.30.10
-      magicast: 0.3.4
+      magic-string: 0.30.11
+      magicast: 0.3.5
       std-env: 3.7.0
       test-exclude: 7.0.1
       tinyrainbow: 1.2.0
@@ -12784,7 +12760,7 @@ snapshots:
       handlebars: 4.7.8
       json-stringify-safe: 5.0.1
       meow: 12.1.1
-      semver: 7.6.2
+      semver: 7.6.3
       split2: 4.2.0
 
   conventional-changelog@5.1.0:
@@ -13111,7 +13087,7 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.6.2
+      semver: 7.6.3
 
   ee-first@1.1.1: {}
 
@@ -13242,8 +13218,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  escape-string-regexp@5.0.0: {}
-
   escodegen@2.1.0:
     dependencies:
       esprima: 4.0.1
@@ -13549,10 +13523,6 @@ snapshots:
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
-    dependencies:
-      estraverse: 5.3.0
-
   esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
@@ -13640,7 +13610,7 @@ snapshots:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.7
+      micromatch: 4.0.8
 
   fast-json-stable-stringify@2.1.0: {}
 
@@ -13900,7 +13870,7 @@ snapshots:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
       glob: 7.2.3
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -14065,7 +14035,7 @@ snapshots:
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.5
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -14133,7 +14103,7 @@ snapshots:
 
   inquirer@9.3.2:
     dependencies:
-      '@inquirer/figures': 1.0.3
+      '@inquirer/figures': 1.0.5
       ansi-escapes: 4.3.2
       cli-width: 4.1.0
       external-editor: 3.1.0
@@ -14314,7 +14284,7 @@ snapshots:
   istanbul-lib-source-maps@5.0.6:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.3.5
+      debug: 4.3.6
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -14354,8 +14324,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-tokens@9.0.0: {}
-
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
@@ -14625,7 +14593,7 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
-  macos-release@3.2.0: {}
+  macos-release@3.3.0: {}
 
   magic-string-ast@0.6.2:
     dependencies:
@@ -14633,7 +14601,7 @@ snapshots:
 
   magic-string@0.30.10:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   magic-string@0.30.11:
     dependencies:
@@ -14651,7 +14619,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.6.3
 
   mark.js@8.11.1: {}
 
@@ -14690,7 +14658,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.7:
+  micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
@@ -15198,7 +15166,7 @@ snapshots:
 
   os-name@5.1.0:
     dependencies:
-      macos-release: 3.2.0
+      macos-release: 3.3.0
       windows-release: 5.1.1
 
   os-tmpdir@1.0.2: {}
@@ -15593,7 +15561,7 @@ snapshots:
 
   potpack@1.0.2: {}
 
-  preact@10.22.1: {}
+  preact@10.23.2: {}
 
   prelude-ls@1.2.1: {}
 
@@ -15641,8 +15609,6 @@ snapshots:
     dependencies:
       escape-goat: 4.0.0
 
-  qrcode-terminal@0.12.0: {}
-
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -15763,7 +15729,7 @@ snapshots:
 
   registry-auth-token@5.0.2:
     dependencies:
-      '@pnpm/npm-conf': 2.2.2
+      '@pnpm/npm-conf': 2.3.1
 
   registry-url@6.0.1:
     dependencies:
@@ -16229,7 +16195,7 @@ snapshots:
 
   string-width@7.2.0:
     dependencies:
-      emoji-regex: 10.3.0
+      emoji-regex: 10.4.0
       get-east-asian-width: 1.2.0
       strip-ansi: 7.1.0
 
@@ -16303,8 +16269,6 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svg-tags@1.0.0: {}
-
   svgo@3.3.2:
     dependencies:
       '@trysound/sax': 0.2.0
@@ -16586,7 +16550,7 @@ snapshots:
 
   ufo@0.8.6: {}
 
-  ufo@1.5.3: {}
+  ufo@1.5.4: {}
 
   ufo@1.5.4: {}
 
@@ -16599,7 +16563,9 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.10
       defu: 6.1.4
-      jiti: 1.21.6
+      importx: 0.3.11
+    transitivePeerDependencies:
+      - supports-color
 
   unconfig@0.5.5:
     dependencies:
@@ -17304,9 +17270,9 @@ snapshots:
       '@vitest/spy': 2.0.5
       '@vitest/utils': 2.0.5
       chai: 5.1.1
-      debug: 4.3.5
+      debug: 4.3.6
       execa: 8.0.1
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       pathe: 1.1.2
       std-env: 3.7.0
       tinybench: 2.8.0
@@ -17588,7 +17554,7 @@ snapshots:
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index e1c40103c..8b94364c9 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -16,6 +16,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
+import type { EventManagerProps } from 'src/utils/createEventManager/createEventManager'
 import type {
   ColorSpace,
   ShadowMapType,
@@ -23,8 +24,8 @@ import type {
   WebGLRendererParameters,
 } from 'three'
 import type { App, Ref } from 'vue'
-import pkg from '../../package.json'
 
+import pkg from '../../package.json'
 import {
   type TresContext,
   useLogger,
@@ -33,14 +34,14 @@ import {
 import { extend } from '../core/catalogue'
 import { nodeOps } from '../core/nodeOps'
 import { registerTresDevtools } from '../devtools'
-import { disposeObject3D } from '../utils/'
 
+import { disposeObject3D } from '../utils/'
 import type { RendererPresetsType } from '../composables/useRenderer/const'
 import type { TresCamera, TresObject, TresScene } from '../types/'
 
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {
-  // required by for useRenderer
+  // required by useRenderer
   shadows?: boolean
   clearColor?: string
   toneMapping?: ToneMapping
@@ -56,6 +57,11 @@ export interface TresCanvasProps
   preset?: RendererPresetsType
   windowSize?: boolean
   disableRender?: boolean
+
+  // NOTE: used by `eventManager`
+  eventsEnabled?: boolean
+  eventsTarget?: EventTarget
+  events?: EventManagerProps
 }
 
 const props = withDefaults(defineProps<TresCanvasProps>(), {
@@ -71,24 +77,14 @@ const props = withDefaults(defineProps<TresCanvasProps>(), {
   logarithmicDepthBuffer: undefined,
   failIfMajorPerformanceCaveat: undefined,
   renderMode: 'always',
+  eventsEnabled: true,
+  events: undefined,
 })
 
 // Define emits for Pointer events, pass `emit` into useTresEventManager so we can emit events off of TresCanvas
 // Not sure of this solution, but you have to have emits defined on the component to emit them in vue
 const emit = defineEmits([
   'render',
-  'click',
-  'double-click',
-  'context-menu',
-  'pointer-move',
-  'pointer-up',
-  'pointer-down',
-  'pointer-enter',
-  'pointer-leave',
-  'pointer-over',
-  'pointer-out',
-  'pointer-missed',
-  'wheel',
   'ready',
 ])
 
@@ -168,6 +164,7 @@ onMounted(() => {
     windowSize: props.windowSize ?? false,
     disableRender: disableRender.value ?? false,
     rendererOptions: props,
+    props,
     emit,
   })
 
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 40009218d..a98ed54c7 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -4,12 +4,10 @@ export * from './useCamera/'
 export * from './useLoader'
 export * from './useLogger'
 export * from './useLoop'
-export * from './useRaycaster'
 export * from './useRenderer/'
 export * from './useRenderLoop'
 export * from './useSeek'
 export * from './useTexture'
 export * from './useTresContextProvider'
-export * from './useTresEventManager'
 export { onTresReady } from './useTresReady'
 export { UseTexture }
diff --git a/src/composables/useRaycaster/index.ts b/src/composables/useRaycaster/index.ts
deleted file mode 100644
index aee0f440a..000000000
--- a/src/composables/useRaycaster/index.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
-import { Vector2, Vector3 } from 'three'
-import { computed, onUnmounted, shallowRef } from 'vue'
-import type { EventHook } from '@vueuse/core'
-import type { DomEvent, TresCamera, TresEvent, TresInstance } from 'src/types'
-import type { Intersection, Object3D, Object3DEventMap } from 'three'
-
-import type { ShallowRef } from 'vue'
-import type { TresContext } from '../useTresContextProvider'
-
-export const useRaycaster = (
-  objectsWithEvents: ShallowRef<TresInstance[]>,
-  ctx: TresContext,
-) => {
-  // having a separate computed makes useElementBounding work
-  const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
-  const intersects: ShallowRef<Intersection[]> = shallowRef([])
-  const { x, y } = usePointer({ target: canvas })
-  let delta = 0
-
-  const { width, height, top, left } = useElementBounding(canvas)
-
-  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 (!ctx.camera.value) { return }
-
-    ctx.raycaster.value.setFromCamera(new Vector2(x, y), ctx.camera.value)
-
-    intersects.value = ctx.raycaster.value.intersectObjects(objectsWithEvents.value as Object3D<Object3DEventMap>[], true)
-    return intersects.value
-  }
-
-  const getIntersects = (event?: DomEvent) => {
-    const pointerPosition = getRelativePointerPosition({
-      x: event?.clientX ?? x.value,
-      y: event?.clientY ?? y.value,
-    })
-    if (!pointerPosition) { return [] }
-
-    return getIntersectsByRelativePointerPosition(pointerPosition) || []
-  }
-
-  const eventHookClick = createEventHook<TresEvent>()
-  const eventHookDblClick = createEventHook<TresEvent>()
-  const eventHookPointerMove = createEventHook<TresEvent>()
-  const eventHookPointerUp = createEventHook<TresEvent>()
-  const eventHookPointerDown = createEventHook<TresEvent>()
-  const eventHookPointerMissed = createEventHook<TresEvent>()
-  const eventHookContextMenu = createEventHook<TresEvent>()
-  const eventHookWheel = createEventHook<TresEvent>()
-
-  /* ({
-    ...DomEvent                   // All the original event data
-    ...Intersection               // All of Three's intersection data - see note 2
-    intersections: Intersection[] // The first intersection of each intersected object
-    object: Object3D              // The object that was actually hit (added to event payload in TresEventManager)
-    eventObject: Object3D         // The object that registered the event (added to event payload in TresEventManager)
-    unprojectedPoint: Vector3     // Camera-unprojected point
-    ray: Ray                      // The ray that was used to strike the object
-    camera: Camera                // The camera that was used in the raycaster
-    sourceEvent: DomEvent         // A reference to the host event
-    delta: number                 // Distance between mouse down and mouse up event in pixels
-  }) => ... */
-
-  // Mouse Event props aren't enumerable, so we can't be simple and use Object.assign or the spread operator
-  // Manually copies the mouse event props into a new object that we can spread in triggerEventHook
-  function copyMouseEventProperties(event: MouseEvent | PointerEvent | WheelEvent) {
-    const mouseEventProperties: any = {}
-
-    for (const property in event) {
-      // Copy all non-function properties
-      if (typeof property !== 'function') { mouseEventProperties[property] = (event as Record<string, any>)[property] }
-    }
-    return mouseEventProperties
-  }
-
-  const triggerEventHook = (eventHook: EventHook, event: PointerEvent | MouseEvent | WheelEvent) => {
-    const eventProperties = copyMouseEventProperties(event)
-    const unprojectedPoint = new Vector3(event?.clientX, event?.clientY, 0).unproject(ctx.camera?.value as TresCamera)
-    eventHook.trigger({
-      ...eventProperties,
-      intersections: intersects.value,
-      // The unprojectedPoint is wrong, math needs to be fixed
-      unprojectedPoint,
-      ray: ctx.raycaster?.value.ray,
-      camera: ctx.camera?.value,
-      sourceEvent: event,
-      delta,
-      stopPropagating: false,
-    })
-  }
-
-  let previousPointerMoveEvent: PointerEvent | undefined
-  const onPointerMove = (event: PointerEvent) => {
-    // Update the raycast intersects
-    getIntersects(event)
-    triggerEventHook(eventHookPointerMove, event)
-    previousPointerMoveEvent = event
-  }
-
-  const forceUpdate = () => {
-    if (previousPointerMoveEvent) { onPointerMove(previousPointerMoveEvent) }
-  }
-
-  // a click event is fired whenever a pointerdown happened after pointerup on the same object
-  let mouseDownObject: Object3D | undefined
-  let mouseDownPosition: Vector2
-  let mouseUpPosition: Vector2
-
-  const onPointerDown = (event: PointerEvent) => {
-    mouseDownObject = intersects.value[0]?.object
-
-    delta = 0
-    mouseDownPosition = new Vector2(
-      event?.clientX ?? x.value,
-      event?.clientY ?? y.value,
-    )
-
-    triggerEventHook(eventHookPointerDown, event)
-  }
-
-  let previousClickObject: Object3D | undefined
-  let doubleClickConfirmed: boolean = false
-
-  const onPointerUp = (event: MouseEvent) => {
-    if (!(event instanceof PointerEvent)) { return } // prevents triggering twice on mobile devices
-
-    // We missed every object, trigger the pointer missed event
-    if (intersects.value.length === 0) {
-      triggerEventHook(eventHookPointerMissed, event)
-    }
-
-    if (mouseDownObject === intersects.value[0]?.object) {
-      mouseUpPosition = new Vector2(
-        event?.clientX ?? x.value,
-        event?.clientY ?? y.value,
-      )
-
-      // Compute the distance between the mouse down and mouse up events
-      delta = mouseDownPosition?.distanceTo(mouseUpPosition)
-
-      if (event.button === 0) {
-        // Left click
-        triggerEventHook(eventHookClick, event)
-
-        if (previousClickObject === intersects.value[0]?.object) {
-          doubleClickConfirmed = true
-        }
-        else {
-          previousClickObject = intersects.value[0]?.object
-          doubleClickConfirmed = false
-        }
-      }
-      else if (event.button === 2) {
-        // Right click
-        triggerEventHook(eventHookContextMenu, event)
-      }
-    }
-
-    triggerEventHook(eventHookPointerUp, event)
-  }
-
-  const onDoubleClick = (event: MouseEvent) => {
-    if (doubleClickConfirmed) {
-      triggerEventHook(eventHookDblClick, event)
-      previousClickObject = undefined
-      doubleClickConfirmed = false
-    }
-  }
-
-  const onPointerLeave = (event: PointerEvent) => triggerEventHook(eventHookPointerMove, event)
-
-  const onWheel = (event: WheelEvent) => triggerEventHook(eventHookWheel, event)
-
-  canvas.value.addEventListener('pointerup', onPointerUp)
-  canvas.value.addEventListener('pointerdown', onPointerDown)
-  canvas.value.addEventListener('pointermove', onPointerMove)
-  canvas.value.addEventListener('pointerleave', onPointerLeave)
-  canvas.value.addEventListener('dblclick', onDoubleClick)
-  canvas.value.addEventListener('wheel', onWheel)
-
-  onUnmounted(() => {
-    if (!canvas?.value) { return }
-    canvas.value.removeEventListener('pointerup', onPointerUp)
-    canvas.value.removeEventListener('pointerdown', onPointerDown)
-    canvas.value.removeEventListener('pointermove', onPointerMove)
-    canvas.value.removeEventListener('pointerleave', onPointerLeave)
-    canvas.value.removeEventListener('dblclick', onDoubleClick)
-    canvas.value.removeEventListener('wheel', onWheel)
-  })
-
-  return {
-    intersects,
-    onClick: (fn: (value: TresEvent) => void) => eventHookClick.on(fn).off,
-    onDblClick: (fn: (value: TresEvent) => void) => eventHookDblClick.on(fn).off,
-    onContextMenu: (fn: (value: TresEvent) => void) => eventHookContextMenu.on(fn).off,
-    onPointerMove: (fn: (value: TresEvent) => void) => eventHookPointerMove.on(fn).off,
-    onPointerUp: (fn: (value: TresEvent) => void) => eventHookPointerUp.on(fn).off,
-    onPointerDown: (fn: (value: TresEvent) => void) => eventHookPointerDown.on(fn).off,
-    onPointerMissed: (fn: (value: TresEvent) => void) => eventHookPointerMissed.on(fn).off,
-    onWheel: (fn: (value: TresEvent) => void) => eventHookWheel.on(fn).off,
-    forceUpdate,
-  }
-}
diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts
index 521f9176a..9b4f67678 100644
--- a/src/composables/useTresContextProvider/index.ts
+++ b/src/composables/useTresContextProvider/index.ts
@@ -5,12 +5,12 @@ import type { Camera, WebGLRenderer } from 'three'
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
 import { extend } from '../../core/catalogue'
 import { createRenderLoop } from '../../core/loop'
+import { type EventManager, useEventsOptions } from '../../utils/createEventManager'
 import { calculateMemoryUsage } from '../../utils/perf'
 import { useCamera } from '../useCamera'
 import { useRenderer } from '../useRenderer'
 import useSizes, { type SizesType } from '../useSizes'
 
-import { type TresEventManager, useTresEventManager } from '../useTresEventManager'
 import { useTresReady } from '../useTresReady'
 import type { RendererLoop } from '../../core/loop'
 import type { EmitEventFn, TresControl, TresObject, TresScene } from '../../types'
@@ -49,6 +49,7 @@ export interface PerformanceState {
 }
 
 export interface TresContext {
+  eventManager: EventManager
   scene: ShallowRef<TresScene>
   sizes: SizesType
   extend: (objects: any) => void
@@ -73,14 +74,11 @@ export interface TresContext {
   registerCamera: (maybeCamera: unknown) => void
   setCameraActive: (cameraOrUuid: Camera | string) => void
   deregisterCamera: (maybeCamera: unknown) => void
-  eventManager?: TresEventManager
+  parentContext?: TresContext
   // Events
   // Temporaly add the methods to the context, this should be handled later by the EventManager state on the context https://github.com/Tresjs/tres/issues/515
   // When thats done maybe we can short the names of the methods since the parent will give the context.
-  registerObjectAtPointerEventHandler?: (object: TresObject) => void
-  deregisterObjectAtPointerEventHandler?: (object: TresObject) => void
-  registerBlockingObjectAtPointerEventHandler?: (object: TresObject) => void
-  deregisterBlockingObjectAtPointerEventHandler?: (object: TresObject) => void
+  events?: { enabled: MaybeRefOrGetter<boolean> }
 }
 
 export function useTresContextProvider({
@@ -89,6 +87,7 @@ export function useTresContextProvider({
   windowSize,
   disableRender,
   rendererOptions,
+  props,
   emit,
 }: {
   scene: TresScene
@@ -96,6 +95,7 @@ export function useTresContextProvider({
   windowSize: MaybeRefOrGetter<boolean>
   disableRender: MaybeRefOrGetter<boolean>
   rendererOptions: UseRendererOptions
+  props: any
   emit: EmitEventFn
 
 }): TresContext {
@@ -145,7 +145,7 @@ export function useTresContextProvider({
     },
   )
 
-  const ctx: TresContext = {
+  const partialContext: Omit<TresContext, 'eventManager'> & { eventManager?: EventManager } = {
     sizes,
     scene: localScene,
     camera,
@@ -175,6 +175,9 @@ export function useTresContextProvider({
     loop: createRenderLoop(),
   }
 
+  partialContext.eventManager = useEventsOptions(props, partialContext as TresContext, emit).eventManager
+  const ctx = partialContext as TresContext
+
   provide('useTres', ctx)
 
   // Add context to scene local state
@@ -207,9 +210,8 @@ export function useTresContextProvider({
   ctx.loop.start()
 
   onTresReady(() => {
-    emit('ready', ctx)
     ctx.loop.setReady(true)
-    useTresEventManager(scene, ctx, emit)
+    emit('ready', ctx)
   })
 
   onUnmounted(() => {
diff --git a/src/composables/useTresEventManager/index.ts b/src/composables/useTresEventManager/index.ts
deleted file mode 100644
index 5d8a3740f..000000000
--- a/src/composables/useTresEventManager/index.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import { shallowRef } from 'vue'
-import type { EmitEventFn, EmitEventName, Intersection, TresEvent, TresInstance, TresObject } from 'src/types'
-import type { Object3D, Object3DEventMap, Scene } from 'three'
-import { hyphenate } from '../../utils'
-import * as is from '../../utils/is'
-import { useRaycaster } from '../useRaycaster'
-import type { TresContext } from '../useTresContextProvider'
-
-export interface TresEventManager {
-  /**
-   * Forces the event system to refire events with the previous mouse event
-   */
-  forceUpdate: () => void
-  /**
-   * pointer-missed events by definition are fired when the pointer missed every object in the scene
-   * So we need to track them separately
-   * Note: These are used in nodeOps
-   */
-  registerObject: (object: unknown) => void
-  deregisterObject: (object: unknown) => void
-  registerPointerMissedObject: (object: unknown) => void
-  deregisterPointerMissedObject: (object: unknown) => void
-}
-
-function executeEventListeners(
-  listeners: (event: TresEvent) => void | ((event: TresEvent) => void)[],
-  event: TresEvent,
-) {
-  // Components with multiple event listeners will have an array of functions
-  if (Array.isArray(listeners)) {
-    for (const listener of listeners) {
-      listener(event)
-    }
-  }
-
-  // Single listener will be a function
-  if (typeof listeners === 'function') {
-    listeners(event)
-  }
-}
-
-export function useTresEventManager(
-  scene: Scene,
-  context: TresContext,
-  emit: EmitEventFn,
-) {
-  const _scene = shallowRef<Scene>()
-  const _context = shallowRef<TresContext>()
-
-  if (scene) { _scene.value = scene }
-  if (context) { _context.value = context }
-
-  const hasEvents = (object: TresInstance) => object.__tres?.eventCount > 0
-  const hasChildrenWithEvents = (object: TresInstance) => object.children?.some((child: TresInstance) => hasChildrenWithEvents(child)) || hasEvents(object)
-  // TODO: Optimize to not hit test on the whole scene
-  const objectsWithEvents = shallowRef((_scene.value?.children as TresInstance[]).filter(hasChildrenWithEvents) || [])
-
-  /**
-   * propogateEvent
-   *
-   * Propogates an event to all intersected objects and their parents
-   * @param eventName - The name of the event to propogate
-   * @param event - The event object to propogate
-   */
-  function propogateEvent(eventName: string, event: TresEvent) {
-    // Array of objects we've already propogated to
-    const duplicates = []
-
-    // Flag that is set to true when the stopProgatingFn is called
-    const stopPropagatingFn = () => (event.stopPropagating = true)
-    event.stopPropagation = stopPropagatingFn
-
-    // Loop through all intersected objects and call their event handler
-    for (const intersection of event?.intersections) {
-      if (event.stopPropagating) { return }
-
-      // Add intersection data to event object
-      event = { ...event, ...intersection }
-
-      const { object } = intersection
-      event.eventObject = object as TresObject
-      executeEventListeners((object as Record<string, any>)[eventName], event)
-      duplicates.push(object)
-
-      // Propogate the event up the parent chain before moving on to the next intersected object
-      let parentObj = object.parent
-      while (parentObj !== null && !event.stopPropagating) {
-        // We've already been here, break the loop
-        if (duplicates.includes(parentObj)) {
-          break
-        }
-
-        // Sets eventObject to object that registered the event listener
-        event.eventObject = parentObj as TresObject
-        executeEventListeners((parentObj as Record<string, any>)[eventName], event)
-        duplicates.push(parentObj)
-        parentObj = parentObj.parent
-      }
-
-      // Convert eventName to kebab case and emit event from TresCanvas
-      const kebabEventName = hyphenate(eventName.slice(2)) as EmitEventName
-      emit(kebabEventName, { intersection, event })
-    }
-  }
-
-  const {
-    onClick,
-    onDblClick,
-    onContextMenu,
-    onPointerMove,
-    onPointerDown,
-    onPointerUp,
-    onPointerMissed,
-    onWheel,
-    forceUpdate,
-  } = useRaycaster(objectsWithEvents, context)
-
-  onPointerUp(event => propogateEvent('onPointerUp', event))
-  onPointerDown(event => propogateEvent('onPointerDown', event))
-  onClick(event => propogateEvent('onClick', event))
-  onDblClick(event => propogateEvent('onDoubleClick', event))
-  onContextMenu(event => propogateEvent('onContextMenu', event))
-  onWheel(event => propogateEvent('onWheel', event))
-
-  let prevIntersections: Intersection[] = []
-
-  onPointerMove((event) => {
-    // Current intersections mapped as meshes
-    const hits = event.intersections.map(({ object }) => object)
-
-    // Keep Backup of new intersections incase we overwrite due to a pointer out or leave event
-    const newIntersections = event.intersections as unknown as Intersection[]
-
-    // Previously intersected mesh is no longer intersected, fire onPointerLeave
-    prevIntersections.forEach(({ object: hit }) => {
-      if (
-        !hits.includes(hit as unknown as Object3D<Object3DEventMap>)
-      ) {
-        event.intersections = prevIntersections
-        propogateEvent('onPointerLeave', event)
-        propogateEvent('onPointerOut', event)
-      }
-    })
-
-    // Reset intersections to newIntersections
-    event.intersections = newIntersections
-
-    // Newly intersected mesh is not in the previous intersections, fire onPointerEnter
-    event.intersections.forEach(({ object: hit }) => {
-      if (!prevIntersections.includes(hit as unknown as Intersection)) {
-        propogateEvent('onPointerEnter', event)
-        propogateEvent('onPointerOver', event)
-      }
-    })
-
-    // Fire onPointerMove for all intersected objects
-    propogateEvent('onPointerMove', event)
-
-    // Update previous intersections
-    prevIntersections = event.intersections as unknown as Intersection[]
-  })
-
-  /**
-   * We need to track pointer missed objects separately
-   * since they will not be a part of the raycaster intersection
-   */
-  const pointerMissedObjects: TresObject[] = []
-  onPointerMissed((event: TresEvent) => {
-    // Flag that is set to true when the stopProgatingFn is called
-    const stopPropagatingFn = () => (event.stopPropagating = true)
-    event.stopPropagation = stopPropagatingFn
-
-    pointerMissedObjects.forEach((object: TresObject) => {
-      if (event.stopPropagating) { return }
-
-      // Set eventObject to object that registered the event
-      event.eventObject = object
-
-      executeEventListeners(object.onPointerMissed, event)
-    })
-    // Emit pointer-missed from TresCanvas
-    emit('pointer-missed', { event })
-  })
-
-  function registerObject(maybeTresObject: unknown) {
-    if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject)) {
-      objectsWithEvents.value.push(maybeTresObject as TresInstance)
-    }
-  }
-
-  function deregisterObject(maybeTresObject: unknown) {
-    if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject)) {
-      const index = objectsWithEvents.value.indexOf(maybeTresObject as TresInstance)
-      if (index > -1) {
-        objectsWithEvents.value.splice(index, 1)
-      }
-    }
-  }
-
-  function registerPointerMissedObject(maybeTresObject: unknown) {
-    if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject) && maybeTresObject.onPointerMissed) {
-      pointerMissedObjects.push(maybeTresObject)
-    }
-  }
-
-  function deregisterPointerMissedObject(maybeTresObject: unknown) {
-    if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject)) {
-      const index = pointerMissedObjects.indexOf(maybeTresObject)
-      if (index > -1) {
-        pointerMissedObjects.splice(index, 1)
-      }
-    }
-  }
-
-  // Attach methods to tres context
-  context.eventManager = {
-    forceUpdate,
-    registerObject,
-    deregisterObject,
-    registerPointerMissedObject,
-    deregisterPointerMissedObject,
-  }
-
-  return {
-    forceUpdate,
-    registerObject,
-    deregisterObject,
-    registerPointerMissedObject,
-    deregisterPointerMissedObject,
-  }
-}
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
index ce104570d..0e14e790c 100644
--- a/src/core/nodeOps.ts
+++ b/src/core/nodeOps.ts
@@ -10,23 +10,6 @@ import type { DisposeType, LocalState, TresInstance, TresObject, TresObject3D, T
 
 const { logError } = useLogger()
 
-const supportedPointerEvents = [
-  'onClick',
-  'onContextMenu',
-  'onPointerMove',
-  'onPointerEnter',
-  'onPointerLeave',
-  'onPointerOver',
-  'onPointerOut',
-  'onDoubleClick',
-  'onPointerDown',
-  'onPointerUp',
-  'onPointerCancel',
-  'onPointerMissed',
-  'onLostPointerCapture',
-  'onWheel',
-]
-
 export const nodeOps: (context: TresContext) => RendererOptions<TresObject, TresObject | null> = (context) => {
   const scene = context.scene.value
 
@@ -112,13 +95,9 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
     child = unboxTresPrimitive(childInstance)
     parent = unboxTresPrimitive(parentInstance)
 
-    if (child.__tres && child.__tres?.eventCount > 0) {
-      context.eventManager?.registerObject(child)
-    }
+    context.eventManager?.insert(child)
 
     context.registerCamera(child)
-    // NOTE: Track onPointerMissed objects separate from the scene
-    context.eventManager?.registerPointerMissedObject(child)
 
     if (childInstance.__tres.attach) {
       attach(parentInstance, childInstance, childInstance.__tres.attach)
@@ -148,9 +127,8 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
 
     if (!node) { return }
 
-    // Remove from event manager if necessary
-    if (node?.__tres && node.__tres?.eventCount > 0) {
-      context.eventManager?.deregisterObject(node)
+    if (dispose === undefined) {
+      context.eventManager?.remove(node)
     }
 
     // NOTE: Derive `dispose` value for this `remove` call and
@@ -272,10 +250,11 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
       else { delete node[key] }
       return
     }
-    // Has events
-    if (supportedPointerEvents.includes(prop) && node.__tres) {
-      node.__tres.eventCount += 1
+
+    if (context.eventManager?.patchProp(node, prop, prevValue, nextValue)) {
+      return
     }
+
     let finalKey = kebabToCamel(key)
     let target = root?.[finalKey]
 
@@ -322,12 +301,19 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
     if (value === '') { value = true }
     // Set prop, prefer atomic methods if applicable
     if (is.fun(target)) {
-      // don't call pointer event callback functions
+      // NOTE: Props piercing has led us to a function.
+      // This might be a function like `Object3D.lookAt`.
+      // Call the function.
+      if (is.arr(value)) { node[finalKey](...value) }
+      else { node[finalKey](value) }
+
+      // TODO:
+      // Above, we shouldn't call functions in cases
+      // where we set the callbacks in the code below.
+      // `:on-render="myOnRenderFn"`
+      // i.e.
+      // `Object3D.onRender(myOnRenderFn)`
 
-      if (!supportedPointerEvents.includes(prop)) {
-        if (is.arr(value)) { node[finalKey](...value) }
-        else { node[finalKey](value) }
-      }
       // NOTE: Set on* callbacks
       // Issue: https://github.com/Tresjs/tres/issues/360
       if (finalKey.startsWith('on') && is.fun(value)) {
diff --git a/src/types/index.ts b/src/types/index.ts
index 40a39187d..9eb90c776 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,7 +23,7 @@ export interface TresCatalogue {
   [name: string]: ConstructorRepresentation
 }
 
-export type EmitEventName = 'render' | 'ready' | 'click' | 'double-click' | 'context-menu' | 'pointer-move' | 'pointer-up' | 'pointer-down' | 'pointer-enter' | 'pointer-leave' | 'pointer-over' | 'pointer-out' | 'pointer-missed' | 'wheel'
+export type EmitEventName = 'render' | 'ready'
 export type EmitEventFn = (event: EmitEventName, ...args: any[]) => void
 export type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera
 
@@ -51,7 +51,7 @@ export interface LocalState {
   type: string
   eventCount: number
   root: TresContext
-  handlers: Partial<EventHandlers>
+  handlers: Record<string, { value: EventHandler<any>, called: number }>
   memoizedProps: { [key: string]: any }
   // NOTE:
   // LocalState holds information about the parent/child relationship
@@ -94,12 +94,12 @@ export interface TresScene extends THREE.Scene {
 // Events
 
 export interface Intersection extends THREE.Intersection {
-  /** The event source (the object which registered the handler) */
+  /** The event source (the object that registered the handler) */
   eventObject: TresObject
 }
 
 export interface IntersectionEvent<TSourceEvent> extends Intersection {
-  /** The event source (the object which registered the handler) */
+  /** The event source (the object that registered the handler) */
   eventObject: TresObject
   /** An array of intersections */
   intersections: Intersection[]
@@ -112,7 +112,7 @@ export interface IntersectionEvent<TSourceEvent> extends Intersection {
   /** The ray that pierced it */
   ray: THREE.Ray
   /** The camera that was used by the raycaster */
-  camera: TresCamera
+  camera: THREE.Camera
   /** stopPropagation will stop underlying handlers from firing */
   stopPropagation: () => void
   /** The original host event */
@@ -135,31 +135,33 @@ export interface TresEvent {
 
 export interface Events {
   onClick: EventListener
-  onContextMenu: EventListener
-  onDoubleClick: EventListener
+  onContextmenu: EventListener
+  onDoubleclick: EventListener
   onWheel: EventListener
-  onPointerDown: EventListener
-  onPointerUp: EventListener
-  onPointerLeave: EventListener
-  onPointerMove: EventListener
-  onPointerCancel: EventListener
-  onLostPointerCapture: EventListener
+  onPointerdown: EventListener
+  onPointerup: EventListener
+  onPointerleave: EventListener
+  onPointermove: EventListener
+  onPointercancel: EventListener
+  onLostpointercapture: EventListener
 }
 
+export type OneOrMany<T> = T | T[]
+export type EventHandler<T> = OneOrMany<(evt: ThreeEvent<T>) => void>
 export interface EventHandlers {
-  onClick?: (event: ThreeEvent<MouseEvent>) => void
-  onContextMenu?: (event: ThreeEvent<MouseEvent>) => void
-  onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void
-  onPointerUp?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerDown?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerOver?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerOut?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerEnter?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerLeave?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerMove?: (event: ThreeEvent<PointerEvent>) => void
-  onPointerMissed?: (event: MouseEvent) => void
-  onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void
-  onWheel?: (event: ThreeEvent<WheelEvent>) => void
+  onClick?: EventHandler<MouseEvent>
+  onDblclick?: EventHandler<MouseEvent>
+  onContextmenu?: EventHandler<MouseEvent>
+  onPointerup?: EventHandler<PointerEvent>
+  onPointerdown?: EventHandler<PointerEvent>
+  onPointerover?: EventHandler<PointerEvent>
+  onPointerout?: EventHandler<PointerEvent>
+  onPointerenter?: EventHandler<PointerEvent>
+  onPointerleave?: EventHandler<PointerEvent>
+  onPointermissed?: EventHandler<PointerEvent>
+  onPointermove?: EventHandler<PointerEvent>
+  onLostpointercapture?: EventHandler<PointerEvent>
+  onWheel?: EventHandler<WheelEvent>
 }
 
 interface MathRepresentation {
diff --git a/src/utils/createEventManager/README.md b/src/utils/createEventManager/README.md
new file mode 100644
index 000000000..61f0239ef
--- /dev/null
+++ b/src/utils/createEventManager/README.md
@@ -0,0 +1,39 @@
+# createEventManager
+
+The files in this directory work together to create an `EventManager`. There are 4 main parts:
+
+## createEventManager.ts
+
+`createEventManager` handles state creation/management, ordering of method calls and exporting of the user API. Start here to get an overview of how `EventManager` works.
+
+## eventsRaycast.ts
+
+This file exports the default configuration for the event system: an object composed of methods called by `EventManager`. `EventManager` passes state into the methods; they hold no state themselves (at the time of this writing).
+
+Hittesting and event propagation is implemented in this file.
+
+### eventsNoop.ts
+
+This file exports an object of the same type as exported by `eventsRaycast.ts` (though with the generics filled in differently) as `events`. It's loaded when the user specifies that they don't want to use the event system.
+
+## eventModifiers.ts
+
+This file implements [Vue-style event modifiers](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers).
+
+Vue sends event names (with event modifiers)/functions to `nodeOps.patchProp`. `nodeOps` forwards it to `eventManager.patchEvent` as:
+
+* a TresInstance
+* a prop: `on[Eventname][Vue event modifiers]`, e.g., `onPointerdownSelfOnce`
+* a handler: a single function or array of functions
+
+Note that for a single object, there can be several props that respond to the same event, e.g.:
+
+```vue
+<TresMesh @click="fn0" @click-self-once="[fn1, fn2]" />
+```
+
+`eventModifiers` encapsulates all events on an object that respond to the same `eventname` – including their event modifier logic, array of function calls – behind a single function at `obj.on[Eventname]`.
+
+## useEventsOptions.ts
+
+This file implements the reactive elements of `EventManager`. `EventManager` itself is not reactive, but can be made to respond to changing user props via `useEventsProps()`.
diff --git a/src/utils/createEventManager/const.ts b/src/utils/createEventManager/const.ts
new file mode 100644
index 000000000..4a8feebbf
--- /dev/null
+++ b/src/utils/createEventManager/const.ts
@@ -0,0 +1,83 @@
+const PASSIVE = true
+
+export const POINTER_DOM_THREE_PASSIVE = ([
+  ['click', 'click', 'onClick', !PASSIVE],
+  ['click', 'pointermissed', 'onPointermissed', PASSIVE],
+  ['contextmenu', 'contextmenu', 'onContextmenu', !PASSIVE],
+  ['dblclick', 'dblclick', 'onDblclick', !PASSIVE],
+  ['pointerup', 'pointerup', 'onPointerup', PASSIVE],
+  ['pointerdown', 'pointerdown', 'onPointerdown', PASSIVE],
+  ['pointermove', 'pointerover', 'onPointerover', PASSIVE],
+  ['pointermove', 'pointerout', 'onPointerout', PASSIVE],
+  ['pointermove', 'pointerenter', 'onPointerenter', PASSIVE],
+  ['pointermove', 'pointerleave', 'onPointerleave', PASSIVE],
+  ['pointermove', 'pointermove', 'onPointermove', PASSIVE],
+  ['pointerup', 'lostpointercapture', 'onLostpointercapture', PASSIVE],
+  ['wheel', 'wheel', 'onWheel', !PASSIVE],
+]) as const
+
+export type DomEvent = (typeof POINTER_DOM_THREE_PASSIVE)[number][0]
+export type DomEventName = keyof DomEventMap
+export type ThreeEventName = (typeof POINTER_DOM_THREE_PASSIVE)[number][2]
+
+export const POINTER_EVENT_NAMES: (keyof DomEventMap)[] = POINTER_DOM_THREE_PASSIVE.map(row => row[0]) as DomEventName[]
+export const DOM_EVENT_NAMES: DomEventName[] = POINTER_DOM_THREE_PASSIVE.map(row => row[1]) as DomEventName[]
+export const THREE_EVENT_NAMES: ThreeEventName[] = POINTER_DOM_THREE_PASSIVE.map(row => row[2]) as ThreeEventName[]
+export const RESERVED_PATCH_PROP_NAMES: (ThreeEventName | 'blocking')[] = [...THREE_EVENT_NAMES, 'blocking']
+
+export const DOM_TO_THREE: Record<DomEventName, ThreeEventName> = POINTER_DOM_THREE_PASSIVE.reduce((acc, row) => { acc[row[1]] = row[2]; return acc }, {} as Record<keyof DomEventMap, ThreeEventName>)
+export const DOM_TO_PASSIVE = POINTER_DOM_THREE_PASSIVE.reduce((acc, row) => { acc[row[1]] = row[3]; return acc }, {} as Record<keyof DomEventMap, boolean>)
+
+// NOTE: Allow typing for DOM events
+interface DomEventMap {
+  click: MouseEvent
+  contextmenu: MouseEvent
+  dblclick: MouseEvent
+  pointerup: PointerEvent
+  pointerdown: PointerEvent
+  pointerover: PointerEvent
+  pointerout: PointerEvent
+  pointerenter: PointerEvent
+  pointerleave: PointerEvent
+  pointermove: PointerEvent
+  pointermissed: PointerEvent
+  pointercancel: PointerEvent
+  lostpointercapture: PointerEvent
+  wheel: WheelEvent
+}
+
+// NOTE: Allow typing for attached events
+export class DomEventTarget extends HTMLElement {
+  public addEventListener<T extends keyof DomEventMap>(
+    // the event name, a key of MyEventMap
+    type: T,
+    // the listener, using a value of MyEventMap
+    listener: (this: DomEventTarget, ev: DomEventMap[T]) => any,
+    // any options
+    options?: boolean | AddEventListenerOptions
+  ): void
+
+  // NOTE: the fallback for any event names not in our map
+  public addEventListener(
+    type: string,
+    listener: (this: DomEventTarget, ev: Event) => any,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    super.addEventListener(type, listener, options)
+  }
+
+  public removeEventListener<T extends keyof DomEventMap>(
+    type: T,
+    listener: (this: DomEventTarget, ev: DomEventMap[T]) => any,
+    options?: boolean | EventListenerOptions,
+  ): void
+
+  // NOTE: the fallback for any event names not in our map
+  public removeEventListener(
+    type: string,
+    listener: (this: DomEventTarget, ev: Event) => any,
+    options?: boolean | EventListenerOptions,
+  ): void {
+    super.removeEventListener(type, listener, options)
+  }
+}
diff --git a/src/utils/createEventManager/createEventManager.test.ts b/src/utils/createEventManager/createEventManager.test.ts
new file mode 100644
index 000000000..243e65502
--- /dev/null
+++ b/src/utils/createEventManager/createEventManager.test.ts
@@ -0,0 +1,365 @@
+import { Scene } from 'three'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowRef } from 'vue'
+import { nodeOps as getNodeOps } from './../../core/nodeOps'
+import { createEventManager } from './createEventManager'
+import type { TresContext } from '../../composables/useTresContextProvider'
+import type { CreateEventManagerProps } from './createEventManager'
+
+let t = mockTresInstance()
+let context = t.context
+let { canvas, spies: canvasSpies } = mockCanvasAndListeners()
+let { props, spies: propsSpies } = mockEventManagerPropsAndSpies(context)
+
+describe('createEventManager', () => {
+  beforeEach(() => {
+    t = mockTresInstance()
+    context = t.context
+
+    const c = mockCanvasAndListeners()
+    canvas = c.canvas
+    canvasSpies = c.spies
+
+    const p = mockEventManagerPropsAndSpies(context)
+    props = p.props
+    propsSpies = p.spies
+    vi.clearAllMocks()
+  })
+
+  describe('const eventManager = createEventManager(props, context)', () => {
+    describe('props', () => {
+      it('allows methods to be changed on the fly', () => {
+        const eventManager = createEventManager(props, context)
+        const { handle } = eventManager
+
+        props.getIntersections = () => [1, 2, 3, 4]
+        expect(handle(new MouseEvent('click'))).toStrictEqual([1, 2, 3, 4])
+
+        props.getIntersections = () => [Number.POSITIVE_INFINITY]
+        expect(handle(new MouseEvent('click'))).toStrictEqual([Number.POSITIVE_INFINITY])
+
+        props.getIntersectionsPool = () => [1, 2, 3, 4]
+        props.getIntersections = (pool: number[]) => pool.filter(n => n % 2)
+        expect(handle(new MouseEvent('click'))).toStrictEqual([1, 3])
+
+        props.getIntersections = (pool: number[]) => pool.filter(n => n % 2 === 0)
+        expect(handle(new MouseEvent('click'))).toStrictEqual([2, 4])
+
+        const setupSpy = vi.fn()
+        props.isSetUp = () => false
+        props.setUp = () => { setupSpy() }
+        expect(setupSpy).not.toBeCalled()
+        handle(new MouseEvent('click'))
+        expect(setupSpy).toBeCalledTimes(1)
+
+        const handleIntersectionsSpy = vi.fn()
+        props.handleIntersections = () => { handleIntersectionsSpy() }
+        props.isSetUp = () => true
+        expect(handleIntersectionsSpy).not.toBeCalled()
+        handle(new MouseEvent('click'))
+        expect(handleIntersectionsSpy).toBeCalledTimes(1)
+
+        props.handleIntersections = () => { }
+        handle(new MouseEvent('click'))
+        expect(handleIntersectionsSpy).toBeCalledTimes(1)
+      })
+    })
+    describe('eventManager.connect(eventTarget)', () => {
+      it('calls `props.connect` if not connected', () => {
+        const { connect } = createEventManager(props, context)
+        connect(canvas)
+        expect(propsSpies.connect).toBeCalled()
+        expect(canvasSpies.addEventListener).toBeCalled()
+      })
+      it('`disconnect`s if connected to different target', () => {
+        const { canvas: otherCanvas } = mockCanvasAndListeners()
+        const { connect } = createEventManager(props, context)
+
+        connect(canvas)
+        expect(propsSpies.connect).toBeCalled()
+        expect(canvasSpies.addEventListener).toBeCalled()
+
+        vi.clearAllMocks()
+        connect(otherCanvas)
+        expect(propsSpies.disconnect).toBeCalled()
+        expect(propsSpies.connect).toBeCalled()
+      })
+      it('calls `props.connect().disconnect` if already connected', () => {
+        const otherCanvas = mockCanvasAndListeners().canvas
+        const { connect } = createEventManager(props, context)
+
+        connect(canvas)
+        expect(propsSpies.disconnect).not.toBeCalled()
+        connect(otherCanvas)
+        expect(propsSpies.disconnect).toBeCalled()
+      })
+      it('does nothing if already connected to `target`', () => {
+        const { connect } = createEventManager(props, context)
+        connect(canvas)
+        expect(propsSpies.connect).toBeCalled()
+        expect(propsSpies.disconnect).not.toBeCalled()
+
+        vi.clearAllMocks()
+        connect(canvas)
+        expect(propsSpies.connect).not.toBeCalled()
+        expect(propsSpies.disconnect).not.toBeCalled()
+      })
+    })
+    describe('eventManager.disconnect()', () => {
+      it('calls `props.connect().disconnect`', () => {
+        const { connect, disconnect } = createEventManager(props, context)
+        connect(canvas)
+        disconnect()
+        expect(propsSpies.disconnect).toBeCalled()
+      })
+      it('... but only if `connect`ed', () => {
+        const { connect, disconnect } = createEventManager(props, context)
+        disconnect()
+        expect(propsSpies.disconnect).not.toBeCalled()
+
+        connect(canvas)
+        disconnect()
+        expect(propsSpies.disconnect).toBeCalledTimes(1)
+
+        disconnect()
+        disconnect()
+        disconnect()
+        expect(propsSpies.disconnect).toBeCalledTimes(1)
+
+        connect(canvas)
+        disconnect()
+        expect(propsSpies.disconnect).toBeCalledTimes(2)
+      })
+    })
+    describe('eventManager.test(pool, event)', () => {
+      it('returns `[]` if `!isSetup`', () => {
+        props.isSetUp = () => false
+        const { test } = createEventManager(props, context)
+        const result = test([])
+        expect(result).toStrictEqual([])
+      })
+      it('returns result of `props.getIntersections()` if `isSetup`', () => {
+        Object.assign(props, {
+          isSetup: () => true,
+          getIntersections: () => 'BBB',
+        })
+        const { test } = createEventManager(props, context)
+        const result = test([])
+        expect(result).toStrictEqual('BBB')
+      })
+    })
+    describe('eventManager.handle(event)', () => {
+      it('returns result of `props.getIntersections()`', () => {
+        Object.assign(props, {
+          getIntersections: () => 999,
+        })
+        const { handle } = createEventManager(props, context)
+        const result = handle(new MouseEvent('click'))
+        expect(result).toStrictEqual(999)
+      })
+
+      describe('if `handle` cannot be "set up"', () => {
+        it('calls `setUp` then bails', () => {
+          let succeeded = false
+          let failed = false
+          const succeed = () => { succeeded = true }
+          const fail = () => { failed = true }
+
+          Object.assign(props, {
+            isSetup: () => false,
+            setUp: succeed,
+            getIntersectionsPool: fail,
+            getIntersections: fail,
+            handleIntersections: fail,
+            tearDown: fail,
+          })
+
+          const eventManager = createEventManager(props, context)
+          const { handle } = eventManager
+          handle(new MouseEvent('click'))
+          expect(succeeded).toBe(true)
+          expect(failed).toBe(false)
+        })
+      })
+
+      describe('if `handle` can be "set up"', () => {
+        const EXPECTED_METHOD_CALL_ORDER = [
+          'setUp',
+          'getIntersectionsPool',
+          'getIntersections',
+          'handleIntersections',
+          'tearDown',
+        ]
+        const calledMethods = []
+        const methods = EXPECTED_METHOD_CALL_ORDER.reduce((acc, label) => { acc[label] = () => calledMethods.push(label); return acc }, {})
+        const myProps = Object.assign(
+          {},
+          props,
+          { isSetUp: () => true },
+          methods,
+        )
+        const eventManager = createEventManager(myProps, context)
+        const { handle } = eventManager
+        handle(new MouseEvent('click'))
+
+        for (let i = 0; i < EXPECTED_METHOD_CALL_ORDER.length; i++) {
+          const methodName = EXPECTED_METHOD_CALL_ORDER[i]
+          it(`${i === 0 ? '' : 'then '}calls \`${methodName}\``, () => {
+            expect(calledMethods[i]).toBe(methodName)
+          })
+        }
+      })
+
+      describe('if `enabled === false`', () => {
+        it('skips all `props.{setUp,*Intersections*,tearDown}` calls', () => {
+          let failed = false
+          const fail = () => failed = true
+          Object.assign(props, {
+            isSetup: () => {},
+            setUp: fail,
+            getIntersectionsPool: fail,
+            getIntersections: fail,
+            handleIntersections: fail,
+            tearDown: fail,
+          })
+          const eventManager = createEventManager(props, context)
+          eventManager.enabled = false
+          eventManager.handle(new MouseEvent('click'))
+          expect(failed).toStrictEqual(false)
+        })
+        it('returns `[]`', () => {
+          const eventManager = createEventManager(props, context)
+
+          eventManager.enabled = false
+          const result1 = eventManager.handle(new MouseEvent('click'))
+          expect(result1).toStrictEqual([])
+        })
+      })
+      describe(`props.filter`, () => {
+        describe('if `props.filter` is a function', () => {
+          it('calls `props.filter` on the result of `props.getIntersections()`', () => {
+            const result = []
+            Object.assign(props, {
+              getIntersections: () => { result.push(2); return [101, 102, 103, 104] },
+              filter: (obj) => { obj = obj.filter(n => n % 2 === 1); return obj },
+            })
+            const { handle } = createEventManager(props, context)
+            const handleResult = handle(new MouseEvent('click'))
+            expect(handleResult).toStrictEqual([101, 103])
+          })
+        })
+        describe('if `props.filter` is `undefined`', () => {
+          it('returns result of `props.getIntersections()`', () => {
+            const result = []
+            Object.assign(props, {
+              getIntersections: () => { result.push(2); return [101, 102, 103, 104] },
+            })
+            const { handle } = createEventManager(props, context)
+
+            props.filter = undefined
+            const handleResult = handle(new MouseEvent('click'))
+            expect(handleResult).toStrictEqual([101, 102, 103, 104])
+          })
+        })
+      })
+    })
+    describe('eventManager.remove', () => {
+      it('forwards to `props.remove`', () => {
+        const spy = vi.spyOn(props, 'remove')
+        const eventManager = createEventManager(props, context)
+        eventManager.enabled = false
+        eventManager.remove(2)
+        expect(spy).toBeCalledTimes(1)
+      })
+    })
+  })
+})
+
+function mockTresContext() {
+  return {
+    scene: shallowRef(new Scene()),
+    eventManager: null,
+    registerCamera: () => {},
+    deregisterCamera: () => {},
+  } as unknown as TresContext
+}
+
+function mockCanvasAndListeners() {
+  const spies = {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }
+  const listeners = {}
+  const canvas = {
+    addEventListener: (eventName, fn) => {
+      spies.addEventListener()
+      if (listeners[eventName]) {
+        listeners[eventName].push(fn)
+      }
+      else {
+        listeners[eventName] = [fn]
+      }
+    },
+    removeEventListener: (eventName, fn) => {
+      if (listeners[eventName]) {
+        spies.removeEventListener()
+        listeners[eventName] = listeners[eventName].filter(f => f !== fn)
+      }
+    },
+  } as HTMLCanvasElement
+  return { listeners, canvas, spies }
+}
+
+function mockTresInstance() {
+  const { canvas, listeners, spies } = mockCanvasAndListeners()
+  const context = mockTresContext()
+  const nodeOps = getNodeOps(context)
+
+  return {
+    canvas,
+    canvasListeners: listeners,
+    canvasSpies: spies,
+    context,
+    nodeOps,
+  }
+}
+
+function mockEventManagerPropsAndSpies(context?: TresContext) {
+  const connectSpy = vi.fn()
+  const disconnectSpy = vi.fn()
+  let _isSetUp = false
+  const setUpIntersectionsSpy = vi.fn()
+  const tearDownIntersectionsSpy = vi.fn()
+  context = context ?? mockTresContext()
+  const initialConfig = { context, enabled: true, priority: 0, lastEvent: new MouseEvent('mousemove') }
+  let lastEvent = new MouseEvent('mousemove')
+  const props: CreateEventManagerProps<{ context: typeof context }, typeof context, MouseEvent, number, number, HTMLCanvasElement> = {
+    getInitialConfig: (_ctx: typeof context, _emit) => initialConfig,
+    getInitialEvent: () => new MouseEvent('mousemove'),
+    connect: (target: EventTarget, handle, _config: typeof initialConfig) => {
+      connectSpy()
+      target.addEventListener('click', handle)
+      return { disconnect: disconnectSpy }
+    },
+    setUp: () => { _isSetUp = true; setUpIntersectionsSpy() },
+    isSetUp: () => _isSetUp,
+    getIntersectionsPool: () => [],
+    getIntersections: () => [],
+    handleIntersections: () => {},
+    tearDown: () => { _isSetUp = false; tearDownIntersectionsSpy() },
+    insert: () => {},
+    remove: () => {},
+    patchProp: () => true,
+    stashLastEvent: (event: MouseEvent) => lastEvent = event,
+    getLastEvent: () => lastEvent,
+  }
+  return {
+    props,
+    spies: {
+      connect: connectSpy,
+      disconnect: disconnectSpy,
+      setUp: setUpIntersectionsSpy,
+      tearDown: tearDownIntersectionsSpy,
+    },
+  }
+}
diff --git a/src/utils/createEventManager/createEventManager.ts b/src/utils/createEventManager/createEventManager.ts
new file mode 100644
index 000000000..36527db14
--- /dev/null
+++ b/src/utils/createEventManager/createEventManager.ts
@@ -0,0 +1,146 @@
+import type { EmitEventFn, EmitEventName } from '../../types'
+
+export type EventManager = CreateEventManagerReturn<any, any, any, any>
+export type EventManagerProps = CreateEventManagerProps<any, any, any, any, any, any>
+
+export interface CreateEventManagerReturn<TEvent, TIntersection, TObj, TTarget> {
+  connect: (target: TTarget) => void
+  disconnect: () => void
+  handle: (event: TEvent) => TIntersection[]
+  update: () => TIntersection[]
+  test: (candidates: TObj[], event?: TEvent) => TIntersection[]
+  insert: (instanceOrObject: TObj) => void
+  remove: (instanceOrObject: TObj) => void
+  patchProp: (instanceOrObj: TObj, propName: string, prevValue: any, nextValue: any) => boolean
+  config: any
+  enabled: boolean
+  target: TTarget | undefined
+  priority: number
+  isEventManager: true
+}
+
+export interface CreateEventManagerProps<
+  TConfig,
+  TCtx,
+  TEvt,
+  TIntersection,
+  TObj,
+  TTarget,
+> {
+  getInitialConfig: (context: TCtx, emit: EmitEventFn) => TConfig
+  getInitialEvent: () => TEvt
+
+  connect: (
+    target: TTarget,
+    handle: (e: TEvt) => TIntersection[],
+    config: TConfig,
+  ) => { disconnect: () => void }
+
+  setUp: (event: TEvt, config: TConfig) => void
+  isSetUp: (config: TConfig) => boolean
+  filter?: (intersections: TIntersection[], event: TEvt, config: TConfig) => TIntersection[]
+  getIntersectionsPool: (event: TEvt, config: TConfig) => TObj[]
+  getIntersections: (pool: TObj[], config: TConfig) => TIntersection[]
+  handleIntersections: (event: TEvt, intersections: TIntersection[], config: TConfig) => void
+  tearDown: (config: TConfig) => void
+
+  insert: (instance: TObj, config: TConfig) => void
+  remove: (instance: TObj, config: TConfig) => void
+  patchProp: (instanceOrObj: TObj, propName: string, prevValue: any, nextValue: any, config: TConfig) => boolean
+
+  stashLastEvent: (evt: TEvt, config: TConfig) => void
+  getLastEvent: (config: TConfig) => TEvt
+}
+
+export function createEventManager<TConfig, TCtx, TEvent, TIntersection, TObj, TTarget>(
+  props: CreateEventManagerProps<TConfig, TCtx, TEvent, TIntersection, TObj, TTarget>,
+  context: TCtx,
+  emit: EmitEventFn = (_event: EmitEventName, _args: any) => {},
+): CreateEventManagerReturn<TEvent, TIntersection, TObj, TTarget> {
+  const config = props.getInitialConfig(context, emit)
+  let enabled = true
+  let priority = 1
+  let target = undefined as TTarget | undefined
+  let lastIntersections = []
+  let propsDisconnect = () => {}
+
+  const handle: CreateEventManagerReturn<TEvent, TIntersection, TObj, TTarget>['handle'] = (event) => {
+    if (!enabled) {
+      return []
+    }
+
+    props.setUp(event, config)
+    if (props.isSetUp(config) === false) {
+      return []
+    }
+
+    const intersections = (props.filter)
+      ? props.filter(props.getIntersections(props.getIntersectionsPool(event, config), config), event, config)
+      : props.getIntersections(props.getIntersectionsPool(event, config), config)
+    props.handleIntersections(event, intersections, config)
+    props.stashLastEvent(event, config)
+    props.tearDown(config)
+
+    lastIntersections = intersections
+    return lastIntersections
+  }
+
+  const update = () => {
+    return handle(props.getLastEvent(config))
+  }
+
+  const test = (pool: TObj[], event?: TEvent) => {
+    props.setUp(event ?? props.getLastEvent(config), config)
+    if (props.isSetUp(config)) {
+      const intersections = props.getIntersections(pool, config)
+      props.tearDown(config)
+      return intersections
+    }
+    else {
+      return []
+    }
+  }
+
+  const disconnect = () => {
+    propsDisconnect()
+    propsDisconnect = () => {}
+    target = undefined
+  }
+
+  const connect = (eventTarget: TTarget) => {
+    if (eventTarget === target) { return }
+    disconnect()
+    propsDisconnect = props.connect(eventTarget, handle, config).disconnect
+    target = eventTarget
+  }
+
+  const insert = (instanceOrObject: TObj) => {
+    props.insert(instanceOrObject, config)
+  }
+
+  const remove = (instanceOrObject: TObj) => {
+    props.remove(instanceOrObject, config)
+  }
+
+  const patchProp = (instanceOrObj: TObj, propName: string, prevValue: any, nextValue: any) => {
+    return props.patchProp(instanceOrObj, propName, prevValue, nextValue, config)
+  }
+
+  return {
+    connect,
+    disconnect,
+    handle,
+    update,
+    test,
+    insert,
+    remove,
+    patchProp,
+    get config() { return config },
+    set enabled(b: boolean) { enabled = b },
+    get enabled() { return enabled },
+    set priority(n: number) { priority = n },
+    get priority() { return priority },
+    get target() { return target },
+    isEventManager: true,
+  }
+}
diff --git a/src/utils/createEventManager/deprecatedEvents.test.ts b/src/utils/createEventManager/deprecatedEvents.test.ts
new file mode 100644
index 000000000..5af809251
--- /dev/null
+++ b/src/utils/createEventManager/deprecatedEvents.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { deprecatedEventsToNewEvents } from './deprecatedEvents'
+
+describe('deprecatedEvents', () => {
+  describe('transforms `onEventName`-style names to `onEventname`-style', () => {
+    it('supports `onClick`', () => {
+      expect(deprecatedEventsToNewEvents('onClick')).toBe('onClick')
+    })
+    it('supports `onContextMenu`', () => {
+      expect(deprecatedEventsToNewEvents('onContextMenu')).toBe('onContextmenu')
+    })
+    it('supports `onDoubleClick`', () => {
+      expect(deprecatedEventsToNewEvents('onDoubleClick')).toBe('onDblclick')
+    })
+    it('supports `onPointerUp`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerUp')).toBe('onPointerup')
+    })
+    it('supports `onPointerOver`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerOver')).toBe('onPointerover')
+    })
+    it('supports `onPointerOut`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerOut')).toBe('onPointerout')
+    })
+    it('supports `onPointerEnter`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerEnter')).toBe('onPointerenter')
+    })
+    it('supports `onPointerLeave`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerLeave')).toBe('onPointerleave')
+    })
+    it('supports `onPointerMove`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerMove')).toBe('onPointermove')
+    })
+    it('supports `onPointerMissed`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerMissed')).toBe('onPointermissed')
+    })
+    it('supports `onLostPointerCapture`', () => {
+      expect(deprecatedEventsToNewEvents('onLostPointerCapture')).toBe('onLostpointercapture')
+    })
+  })
+  describe('eventModifiers', () => {
+    it('supports `onPointerDownSelf`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerDownSelf')).toBe('onPointerdownSelf')
+    })
+    it('supports `onClickSelfStopPrevent`', () => {
+      expect(deprecatedEventsToNewEvents('onClickSelfStopPrevent')).toBe('onClickSelfStopPrevent')
+    })
+    it('supports `onPointerMovePreventOnce`', () => {
+      expect(deprecatedEventsToNewEvents('onPointerMovePreventOnce')).toBe('onPointermovePreventOnce')
+    })
+  })
+})
diff --git a/src/utils/createEventManager/deprecatedEvents.ts b/src/utils/createEventManager/deprecatedEvents.ts
new file mode 100644
index 000000000..e1c323f83
--- /dev/null
+++ b/src/utils/createEventManager/deprecatedEvents.ts
@@ -0,0 +1,89 @@
+import { isProd, useLogger } from '../../composables'
+
+const { logWarning } = useLogger()
+
+const DEPRECATED_TRES_TO_TRES: Record<string, string> = {
+  onContextMenu: 'onContextmenu',
+  onPointerMove: 'onPointermove',
+  onPointerEnter: 'onPointerenter',
+  onPointerLeave: 'onPointerleave',
+  onPointerOver: 'onPointerover',
+  onPointerOut: 'onPointerout',
+  onDoubleClick: 'onDblclick',
+  onPointerDown: 'onPointerdown',
+  onPointerUp: 'onPointerup',
+  onPointerCancel: 'onPointercancel',
+  onPointerMissed: 'onPointermissed',
+  onLostPointerCapture: 'onLostpointercapture',
+}
+
+const DEPRECATED_TRES_TO_DEPRECATED_VUE: Record<string, string> = {
+  onContextMenu: '@context-menu',
+  onPointerMove: '@pointer-move',
+  onPointerEnter: '@pointer-enter',
+  onPointerLeave: '@pointer-leave',
+  onPointerOver: '@pointer-over',
+  onPointerOut: '@pointer-out',
+  onDoubleClick: '@double-click',
+  onPointerDown: '@pointer-down',
+  onPointerUp: '@pointer-up',
+  onPointerCancel: '@pointer-cancel',
+  onPointerMissed: '@pointer-missed',
+  onLostPointerCapture: '@lost-pointer-capture',
+}
+
+const DEPRECATED_TRES_TO_VUE: Record<string, string> = {
+  onContextMenu: '@contextmenu',
+  onPointerMove: '@pointermove',
+  onPointerEnter: '@pointerenter',
+  onPointerLeave: '@pointerleave',
+  onPointerOver: '@pointerover',
+  onPointerOut: '@pointerout',
+  onDoubleClick: '@dblclick',
+  onPointerDown: '@pointerdown',
+  onPointerUp: '@pointerup',
+  onPointerCancel: '@pointercancel',
+  onPointerMissed: '@pointermissed',
+  onLostPointerCapture: '@lostpointercapture',
+}
+
+const isDeprecationWarningSentFor: Record<string, boolean> = {
+  onContextMenu: false,
+  onPointerMove: false,
+  onPointerEnter: false,
+  onPointerLeave: false,
+  onPointerOver: false,
+  onPointerOut: false,
+  onDoubleClick: false,
+  onPointerDown: false,
+  onPointerUp: false,
+  onPointerCancel: false,
+  onPointerMissed: false,
+  onLostPointerCapture: false,
+}
+
+const deprecatedTresEventRE = new RegExp(`^(${Object.keys(DEPRECATED_TRES_TO_TRES).join('|')})(.*)`)
+
+/**
+ * Test if a `onClickSelfOnce`-style string starts with a
+ * deprecated event name.
+ * If so, warn and return the non-deprecated event name.
+ * If not, return the string.
+ * @param prop the string to test
+ * @returns the non-deprecated name
+ */
+export function deprecatedEventsToNewEvents(prop: string): string {
+  if (deprecatedTresEventRE.test(prop)) {
+    const matches = deprecatedTresEventRE.exec(prop)
+    if (!matches) { return prop }
+    const deprecatedTresName = matches[1]
+    if (!isProd && !isDeprecationWarningSentFor[deprecatedTresName]) {
+      isDeprecationWarningSentFor[deprecatedTresName] = true
+      const deprecatedVueName = DEPRECATED_TRES_TO_DEPRECATED_VUE[deprecatedTresName]
+      const supportedVueName = DEPRECATED_TRES_TO_VUE[deprecatedTresName]
+      logWarning(`The event \`${deprecatedVueName}\` is deprecated. Use \`${supportedVueName}\`.`)
+    }
+    return DEPRECATED_TRES_TO_TRES[deprecatedTresName] + (matches[2] ?? '')
+  }
+  return prop
+}
diff --git a/src/utils/createEventManager/eventModifiers.test.ts b/src/utils/createEventManager/eventModifiers.test.ts
new file mode 100644
index 000000000..f3c05b31c
--- /dev/null
+++ b/src/utils/createEventManager/eventModifiers.test.ts
@@ -0,0 +1,317 @@
+import { describe, expect, it, vi } from 'vitest'
+import { capitalize } from 'vue'
+import { THREE_EVENT_NAMES } from './const'
+import { EVENT_MODIFIERS, isVueEventName, parseName, patchEvent } from './eventModifiers'
+import type { TresInstance, TresObject } from '../../types'
+
+describe('eventModifiers', () => {
+  describe('isThreeStyleDomEvent', () => {
+    it('returns `true` for all `const.THREE_EVENT_NAMES`', () => {
+      for (const str of THREE_EVENT_NAMES) {
+        expect(isVueEventName(str)).toBe(true)
+      }
+    })
+    it('returns `true` for all `const.THREE_EVENT_NAMES` + all single event modifiers', () => {
+      for (const baseName of THREE_EVENT_NAMES) {
+        for (const eventModifier of EVENT_MODIFIERS) {
+          expect(isVueEventName(baseName + eventModifier)).toBe(true)
+        }
+      }
+    })
+    it('returns `true` for all `const.THREE_EVENT_NAMES` + 2 event modifiers', () => {
+      for (const baseName of THREE_EVENT_NAMES) {
+        for (const eventModifier0 of EVENT_MODIFIERS) {
+          for (const eventModifier1 of EVENT_MODIFIERS) {
+            expect(isVueEventName(baseName + eventModifier0 + eventModifier1)).toBe(true)
+          }
+        }
+      }
+    })
+    it('returns `false` for the empty string', () => {
+      expect(isVueEventName('')).toBe(false)
+    })
+    it('returns `false` for THREE.Object3D methods', () => {
+      // NOTE: Object3D methods: https://threejs.org/docs/#api/en/core/Object3D
+      for (const threeMethodName of 'onAfterRender|onAfterShadow|onBeforeRender|onBeforeShadow'.split('|')) {
+        expect(isVueEventName(threeMethodName)).toBe(false)
+      }
+    })
+    it('returns `false` for deprecated onEventName-style event names', () => {
+      // NOTE: See ./deprecatedEvents.ts
+      for (const threeMethodName of 'onDoubleClick|onPointerMissed|onContextMenu|onPointerUp|onPointerDown'.split('|')) {
+        expect(isVueEventName(threeMethodName)).toBe(false)
+      }
+    })
+  })
+
+  describe('parseName', () => {
+    it('returns `[\'eventname\', undefined]` for \'onEventname\'', () => {
+      expect(parseName('onEventname')).toStrictEqual(['eventname', undefined])
+      for (const str of THREE_EVENT_NAMES) {
+        expect(parseName(str)[0]).toBe(str.toLowerCase().slice(2))
+        expect(parseName(str)[1]).toBeUndefined()
+      }
+    })
+
+    it('returns `[\'eventname\', Record<lowercaseModifier: true>]` if modifiers are present', () => {
+      for (const baseName of THREE_EVENT_NAMES) {
+        for (const eventModifier0 of EVENT_MODIFIERS) {
+          for (const eventModifier1 of EVENT_MODIFIERS) {
+            const eventName = baseName.toLowerCase().slice(2)
+            const modifiers = {}
+            modifiers[eventModifier0.toLowerCase()] = true
+            modifiers[eventModifier1.toLowerCase()] = true
+            expect(parseName(baseName + eventModifier0 + eventModifier1)).toStrictEqual([eventName, modifiers])
+          }
+        }
+      }
+    })
+  })
+
+  describe('patchEvent(el, rawName, prevValue, nextValue): implementation', () => {
+    it('puts `nextValue` into `el.__tres.handlers[rawName].value`', () => {
+      const spy0 = vi.fn()
+      const spy1 = vi.fn()
+      const spy2 = vi.fn()
+      const spy3 = vi.fn()
+      const obj = getMockObject()
+      patchEvent(obj, 'onClick', undefined, spy0)
+      expect(obj.__tres.handlers.onClick.value).toBe(spy0)
+
+      patchEvent(obj, 'onClickSelf', undefined, spy1)
+      expect(obj.__tres.handlers.onClickSelf.value).toBe(spy1)
+
+      patchEvent(obj, 'onClickCapture', undefined, spy2)
+      expect(obj.__tres.handlers.onClickCapture.value).toBe(spy2)
+
+      patchEvent(obj, 'onClickCaptureOnce', undefined, spy3)
+      expect(obj.__tres.handlers.onClickCaptureOnce.value).toBe(spy3)
+    })
+
+    it('creates an `(event) => void` at `el[eventname]`', () => {
+      const obj = getMockObject()
+      patchEvent(obj, 'onClick', undefined, vi.fn())
+      expect(typeof obj.onClick).toBe('function')
+
+      patchEvent(obj, 'onPointerupSelfPrevent', undefined, vi.fn())
+      expect(typeof obj.onPointerup).toBe('function')
+    })
+
+    it('creates an `(event) => void` at `el.__tres[eventname]` that fires all "eventname" functions', () => {
+      const obj = getMockObject()
+
+      const spyClick = vi.fn()
+      const spyClickStop = vi.fn()
+      const spyClickPrevent = vi.fn()
+      const spyClickOnce = vi.fn()
+
+      patchEvent(obj, 'onClick', undefined, spyClick)
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickStop).toBeCalledTimes(0)
+      expect(spyClickPrevent).toBeCalledTimes(0)
+      expect(spyClickOnce).toBeCalledTimes(0)
+
+      vi.clearAllMocks()
+      patchEvent(obj, 'onClickStop', undefined, spyClickStop)
+      patchEvent(obj, 'onClickPrevent', undefined, spyClickPrevent)
+
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickStop).toBeCalledTimes(1)
+      expect(spyClickPrevent).toBeCalledTimes(1)
+      expect(spyClickOnce).toBeCalledTimes(0)
+
+      vi.clearAllMocks()
+      patchEvent(obj, 'onClickOnce', undefined, spyClickOnce)
+
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickStop).toBeCalledTimes(1)
+      expect(spyClickPrevent).toBeCalledTimes(1)
+      expect(spyClickOnce).toBeCalledTimes(1)
+    })
+
+    it('@click.once only fires once', () => {
+      const obj = getMockObject()
+
+      const spyClick = vi.fn()
+      const spyClickOnce = vi.fn()
+
+      patchEvent(obj, 'onClick', undefined, spyClick)
+      patchEvent(obj, 'onClickOnce', undefined, spyClickOnce)
+
+      expect(spyClick).toBeCalledTimes(0)
+      expect(spyClickOnce).toBeCalledTimes(0)
+
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickOnce).toBeCalledTimes(1)
+
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(2)
+      expect(spyClickOnce).toBeCalledTimes(1)
+
+      call(obj, getMockEvent(), 'click')
+      call(obj, getMockEvent(), 'click')
+      call(obj, getMockEvent(), 'click')
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(6)
+      expect(spyClickOnce).toBeCalledTimes(1)
+    })
+
+    it('@click.once only fires once, even if patched', () => {
+      // NOTE: See this playground for Vue's behavior in the DOM
+      // https://play.vuejs.org/#eNqNU8tu2zAQ/JUFL0oAQ67RngRJfQQ+tAenaHPkRZFXthKKJPhwHAj69yyphxMgCHISd3d2dmYp9uyn1unJI8tYbmvTagcWndcll22nlXHQg8EGBmiM6iAhaMIll7WS1lHFeuGgCJCrZKemRHI9Axr5hao9yKrDDBIKkxWcKuEpurqGooz0oSeNWQJHEM0bLhybtxybz3BsJo4LyyST6Bd59qnSlJ5YuASCLSTzMQ2DoShmad+joix445Im5OtxcbQyChx2WlQOKQLIdbm7vdtmcCPa+rGVB+Csq57vEYyXnIE9Ki/2oKR4Dhk61LgCPKGEtgF3RGi8rF2rKLZRrcZ9mq/D9RD7vXeOSj/qwJ6G5oKzWTZn5TIK+j7YiUaGIV+Pje+QUH+YQr3h8xZ43JREM115YKFEcP/KMVsxZ2m1TXtIH6yS9FfFrXJWq063As2tDm4sZ9m471CrhFBPf2LOGY+rOV8fsX58J/9gzyHH2V8Sg+ZEVpeaq8wB3Vje/t/hmc5LsVN7Lwj9QfEfWiV80DjCfnm5J9mvcFHt7/g26ELv7PbsUNrZVBAakEPEc0bv5eYD6xe5X9NvsY9+KTa8ABkdL2A=
+      const obj = getMockObject()
+
+      const spyClick = vi.fn()
+      const spyClickOnce0 = vi.fn()
+      const spyClickOnce1 = vi.fn()
+
+      patchEvent(obj, 'onClick', undefined, spyClick)
+      patchEvent(obj, 'onClickOnce', undefined, spyClickOnce0)
+
+      expect(spyClick).toBeCalledTimes(0)
+      expect(spyClickOnce0).toBeCalledTimes(0)
+      expect(spyClickOnce1).toBeCalledTimes(0)
+
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickOnce0).toBeCalledTimes(1)
+      expect(spyClickOnce1).toBeCalledTimes(0)
+
+      patchEvent(obj, 'onClickOnce', spyClickOnce0, spyClickOnce1)
+
+      vi.clearAllMocks()
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickOnce0).toBeCalledTimes(0)
+      expect(spyClickOnce1).toBeCalledTimes(0)
+    })
+    it('@click.once.stop only fires once, only stops once, even if patched', () => {
+      // NOTE: See this playground for Vue's behavior in the DOM
+      // https://play.vuejs.org/#eNqNks1uwjAQhF9l5UtBoATSnlBA/RGH9tBWbY++QFhoILEt20mRIr971wmkQbSoN3v22/Gs7YrdKRWUBbIJi02iU2XBoC3UjIs0V1JbqEDjGhystczhitArLhIpjAUxgqkv9kb9VhqfS9GZlGRpsvPNvT5MZ3SCGAXlIitwMAB3Anm7Fhr/AfkDWijqQnHYzETT0MZirrKFRdoBxKu0hNu6f8pZk4izmRhNoPKBwLl4qSFs4GVhrRQHPjBWqkCKBI+dY+qkrkNk5yAMQ8rbWHkhDhuHf7lFHbeodYsaNy+cuoU0Ca3isDMfGzJr6IrW6SbYGinoeSsP0wkyV2mG+kXZlK6QM7L1FV9bZJn8eqo1qwscHvXkE5PdL/rW7L3G2atGg7pEztqaXegN2qY8f3/GPa3bYi5XRUb0heIbGpkVPmOD3RdiRbE7XJ32sf6kqdh8mPneojDHoXxQT7qa54w+7sOF0X/iXgc3dR8Xjrlv9t0D8A==
+
+      const obj = getMockObject()
+      const event = getMockEvent()
+
+      const spyClick = vi.fn()
+      const spyClickOnceStop = vi.fn()
+      const spyClickStopOnce = vi.fn()
+      const spyClickOnceStopPatch = vi.fn()
+      const spyClickStopOncePatch = vi.fn()
+
+      patchEvent(obj, 'onClick', undefined, spyClick)
+      patchEvent(obj, 'onClickOnceStop', undefined, spyClickOnceStop)
+      patchEvent(obj, 'onClickStopOnce', undefined, spyClickStopOnce)
+
+      expect(spyClick).toBeCalledTimes(0)
+      expect(spyClickOnceStop).toBeCalledTimes(0)
+      expect(spyClickStopOnce).toBeCalledTimes(0)
+      expect(spyClickOnceStopPatch).toBeCalledTimes(0)
+      expect(spyClickStopOncePatch).toBeCalledTimes(0)
+      expect(event.stopPropagation).toBeCalledTimes(0)
+
+      vi.clearAllMocks()
+      call(obj, event, 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickOnceStop).toBeCalledTimes(1)
+      expect(spyClickStopOnce).toBeCalledTimes(1)
+      expect(spyClickOnceStopPatch).toBeCalledTimes(0)
+      expect(spyClickStopOncePatch).toBeCalledTimes(0)
+      expect(event.stopPropagation).toBeCalled()
+
+      patchEvent(obj, 'onClickOnceStop', spyClickOnceStop, spyClickOnceStopPatch)
+      patchEvent(obj, 'onClickStopOnce', spyClickStopOnce, spyClickStopOncePatch)
+
+      vi.clearAllMocks()
+      call(obj, getMockEvent(), 'click')
+      expect(spyClick).toBeCalledTimes(1)
+      expect(spyClickOnceStop).toBeCalledTimes(0)
+      expect(spyClickStopOnce).toBeCalledTimes(0)
+      expect(spyClickOnceStopPatch).toBeCalledTimes(0)
+      expect(spyClickStopOncePatch).toBeCalledTimes(0)
+      expect(event.stopPropagation).toBeCalledTimes(0)
+    })
+  })
+
+  it('removes the function if `nextValue` is `null` or `undefined`', () => {
+    // NOTE: See this playground for Vue's behavior in the DOM
+    // https://play.vuejs.org/#eNqNU8tu2zAQ/JUFL0oAQ67RngRJfQQ+tAenaHPkRZFXthKKJPhwHAj69yyphxMgCHISd3d2dmYp9uyn1unJI8tYbmvTagcWndcll22nlXHQg8EGBmiM6iAhaMIll7WS1lHFeuGgCJCrZKemRHI9Axr5hao9yKrDDBIKkxWcKuEpurqGooz0oSeNWQJHEM0bLhybtxybz3BsJo4LyyST6Bd59qnSlJ5YuASCLSTzMQ2DoShmad+joix445Im5OtxcbQyChx2WlQOKQLIdbm7vdtmcCPa+rGVB+Csq57vEYyXnIE9Ki/2oKR4Dhk61LgCPKGEtgF3RGi8rF2rKLZRrcZ9mq/D9RD7vXeOSj/qwJ6G5oKzWTZn5TIK+j7YiUaGIV+Pje+QUH+YQr3h8xZ43JREM115YKFEcP/KMVsxZ2m1TXtIH6yS9FfFrXJWq063As2tDm4sZ9m471CrhFBPf2LOGY+rOV8fsX58J/9gzyHH2V8Sg+ZEVpeaq8wB3Vje/t/hmc5LsVN7Lwj9QfEfWiV80DjCfnm5J9mvcFHt7/g26ELv7PbsUNrZVBAakEPEc0bv5eYD6xe5X9NvsY9+KTa8ABkdL2A=
+    const obj = getMockObject()
+
+    const spyClick = vi.fn()
+    const spyClickStop = vi.fn()
+
+    patchEvent(obj, 'onClick', undefined, spyClick)
+    patchEvent(obj, 'onClickStop', undefined, spyClickStop)
+
+    call(obj, getMockEvent(), 'click')
+    expect(spyClick).toBeCalledTimes(1)
+    expect(spyClickStop).toBeCalledTimes(1)
+
+    patchEvent(obj, 'onClick', spyClick, null)
+    patchEvent(obj, 'onClickStop', spyClickStop, undefined)
+
+    vi.clearAllMocks()
+    call(obj, getMockEvent(), 'click')
+    expect(spyClick).toBeCalledTimes(0)
+    expect(spyClickStop).toBeCalledTimes(0)
+  })
+
+  it('sets the function if `nextValue` is a function', () => {
+    // NOTE: See this playground for Vue's behavior in the DOM
+    // https://play.vuejs.org/#eNqNU8tu2zAQ/JUFL0oAQ67RngRJfQQ+tAenaHPkRZFXthKKJPhwHAj69yyphxMgCHISd3d2dmYp9uyn1unJI8tYbmvTagcWndcll22nlXHQg8EGBmiM6iAhaMIll7WS1lHFeuGgCJCrZKemRHI9Axr5hao9yKrDDBIKkxWcKuEpurqGooz0oSeNWQJHEM0bLhybtxybz3BsJo4LyyST6Bd59qnSlJ5YuASCLSTzMQ2DoShmad+joix445Im5OtxcbQyChx2WlQOKQLIdbm7vdtmcCPa+rGVB+Csq57vEYyXnIE9Ki/2oKR4Dhk61LgCPKGEtgF3RGi8rF2rKLZRrcZ9mq/D9RD7vXeOSj/qwJ6G5oKzWTZn5TIK+j7YiUaGIV+Pje+QUH+YQr3h8xZ43JREM115YKFEcP/KMVsxZ2m1TXtIH6yS9FfFrXJWq063As2tDm4sZ9m471CrhFBPf2LOGY+rOV8fsX58J/9gzyHH2V8Sg+ZEVpeaq8wB3Vje/t/hmc5LsVN7Lwj9QfEfWiV80DjCfnm5J9mvcFHt7/g26ELv7PbsUNrZVBAakEPEc0bv5eYD6xe5X9NvsY9+KTa8ABkdL2A=
+    const obj = getMockObject()
+
+    const spyClickStop0 = vi.fn()
+    const spyClickStop1 = vi.fn()
+
+    patchEvent(obj, 'onClickStop', undefined, spyClickStop0)
+
+    call(obj, getMockEvent(), 'click')
+    expect(spyClickStop0).toBeCalledTimes(1)
+    expect(spyClickStop1).toBeCalledTimes(0)
+
+    vi.clearAllMocks()
+    patchEvent(obj, 'onClickStop', spyClickStop0, spyClickStop1)
+    call(obj, getMockEvent(), 'click')
+    expect(spyClickStop0).toBeCalledTimes(0)
+    expect(spyClickStop1).toBeCalledTimes(1)
+  })
+
+  it('sets the function if `nextValue` is an array of functions', () => {
+    const obj = getMockObject()
+
+    const spyClickStop0 = vi.fn()
+    const spyClickStop1 = vi.fn()
+    const spyClickStop2 = vi.fn()
+
+    patchEvent(obj, 'onClickStop', undefined, spyClickStop0)
+
+    call(obj, getMockEvent(), 'click')
+    expect(spyClickStop0).toBeCalledTimes(1)
+    expect(spyClickStop1).toBeCalledTimes(0)
+
+    vi.clearAllMocks()
+    patchEvent(obj, 'onClickStop', spyClickStop0, [spyClickStop1, spyClickStop2])
+    call(obj, getMockEvent(), 'click')
+    expect(spyClickStop0).toBeCalledTimes(0)
+    expect(spyClickStop1).toBeCalledTimes(1)
+    expect(spyClickStop2).toBeCalledTimes(1)
+  })
+})
+
+function getMockObject() {
+  return { __tres: { } } as TresInstance
+}
+
+function getMockEvent() {
+  return { stopPropagation: vi.fn(), nativeEvent: { preventDefault: vi.fn() } }
+}
+
+function call(el: TresObject, event, eventName: string) {
+  const threeName = `on${capitalize(eventName)}`
+  el[threeName]?.(event)
+}
diff --git a/src/utils/createEventManager/eventModifiers.ts b/src/utils/createEventManager/eventModifiers.ts
new file mode 100644
index 000000000..874b0c87b
--- /dev/null
+++ b/src/utils/createEventManager/eventModifiers.ts
@@ -0,0 +1,255 @@
+import { isProd, useLogger } from '../../composables'
+import * as is from '../is'
+import { DOM_TO_THREE, THREE_EVENT_NAMES } from './const'
+import type { EventHandler, ThreeEvent, TresInstance } from '../../types'
+import type { DomEventName } from './const'
+
+type EventModifiers = Partial<{
+  capture: boolean
+  once: boolean
+  passive: boolean
+  prevent: boolean
+  self: boolean
+  stop: boolean
+}>
+export const EVENT_MODIFIERS: string[] = 'Capture|Once|Passive|Prevent|Self|Stop'.split('|')
+const eventModifierRE = /(?:Capture|Once|Passive|Prevent|Self|Stop)$/
+
+const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
+  const cache: Record<string, string> = Object.create(null)
+  return ((str: string) => {
+    const hit = cache[str]
+    return hit || (cache[str] = fn(str))
+  }) as T
+}
+
+const hyphenateRE = /\B([A-Z])/g
+export const patchPropDomEventRE = new RegExp(`^(${THREE_EVENT_NAMES.join('|')})`)
+
+const hyphenate: (str: string) => string = cacheStringFunction(
+  (str: string) => str.replace(hyphenateRE, '-$1').toLowerCase(),
+)
+
+/**
+ * Return whether this is a THREE-style DOM event name, as passed to
+ * `nodeOps` by Vue.
+ * @param str - the string to test
+ * @example `onClick`: `true`
+ * `onDblclickSelfCapture`: `true`
+ * `onDoubleClick`: `false` – deprecated THREE-style DOM name
+ */
+export function isVueEventName(str: string) {
+  return patchPropDomEventRE.test(str)
+}
+
+/**
+ * Parses a THREE-style DOM event name and returns a DOM-style event name with Vue event modifiers.
+ * @example `parseName('onEventname')` returns `['eventname', undefined]`
+ * `parseName('onEventnameSelfStop')` returns `['eventname', { self: true, stop: true }]`
+ * @source https://github.com/vuejs/core/blob/d298c431cc422b53cf4e9c69bf1daf926c33b6e0/packages/shared/src/general.ts#L96C1-L102C2
+ */
+export function parseName(threeStyleDomEventName: string): [string, EventModifiers | undefined] {
+  let eventModifiers: EventModifiers | undefined
+  if (eventModifierRE.test(threeStyleDomEventName)) {
+    eventModifiers = {}
+    let m
+    // eslint-disable-next-line no-cond-assign
+    while ((m = threeStyleDomEventName.match(eventModifierRE))) {
+      threeStyleDomEventName = threeStyleDomEventName.slice(0, threeStyleDomEventName.length - m[0].length)
+      ;(eventModifiers as any)[m[0].toLowerCase()] = true
+    }
+  }
+  const eventName = threeStyleDomEventName[2] === ':' ? threeStyleDomEventName.slice(3) : hyphenate(threeStyleDomEventName.slice(2))
+  return [eventName, eventModifiers]
+}
+
+function NOOP() {}
+
+const WARNINGS_EMITTED = { passive: false, capture: false }
+
+/**
+ * If this is not a production build, checks:
+ * - `value` is an acceptable event value: a function or an array.
+ * - `passive` and `capture` were not used as event modifiers in the prop name
+ * Warns if either are `false`.
+ * @param value – event value to test
+ * @param propName – prop name to test
+ * @returns the event value
+ */
+function sanitizeEventValue(value: unknown, propName: string): EventHandler<unknown> {
+  if (isProd) {
+    return value as EventHandler<unknown>
+  }
+
+  const eventModifiers = parseName(propName)[1] ?? {}
+  if (eventModifiers.passive && !WARNINGS_EMITTED.passive) {
+    WARNINGS_EMITTED.passive = true
+    useLogger().logWarning(`Event modifier \`passive\` seen in ${propName}. This event modifier is unsupported and will have no effect.`)
+  }
+  if (eventModifiers.capture && !WARNINGS_EMITTED.capture) {
+    WARNINGS_EMITTED.capture = true
+    useLogger().logWarning(`Event modifier \`capture\` seen in ${propName}. This event modifier is unsupported and will have no effect.`)
+  }
+
+  if (is.fun(value) || is.arr(value)) {
+    return value as EventHandler<unknown>
+  }
+  useLogger().logWarning(
+    `Wrong type passed as event handler to ${propName} - did you forget @ or : `
+    + `in front of your prop?\nExpected function or array of functions, received type ${typeof value}.`,
+  )
+  return NOOP
+}
+
+export function patchEvent(
+  obj: TresInstance,
+  rawName: string,
+  prevValue: EventHandler<any> | null,
+  nextValue: EventHandler<any> | unknown,
+): void {
+  const handlers = obj.__tres.handlers || (obj.__tres.handlers = { })
+
+  if (!prevValue && nextValue) {
+    // NOTE: add
+    handlers[rawName] = { value: sanitizeEventValue(nextValue, rawName), called: 0 }
+    updateEventInvoker(obj, rawName)
+  }
+  else if (prevValue && nextValue) {
+    // NOTE: patch
+    handlers[rawName].value = sanitizeEventValue(nextValue, rawName)
+    updateEventInvoker(obj, rawName)
+  }
+  else if (prevValue) {
+    // NOTE: remove
+    delete handlers[rawName]
+    updateEventInvoker(obj, rawName)
+  }
+}
+
+function updateEventInvoker(obj: TresInstance, rawName: string) {
+  // NOTE:
+  // We need to unify all the different event handlers for an event
+  // behind a single function call.
+  //
+  // PROBLEMS:
+  // - An event prop's value can be a function or an array of functions.
+  // - Tres supports most event modifiers here:
+  //   https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
+  //
+  // That means if  we get this ...
+  // `<TresMesh @click="fn0" @click.self="fn1" @click.self.once="[fn2, fn3]" />`
+  // ... we (may need to) call fn0, fn1, fn2, fn3 when we fire a `click` event.
+  //
+  // We need to put all of these functions and the logic for their event
+  // modifiers behind a single function call.
+
+  // NOTE: Gather events to be fired at the same time as `rawName`,
+  // e.g. `onClick`, `onClickStop`, `onClickStopSelf`
+  const domEventName = parseName(rawName)[0] as DomEventName
+  const threeEventName = DOM_TO_THREE[domEventName]
+  const rawNamesForDomEvent = Object.keys(obj.__tres.handlers).filter(key => key.startsWith(threeEventName))
+
+  // NOTE: No events handlers. Delete the key.
+  if (rawNamesForDomEvent.length === 0) {
+    delete obj[threeEventName]
+    return
+  }
+
+  // NOTE: Only one event handler. Only a single invoker is required.
+  if (rawNamesForDomEvent.length === 1) {
+    obj[threeEventName] = createInvoker(obj, rawNamesForDomEvent[0])
+    return
+  }
+
+  // NOTE: There are multiple event handlers for this event
+  // Create an "invoker" for each.
+  const invokers = [] as ((event: ThreeEvent<any>) => void)[]
+  for (const rawName of rawNamesForDomEvent) {
+    invokers.push(createInvoker(obj, rawName))
+  }
+  // NOTE: Place the invokers' calls behind a single function call.
+  obj[threeEventName] = (event: ThreeEvent<any>) => {
+    for (const invoker of invokers) {
+      invoker(event)
+    }
+  }
+}
+
+/**
+ * Creates and returns an "invoker": a function that calls an
+ * objects' event handlers that respond to the same event type –
+ * e.g., `onClick` and `onClickStop`.
+ * @param obj the object with the event handlers
+ * @param rawName the raw event name provided by Vue
+ * @returns an "invoker"
+ */
+function createInvoker(obj: TresInstance, rawName: string): (event: ThreeEvent<any>) => void {
+  const eventModifiers = parseName(rawName)[1] ?? {}
+  const eventValueCalled = obj.__tres.handlers[rawName]
+  const fnOrFns = eventValueCalled.value
+
+  // NOTE:
+  // This is largely for performance. We *could* always return the
+  // most complex "invoker" setup, which includes checks for all
+  // event modifiers. But we don't want to penalize users who aren't
+  // using event modifiers, so we'll return faster functions in some
+  // those cases.
+
+  // NOTE: The simple case, no event modifiers.
+  if (!eventModifiers || Object.values(eventModifiers).every(v => !v)) {
+    if (is.arr(fnOrFns)) {
+      // NOTE: We have an array of functions.
+      // Unify behind a single function call.
+      return (event: ThreeEvent<any>) => fnOrFns.forEach(fn => fn(event))
+    }
+    else {
+      // NOTE: We have a single function.
+      // Simply return it.
+      return fnOrFns
+    }
+  }
+
+  const { once, self, prevent, stop } = eventModifiers
+
+  // NOTE: The most complex case. We have event modifiers and
+  // `once` is one of them. (`once` requires extra state.)
+  if (eventModifiers && eventModifiers.once) {
+    if (is.arr(fnOrFns)) {
+      return (event: ThreeEvent<any>) => {
+        if (once && eventValueCalled.called) { return }
+        eventValueCalled.called++
+        if (self && event.eventObject !== event.object) { return }
+        fnOrFns.forEach(fn => fn(event))
+        if (prevent) { event.nativeEvent.preventDefault() }
+        if (stop) { event.stopPropagation() }
+      }
+    }
+
+    return (event: ThreeEvent<any>) => {
+      if (once && eventValueCalled.called) { return }
+      eventValueCalled.called++
+      if (self && event.eventObject !== event.object) { return }
+      fnOrFns(event)
+      if (prevent) { event.nativeEvent.preventDefault() }
+      if (stop) { event.stopPropagation() }
+    }
+  }
+
+  // NOTE: We have event modifiers, but not `once`.
+  // Without `once`, no extra state updates are required.
+  if (is.arr(fnOrFns)) {
+    return (event: ThreeEvent<any>) => {
+      if (self && event.eventObject !== event.object) { return }
+      fnOrFns.forEach(fn => fn(event))
+      if (prevent) { event.nativeEvent.preventDefault() }
+      if (stop) { event.stopPropagation() }
+    }
+  }
+
+  return (event: ThreeEvent<any>) => {
+    if (self && event.eventObject !== event.object) { return }
+    fnOrFns(event)
+    if (prevent) { event.nativeEvent.preventDefault() }
+    if (stop) { event.stopPropagation() }
+  }
+}
diff --git a/src/utils/createEventManager/eventsNoop.ts b/src/utils/createEventManager/eventsNoop.ts
new file mode 100644
index 000000000..76c17d4ad
--- /dev/null
+++ b/src/utils/createEventManager/eventsNoop.ts
@@ -0,0 +1,40 @@
+// NOTE:
+// This file consists of functions
+// used by `./createEventManager`.
+//
+// In this case, it causes `eventManager` to
+// attach no events and do nothing.
+
+import type { CreateEventManagerProps } from './createEventManager'
+
+function getInitialEvent() { return null }
+function getInitialConfig() { return {} }
+function stashLastEvent() { }
+function getLastEvent() { return null }
+function connect() { return { disconnect: () => { } } }
+function setUp() { }
+function isSetUp() { return false }
+function tearDown() { }
+function getIntersectionsPool() { return [] }
+function getIntersections() { return [] }
+function insert() { }
+function remove() { }
+function patchProp() { return false }
+function handleIntersections() { }
+
+export const eventsNoop: CreateEventManagerProps<any, any, null, null, any, null> = {
+  connect,
+  isSetUp,
+  setUp,
+  tearDown,
+  getIntersectionsPool,
+  getIntersections,
+  handleIntersections,
+  getInitialConfig,
+  getInitialEvent,
+  stashLastEvent,
+  getLastEvent,
+  insert,
+  remove,
+  patchProp,
+}
diff --git a/src/utils/createEventManager/eventsRaycast.test.ts b/src/utils/createEventManager/eventsRaycast.test.ts
new file mode 100644
index 000000000..1883865eb
--- /dev/null
+++ b/src/utils/createEventManager/eventsRaycast.test.ts
@@ -0,0 +1,1066 @@
+import { BoxGeometry, MeshBasicMaterial, Scene, Vector3 } from 'three'
+import * as THREE from 'three'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowRef } from 'vue'
+import type { TresContext } from 'src/composables/useTresContextProvider'
+import type { ThreeEvent } from 'src/types'
+import type { Object3D } from 'three'
+import catalogue from '../../core/catalogue'
+import { nodeOps as getNodeOps } from '../../core/nodeOps'
+import { DOM_TO_THREE, type ThreeEventName } from './const'
+import { createEventManager } from './createEventManager'
+import { eventsRaycast } from './eventsRaycast'
+
+const mockIntersections: THREE.Intersection<Object3D>[] = []
+const clear = () => { vi.clearAllMocks(); mockIntersections.length = 0 }
+
+describe('createEventManager', () => {
+  describe('props.getIntersectionsPool', () => {
+    it('returns `[]` if no objects have events', () => {
+      const mock = mockTresUsingEventManagerProps()
+      mock.add.DAG('g0 -> m0 m1; g2 -> m2')
+      const { config } = mock.context.eventManager
+      expect(eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)).toStrictEqual([])
+    })
+    it('returns an array including the object with events and all children', () => {
+      const mock = mockTresUsingEventManagerProps()
+      const { config } = mock.context.eventManager
+      const { g0, m0, m1, g2, m2 } = mock.add.DAG('g0 -> m0 m1; g2 -> m2')
+
+      mock.add.eventsTo(m0)
+
+      let pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(false)
+      expect(pool.includes(m0)).toBe(true)
+      expect(pool.includes(m1)).toBe(false)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.includes(m2)).toBe(false)
+
+      mock.add.eventsTo(g0)
+      pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(true)
+      expect(pool.includes(m0)).toBe(true)
+      expect(pool.includes(m1)).toBe(true)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.includes(m2)).toBe(false)
+
+      mock.add.eventsTo(m2)
+      pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(true)
+      expect(pool.includes(m0)).toBe(true)
+      expect(pool.includes(m1)).toBe(true)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.length).toBe(4)
+      expect(pool.includes(m2)).toBe(true)
+    })
+    it('updates following a removal', () => {
+      const mock = mockTresUsingEventManagerProps()
+      // NOTE: NodeOps notifies context.eventManager of changes to
+      // event props. So adding the eventManager to the context is
+      // required here.
+      const { config } = mock.context.eventManager
+      const { g0, m0, m1, g2, m2 } = mock.add.DAG('g0 -> m0 m1; g2 -> m2')
+
+      mock.add.eventsTo(g0)
+      mock.add.eventsTo(m0)
+      let pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(true)
+      expect(pool.includes(m0)).toBe(true)
+      expect(pool.includes(m1)).toBe(true)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.includes(m2)).toBe(false)
+
+      mock.nodeOps.remove(m0)
+      pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(true)
+      expect(pool.includes(m0)).toBe(false)
+      expect(pool.includes(m1)).toBe(true)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.includes(m2)).toBe(false)
+
+      mock.nodeOps.remove(g0)
+
+      pool = eventsRaycast.getIntersectionsPool(mockEvt('pointermove'), config)
+
+      expect(pool.includes(g0)).toBe(false)
+      expect(pool.includes(m0)).toBe(false)
+      expect(pool.includes(m1)).toBe(false)
+
+      expect(pool.includes(g2)).toBe(false)
+      expect(pool.includes(m2)).toBe(false)
+    })
+  })
+  describe('const eventManager = createEventManager(raycastProps, context)', () => {
+    describe('eventManager.test(pool: Iterable<Object3D>, event: MouseEvent | PointerEvent)', () => {
+      it('returns `[]` if not `isSetUp()`', () => {
+        const mock = mockTresUsingEventManagerProps()
+        const objects = mock.add.DAG('g0 -> m0')
+        eventsRaycast.isSetUp = () => false
+        const { test } = mock.context.eventManager
+        expect(test([objects.g0, objects.m0])).toStrictEqual([])
+      })
+      it('returns `raycaster.intersectObjects(objects)` if `isSetup()`', () => {
+        const mock = mockTresUsingEventManagerProps()
+        const objects = mock.add.DAG('g0 -> m0 m1; m0 -> g1; g1 -> m2')
+        eventsRaycast.isSetUp = () => true
+        mock.context.eventManager.config.raycaster.intersectObjects = objects => objects.map(object => ({ object }))
+
+        const { test } = mock.context.eventManager
+        const pool = [objects.g0, objects.m0]
+        expect(test(pool)).toStrictEqual(mock.context.eventManager.config.raycaster.intersectObjects(pool))
+      })
+    })
+    describe('eventManager.handle(event: MouseEvent | PointerEvent)', () => {
+      beforeEach(() => {
+        // NOTE: We're not testing `isSetUp` here.
+        eventsRaycast.isSetUp = () => true
+      })
+      describe('wheel', () => {
+        it('calls `wheel` methods on "hit" objects', () => {
+          const mock = mockTresUsingEventManagerProps()
+          const objects = mock.add.DAG('g0 -> m0 m1; m0 -> g1; g1 -> m2')
+          const { g0, m2 } = objects
+          const g0Spies = mock.add.eventsTo(g0)
+          const m2Spies = mock.add.eventsTo(m2)
+          const { handle } = mock.context.eventManager
+
+          // NOTE: mockIntersection is already empty. Just making it explicit.
+          mock.set.mockIntersection([])
+
+          // NOTE: Nothing "hit". No calls expected.
+          handle(mockEvt('wheel'))
+          expect(g0Spies.onWheel).toBeCalledTimes(0)
+          expect(m2Spies.onWheel).toBeCalledTimes(0)
+
+          mock.set.mockIntersection([g0])
+          handle(mockEvt('wheel'))
+          expect(g0Spies.onWheel).toBeCalledTimes(1)
+          expect(m2Spies.onWheel).toBeCalledTimes(0)
+
+          mock.set.mockIntersection([m2])
+          handle(mockEvt('wheel'))
+          expect(g0Spies.onWheel).toBeCalledTimes(2)
+          expect(m2Spies.onWheel).toBeCalledTimes(1)
+
+          mock.set.mockIntersection([])
+          handle(mockEvt('wheel'))
+          expect(g0Spies.onWheel).toBeCalledTimes(2)
+          expect(m2Spies.onWheel).toBeCalledTimes(1)
+        })
+      })
+
+      describe('pointermove', () => {
+        describe.each([
+          { threeEvent: 'onPointerenter' },
+          { threeEvent: 'onPointerover' },
+        ])('$threeEvent', ({ threeEvent }) => {
+          it(`calls \`${threeEvent}\` methods on objects newly under pointer`, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { handle } = mock.context.eventManager
+
+            const { g0, g1, m1, m2, mNotIncluded } = mock.add.DAG('g0 -> m0 m1; m0 -> g1; g1 -> m2; m2 -> mNotIncluded')
+            const g0Spies = mock.add.eventsTo(g0)
+            const g1Spies = mock.add.eventsTo(g1)
+            const mNotIncludedSpies = mock.add.eventsTo(mNotIncluded)
+
+            mock.set.mockIntersection(m2)
+
+            expect(g0Spies[threeEvent]).toBeCalledTimes(0)
+            expect(g1Spies[threeEvent]).toBeCalledTimes(0)
+            expect(mNotIncludedSpies[threeEvent]).toBeCalledTimes(0)
+            // debug
+            handle(mockEvt('pointermove'))
+            expect(g0Spies[threeEvent]).toBeCalledTimes(1)
+            expect(g1Spies[threeEvent]).toBeCalledTimes(1)
+            expect(mNotIncludedSpies[threeEvent]).toBeCalledTimes(0)
+
+            mock.set.mockIntersection([])
+
+            handle(mockEvt('pointermove'))
+            expect(g0Spies[threeEvent]).toBeCalledTimes(1)
+            expect(g1Spies[threeEvent]).toBeCalledTimes(1)
+            expect(mNotIncludedSpies[threeEvent]).toBeCalledTimes(0)
+
+            mock.set.mockIntersection(m1)
+
+            handle(mockEvt('pointermove'))
+            expect(g0Spies[threeEvent]).toBeCalledTimes(2)
+            expect(g1Spies[threeEvent]).toBeCalledTimes(1)
+            expect(mNotIncludedSpies[threeEvent]).toBeCalledTimes(0)
+          })
+          it(`does not call \`${threeEvent}\` methods on objects still directly under pointer`, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { mUnderPointer, mAlternates } = mock.add.DAG('mUnderPointer; mAlternates')
+            const mUnderPointerSpies = mock.add.eventsTo(mUnderPointer)
+            mock.add.eventsTo(mAlternates)
+            const { handle } = mock.context.eventManager
+
+            mock.set.mockIntersection(mUnderPointer)
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            expect(mUnderPointerSpies[threeEvent]).toBeCalledTimes(1)
+
+            mock.clear()
+            mock.set.mockIntersection([mUnderPointer, mAlternates])
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            expect(mUnderPointerSpies[threeEvent]).toBeCalledTimes(0)
+
+            mock.clear()
+            mock.set.mockIntersection(mUnderPointer)
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            expect(mUnderPointerSpies[threeEvent]).toBeCalledTimes(0)
+
+            mock.clear()
+            mock.set.mockIntersection([mAlternates, mUnderPointer])
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            handle(mockEvt('pointermove'))
+            expect(mUnderPointerSpies[threeEvent]).toBeCalledTimes(0)
+          })
+          it(`does not call \`${threeEvent}\` methods on objects still under pointer via a different child`, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { gStaysUnderPointer, m0, m1 } = mock.add.DAG('gStaysUnderPointer -> m0 m1')
+            const gStaysUnderPointerSpies = mock.add.eventsTo(gStaysUnderPointer)
+            const { handle } = mock.context.eventManager
+
+            mock.set.mockIntersection(m0)
+            handle(mockEvt('pointermove'))
+            expect(gStaysUnderPointerSpies[threeEvent]).toBeCalledTimes(1)
+
+            mock.set.mockIntersection(m1)
+            handle(mockEvt('pointermove'))
+            expect(gStaysUnderPointerSpies[threeEvent]).toBeCalledTimes(1)
+          })
+
+          it(`does not propagate if stopped`, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { g, m0, m1 } = mock.add.DAG('g -> m0 m1')
+            const gSpy = vi.fn()
+            const m0Spy = vi.fn()
+            const m1Spy = vi.fn()
+            mock.nodeOps.patchProp(g, threeEvent, undefined, gSpy)
+            mock.nodeOps.patchProp(m0, threeEvent, undefined, (e) => { e.stopPropagation(); m0Spy() })
+            mock.nodeOps.patchProp(m1, threeEvent, undefined, (e) => { e.stopPropagation(); m1Spy() })
+            const { handle } = mock.context.eventManager
+
+            mock.set.mockIntersection(m0)
+            handle(mockEvt('pointermove'))
+            expect(gSpy).toBeCalledTimes(0)
+            expect(m0Spy).toBeCalledTimes(1)
+            expect(m1Spy).toBeCalledTimes(0)
+
+            mock.clear()
+            mock.set.mockIntersection([m0, m1])
+            handle(mockEvt('pointermove'))
+            expect(gSpy).toBeCalledTimes(0)
+            expect(m0Spy).toBeCalledTimes(0)
+            expect(m1Spy).toBeCalledTimes(1)
+
+            mock.clear()
+            mock.set.mockIntersection([m0, m1])
+            handle(mockEvt('pointermove'))
+            expect(gSpy).toBeCalledTimes(0)
+            expect(m0Spy).toBeCalledTimes(0)
+            expect(m1Spy).toBeCalledTimes(0)
+          })
+          describe(`${threeEvent} event`, () => {
+            it('has an `object` field containing the intersected object', () => {
+              const mock = mockTresUsingEventManagerProps()
+              const { g0, m0 } = mock.add.DAG('g0 -> m0')
+              let m0Event: ThreeEvent<PointerEvent> | null = null
+              let g0Event: ThreeEvent<PointerEvent> | null = null
+              mock.nodeOps.patchProp(m0, threeEvent, undefined, (e: ThreeEvent<PointerEvent>) => m0Event = e)
+              mock.nodeOps.patchProp(g0, threeEvent, undefined, (e: ThreeEvent<PointerEvent>) => g0Event = e)
+
+              const { handle } = mock.context.eventManager
+
+              mock.set.mockIntersection([])
+              handle(mockEvt('pointermove'))
+
+              mock.set.mockIntersection(m0)
+              handle(mockEvt('pointermove'))
+
+              expect(m0Event.object).toBe(m0)
+              expect(g0Event.object).toBe(m0)
+            })
+          })
+        })
+      })
+
+      describe.each(
+        [
+          { domEvent: 'click', threeEvent: 'onClick', mockClickFn: () => mockEvt('click') },
+          { domEvent: 'contextmenu', threeEvent: 'onContextmenu', mockClickFn: () => mockEvt('contextmenu') },
+          { domEvent: 'dblclick', threeEvent: 'onDblclick', mockClickFn: () => mockEvt('dblclick') },
+        ],
+      )('$domEvent', ({ threeEvent, mockClickFn }) => {
+        it(`calls \`${threeEvent}\` methods on objects under pointer and ancestors`, () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { g0, g1, m0, m2 } = mock.add.DAG('g0 -> m0 m1; m0 -> g1; g1 -> m2')
+          const g0Spies = mock.add.eventsTo(g0)
+          const g1Spies = mock.add.eventsTo(g1)
+          const m0Spies = mock.add.eventsTo(m0)
+          const m2Spies = mock.add.eventsTo(m2)
+
+          const { handle } = mock.context.eventManager
+          mock.add.toMockIntersection(m2)
+
+          expect(g0Spies[threeEvent]).toBeCalledTimes(0)
+          expect(g1Spies[threeEvent]).toBeCalledTimes(0)
+          expect(m0Spies[threeEvent]).toBeCalledTimes(0)
+          expect(m2Spies[threeEvent]).toBeCalledTimes(0)
+          handle(mockClickFn())
+          expect(g0Spies[threeEvent]).toBeCalledTimes(1)
+          expect(g1Spies[threeEvent]).toBeCalledTimes(1)
+          expect(m0Spies[threeEvent]).toBeCalledTimes(1)
+          expect(m2Spies[threeEvent]).toBeCalledTimes(1)
+        })
+        it(`calls \`${threeEvent}\` methods on hit objects and ancestors`, () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { g0, m0, m1, m2 } = mock.add.DAG('g0 -> m0 m1; m0 -> g1; g1 -> m2')
+          const g0Spies = mock.add.eventsTo(g0)
+          const m0Spies = mock.add.eventsTo(m0)
+          const m1Spies = mock.add.eventsTo(m1)
+          const m2Spies = mock.add.eventsTo(m2)
+
+          mock.set.mockIntersection(m2)
+
+          const { handle } = mock.context.eventManager
+
+          expect(g0Spies[threeEvent]).toBeCalledTimes(0)
+          expect(m0Spies[threeEvent]).toBeCalledTimes(0)
+          expect(m2Spies[threeEvent]).toBeCalledTimes(0)
+          handle(mockClickFn())
+          expect(g0Spies[threeEvent]).toBeCalledTimes(1)
+          expect(m0Spies[threeEvent]).toBeCalledTimes(1)
+          expect(m2Spies[threeEvent]).toBeCalledTimes(1)
+
+          mock.clear()
+          mock.set.mockIntersection(m1)
+
+          expect(g0Spies[threeEvent]).toBeCalledTimes(0)
+          expect(m1Spies[threeEvent]).toBeCalledTimes(0)
+          handle(mockClickFn())
+          expect(g0Spies[threeEvent]).toBeCalledTimes(1)
+          expect(m1Spies[threeEvent]).toBeCalledTimes(1)
+        })
+        it(`calls \`${threeEvent}\` once per object per event`, () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { m0, m1, m2 } = mock.add.DAG('m0 -> m1 m2')
+          const m0Spies = mock.add.eventsTo(m0)
+          mock.add.eventsTo(m1)
+          mock.add.eventsTo(m2)
+
+          // NOTE: This will result in 2 hits.
+          mock.set.mockIntersection([m1, m2])
+
+          const { handle } = mock.context.eventManager
+
+          expect(m0Spies[threeEvent]).toBeCalledTimes(0)
+          handle(mockClickFn())
+          expect(m0Spies[threeEvent]).toBeCalledTimes(1)
+
+          mock.clear()
+          // NOTE: This will result in 3 hits.
+          mock.set.mockIntersection([m0, m1, m2])
+
+          expect(m0Spies[threeEvent]).toBeCalledTimes(0)
+          handle(mockClickFn())
+          expect(m0Spies[threeEvent]).toBeCalledTimes(1)
+        })
+        it('calls `pointermissed` on all elements in subtrees that were not hit', () => {
+          const mock = mockTresUsingEventManagerProps()
+          // NOTE: Names in DAG
+          //
+          // Prefixes denote type:
+          // `g` is a `TresGroup`
+          // `m` is a `TresMesh`
+          //
+          // Suffixes denote descendence:
+          // Parent -> child -> grandchild -> etc.
+          // A -> AB -> ABD -> ABDE
+          // A -> AC
+          const { gA, mAB, mAC, mABDE } = mock.add.DAG('gA -> mAB mAC; mAB -> gABD; gABD -> mABDE')
+
+          const gASpies = mock.add.eventsTo(gA)
+          const mABSpies = mock.add.eventsTo(mAB)
+          const mACSpies = mock.add.eventsTo(mAC)
+          const mABDESpies = mock.add.eventsTo(mABDE)
+
+          expect(gASpies.onPointermissed).toBeCalledTimes(0)
+          expect(mABSpies.onPointermissed).toBeCalledTimes(0)
+          expect(mACSpies.onPointermissed).toBeCalledTimes(0)
+          expect(mABDESpies.onPointermissed).toBeCalledTimes(0)
+
+          const { handle } = mock.context.eventManager
+
+          // NOTE: We're going to "hit" `mABDE`.
+          // Acestors `mA`, `mABD` are also "hit".
+          // `mAC` is "missed".
+          mock.set.mockIntersection(mABDE)
+          handle(mockClickFn())
+
+          expect(gASpies.onPointermissed).toBeCalledTimes(0)
+          expect(mABSpies.onPointermissed).toBeCalledTimes(0)
+          expect(mACSpies.onPointermissed).toBeCalledTimes(1)
+          expect(mABDESpies.onPointermissed).toBeCalledTimes(0)
+
+          vi.clearAllMocks()
+          mock.set.mockIntersection(mAC)
+          handle(mockClickFn())
+          expect(gASpies.onPointermissed).toBeCalledTimes(0)
+          expect(mABSpies.onPointermissed).toBeCalledTimes(1)
+          expect(mACSpies.onPointermissed).toBeCalledTimes(0)
+          expect(mABDESpies.onPointermissed).toBeCalledTimes(1)
+
+          vi.clearAllMocks()
+          mock.set.mockIntersection([])
+          handle(mockClickFn())
+          expect(gASpies.onPointermissed).toBeCalledTimes(1)
+          expect(mABSpies.onPointermissed).toBeCalledTimes(1)
+          expect(mACSpies.onPointermissed).toBeCalledTimes(1)
+          expect(mABDESpies.onPointermissed).toBeCalledTimes(1)
+        })
+      })
+      describe(':blocking', () => {
+        it('stops objects "behind" :blocking objects from receiving `click`, `wheel`, `pointermove`, when `true`', () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { mFront, mBehind } = mock.add.DAG('mFront; mBehind')
+          const mFrontSpies = mock.add.eventsTo(mFront)
+          const mBehindSpies = mock.add.eventsTo(mBehind)
+
+          mock.nodeOps.patchProp(mFront, 'blocking', undefined, true)
+          mock.set.mockIntersection([mFront, mBehind])
+
+          handle(mockEvt('wheel'))
+          expect(mBehindSpies.onWheel).toBeCalledTimes(0)
+          expect(mFrontSpies.onWheel).toBeCalledTimes(1)
+
+          handle(mockEvt('pointermove'))
+          expect(mBehindSpies.onPointermove).toBeCalledTimes(0)
+          expect(mFrontSpies.onPointermove).toBeCalledTimes(1)
+
+          handle(mockEvt('click'))
+          expect(mBehindSpies.onClick).toBeCalledTimes(0)
+          expect(mFrontSpies.onClick).toBeCalledTimes(1)
+        })
+        it('bubbles events to parents (as normal) when `true`', () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { g, mFront, mBehind } = mock.add.DAG('g -> mFront; mBehind')
+          const gSpies = mock.add.eventsTo(g)
+
+          mock.nodeOps.patchProp(mFront, 'blocking', undefined, true)
+          mock.set.mockIntersection([mFront, mBehind])
+
+          handle(mockEvt('wheel'))
+          expect(gSpies.onWheel).toBeCalledTimes(1)
+
+          handle(mockEvt('pointermove'))
+          expect(gSpies.onPointermove).toBeCalledTimes(1)
+
+          handle(mockEvt('click'))
+          expect(gSpies.onClick).toBeCalledTimes(1)
+        })
+        it('restores normal "non-solid" behavior when `false`', () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { mFront, mBehind } = mock.add.DAG('mFront; mBehind')
+          const mFrontSpies = mock.add.eventsTo(mFront)
+          const mBehindSpies = mock.add.eventsTo(mBehind)
+
+          mock.nodeOps.patchProp(mFront, 'blocking', undefined, true)
+          mock.set.mockIntersection([mFront, mBehind])
+
+          handle(mockEvt('wheel'))
+          expect(mBehindSpies.onWheel).toBeCalledTimes(0)
+          expect(mFrontSpies.onWheel).toBeCalledTimes(1)
+
+          handle(mockEvt('pointermove'))
+          expect(mBehindSpies.onPointermove).toBeCalledTimes(0)
+          expect(mFrontSpies.onPointermove).toBeCalledTimes(1)
+
+          handle(mockEvt('click'))
+          expect(mBehindSpies.onClick).toBeCalledTimes(0)
+          expect(mFrontSpies.onClick).toBeCalledTimes(1)
+
+          mock.nodeOps.patchProp(mFront, 'blocking', undefined, false)
+
+          vi.clearAllMocks()
+          handle(mockEvt('wheel'))
+          expect(mBehindSpies.onWheel).toBeCalledTimes(1)
+          expect(mFrontSpies.onWheel).toBeCalledTimes(1)
+
+          handle(mockEvt('pointermove'))
+          expect(mBehindSpies.onPointermove).toBeCalledTimes(1)
+          expect(mFrontSpies.onPointermove).toBeCalledTimes(1)
+
+          handle(mockEvt('click'))
+          expect(mBehindSpies.onClick).toBeCalledTimes(1)
+          expect(mFrontSpies.onClick).toBeCalledTimes(1)
+        })
+        it('calls @pointerleave on objects no longer receiving the pointer event after a new pointer event, even if they are still intersected', () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { mFront, mBehind } = mock.add.DAG('mFront; mBehind')
+          const mFrontSpies = mock.add.eventsTo(mFront)
+          const mBehindSpies = mock.add.eventsTo(mBehind)
+
+          mock.set.mockIntersection(mBehind)
+          handle(mockEvt('pointermove'))
+
+          expect(mBehindSpies.onPointerleave).toBeCalledTimes(0)
+          // NOTE: `mFrontStops` is ahead of `mBehind` and should
+          // get the event first.
+          mock.nodeOps.patchProp(mFront, 'blocking', undefined, true)
+          mock.set.mockIntersection([mFront, mBehind])
+
+          handle(mockEvt('pointermove'))
+          expect(mBehindSpies.onPointerleave).toBeCalledTimes(1)
+          expect(mFrontSpies.onPointerover).toBeCalledTimes(1)
+        })
+      })
+      describe('event.stopPropagation()', () => {
+        it('does not stop @pointerleave if @pointerout is stopped', () => {
+          // NOTE: Vue behavior in the DOM.
+          // https://play.vuejs.org/#eNp9U01v2zAM/SuELk6BwkGxnQI32Fb0sB22YN1RF81mbLWyKEhylsLwfx8lNx8t0l4Mi3yPenykRvHVuXI3oFiJKtReuwgB4+DW0urekY8wgsctTLD11EPB0EJaaWuyIUIfWrhN+UWxIW0jeoNqh9ChR1C2gbrD+gkSmAwWV4m5HWwdNVlwM4OGuLiCUVo44EpD7UIKTkjBlOkSq6cdXqalzPu8rG+BL0wsQyS38eRUqxJswby3BTPlULFazi6xP3yI2DujIvIJoOpu4MupqVspTgcpYBXis0GOjvBX1U8th21zR4b8Cgqj2y62Xj0XMEmxrhq9O9bK92ehp5Ivmo6Y1PQbyOzDehzzlKapWnLRdbXsbrLaM6V5Uq9uA8Xz07ZBh/yxsYQHru20bYEsQkMYwBKvCkchdgjEH18me84sEdciBvZyq9vyMZDlHcuuS1FT77RB/8sl04MUq3keKaeMoX8/ciz6Aa8P8bxKF+KPYZ9iUmw8BvSp6WMuKt8im5/S9w8/cc//x2RPzWAY/UHyN/IeDEnjDPvGI2PZZ7is9nt+KezOn3C/j2jDoakkNCGnjJeCX8/dB62f5H4qP2ce75yY/gPG30Vc
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { gListener, gStopper, mSource } = mock.add.DAG('gListener -> gStopper; gStopper -> mSource')
+
+          const gListenerSpies = mock.add.eventsTo(gListener)
+          mock.add.eventsTo(mSource)
+          mock.nodeOps.patchProp(gStopper, 'onPointerout', undefined, (e) => { e.stopPropagation() })
+
+          mock.set.mockIntersection(mSource)
+          handle(mockEvt('pointermove'))
+          mock.set.mockIntersection([])
+          handle(mockEvt('pointermove'))
+
+          expect(gListenerSpies.onPointerleave).toBeCalledTimes(1)
+          expect(gListenerSpies.onPointerout).not.toBeCalled()
+        })
+        it('does not stop @pointerout if @pointerleave is stopped', () => {
+          // NOTE: Vue behavior in the DOM.
+          // https://play.vuejs.org/#eNp9U01v2zAM/SuELk6BwkGxnQI32Fb0sB22YN1RF81mbLWyKEhylsLwfx8lNx8t0l4Mi3yPenykRvHVuXI3oFiJKtReuwgB4+DW0urekY8wgsctTLD11EPB0EJaaWuyIUIfWrhN+UWxIW0jeoNqh9ChR1C2gbrD+gkSmAwWV4m5HWwdNVlwM4OGuLiCUVo44EpD7UIKTkjBlOkSq6cdXqalzPu8rG+BL0wsQyS38eRUqxJswby3BTPlULFazi6xP3yI2DujIvIJoOpu4MupqVspTgcpYBXis0GOjvBX1U8th21zR4b8Cgqj2y62Xj0XMEmxrhq9O9bK92ehp5Ivmo6Y1PQbyOzDehzzlKapWnLRdbXsbrLaM6V5Uq9uA8Xz07ZBh/yxsYQHru20bYEsQkMYwBKvCkchdgjEH18me84sEdciBvZyq9vyMZDlHcuuS1FT77RB/8sl04MUq3keKaeMoX8/ciz6Aa8P8bxKF+KPYZ9iUmw8BvSp6WMuKt8im5/S9w8/cc//x2RPzWAY/UHyN/IeDEnjDPvGI2PZZ7is9nt+KezOn3C/j2jDoakkNCGnjJeCX8/dB62f5H4qP2ce75yY/gPG30Vc
+          const mock = mockTresUsingEventManagerProps()
+          const { handle } = mock.context.eventManager
+          const { gListener, gStopper, mSource } = mock.add.DAG('gListener -> gStopper; gStopper -> mSource')
+
+          const gListenerSpies = mock.add.eventsTo(gListener)
+          mock.add.eventsTo(mSource)
+          mock.nodeOps.patchProp(gStopper, 'onPointerleave', undefined, (e) => { e.stopPropagation() })
+
+          mock.set.mockIntersection(mSource)
+          handle(mockEvt('pointermove'))
+          mock.set.mockIntersection([])
+          handle(mockEvt('pointermove'))
+
+          expect(gListenerSpies.onPointerout).toBeCalledTimes(1)
+          expect(gListenerSpies.onPointerleave).not.toBeCalled()
+        })
+        describe('stops propagations for ...', () => {
+          it(`stops propagation for \`pointermissed\``, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { gListener, gStopper } = mock.add.DAG('gListener -> gStopper; gStopper -> mSource')
+            const gListenerSpies = mock.add.eventsTo(gListener)
+            const { handle } = mock.context.eventManager
+
+            mock.set.mockIntersection([])
+            handle(mockEvt('click'))
+            expect(gListenerSpies.onPointermissed).toBeCalledTimes(1)
+
+            vi.clearAllMocks()
+            mock.nodeOps.patchProp(gStopper, 'onPointermissed', undefined, e => e.stopPropagation())
+            handle(mockEvt('click'))
+            expect(gListenerSpies.onPointermissed).toBeCalledTimes(0)
+          })
+
+          it(`stops propagation for \`pointerenter\` and \`pointerover\``, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { gListener, gStopper, mSource } = mock.add.DAG('gListener -> gStopper; gStopper -> mSource')
+            const gListenerSpies = mock.add.eventsTo(gListener)
+            const { handle } = mock.context.eventManager
+
+            mock.nodeOps.patchProp(gStopper, 'onPointerenter', undefined, e => e.stopPropagation())
+            // NOTE: Cause a pointerenter
+            mock.set.mockIntersection([])
+            handle(mockEvt('pointermove'))
+            mock.set.mockIntersection([mSource])
+            handle(mockEvt('pointermove'))
+            //
+            expect(gListenerSpies.onPointerenter).toBeCalledTimes(0)
+
+            vi.clearAllMocks()
+            mock.nodeOps.patchProp(gStopper, 'onPointerover', undefined, e => e.stopPropagation())
+            // NOTE: Cause a pointerover
+            mock.set.mockIntersection([])
+            handle(mockEvt('pointermove'))
+            mock.set.mockIntersection([mSource])
+            handle(mockEvt('pointermove'))
+            //
+            expect(gListenerSpies.onPointerover).toBeCalledTimes(0)
+          })
+
+          it(`stops propagation for \`pointerleave\` and \`pointerout\``, () => {
+            const mock = mockTresUsingEventManagerProps()
+            const { gListener, gStopper, mSource } = mock.add.DAG('gListener -> gStopper; gStopper -> mSource')
+            const gListenerSpies = mock.add.eventsTo(gListener)
+            const { handle } = mock.context.eventManager
+
+            mock.nodeOps.patchProp(gStopper, 'onPointerleave', undefined, e => e.stopPropagation())
+            // NOTE: Cause a pointerleave
+            mock.set.mockIntersection([mSource])
+            handle(mockEvt('pointermove'))
+            mock.set.mockIntersection([])
+            handle(mockEvt('pointermove'))
+            //
+            expect(gListenerSpies.onPointerleave).toBeCalledTimes(0)
+
+            vi.clearAllMocks()
+            mock.nodeOps.patchProp(gStopper, 'onPointerout', undefined, e => e.stopPropagation())
+            // NOTE: Cause a pointerout
+            mock.set.mockIntersection([mSource])
+            handle(mockEvt('pointermove'))
+            mock.set.mockIntersection([])
+            handle(mockEvt('pointermove'))
+            //
+            expect(gListenerSpies.onPointerout).toBeCalledTimes(0)
+          })
+        })
+      })
+
+      describe.each([
+        { incomingDomEvent: 'click', threeEvent: DOM_TO_THREE.click },
+        { incomingDomEvent: 'contextmenu', threeEvent: DOM_TO_THREE.contextmenu },
+        { incomingDomEvent: 'dblclick', threeEvent: DOM_TO_THREE.dblclick },
+        { incomingDomEvent: 'pointerup', threeEvent: DOM_TO_THREE.pointerup },
+        { incomingDomEvent: 'pointerdown', threeEvent: DOM_TO_THREE.pointerdown },
+        { incomingDomEvent: 'wheel', threeEvent: DOM_TO_THREE.wheel },
+      ])(`$threeEvent(event: TresEvent)`, ({ incomingDomEvent, threeEvent }) => {
+        const mock = mockTresUsingEventManagerProps()
+        let objects = {} as Record<string, THREE.Object3D>
+        let events = {} as Record<string, ThreeEvent<any> | null>
+        let spies = {} as Record<string, ReturnType<typeof mock.add['eventsTo']>>
+        let intersection0 = null as THREE.Intersection | null
+        let intersection1 = null as THREE.Intersection | null
+        let distance = -1
+        let triggeringEvent = null as MouseEvent | PointerEvent | null
+
+        objects = mock.add.DAG('gParent -> mIntersected0; mIntersected1')
+
+        spies = {
+          gParent: mock.add.eventsTo(objects.gParent),
+          mIntersected0: mock.add.eventsTo(objects.mIntersected0),
+          mIntersected1: mock.add.eventsTo(objects.mIntersected1),
+        }
+
+        events = {
+          gParent: null,
+          mIntersected0: null,
+          mIntersected1: null,
+        }
+
+        for (const objectName of Object.keys(objects)) {
+          mock.nodeOps.patchProp(
+            objects[objectName],
+            threeEvent,
+            null,
+            (e: ThreeEvent<any>) => {
+              events[objectName] = { ...e }
+              spies[objectName][threeEvent]()
+            },
+          )
+        }
+
+        const { handle } = mock.context.eventManager
+
+        const mouseDownPosition = new THREE.Vector2(999, 1000)
+        const { x, y } = mouseDownPosition
+        const newPosition = new THREE.Vector2(0, 3)
+        const normalizedDeviceCoordinates = new THREE.Vector2(
+          (newPosition.x / mock.context.sizes.width.value) * 2 - 1,
+          -(newPosition.y / mock.context.sizes.height.value) * 2 + 1,
+        )
+
+        triggeringEvent = mockEvt(incomingDomEvent, { offsetX: newPosition.x, offsetY: newPosition.y })
+        distance = mouseDownPosition.distanceTo(newPosition)
+        handle(mockEvt('pointerdown', { offsetX: x, offsetY: y }))
+
+        mock.set.mockIntersection([objects.mIntersected0, objects.mIntersected1])
+        intersection0 = mock.get.mockIntersection()[0]
+        intersection1 = mock.get.mockIntersection()[1]
+
+        handle(mockEvt(incomingDomEvent, { offsetX: newPosition.x, offsetY: newPosition.y }))
+        it('has an `eventObject` field containing the Object3D receiving the event', () => {
+          expect(events.gParent.eventObject).toBe(objects.gParent)
+          expect(events.mIntersected0.eventObject).toBe(objects.mIntersected0)
+          expect(events.mIntersected1.eventObject).toBe(objects.mIntersected1)
+        })
+        it('has an `intersections` field containing the intersections', () => {
+          const expectedIntersections = [
+            { ...intersection0, eventObject: objects.mIntersected0 },
+            { ...intersection0, eventObject: objects.gParent },
+            { ...intersection1, eventObject: objects.mIntersected1 },
+          ]
+          for (const event of Object.values(events)) {
+            expect(event.intersections).toStrictEqual(expectedIntersections)
+          }
+        })
+        it('is a `{ ...intersection }` if an object was intersected', () => {
+          for (const key of Object.keys(intersection0)) {
+            if (key === 'object') {
+              expect(events.gParent.object).toStrictEqual(objects.mIntersected0)
+              expect(events.mIntersected0.object).toStrictEqual(objects.mIntersected0)
+              expect(events.mIntersected1.object).toStrictEqual(objects.mIntersected1)
+            }
+            else {
+              expect(events.gParent[key]).toStrictEqual(intersection0[key])
+              expect(events.mIntersected0[key]).toStrictEqual(intersection0[key])
+              expect(events.mIntersected1[key]).toStrictEqual(intersection1[key])
+            }
+          }
+        })
+        it('is a `{ ...domEvent }`', () => {
+          for (const event of Object.values(events)) {
+            for (const key in triggeringEvent) {
+              expect(event[key]).toBe(triggeringEvent[key])
+            }
+          }
+        })
+        it('has a `nativeEvent` field containing the original DOM event', () => {
+          for (const event of Object.values(events)) {
+            expect(event.nativeEvent).toStrictEqual(triggeringEvent)
+          }
+        })
+        it('has a `pointer` field containing the "normalized device coordinates" (NDC) of the event', () => {
+          for (const event of Object.values(events)) {
+            expect(event.pointer).toStrictEqual(normalizedDeviceCoordinates)
+          }
+        })
+        it('has a `ray` field containing the raycaster ray', () => {
+          for (const event of Object.values(events)) {
+            expect(event.ray).toBe(mock.context.eventManager.config.raycaster.ray)
+          }
+        })
+        it('has a `camera` field containing the raycaster\'s camera', () => {
+          for (const event of Object.values(events)) {
+            expect(event.camera).toBe(mock.context.camera.value)
+          }
+        })
+        describe('event.unprojectedPoint', () => {
+          it('has an `unprojectedPoint` field that is a Vector3', () => {
+            for (const event of Object.values(events)) {
+              expect(event.unprojectedPoint.isVector3).toBe(true)
+            }
+          })
+        })
+        describe('event.delta', () => {
+          if (incomingDomEvent === 'click' || incomingDomEvent === 'contextmenu' || incomingDomEvent === 'dblclick' || incomingDomEvent === 'pointerup') {
+            it('is the distance between the current position and prior `pointerdown` position', () => {
+              for (const event of Object.values(events)) {
+                expect(event.delta).toBe(distance)
+              }
+            })
+          }
+          else {
+            it('is 0', () => {
+              for (const event of Object.values(events)) {
+                expect(event).toBeDefined()
+                expect(event.delta).toBeDefined()
+                expect(event.delta).toBe(0)
+              }
+            })
+          }
+        })
+      })
+      describe(`onPointerout(event: TresEvent)`, () => {
+        const mock = mockTresUsingEventManagerProps()
+        const { g0, m0 } = mock.add.DAG('g0 -> m0')
+        let g0Spy = 0
+        let m0Spy = 0
+        let g0Event: ThreeEvent<PointerEvent> | null = null
+        let m0Event: ThreeEvent<PointerEvent> | null = null
+        mock.nodeOps.patchProp(g0, 'onPointerout', undefined, (e) => { g0Spy++; g0Event = e })
+        mock.nodeOps.patchProp(m0, 'onPointerout', undefined, (e) => { m0Spy++; m0Event = e })
+        const { handle } = mock.context.eventManager
+
+        mock.set.mockIntersection(m0)
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection(m0)
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection([])
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection([])
+        handle(mockEvt('pointermove'))
+
+        it('is called once for the same "out"', () => {
+          expect(g0Spy).toBe(1)
+          expect(m0Spy).toBe(1)
+        })
+        it('is defined', () => {
+          expect(g0Event).toBeDefined()
+          expect(m0Event).toBeDefined()
+        })
+        it('has an `object` field', () => {
+          expect('object' in g0Event).toBe(true)
+          expect('object' in m0Event).toBe(true)
+        })
+        it('has an `object` field containing the previously intersected object', () => {
+          expect(g0Event.object).toBe(m0)
+          expect(m0Event.object).toBe(m0)
+        })
+      })
+      describe(`onPointerleave(event: TresEvent)`, () => {
+        const mock = mockTresUsingEventManagerProps()
+        const { g0, m0 } = mock.add.DAG('g0 -> m0')
+        let g0Spy = 0
+        let m0Spy = 0
+        let g0Event: ThreeEvent<PointerEvent> | null = null
+        let m0Event: ThreeEvent<PointerEvent> | null = null
+        mock.nodeOps.patchProp(g0, 'onPointerleave', undefined, (e) => { g0Spy++; g0Event = e })
+        mock.nodeOps.patchProp(m0, 'onPointerleave', undefined, (e) => { m0Spy++; m0Event = e })
+        const { handle } = mock.context.eventManager
+
+        mock.set.mockIntersection(m0)
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection(m0)
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection([])
+        handle(mockEvt('pointermove'))
+        mock.set.mockIntersection([])
+        handle(mockEvt('pointermove'))
+
+        it('is called once for the same "leave"', () => {
+          expect(g0Spy).toBe(1)
+          expect(m0Spy).toBe(1)
+        })
+        it('is defined', () => {
+          expect(g0Event).toBeDefined()
+          expect(m0Event).toBeDefined()
+        })
+        it('has an `object` field', () => {
+          expect('object' in g0Event).toBe(true)
+          expect('object' in m0Event).toBe(true)
+        })
+        it('has an `object` field containing the previously intersected object', () => {
+          expect(g0Event.object).toBe(m0)
+          expect(m0Event.object).toBe(m0)
+        })
+      })
+    })
+    describe('removeInteractivity', () => {
+      describe.each([
+        { domEventName: 'pointerleave' },
+        { domEventName: 'pointerout' },
+      ])('$domEventName', ({ domEventName }) => {
+        it(`calls \`object.${DOM_TO_THREE[domEventName]}\` if the removed object was under the pointer`, () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { m0 } = mock.add.DAG('m0')
+          const m0Spies = mock.add.eventsTo(m0)
+          const { handle, remove } = mock.context.eventManager
+
+          mock.add.toMockIntersection(m0)
+          handle(mockEvt('pointermove'))
+
+          expect(m0Spies.onPointerenter).toBeCalledTimes(1)
+          remove(m0)
+          expect(m0Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(1)
+        })
+
+        it(`calls \`object.${DOM_TO_THREE[domEventName]}\` on objects in tree, if they are no longer under the pointer`, () => {
+          const mock = mockTresUsingEventManagerProps()
+          const { handle, remove } = mock.context.eventManager
+
+          const { g0, m0, m1, m2 } = mock.add.DAG('g0 -> m0 m1; m1 -> m2')
+
+          const g0Spies = mock.add.eventsTo(g0)
+          const m0Spies = mock.add.eventsTo(m0)
+          const m1Spies = mock.add.eventsTo(m1)
+          const m2Spies = mock.add.eventsTo(m2)
+
+          mock.add.toMockIntersection([m0, m2])
+          handle(mockEvt('pointermove'))
+
+          expect(g0Spies.onPointerenter).toBeCalledTimes(1)
+          expect(m0Spies.onPointerenter).toBeCalledTimes(1)
+          expect(m1Spies.onPointerenter).toBeCalledTimes(1)
+          expect(m2Spies.onPointerenter).toBeCalledTimes(1)
+
+          remove(m0)
+
+          expect(g0Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(0)
+          expect(m0Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(1)
+          expect(m1Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(0)
+          expect(m2Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(0)
+
+          vi.clearAllMocks()
+          remove(m2)
+
+          expect(g0Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(1)
+          expect(m0Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(0)
+          expect(m1Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(1)
+          expect(m2Spies[DOM_TO_THREE[domEventName]]).toBeCalledTimes(1)
+        })
+      })
+    })
+  })
+})
+
+function mockTresUsingEventManagerProps(props = eventsRaycast) {
+  function mockTresContext() {
+    const context = {
+      scene: shallowRef(new Scene()),
+      eventManager: null,
+      registerCamera: () => {},
+      deregisterCamera: () => {},
+      extend: catalogue.extend,
+      sizes: { width: { value: 100 }, height: { value: 100 } },
+      camera: { value: new THREE.PerspectiveCamera() },
+    } as unknown as TresContext
+
+    context.eventManager = createEventManager(props, context, () => {})
+    context.eventManager.config.raycaster.intersectObjects = (pool: any[]) => {
+      // NOTE:
+      // We are not testing raycast "hits", but we do want to test `pool`,
+      // which comes from `raycastProps.ts`.
+      // Mock raycaster returns the Intersections in `mockIntersections`, as
+      // long as `intersection.object` is in the passed `pool`.
+      return mockIntersections.filter(i => pool.includes(i.object))
+    }
+
+    mockIntersections.length = 0
+    return context
+  }
+
+  const canvas = {
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+  const context = mockTresContext()
+  const nodeOps = getNodeOps(context)
+
+  catalogue.extend(THREE)
+
+  const geo = new BoxGeometry()
+  const mat = new MeshBasicMaterial()
+  const scene = context.scene.value
+
+  function getGroup() {
+    const group = nodeOps.createElement('TresGroup')
+    return group
+  }
+
+  function getMesh() {
+    const mesh = nodeOps.createElement('TresMesh')
+    nodeOps.patchProp(mesh, 'geometry', undefined, geo)
+    nodeOps.patchProp(mesh, 'material', undefined, mat)
+    return mesh
+  }
+
+  const set = {
+    mockIntersection: (objectOrObjects: THREE.Object3D | THREE.Object3D[]) => {
+      mockIntersections.length = 0
+      const objects = Array.isArray(objectOrObjects) ? objectOrObjects : [objectOrObjects]
+      for (const object of objects) {
+        mockIntersections.push({ object, distance: -1, point: new Vector3() })
+      }
+    },
+  }
+
+  const getObjectsFromDagString = (dagString: string) => {
+    // Example
+    // g0 -> m0 m1; m1 -> m2
+    // Makes Group0, Mesh0, Mesh1, Mesh2
+    // Inserts g0 into scene
+    // Sets m0, m1 parent to g0
+    // Sets m2 parent to m1
+    const RESERVED_WORDS = new Set(['->'])
+    const result: Record<string, THREE.Object3D> = {}
+    const statements = dagString.split(';')
+    for (const statement of statements) {
+      const words = statement.split(' ').filter(w => w.length > 0)
+      let parentObject = null
+      for (const word of words) {
+        if (!RESERVED_WORDS.has(word)) {
+          if (!result[word]) {
+            let object
+            if (word.startsWith('m')) {
+              object = getMesh()
+            }
+            else {
+              object = getGroup()
+            }
+            object.name = word
+            result[word] = object
+            nodeOps.insert(object, undefined)
+          }
+
+          if (parentObject) {
+            nodeOps.insert(result[word], parentObject)
+          }
+          else {
+            parentObject = result[word]
+          }
+        }
+      }
+    }
+    return result
+  }
+
+  const add = {
+    toMockIntersection: (objectOrObjects: THREE.Object3D | THREE.Object3D[]) => {
+      if (Array.isArray(objectOrObjects)) {
+        for (const object of objectOrObjects) {
+          add.toMockIntersection(object)
+        }
+      }
+      else {
+        mockIntersections.push({ object: objectOrObjects, distance: -1, point: new Vector3() })
+      }
+    },
+    eventsTo(object: THREE.Object3D) {
+      const ALL_THREE_EVENTS: ThreeEventName[] = Object.values(DOM_TO_THREE)
+      const spies: Partial<Record<ThreeEventName, ReturnType<typeof vi.fn>>> = {}
+      for (const threeEvent of ALL_THREE_EVENTS) {
+        const spy = vi.fn()
+        nodeOps.patchProp(object, threeEvent, undefined, spy)
+        spies[threeEvent] = spy
+      }
+      return spies
+    },
+    DAG: (dagString: string, parent = scene) => {
+      const objects = getObjectsFromDagString(dagString)
+      const firstWord = dagString.split(' ').filter(w => w.length > 0)[0]
+      const firstObject = objects[firstWord]
+      parent.add(firstObject)
+      return objects
+    },
+  }
+
+  const get = {
+    mockIntersection: () => mockIntersections,
+  }
+
+  return { canvas, context, nodeOps, add, get, set, clear }
+}
+
+function mockEvt(type: PointerEvent['type'], options: Record<string, any> = {}) {
+  return { type, ...options } as PointerEvent
+}
diff --git a/src/utils/createEventManager/eventsRaycast.ts b/src/utils/createEventManager/eventsRaycast.ts
new file mode 100644
index 000000000..3e632d33e
--- /dev/null
+++ b/src/utils/createEventManager/eventsRaycast.ts
@@ -0,0 +1,430 @@
+import { Raycaster, Vector2, Vector3 } from 'three'
+import type { Object3D, Intersection as ThreeIntersection } from 'three'
+import { prepareTresInstance } from '..'
+import * as is from '../is'
+import { DOM_EVENT_NAMES, DOM_TO_PASSIVE, DOM_TO_THREE, type DomEventName, type DomEventTarget, POINTER_EVENT_NAMES } from './const'
+import { deprecatedEventsToNewEvents } from './deprecatedEvents'
+import { isVueEventName, patchEvent } from './eventModifiers'
+import type { TresContext } from '../../composables'
+import type { EventHandlers, IntersectionEvent, Properties, ThreeEvent, TresInstance, TresObject } from '../../types'
+import type { CreateEventManagerProps } from './createEventManager'
+
+// NOTE:
+// This file consists of type definitions and functions
+// used by `./createEventManager`.
+//
+// In particular, see `handle` in `./createEventManager` to
+// see the call order of the functions here.
+//
+// For portability and simplicity, note that the functions
+// here act only on their arguments and do not reach out to
+// the enclosing scope. Please attempt to keep it that way.
+
+// NOTE: Aliasing these and grouping here to make
+// future modifications simpler if Event type changes.
+type RaycastEvent = MouseEvent | PointerEvent | WheelEvent
+type RaycastEventTarget = DomEventTarget
+type ThreeEventStub<DomEvent> = Omit<ThreeEvent<DomEvent>, 'eventObject' | 'object' | 'distance' | 'point'> & Partial<IntersectionEvent<DomEvent>>
+type Object3DWithEvents = Object3D & EventHandlers
+
+function getInitialEvent() {
+  // NOTE: Unit tests will without this check
+  if (typeof PointerEvent !== 'undefined') {
+    return new PointerEvent('pointermove')
+  }
+  return new MouseEvent('mousemove')
+}
+
+type RaycastProps = CreateEventManagerProps<
+  Config,
+  TresContext,
+  RaycastEvent,
+  ThreeIntersection,
+  Object3D,
+  RaycastEventTarget
+>
+type Config = ReturnType<typeof getInitialConfig>
+
+function getInitialConfig(context: TresContext) {
+  return {
+    context,
+
+    isEventsDirty: true,
+
+    raycaster: new Raycaster(),
+    // NOTE: Pointer as normalized device coordinates (NDC):
+    // x in range (-1, 1), y in range (-1, 1)
+    // See: https://threejs.org/docs/#api/en/core/Raycaster
+    pointer: new Vector2(0, 0),
+    pointerDownPosition: new Vector2(0, 0),
+
+    objectsWithEvents: [] as Object3D[],
+
+    intersections: [] as ThreeIntersection[],
+    hits: new Set<Object3D>(),
+    blockingObjects: new Set<Object3D>(),
+
+    lastMoveEvent: getInitialEvent(),
+  }
+}
+
+function stashLastEvent(evt: Event, config: Config) {
+  if (evt.type === 'pointermove') {
+    config.lastMoveEvent = evt as PointerEvent
+  }
+}
+
+function getLastEvent(config: Config) {
+  return config.lastMoveEvent
+}
+
+function connect(target: RaycastEventTarget, eventManagerHandler: (ev: RaycastEvent) => void) {
+  for (const domEventName of POINTER_EVENT_NAMES) {
+    target.addEventListener(domEventName, eventManagerHandler, { passive: DOM_TO_PASSIVE[domEventName] })
+  }
+
+  return {
+    disconnect: () => {
+      for (const domEventName of POINTER_EVENT_NAMES) {
+        target.removeEventListener(domEventName, eventManagerHandler)
+      }
+    },
+  }
+}
+
+function setUp(event: RaycastEvent, config: Config) {
+  config.pointer.set(
+    (event.offsetX / config.context.sizes.width.value) * 2 - 1,
+    -(event.offsetY / config.context.sizes.height.value) * 2 + 1,
+  )
+  if (config.context.camera.value) {
+    config.raycaster.setFromCamera(config.pointer, config.context.camera.value)
+  }
+}
+
+function isSetUp(config: Config) {
+  return !!(config.raycaster.camera)
+}
+
+function tearDown(config: Config) {
+  // @ts-expect-error - Type does not accept the default `null` value.
+  config.raycaster.camera = null
+}
+
+function getIntersectionsPool(_event: RaycastEvent, config: Config) {
+  // NOTE: Perf
+  //
+  // This function:
+  // - gathers and returns the objects that require hit-testing
+  // - writes down a few `config` properites to later bail out of
+  //   processing associated with particular events.
+  //
+  // Everything set here is to limit the number
+  // of hit-tested objects.
+
+  if (config.isEventsDirty) {
+    function getIntersectionsPoolRecurHelper(object: Object3DWithEvents, hasEvents: boolean) {
+      // NOTE: We don't need to check for events if we're in a tree that `hasEvents`.
+      if (!hasEvents) {
+        for (const domEventName of DOM_EVENT_NAMES) {
+          if (DOM_TO_THREE[domEventName] in object) {
+            hasEvents = true
+            break
+          }
+        }
+      }
+
+      if (object.children) {
+        for (const child of object.children) {
+          getIntersectionsPoolRecurHelper(child, hasEvents)
+        }
+      }
+
+      // NOTE: `push`ing after processing children leads to a
+      // "children-first" object ordering. This is useful for
+      // stopping `@pointermissed`, which doesn't bubble and
+      // which can't rely on intersections order or "hits"
+      // order, by definition.
+      if (hasEvents) { config.objectsWithEvents.push(object) }
+    }
+
+    // NOTE: We are here because `config.isEventsDirty === true`.
+    // This flag signals that THREE objects have changed in a way
+    // that may have altered event handlers.
+    //
+    // Reset the `config` properties, then recurse through the scene
+    // to gather/set appropriate values.
+
+    config.isEventsDirty = false
+    config.objectsWithEvents.length = 0
+    getIntersectionsPoolRecurHelper(config.context.scene.value, false)
+  }
+
+  return config.objectsWithEvents
+}
+
+function getIntersections(pool: Object3DWithEvents[], config: Config) {
+  return config.raycaster.intersectObjects(pool, false)
+}
+
+function insert(_instance: TresObject, config: Config) {
+  config.isEventsDirty = true
+}
+
+function patchProp(instance: TresObject, propName: string, prevValue: any, nextValue: any, config: Config) {
+  if (!is.object3D(instance)) { return false }
+
+  propName = deprecatedEventsToNewEvents(propName)
+
+  if (propName === 'blocking') {
+    if (nextValue) {
+      config.blockingObjects.add(instance as Object3D);
+      (instance as TresInstance).__tres.eventCount = 1
+    }
+    else {
+      config.blockingObjects.delete(instance as Object3D)
+    }
+    return true
+  }
+
+  if (!isVueEventName(deprecatedEventsToNewEvents(propName))) {
+    return false
+  }
+
+  if (!instance.__tres) { prepareTresInstance(instance, {}, config.context) }
+  (instance as TresInstance).__tres.eventCount = 1
+  patchEvent(instance as TresInstance, deprecatedEventsToNewEvents(propName), prevValue, nextValue)
+  config.isEventsDirty = true
+
+  return true
+}
+
+function remove(_instance: TresObject, config: Config) {
+  if (!_instance.isObject3D) { return }
+
+  // NOTE: This function will typically be called with an object
+  // that's about to be removed. We will only get the top-level
+  // object and not the descendants.
+  // Grab the object and all descendants.
+  const instanceAndDescendants = new Set()
+  const children = [_instance]
+
+  while (children.length) {
+    const child = children.pop()
+    if (child) {
+      instanceAndDescendants.add(child)
+      if (is.arr(child.children)) {
+        for (const c of child.children) {
+          children.push(c)
+        }
+      }
+    }
+  }
+
+  config.objectsWithEvents = config.objectsWithEvents.filter(obj => !instanceAndDescendants.has(obj))
+
+  const intersections = config.intersections.filter(intersection => !instanceAndDescendants.has(intersection.object))
+
+  // NOTE: We will call `pointerout` and `pointerleave` if the to-be-removed
+  // object was under the mouse. That logic is contained within `handleEvent`.
+  // So rehandle the saved event, but without instance and its descendants
+  // in `intersections`.
+  handleIntersections(getLastEvent(config), intersections, config)
+
+  // NOTE: Remove the remaining traces of the object and descendants
+  config.hits = config.hits.difference(instanceAndDescendants)
+  config.isEventsDirty = true
+}
+
+function handleIntersections(incomingEvent: RaycastEvent, intersections: ThreeIntersection[], config: Config) {
+  // NOTE: STRUCTURE OF THIS FUNCTION BODY
+  // 1) Gather `hits`. This set includes all "hit" meshes and their ancestors.
+  // 2) Create an outgoing event "stub" with the fields common to all events
+  // handlers will receive.
+  // 3) Propagate the events to handlers.
+
+  // NOTE:
+  // 1) Gather `hits`
+  // Traverse up through ancestors of each intersection to
+  // populate `hits` and `event.intersections`.
+  //
+  // The result is the bubble order for events.
+  // For graph: gparent => parentA, parentB ; parentA => childA
+  // and THREE.Intersections: [childA, parentB]
+  // bubble/`hits` order is: [childA, parentA, gparent, parentB]
+  //
+  // `event.intersections` order is (showing `intersection.eventObject`):
+  // [childA, parentA, gparent, parentB, gparent]
+  // (assuming all objects have events attached)
+  //
+  // Blocking
+  // We will also watch for "blocking" (solid) objects.
+  // To pretend that "blocking" objects don't allow raycasting
+  // to continue behind them, we'll stop processing intersections
+  // after we see one containing a "blocking" object.
+  const hits = new Set<Object3D>()
+  const eventIntersections = []
+  let obj: TresObject | null = null
+  let hasBlockingObject = false
+  for (const intersection of intersections) {
+    obj = intersection.object
+    if (hits.has(obj)) {
+      continue
+    }
+    while (obj) {
+      if (config.blockingObjects.has(obj)) {
+        hasBlockingObject = true
+      }
+      if (obj.__tres?.eventCount) {
+        eventIntersections.push({ ...intersection, eventObject: obj })
+      }
+      hits.add(obj)
+      obj = obj.parent
+    }
+    if (hasBlockingObject) {
+      // NOTE: We've found a blocking object.
+      // We pretend it's "solid" and doesn't allow
+      // raycaster rays to continue "behind it".
+      // So we'll stop adding intersections.
+      break
+    }
+  }
+
+  // NOTE:
+  // 2) Create the outgoing event "stub".
+  // This includes the fields that all subsequent
+  // event handler calls will need.
+  const distance = (incomingEvent.type === 'click' || incomingEvent.type === 'contextmenu' || incomingEvent.type === 'dblclick' || incomingEvent.type === 'pointerup')
+    ? Math.sqrt(((incomingEvent.offsetX - config.pointerDownPosition.x) ** 2) + ((incomingEvent.offsetY - config.pointerDownPosition.y) ** 2))
+    : 0
+
+  if (incomingEvent.type === 'pointerdown') {
+    config.pointerDownPosition.x = incomingEvent.offsetX
+    config.pointerDownPosition.y = incomingEvent.offsetY
+  }
+
+  const unprojectedPoint = new Vector3(config.pointer.x, config.pointer.y, 0).unproject(config.context.camera.value!)
+
+  const outgoingEvent: ThreeEventStub<typeof incomingEvent> = Object.assign(
+    getEventNonFunctionProperties(incomingEvent),
+    {
+      intersections: eventIntersections,
+      unprojectedPoint,
+      pointer: config.pointer,
+      delta: distance,
+      ray: config.raycaster.ray,
+      camera: config.raycaster.camera,
+      nativeEvent: incomingEvent,
+      stopped: false,
+      stopPropagation: () => {},
+    },
+  )
+
+  outgoingEvent.stopPropagation = () => { outgoingEvent.stopped = true }
+
+  // NOTE:
+  // 3) Propagate the events to handlers.
+  //
+  // NOTE: Propagate `pointermissed`.
+  // Propagated first so other user handlers can clean up the effects.
+  if (incomingEvent.type === 'click' || incomingEvent.type === 'dblclick' || incomingEvent.type === 'contextmenu') {
+    outgoingEvent.stopped = false
+    for (const obj of config.objectsWithEvents) {
+      if (outgoingEvent.stopped) { break }
+      if (hits.has(obj)) { continue }
+      outgoingEvent.eventObject = obj
+      outgoingEvent.eventObject[DOM_TO_THREE['pointermissed' as DomEventName]]?.(outgoingEvent)
+    }
+  }
+
+  // NOTE: Propagate `pointer{out,leave,over,enter}`
+  if (incomingEvent.type === 'pointermove') {
+    const hitsLeft = config.hits.difference(hits)
+    if (hitsLeft.size) {
+      bubbleIntersectionsIf('pointerout', outgoingEvent, config.intersections, (obj: Object3D) => { return hitsLeft.has(obj) })
+      bubbleIntersectionsIf('pointerleave', outgoingEvent, config.intersections, (obj: Object3D) => { return hitsLeft.has(obj) })
+    }
+    const hitsEntered = hits.difference(config.hits)
+    if (hitsEntered.size) {
+      bubbleIntersectionsIf('pointerover', outgoingEvent, intersections, (obj: Object3D) => { return hitsEntered.has(obj) })
+      bubbleIntersectionsIf('pointerenter', outgoingEvent, intersections, (obj: Object3D) => { return hitsEntered.has(obj) })
+    }
+  }
+
+  // NOTE: Propagate `incomingEvent.type`, e.g.:
+  // `click`, `dblclick`, `pointermove`, etc.
+  if (incomingEvent.type in DOM_TO_THREE) {
+    const duplicates = new Set()
+
+    outgoingEvent.stopped = false
+
+    for (const intersection of outgoingEvent.intersections) {
+      if (outgoingEvent.stopped) { break }
+
+      if (duplicates.has(intersection.eventObject)) { continue }
+      duplicates.add(intersection.eventObject)
+
+      // NOTE: An event "is-a" `Intersection`,
+      // so copy intersection values to the event.
+      Object.assign(outgoingEvent, intersection)
+
+      intersection.eventObject[DOM_TO_THREE[incomingEvent.type as DomEventName]]?.(outgoingEvent)
+    }
+  }
+
+  config.intersections = intersections
+  config.hits = hits
+}
+
+function bubbleIntersectionsIf(domEventName: DomEventName, event: ThreeEventStub<MouseEvent>, intersections: ThreeIntersection[], cond: (a: any) => boolean) {
+  const duplicates = new Set()
+
+  event.stopped = false
+
+  for (const intersection of intersections) {
+    if (event.stopped) { break }
+
+    // NOTE: An event "is-a" `Intersection`,
+    // so copy intersection values to the event.
+    Object.assign(event, intersection)
+    let object: Object3DWithEvents | null = intersection.object
+    while (object && !duplicates.has(object) && !event.stopped) {
+      duplicates.add(object)
+      if (cond(object)) {
+        event.eventObject = object
+        event.eventObject[DOM_TO_THREE[domEventName]]?.(event)
+      }
+
+      object = object.parent
+    }
+  }
+}
+
+function getEventNonFunctionProperties<TEvent>(sourceEvent: TEvent): Properties<TEvent> {
+  const destination: Record<string, any> = {}
+  // NOTE: Mouse/Pointer Event props aren't enumerable.
+  // Copies properties to another object.
+  for (const property in sourceEvent) {
+    if (!is.fun(sourceEvent[property])) {
+      destination[property] = sourceEvent[property]
+    }
+  }
+  return destination as Properties<TEvent>
+}
+
+export const eventsRaycast: RaycastProps = {
+  connect,
+  isSetUp,
+  setUp,
+  tearDown,
+  getIntersectionsPool,
+  getIntersections,
+  handleIntersections,
+  getInitialConfig,
+  getInitialEvent,
+  stashLastEvent,
+  getLastEvent,
+  insert,
+  remove,
+  patchProp,
+}
diff --git a/src/utils/createEventManager/index.ts b/src/utils/createEventManager/index.ts
new file mode 100644
index 000000000..ca2f9dc08
--- /dev/null
+++ b/src/utils/createEventManager/index.ts
@@ -0,0 +1,6 @@
+import { createEventManager, type EventManager, type EventManagerProps } from './createEventManager'
+import { eventsNoop as disableEvents } from './eventsNoop'
+import { eventsRaycast } from './eventsRaycast'
+import { useEventsOptions } from './useEventsOptions'
+
+export { createEventManager, disableEvents, EventManager, EventManagerProps, eventsRaycast as raycastProps, useEventsOptions }
diff --git a/src/utils/createEventManager/useEventsOptions.test.ts b/src/utils/createEventManager/useEventsOptions.test.ts
new file mode 100644
index 000000000..d49693787
--- /dev/null
+++ b/src/utils/createEventManager/useEventsOptions.test.ts
@@ -0,0 +1,367 @@
+import { describe, expect, it, vi } from 'vitest'
+import { computed, ref, shallowRef } from 'vue'
+import type { TresContext } from 'src/composables/useTresContextProvider'
+import { raycastProps } from '.'
+import { createEventManager } from './createEventManager'
+import { eventsRaycast } from './eventsRaycast'
+import { useEventsOptions } from './useEventsOptions'
+
+let context = mockTresContext()
+let eventManager = createEventManager(eventsRaycast, context)
+
+describe('useEventsOptions', () => {
+  beforeEach(() => {
+    context = mockTresContext()
+    eventManager = createEventManager(eventsRaycast, context)
+
+    vi.clearAllMocks()
+  })
+  describe('!props', () => {
+    it('sets `eventManager.enabled` to `true`', () => {
+      useEventsOptions(undefined, context, () => {}, eventManager)
+      expect(eventManager.enabled).toBe(true)
+    })
+    it('sets `eventManager.target` to `context.renderer.value.domElement`', () => {
+      useEventsOptions(undefined, context, () => {}, eventManager)
+      expect(eventManager.target).toBe(context.renderer.value.domElement)
+    })
+  })
+
+  describe('props.events', () => {
+    describe('`eventManager` is not passed', () => {
+      describe('!("events" in props)', () => {
+        it('uses `eventsRaycast` as default `events`', () => {
+          const emitFn = () => {}
+          const { eventManager } = useEventsOptions({}, context, emitFn)
+          const eventManager0 = createEventManager(raycastProps, context, emitFn)
+          // NOTE: `props.events` is encapsulated inside of `eventManager`
+          // so we an't access it directly.
+          // We can check the `eventManager.config`s for equality,
+          // since they're produced by a props method.
+          expect(eventManager.config).toStrictEqual(eventManager0.config)
+        })
+      })
+      describe('props.events === undefined', () => {
+        it('uses `eventsRaycast` as default `events`', () => {
+          const emitFn = () => {}
+          const { eventManager } = useEventsOptions({ events: undefined }, context, emitFn)
+          const eventManager0 = createEventManager(raycastProps, context, emitFn)
+          // NOTE: `props.events` is encapsulated inside of `eventManager`
+          // so we an't access it directly.
+          // We can check the `eventManager.config`s for equality,
+          // since they're produced by a props method.
+          expect(eventManager.config).toStrictEqual(eventManager0.config)
+        })
+      })
+      describe('props.events === true', () => {
+        it('uses `eventsRaycast` as default `events`', () => {
+          const emitFn = () => {}
+          // NOTE: This isn't permitted by the type system, but it's
+          // an easy case to cover and perhaps a common mistake.
+          // @ts-expect-error `true` is not an accepted value for `props.events`.
+          const { eventManager } = useEventsOptions({ events: true }, context, emitFn)
+          const eventManager0 = createEventManager(raycastProps, context, emitFn)
+          // NOTE: `props.events` is encapsulated inside of `eventManager`
+          // so we an't access it directly.
+          // We can check the `eventManager.config`s for equality,
+          // since they're produced by a props method.
+          expect(eventManager.config).toStrictEqual(eventManager0.config)
+        })
+      })
+      describe('props.events === 1', () => {
+        it('uses `eventsRaycast` as default `events`', () => {
+          const emitFn = () => {}
+          // NOTE: This isn't permitted by the type system, but it's
+          // an easy case to cover and perhaps a common mistake.
+          // @ts-expect-error `1` is not an accepted value for `props.events`.
+          const { eventManager } = useEventsOptions({ events: 1 }, context, emitFn)
+          const eventManager0 = createEventManager(raycastProps, context, emitFn)
+          // NOTE: `props.events` is encapsulated inside of `eventManager`
+          // so we an't access it directly.
+          // We can check the `eventManager.config`s for equality,
+          // since they're produced by a props method.
+          expect(eventManager.config).toStrictEqual(eventManager0.config)
+        })
+      })
+      describe('props.events === null', () => {
+        it('does not connect to a target', () => {
+          const { eventManager } = useEventsOptions({ events: null }, context, () => {})
+          const spy = vi.fn()
+          eventManager.connect({ addEventListener: spy, removeEventListener: spy })
+          expect(spy).not.toBeCalled()
+        })
+      })
+      describe('props.events === false', () => {
+        it('does not connect to a target', () => {
+          // NOTE: This isn't permitted by the type system, but it's
+          // an easy case to cover and might make sense for some users.
+          // @ts-expect-error `false` is not an accepted value for `props.events`.
+          const { eventManager } = useEventsOptions({ events: false }, context, () => {})
+          const spy = vi.fn()
+          eventManager.connect({ addEventListener: spy, removeEventListener: spy })
+          expect(spy).not.toBeCalled()
+        })
+      })
+      describe('props.events === 0', () => {
+        it('does not connect to a target', () => {
+          // NOTE: This isn't permitted by the type system.
+          // @ts-expect-error `0` is not an accepted value for `props.events`.
+          const { eventManager } = useEventsOptions({ events: 0 }, context, () => {})
+          const spy = vi.fn()
+          eventManager.connect({ addEventListener: spy, removeEventListener: spy })
+          expect(spy).not.toBeCalled()
+        })
+      })
+      describe('props.events === { ... }', () => {
+        it('fills in missing `events` methods using `eventsRaycast` methods', () => {
+          const events = {}
+          useEventsOptions({ events }, context, () => {})
+          expect(events).toStrictEqual(raycastProps)
+
+          const filter = () => []
+          const events0 = { filter }
+          useEventsOptions({ events: events0 }, context, () => {})
+          expect(events0.filter).not.toBe(raycastProps.filter)
+          expect(events0.filter).toBe(filter)
+        })
+      })
+    })
+  })
+
+  describe('props.eventsEnabled', () => {
+    describe('props.eventsEnabled === undefined', () => {
+      it('sets `enabled` to EventManager to `true`', () => {
+        const props = { }
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(true)
+      })
+    })
+    describe('props.eventsEnabled === null', () => {
+      it('sets `enabled` to EventManager to `true`', () => {
+        const props = { eventsEnabled: null }
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(true)
+      })
+    })
+    describe('props.eventsEnabled === boolean', () => {
+      it('sets `enabled` on EventManager when used in `useEventsOptions`', () => {
+        const props = { eventsEnabled: true }
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(true)
+
+        props.eventsEnabled = false
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(false)
+      })
+    })
+    describe('isRef(props.eventsEnabled)', () => {
+      it('sets `enabled` on EventManager when ref.value is updated', () => {
+        const props = { eventsEnabled: ref(true) }
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(true)
+
+        props.eventsEnabled.value = false
+        expect(eventManager.enabled).toBe(false)
+
+        props.eventsEnabled.value = true
+        expect(eventManager.enabled).toBe(true)
+
+        props.eventsEnabled.value = false
+        expect(eventManager.enabled).toBe(false)
+
+        props.eventsEnabled.value = undefined
+        expect(eventManager.enabled).toBe(true)
+      })
+    })
+    describe('isRefOrGetter(props.eventsEnabled)', () => {
+      it('sets `enabled` on EventManager when ref.value is updated', () => {
+        const myNumber = ref(0)
+
+        const eventsEnabled = computed({
+          get() { return !!(myNumber.value % 2) },
+          set(n: number) { myNumber.value = n },
+        })
+        const props = { eventsEnabled }
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(eventManager.enabled).toBe(false)
+
+        props.eventsEnabled.value = 1
+        expect(eventManager.enabled).toBe(true)
+
+        props.eventsEnabled.value = 2
+        expect(eventManager.enabled).toBe(false)
+
+        props.eventsEnabled.value = 3
+        expect(eventManager.enabled).toBe(true)
+
+        props.eventsEnabled.value = 4
+        expect(eventManager.enabled).toBe(false)
+
+        props.eventsEnabled.value = 5
+        expect(eventManager.enabled).toBe(true)
+      })
+    })
+  })
+
+  describe('props.eventsTarget', () => {
+    describe('props.eventsTarget === undefined', () => {
+      it('calls eventManager.connect(context.renderer.value.domElement)', () => {
+        const props = { }
+        const connectSpy = vi.spyOn(eventManager, 'connect')
+
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(context.renderer.value.domElement)
+      })
+    })
+
+    describe('props.eventsTarget === computed({ get..., set... })', () => {
+      it('calls eventManager.connect(props.eventsTarget.get()) when `set`', () => {
+        const connectSpy = vi.spyOn(eventManager, 'connect')
+
+        const myDom0 = document.createElement('div')
+        const target0 = document.createElement('canvas')
+        target0.addEventListener = vi.fn()
+        target0.removeEventListener = vi.fn()
+        myDom0.appendChild(target0)
+
+        const myDom1 = document.createElement('div')
+        const target1 = document.createElement('canvas')
+        target1.addEventListener = vi.fn()
+        target1.removeEventListener = vi.fn()
+        myDom1.appendChild(target1)
+
+        const domRef = shallowRef(myDom0)
+
+        const eventsTarget = computed({
+          get() { return domRef.value.firstChild },
+          set(dom: HTMLDivElement) { domRef.value = dom },
+        })
+
+        const props = { eventsTarget }
+        useEventsOptions(props, context, () => {}, eventManager)
+
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(target0)
+
+        expect(target0.addEventListener).toBeCalled()
+        expect(target1.addEventListener).not.toBeCalled()
+
+        vi.clearAllMocks()
+
+        domRef.value = myDom1
+
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(target1)
+
+        expect(target0.addEventListener).not.toBeCalled()
+        expect(target0.removeEventListener).toBeCalled()
+
+        expect(target1.addEventListener).toBeCalled()
+        expect(target1.removeEventListener).not.toBeCalled()
+      })
+    })
+
+    describe('props.eventsTarget === ref(EventTarget | null)', () => {
+      it('calls eventManager.connect(props.eventTarget) and updates on ref changes', () => {
+        const target0 = {
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        } as unknown as HTMLElement
+        const target1 = {
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        } as unknown as HTMLElement
+        const eventsTarget = shallowRef(target0)
+
+        const props = { eventsTarget }
+        const connectSpy = vi.spyOn(eventManager, 'connect')
+
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(target0)
+
+        eventsTarget.value = target1
+        expect(connectSpy).toBeCalledTimes(2)
+        expect(connectSpy).toBeCalledWith(target1)
+
+        eventsTarget.value = target0
+        expect(connectSpy).toBeCalledTimes(3)
+        expect(connectSpy).toBeCalledWith(target0)
+
+        eventsTarget.value = null
+        expect(connectSpy).toBeCalledTimes(4)
+        expect(connectSpy).toBeCalledWith(context.renderer.value.domElement)
+      })
+    })
+
+    describe('props.eventsTarget = ref(null)', () => {
+      it('calls eventManager.connect(context.renderer.value.domElement)', () => {
+        const props = { eventsTarget: ref(null) }
+        const connectSpy = vi.spyOn(eventManager, 'connect')
+
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(context.renderer.value.domElement)
+      })
+    })
+
+    describe('props.eventsTarget = EventTarget', () => {
+      it('calls eventManager.connect(props.eventsTarget)', () => {
+        const target0 = {
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        } as unknown as HTMLElement
+        const eventsTarget = shallowRef(target0)
+
+        const props = { eventsTarget }
+        const connectSpy = vi.spyOn(eventManager, 'connect')
+
+        useEventsOptions(props, context, () => {}, eventManager)
+        expect(connectSpy).toBeCalledTimes(1)
+        expect(connectSpy).toBeCalledWith(target0)
+      })
+    })
+  })
+})
+
+describe('const { stop } = useEventsOptions(...)', () => {
+  it('stops the `events-target` watcher', () => {
+    const target0 = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLElement
+    const target1 = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLElement
+    const eventsTarget = shallowRef(target0)
+
+    const props = { eventsTarget }
+    const connectSpy = vi.spyOn(eventManager, 'connect')
+
+    const { stop } = useEventsOptions(props, context, () => {}, eventManager)
+    expect(connectSpy).toBeCalledTimes(1)
+    expect(connectSpy).toBeCalledWith(target0)
+
+    stop()
+
+    eventsTarget.value = target1
+    expect(connectSpy).toBeCalledTimes(1)
+    expect(connectSpy).toBeCalledWith(target0)
+    eventsTarget.value = null
+    expect(connectSpy).toBeCalledTimes(1)
+    expect(connectSpy).toBeCalledWith(target0)
+  })
+})
+
+function mockTresContext() {
+  const canvas = {
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+  return {
+    eventManager: {},
+    renderer: { value: { domElement: canvas } },
+  } as unknown as TresContext
+}
diff --git a/src/utils/createEventManager/useEventsOptions.ts b/src/utils/createEventManager/useEventsOptions.ts
new file mode 100644
index 000000000..518cdb04f
--- /dev/null
+++ b/src/utils/createEventManager/useEventsOptions.ts
@@ -0,0 +1,78 @@
+import { toValue, watchEffect } from 'vue'
+import type { TresContext } from 'src/composables/useTresContextProvider'
+import type { EmitEventFn } from 'src/types'
+import type { MaybeRefOrGetter } from 'vue'
+import * as is from '../is'
+import { createEventManager, type EventManager, type EventManagerProps } from './createEventManager'
+import { eventsNoop } from './eventsNoop'
+import { eventsRaycast as eventsDefault } from './eventsRaycast'
+
+export interface UseEventsOptions {
+  eventsEnabled?: MaybeRefOrGetter<boolean>
+  eventsTarget?: MaybeRefOrGetter<EventTarget>
+  events?: Partial<EventManagerProps>
+}
+
+/**
+ * Apply reactivity to an `eventManager`.
+ * Optionally create an `eventManager` if one is not passed.
+ *
+ * @param props `EventsOptions` values to apply to the `eventManager`
+ * @param context a TresContext
+ * @param emit an emit function to use in event handling
+ * @param eventManager an `EventManager` to apply reactivity to.
+ * @returns an object with `stop` – a function to stop reactivity and `eventManager`
+ */
+export function useEventsOptions(props: UseEventsOptions, context: TresContext, emit: EmitEventFn, eventManager?: EventManager) {
+  // NOTE: Create eventManager if one was not passed.
+  if (!eventManager) {
+    if (is.und(props.events)) {
+      // NOTE: User probably hasn't defined `:events`.
+      // Use the default events setup.
+      eventManager = createEventManager(eventsDefault, context, emit)
+    }
+    else if (!props.events) {
+      // NOTE: User explicitly set `:events` to a falsy value
+      // other than `undefined`, e.g.:
+      // `<TresCanvas :events="null" />`
+      // `<TresCanvas :events="false" />`
+      // This signals they do not wish to use events at all,
+      // so create a "noop" `eventManager`.
+      eventManager = createEventManager(eventsNoop, context, emit)
+    }
+    else if (is.obj(props.events)) {
+      // NOTE: User set `:events` to `Partial<EventManagerProps>`.
+      // Fill in `:events` with defaults. But don't lose the reference
+      // to the user's object – instead, pass it to `createEventManager`
+      // so the user can still modify the values.
+      for (const [key, value] of Object.entries(eventsDefault)) {
+        if (!(key in props.events)) {
+          props.events[key as keyof typeof props.events] = value
+        }
+      }
+      eventManager = createEventManager(props.events as EventManagerProps, context, emit)
+    }
+    else {
+      // NOTE: User set `:events` to a non-object but truthy, e.g.:
+      // `<TresCanvas :events="true" />`
+      // `<TresCanvas :events="1" />`
+      // Even though this goes against the type system, assume the
+      // user wants to use the default events.
+      eventManager = createEventManager(eventsDefault, context, emit)
+    }
+  }
+
+  const enabledWatcher = watchEffect(() => {
+    eventManager.enabled = (toValue(props?.eventsEnabled) ?? true) as boolean
+  }, { flush: 'sync' })
+
+  const targetWatcher = watchEffect(() => {
+    eventManager.connect(toValue(props?.eventsTarget) ?? context.renderer.value.domElement)
+  }, { flush: 'sync' })
+
+  const unwatchers = [enabledWatcher, targetWatcher]
+  return {
+    stop: () => { unwatchers.forEach(fn => fn()) },
+    eventManager,
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f4be2bad1..2f2ff52da 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -574,7 +574,7 @@ export function doRemoveDeregister(node: TresObject, context: TresContext) {
   node.traverse?.((child: TresObject) => {
     context.deregisterCamera(child)
     // deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)
-    context.eventManager?.deregisterPointerMissedObject(child)
+    context.eventManager?.remove(child)
   })
 
   // NOTE: Deregister `node`