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