Basics

Handling Events

Events come in three different flavours in Threlte. The DOM events you know from HTML, some svelte component props and raycasting.

DOM events

To get started, you’ll need an HTML element. The useThrelte hook provides you with direct access to Threltes HTML div wrapper - the dom. The canvas is also available if that is more appropriate for your events.

Prop events

The <T> component has it’s own events. It can even pickup on events coming from the underlying three.js objects.

Raycasting events

Casting rays can end up being a big part of your 3D application. They’re required for creating interactivity (click, pointer and wheel events) on your scene’s meshes. Raycasting can struggle with complex shapes or a high number of objects but this can be mitigated by either:

• Raycasting against an simplier, invisible object (a sphere for example)
• Or introducing a better raycasting algorithm such as Bounding Volume Hirerchies (BVH)

In general, Three.js’s default raycaster works well enough.