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

<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)"
/>

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
pointer-move	... the pointer is moving above the object	Intersection, PointerEvent
pointer-enter	... the pointer is entering the object	Intersection, PointerEvent
pointer-leave	... the pointer is leaves the object	PointerEvent

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.