Concepts
Interactivity
Open the interactivity example in a Svelte REPL
Listen to events of a <Mesh> and a <MeshInstance> as if it would be a regular DOM element:
<Mesh … interactive on:click={onClick} />
Supported Events
clickcontextmenupointeruppointerdownpointerenterpointerleavepointermove
All events include the raycast Intersection object:
<script lang="ts">
import { Mesh, ThreltePointerEvent } from 'threlte'
const onClick = (e: CustomEvent<ThreltePointerEvent>) => {
const distanceToMesh = e.detail.distance
}
</script>
<Mesh … interactive on:click={onClick}>
All events but pointerleave and pointerenter also include the underlying PointerEvent or MouseEvent:
<script>
import { Mesh, ThreltePointerEvent } from 'threlte'
const onPointerMove = (e) => {
console.log(e.detail.event.clientX, e.detail.event.clientY)
}
</script>
<Mesh … interactive on:pointermove={onPointerMove}>
TIP
You must add interactive to your component to be able to listen to pointer events