Skip to content

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

Loading...

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
<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)
clickthe events pointerdown and pointerup fired on the same object one after the otherIntersection, PointerEvent
contextMenu 4.0.0the user triggers a context menu, often by right-clickingPointerEvent
double-click 4.0.0the user clicks the mouse button twice in quick succession on the same objectIntersection, PointerEvent
wheel 4.0.0the mouse wheel or similar device is rotatedWheelEvent
pointer-down 4.0.0the pointer is pressed down over the objectIntersection, PointerEvent
pointer-up 4.0.0the pointer is released over the objectIntersection, PointerEvent
pointer-leavethe pointer is leaves the objectPointerEvent
pointer-movethe pointer is moving above the objectIntersection, PointerEvent
pointer-missed 4.0.0the pointer interaction is attempted but misses the objectPointerEvent

Event Propagation (Bubbling 🫧) ^4.0.0

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

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