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

<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 4.0.0	the user triggers a context menu, often by right-clicking	PointerEvent
double-click 4.0.0	the user clicks the mouse button twice in quick succession on the same object	Intersection, PointerEvent
wheel 4.0.0	the mouse wheel or similar device is rotated	WheelEvent
pointer-down 4.0.0	the pointer is pressed down over the object	Intersection, PointerEvent
pointer-up 4.0.0	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 4.0.0	the pointer interaction is attempted but misses the object	PointerEvent

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

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