Skip to content

Latest commit

 

History

History
67 lines (53 loc) · 5.68 KB

events.md

File metadata and controls

67 lines (53 loc) · 5.68 KB

Events

TresJS components emit pointer events when they are interacted with. This is the case for the components that represent three.js classes that derive from THREE.Object3D (like meshes, groups,...).

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
<TresMesh
  @click="(event) => console.log('click')"
  @context-menu="(event) => console.log('context-menu (right click)')"
  @double-click="(event) => console.log('double-click')"
  @pointer-move="(event) => console.log('pointer-move')"
  @pointer-enter="(event) => console.log('pointer-enter')"
  @pointer-leave="(event) => console.log('pointer-leave')"
  @pointer-down="(event) => console.log('pointer-down')"
  @pointer-up="(event) => console.log('pointer-up')"
  @wheel="(event) => console.log('wheel')"
  @pointer-missed="(event) => console.log('pointer-missed')"
/>
Event
 fires when ... Event Handler Parameter Type(s)
click the events pointerdown and pointerup fired on the same object one after the other Intersection, PointerEvent
contextMenu the user triggers a context menu, often by right-clicking PointerEvent
double-click the user clicks the mouse button twice in quick succession on the same object Intersection, PointerEvent
wheel the mouse wheel or similar device is rotated WheelEvent
pointer-down the pointer is pressed down over the object Intersection, PointerEvent
pointer-up the pointer is released over the object Intersection, PointerEvent
pointer-leave the pointer is leaves the object PointerEvent
pointer-move the pointer is moving above the object Intersection, PointerEvent
pointer-missed the pointer interaction is attempted but misses the object 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.

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.

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).

<TresMesh
  @pointer-down="(event) => {
    console.log('pointer-down')
    event.stopPropagation()
  }"
/>