Skip to content
On this page

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

html
<TresMesh
  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
/>
Eventfires when ...Event Handler Parameter Type(s)
click... the events pointerdown and pointerup fired on the same object one after the otherIntersection, PointerEvent
pointer-move... the pointer is moving above the objectIntersection, PointerEvent
pointer-enter... the pointer is entering the objectIntersection, PointerEvent
pointer-leave... the pointer is leaves the objectPointerEvent

The returned Intersection includes the Object3D that triggered the event. You can access it via intersection.object.

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.