Basics

Handling Events

Most events work the same as any other svelte application. Theres the DOM events you know from HTML, some Svelte component props but also raycasting which is specific to 3D applications.

DOM events

The useThrelte hook provides you with direct access to Threltes wrapper div called the dom. The canvas element is also available if needed.

Prop events

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

Raycasting events

Casting rays may end up being a big part of your 3D application. They’re required for creating interactivity (click, pointer, mouseover etc…) on your scene’s meshes.

Raycasting can become expensive on complex shapes or if you have a high number of objects. This can be mitigated by either:

• Raycasting against a simplier, invisible object (as is done by mesh bounds).
• And/or introducing a better raycasting algorithm such as Bounding Volume Hirerchies (BVH).

For simple use cases, Three.js’s default raycaster works well.