1. Interactivity

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

  • click
  • contextmenu
  • pointerup
  • pointerdown
  • pointerenter
  • pointerleave
  • pointermove

All events include the raycast Intersection object:

<script lang="ts">
  import { Mesh, ThreltePointerEvent } from '@threlte/core'

  const onClick = (e: CustomEvent<ThreltePointerEvent>) => {
    const distanceToMesh = e.detail.distance
  }
</script>

<Meshinteractive on:click={onClick}>

All events but pointerleave and pointerenter also include the underlying PointerEvent or MouseEvent:

<script>
  import { Mesh, ThreltePointerEvent } from '@threlte/core'

  const onPointerMove = (e) => {
    console.log(e.detail.event.clientX, e.detail.event.clientY)
  }
</script>

<Meshinteractive on:pointermove={onPointerMove}>
TIP

You must add interactive to your component to be able to listen to pointer events