events.md 2.8 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

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