Skip to content

Events

TresJS componenten zenden pointer events uit wanneer er interactie mee is. Dit is het geval voor de componenten die three.js-klassen vertegenwoordigen die zijn afgeleid van THREE.Object3D (zoals netten, groepen,...).

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)"
/>
Eventwordt afgevuurd, wanneer ...Event Handler Parameter Type(s)
click... de events pointerdown and pointerup vuurt op hetzelfde object de een na de anderIntersection, PointerEvent
pointer-move... de pointer hangt boven het objectIntersection, PointerEvent
pointer-enter... de pointer gaat het object inIntersection, PointerEvent
pointer-leave... de pointer is uit het object aan het gaanPointerEvent

De returned Intersection bevat de Object3D die het event triggerde. Je kan het benaderen via intersection.object.

Standaard voorkomen objecten die vóór anderen zijn geplaatst met event handlers niet dat deze gebeurtenissen worden geactiveerd. Dit gedrag kan worden bereikt door de prop blocks-pointer-events te gebruiken.