Events
TresJS los componentes emiten eventos de puntero cuando se interactúa con ellos. Esto es válido para los componentes que representan clases de three.js que derivan de THREE.Object3D (como mallas, grupos, ...).
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 | se dispara cuando ... | Tipo(s) de parámetro del controlador de eventos |
|---|---|---|
| click | ... los eventos pointerdown y pointerup se disparan en el mismo objeto uno tras otro | Intersection, PointerEvent |
| pointer-move | ... el puntero se mueve sobre el objeto | Intersection, PointerEvent |
| pointer-enter | ... el puntero entra en el objeto | Intersection, PointerEvent |
| pointer-leave | ... el puntero sale del objeto | PointerEvent |
La Intersection devuelta incluye el Object3D que desencadenó el evento. Puedes acceder a él a través de intersection.object.
De forma predeterminada, los objetos posicionados delante de otros con controladores de eventos no evitan que se disparen esos eventos. Este comportamiento se puede lograr utilizando la propiedad blocks-pointer-events.