Skip to content

Interactivity and Events in 3D

Objects in 3D scenes inherit all the useful event handling features from Troika Core's event system. See the core Interactivity and Events documentation for what it can do.

Troika 3D also adds some enhancements, which are described here:

Raycasting

Any Object3DFacade with a pointer-related event listener, a pointerStates property, or pointerEvents:true will be raycasted in the scene and, if that raycast intersects, will dispatch a corresponding event like "mouseover", which bubbles up the facade tree.

The event object that is dispatched will always have a ray property holding a Three.js Ray, which will be set from the mouse position on screens, or from a pointer ray in WebXR, etc. as appropriate. Because the event can come from different sources, it's safer for handler code to rely on that ray rather than trying to use e.clientX etc.

The raycasting process is highly optimized behind the scenes using an octree prefilter. See the performance doc for details.


Last update: 2024-04-09