diff --git a/docs/api/events.md b/docs/api/events.md
index c83019df8..b2e874981 100644
--- a/docs/api/events.md
+++ b/docs/api/events.md
@@ -6,22 +6,62 @@
## Pointer Events
+The following pointer events are available on `v3` and previous:
+
+- `click`
+- `pointer-move`
+- `pointer-enter`
+- `pointer-leave`
+
+From `v4.x` on, the following pointer events are been added to the list:
+
+- `context-menu` (right click)
+- `double-click`
+- `pointer-down`
+- `pointer-up`
+- `wheel`
+- `pointer-missed`
+
```html
```
-| Event | fires when ... | Event Handler Parameter Type(s) |
-| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-move | ... the pointer is moving above the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-enter | ... the pointer is entering the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-leave | ... the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+|
Event
| fires when ... | Event Handler Parameter Type(s) |
+| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click | the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| contextMenu | the user triggers a context menu, often by right-clicking | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| double-click | the user clicks the mouse button twice in quick succession on the same object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| wheel | the mouse wheel or similar device is rotated | [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) |
+| pointer-down | the pointer is pressed down over the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-up | the pointer is released over the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-leave | the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-move | the pointer is moving above the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-missed | the pointer interaction is attempted but misses the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+
+## Event Propagation (Bubbling 🫧)
+
+Propagation of events on 3D scenes works differently than in the DOM because objects can **occlude each other in 3D**. The `intersections` array contains all the objects that the raycaster intersects with, sorted by distance from the camera. The first object in the array is the closest one to the camera.
-The returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) includes the [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) that triggered the event. You can access it via `intersection.object`.
+When an event is triggered, the event is propagated to the closest object in the `intersections` array. If the event is not handled by the object, it will be propagated to the next object in the array.
-By default, objects positioned in front of others with event handlers do not prevent those events from being triggered. This behavior can be achieved by using the prop `blocks-pointer-events`.
+`event.stopPropagation()` can be used to stop the event from propagating to the next object in the array, stoping the event from bubbling up and reaching to farther objects (the oens behind the first one).
+
+```html
+
+```
diff --git a/playground/components.d.ts b/playground/components.d.ts
index 5a90ef3a9..ac52f4c96 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
AkuAku: typeof import('./src/components/AkuAku.vue')['default']
AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
+ Box: typeof import('./src/components/Box.vue')['default']
CameraOperator: typeof import('./src/components/CameraOperator.vue')['default']
Cameras: typeof import('./src/components/Cameras.vue')['default']
copy: typeof import('./src/components/TheBasic copy.vue')['default']
@@ -17,6 +18,7 @@ declare module 'vue' {
DebugUI: typeof import('./src/components/DebugUI.vue')['default']
DeleteMe: typeof import('./src/components/DeleteMe.vue')['default']
DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
+ EventsPropogation: typeof import('./src/components/EventsPropogation.vue')['default']
FBXModels: typeof import('./src/components/FBXModels.vue')['default']
Gltf: typeof import('./src/components/gltf/index.vue')['default']
GraphPane: typeof import('./src/components/GraphPane.vue')['default']
diff --git a/playground/src/components/Box.vue b/playground/src/components/Box.vue
new file mode 100644
index 000000000..02f1a097e
--- /dev/null
+++ b/playground/src/components/Box.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/pages/basic/index.vue b/playground/src/pages/basic/index.vue
index daf5fea2b..1c45ce0ff 100644
--- a/playground/src/pages/basic/index.vue
+++ b/playground/src/pages/basic/index.vue
@@ -14,6 +14,7 @@ const state = reactive({
toneMapping: NoToneMapping,
})
+const canvasRef = ref()
const sphereRef = ref()
const { onLoop } = useRenderLoop()
@@ -21,6 +22,9 @@ const { onLoop } = useRenderLoop()
onLoop(({ elapsed }) => {
if (!sphereRef.value) { return }
sphereRef.value.position.y += Math.sin(elapsed) * 0.01
+
+ // Update events without needing the mouse to move
+ canvasRef.value?.context?.eventManager.forceUpdate()
})
function onPointerEnter(ev) {
@@ -29,6 +33,10 @@ function onPointerEnter(ev) {
}
}
+function onPointerOut(ev) {
+ ev.object.material.color.set('teal')
+}
+
const sphereExists = ref(true)
@@ -37,7 +45,10 @@ const sphereExists = ref(true)
v-model="sphereExists"
type="checkbox"
/>
-
+
diff --git a/playground/src/pages/events/Propagation.vue b/playground/src/pages/events/Propagation.vue
new file mode 100644
index 000000000..a9847cf7a
--- /dev/null
+++ b/playground/src/pages/events/Propagation.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/pages/events/index.vue b/playground/src/pages/events/index.vue
index 773e4f764..08a145879 100644
--- a/playground/src/pages/events/index.vue
+++ b/playground/src/pages/events/index.vue
@@ -1,8 +1,11 @@
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
index 0e13839c7..52f320004 100644
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@@ -69,6 +69,11 @@ const routes = [
name: 'Raycaster',
component: () => import('./pages/raycaster/TheEvents.vue'),
},
+ {
+ path: '/raycaster/propagation',
+ name: 'Event Propogation',
+ component: () => import('./pages/raycaster/Propagation.vue'),
+ },
{
path: '/misc/text-3d',
name: 'Text3D',
diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index b7b576bfd..5dcdac464 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -27,9 +27,9 @@ import pkg from '../../package.json'
import {
type TresContext,
useLogger,
- usePointerEventHandler,
useRenderLoop,
useTresContextProvider,
+ useTresEventManager,
} from '../composables'
import { extend } from '../core/catalogue'
import { nodeOps } from '../core/nodeOps'
@@ -72,7 +72,24 @@ const props = withDefaults(defineProps(), {
renderMode: 'always',
})
-const emit = defineEmits(['render'])
+// 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',
+])
+
const slots = defineSlots<{
default: () => any
}>()
@@ -132,6 +149,7 @@ const disableRender = computed(() => props.disableRender)
const context = shallowRef(null)
defineExpose({ context, dispose: () => dispose(context.value as TresContext, true) })
+
onMounted(() => {
const existingCanvas = canvas as Ref
@@ -144,7 +162,7 @@ onMounted(() => {
emit,
})
- usePointerEventHandler(context.value)
+ useTresEventManager(scene.value, context.value, emit)
const { registerCamera, camera, cameras, deregisterCamera } = context.value
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 0551ac1e2..ec46ea253 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -8,3 +8,4 @@ export * from './useLogger'
export * from './useSeek'
export * from './usePointerEventHandler'
export * from './useTresContextProvider'
+export * from './useTresEventManager'
diff --git a/src/composables/useRaycaster/index.ts b/src/composables/useRaycaster/index.ts
index 525514df7..ac072c450 100644
--- a/src/composables/useRaycaster/index.ts
+++ b/src/composables/useRaycaster/index.ts
@@ -1,7 +1,7 @@
-import { Vector2 } from 'three'
+import { Vector2, Vector3 } from 'three'
import type { Intersection, Object3D, Object3DEventMap } from 'three'
-import type { Ref } from 'vue'
-import { computed, onUnmounted } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
+import { computed, onUnmounted, shallowRef } from 'vue'
import type { EventHook } from '@vueuse/core'
import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
@@ -18,14 +18,20 @@ interface PointerClickEventPayload {
event: PointerEvent
}
+interface WheelEventPayload {
+ intersects: Intersects
+ event: WheelEvent
+}
+
export const useRaycaster = (
objects: Ref,
ctx: TresContext,
) => {
// having a separate computed makes useElementBounding work
const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
-
+ const intersects: ShallowRef = shallowRef([])
const { x, y } = usePointer({ target: canvas })
+ let delta = 0
const { width, height, top, left } = useElementBounding(canvas)
@@ -43,10 +49,11 @@ export const useRaycaster = (
ctx.raycaster.value.setFromCamera(new Vector2(x, y), ctx.camera.value)
- return ctx.raycaster.value.intersectObjects(objects.value, false)
+ intersects.value = ctx.raycaster.value.intersectObjects(objects.value, true)
+ return intersects.value
}
- const getIntersects = (event?: PointerEvent | MouseEvent) => {
+ const getIntersects = (event?: PointerEvent | MouseEvent | WheelEvent) => {
const pointerPosition = getRelativePointerPosition({
x: event?.clientX ?? x.value,
y: event?.clientY ?? y.value,
@@ -56,39 +63,144 @@ export const useRaycaster = (
return getIntersectsByRelativePointerPosition(pointerPosition) || []
}
- const intersects = computed(() => getIntersects())
-
const eventHookClick = createEventHook()
+ const eventHookDblClick = createEventHook()
const eventHookPointerMove = createEventHook()
+ const eventHookPointerUp = createEventHook()
+ const eventHookPointerDown = createEventHook()
+ const eventHookPointerMissed = createEventHook()
+ const eventHookContextMenu = createEventHook()
+ const eventHookWheel = createEventHook()
+
+ /* ({
+ ...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[property] }
+ }
+ return mouseEventProperties
+ }
- const triggerEventHook = (eventHook: EventHook, event: PointerEvent | MouseEvent) => {
- eventHook.trigger({ event, intersects: getIntersects(event) })
+ const triggerEventHook = (eventHook: EventHook, event: PointerEvent | MouseEvent | WheelEvent) => {
+ const eventProperties = copyMouseEventProperties(event)
+
+ eventHook.trigger({
+ ...eventProperties,
+ intersections: intersects.value,
+ // The unprojectedPoint is wrong, math needs to be fixed
+ unprojectedPoint: new Vector3(event?.clientX, event?.clientY, 0).unproject(ctx.camera?.value),
+ 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
}
- // a click event is fired whenever a pointerdown happened after pointerup on the same object
+ 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
+ let mouseUpPosition
const onPointerDown = (event: PointerEvent) => {
- mouseDownObject = getIntersects(event)[0]?.object
+ 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
- if (mouseDownObject === getIntersects(event)[0]?.object) { triggerEventHook(eventHookClick, event) }
+ // 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 onPointerLeave = (event: PointerEvent) => eventHookPointerMove.trigger({ event, intersects: [] })
+ 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 }
@@ -96,11 +208,20 @@ export const useRaycaster = (
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: PointerClickEventPayload) => void) => eventHookClick.on(fn).off,
+ onDblClick: (fn: (value: PointerClickEventPayload) => void) => eventHookDblClick.on(fn).off,
+ onContextMenu: (fn: (value: PointerClickEventPayload) => void) => eventHookContextMenu.on(fn).off,
onPointerMove: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerMove.on(fn).off,
+ onPointerUp: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerUp.on(fn).off,
+ onPointerDown: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerDown.on(fn).off,
+ onPointerMissed: (fn: (value: PointerClickEventPayload) => void) => eventHookPointerMissed.on(fn).off,
+ onWheel: (fn: (value: WheelEventPayload) => void) => eventHookWheel.on(fn).off,
+ forceUpdate,
}
}
diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts
index 4d1e12ca1..e069403ef 100644
--- a/src/composables/useTresContextProvider/index.ts
+++ b/src/composables/useTresContextProvider/index.ts
@@ -11,6 +11,7 @@ import { extend } from '../../core/catalogue'
import { useLogger } from '../useLogger'
import type { TresScene } from '../../types'
import type { EventProps } from '../usePointerEventHandler'
+import type { TresEventManager } from '../useTresEventManager'
import useSizes, { type SizesType } from '../useSizes'
export interface InternalState {
@@ -68,6 +69,7 @@ export interface TresContext {
registerCamera: (camera: Camera) => void
setCameraActive: (cameraOrUuid: Camera | string) => void
deregisterCamera: (camera: Camera) => void
+ eventManager: TresEventManager
// 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.
diff --git a/src/composables/useTresEventManager/index.ts b/src/composables/useTresEventManager/index.ts
new file mode 100644
index 000000000..bc19666b9
--- /dev/null
+++ b/src/composables/useTresEventManager/index.ts
@@ -0,0 +1,194 @@
+import { computed, shallowRef } from 'vue'
+import type { Object3D, Scene } from 'three'
+import type { TresContext } from '../useTresContextProvider'
+import { useRaycaster } from '../useRaycaster'
+import type { Intersects } from '../useRaycaster'
+import { hyphenate } from '../../utils'
+
+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
+ */
+ registerPointerMissedObject: (object: Object3D) => void
+ deregisterPointerMissedObject: (object: Object3D) => void
+}
+
+export function useTresEventManager(
+ scene: Scene,
+ context: TresContext,
+ emit: (event: string, ...args: any[]) => void,
+) {
+ const _scene = shallowRef()
+ const _context = shallowRef()
+
+ if (scene) { _scene.value = scene }
+ if (context) { _context.value = context }
+
+ // TODO: Optimize to not hit test on the whole scene
+ const sceneChildren = computed(() =>
+ _scene.value ? _scene.value.children : [],
+ )
+
+ function executeEventListeners(
+ listeners: Function | Function[],
+ event,
+ ) {
+ // 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)
+ }
+ }
+
+ /**
+ * 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) {
+ // 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
+ executeEventListeners(object[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
+ executeEventListeners(parentObj[eventName], event)
+ duplicates.push(parentObj)
+ parentObj = parentObj.parent
+ }
+
+ // Convert eventName to kebab case and emit event from TresCanvas
+ const kebabEventName = hyphenate(eventName.slice(2))
+ emit(kebabEventName, { intersection, event })
+ }
+ }
+
+ const {
+ onClick,
+ onDblClick,
+ onContextMenu,
+ onPointerMove,
+ onPointerDown,
+ onPointerUp,
+ onPointerMissed,
+ onWheel,
+ forceUpdate,
+ } = useRaycaster(sceneChildren, 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: Intersects = []
+
+ onPointerMove((event) => {
+ // Current intersections mapped as meshes
+ const hits = event.intersections.map(({ object }) => object)
+
+ // Previously intersected mesh is no longer intersected, fire onPointerLeave
+ prevIntersections.forEach((hit) => {
+ if (
+ !hits.includes(hit)
+ ) {
+ propogateEvent('onPointerLeave', event)
+ propogateEvent('onPointerOut', event)
+ }
+ })
+
+ // Newly intersected mesh is not in the previous intersections, fire onPointerEnter
+ event.intersections.forEach(({ object: hit }) => {
+ if (!prevIntersections.includes(hit)) {
+ propogateEvent('onPointerEnter', event)
+ propogateEvent('onPointerOver', event)
+ }
+ })
+
+ // Fire onPointerMove for all intersected objects
+ propogateEvent('onPointerMove', event)
+
+ // Update previous intersections
+ prevIntersections = hits
+ })
+
+ /**
+ * We need to track pointer missed objects separately
+ * since they will not be a part of the raycaster intersection
+ */
+ const pointerMissedObjects: Object3D[] = []
+ onPointerMissed((event) => {
+ // Flag that is set to true when the stopProgatingFn is called
+ const stopPropagatingFn = () => (event.stopPropagating = true)
+ event.stopPropagation = stopPropagatingFn
+
+ pointerMissedObjects.forEach((object: Object3D) => {
+ 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 registerPointerMissedObject(object: Object3D) {
+ pointerMissedObjects.push(object)
+ }
+
+ function deregisterPointerMissedObject(object: Object3D) {
+ const index = pointerMissedObjects.indexOf(object)
+ if (index > -1) {
+ pointerMissedObjects.splice(index, 1)
+ }
+ }
+
+ // Attach methods to tres context
+ context.eventManager = {
+ forceUpdate,
+ registerPointerMissedObject,
+ deregisterPointerMissedObject,
+ }
+
+ return { forceUpdate, registerPointerMissedObject, deregisterPointerMissedObject }
+}
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
index 59948d251..4ca03bb76 100644
--- a/src/core/nodeOps.ts
+++ b/src/core/nodeOps.ts
@@ -17,9 +17,19 @@ const { logError } = useLogger()
const supportedPointerEvents = [
'onClick',
+ 'onContextMenu',
'onPointerMove',
'onPointerEnter',
'onPointerLeave',
+ 'onPointerOver',
+ 'onPointerOut',
+ 'onDoubleClick',
+ 'onPointerDown',
+ 'onPointerUp',
+ 'onPointerCancel',
+ 'onPointerMissed',
+ 'onLostPointerCapture',
+ 'onWheel',
]
export function invalidateInstance(instance: TresObject) {
@@ -54,7 +64,9 @@ export const nodeOps: () => RendererOptions = ()
else {
const target = catalogue.value[name]
if (!target) {
- logError(`${name} is not defined on the THREE namespace. Use extend to add it to the catalog.`)
+ logError(
+ `${name} is not defined on the THREE namespace. Use extend to add it to the catalog.`,
+ )
}
// eslint-disable-next-line new-cap
instance = new target(...props.args)
@@ -108,14 +120,14 @@ export const nodeOps: () => RendererOptions = ()
const parentObject = parent || scene
if (child?.isObject3D) {
- const { registerCamera, registerObjectAtPointerEventHandler } = child.__tres.root
+ const { registerCamera } = child.__tres.root
if (child?.isCamera) {
registerCamera(child as unknown as Camera)
}
- if (
- child && supportedPointerEvents.some(eventName => child[eventName])
- ) {
- registerObjectAtPointerEventHandler(child as Object3D)
+
+ // Track onPointerMissed objects separate from the scene
+ if (child.onPointerMissed) {
+ child.__tres.root.eventManager.registerPointerMissedObject(child as Object3D)
}
}
@@ -139,11 +151,6 @@ export const nodeOps: () => RendererOptions = ()
// remove is only called on the node being removed and not on child nodes.
node.parent = node.parent || scene
- const {
- deregisterObjectAtPointerEventHandler,
- deregisterBlockingObjectAtPointerEventHandler,
- } = ctx.root
-
if (node.isObject3D) {
const disposeMaterialsAndGeometries = (object3D: TresObject) => {
const tresObject3D = object3D as TresObject3D
@@ -156,13 +163,6 @@ export const nodeOps: () => RendererOptions = ()
}
}
- const deregisterAtPointerEventHandlerIfRequired = (object: TresObject) => {
- deregisterBlockingObjectAtPointerEventHandler(object as Object3D)
- if (
- object && supportedPointerEvents.some(eventName => object[eventName])
- ) { deregisterObjectAtPointerEventHandler?.(object as Object3D) }
- }
-
const deregisterCameraIfRequired = (object: Object3D) => {
const deregisterCamera = node.__tres.root.deregisterCamera
@@ -174,12 +174,15 @@ export const nodeOps: () => RendererOptions = ()
node.traverse((child: Object3D) => {
disposeMaterialsAndGeometries(child as TresObject)
deregisterCameraIfRequired(child)
- deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)
+ // deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)
+ if (child.onPointerMissed) {
+ ctx.root.eventManager.deregisterPointerMissedObject(child)
+ }
})
disposeMaterialsAndGeometries(node)
deregisterCameraIfRequired(node as Object3D)
- deregisterAtPointerEventHandlerIfRequired?.(node as TresObject)
+ /* deregisterAtPointerEventHandlerIfRequired?.(node as TresObject) */
invalidateInstance(node as TresObject)
node.dispose?.()
}
@@ -215,17 +218,20 @@ export const nodeOps: () => RendererOptions = ()
}
if (node.__tres.root) {
- const {
- registerBlockingObjectAtPointerEventHandler,
- deregisterBlockingObjectAtPointerEventHandler,
- } = node.__tres.root
-
- if (node.isObject3D && key === 'blocks-pointer-events') {
- if (nextValue || nextValue === '') { registerBlockingObjectAtPointerEventHandler(node as Object3D) }
- else { deregisterBlockingObjectAtPointerEventHandler(node as Object3D) }
-
- return
- }
+ // const {
+ // registerBlockingObjectAtPointerEventHandler,
+ // deregisterBlockingObjectAtPointerEventHandler,
+ // } = node.__tres.root
+ }
+ if (node?.isObject3D && key === 'blocks-pointer-events') {
+ // if (nextValue || nextValue === '')
+ // registerBlockingObjectAtPointerEventHandler(node as Object3D)
+ // else
+ // deregisterBlockingObjectAtPointerEventHandler(node as Object3D)
+
+ if (nextValue || nextValue === '') { node[key] = nextValue }
+ else { delete node[key] }
+ return
}
let finalKey = kebabToCamel(key)
@@ -237,8 +243,15 @@ export const nodeOps: () => RendererOptions = ()
const args = nextValue ?? []
const instanceName = node.__tres.type || node.type
- if (instanceName && prevArgs.length && !deepArrayEqual(prevArgs, args)) {
- root = Object.assign(prevNode, new catalogue.value[instanceName](...nextValue))
+ if (
+ instanceName
+ && prevArgs.length
+ && !deepArrayEqual(prevArgs, args)
+ ) {
+ root = Object.assign(
+ prevNode,
+ new catalogue.value[instanceName](...nextValue),
+ )
}
return
}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8db48fdf0..148e521e8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -40,6 +40,12 @@ export function kebabToCamel(str: string) {
return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
}
+// CamelCase to kebab-case
+const hyphenateRE = /\B([A-Z])/g
+export function hyphenate(str: string) {
+ return str.replace(hyphenateRE, '-$1').toLowerCase()
+}
+
export function makeMap(str: string, expectsLowerCase?: boolean): (key: string) => boolean {
const map: Record = Object.create(null)
const list: Array = str.split(',')