Table of Contents

Threejs objects that implement their own raycast method (meshes, lines, etc) can be interacted with by declaring events on them. We support pointer events, clicks and wheel-scroll. Events contain the browser event as well as the Threejs event data (object, point, distance, etc). You need to polyfill them yourself, if that's a concern.

Additionally, there's a special onUpdate that is called every time the object gets fresh props, which is good for things like self => (self.verticesNeedUpdate = true).

Also notice the onPointerMissed on the canvas element, which fires on clicks that haven't hit any meshes.

onClick={(e) => console.log("click")}
onWheel={(e) => console.log("wheel spins")}
onPointerUp={(e) => console.log("up")}
onPointerDown={(e) => console.log("down")}
onPointerOver={(e) => console.log("over")}
onPointerOut={(e) => console.log("out")}
onPointerEnter={(e) => console.log("enter")}
onPointerLeave={(e) => console.log("leave")}
onPointerMove={(e) => console.log("move")}
onUpdate={(self) => console.log("props have been updated")}

Event data

...DomEvent // All the original event data
...ThreeEvent // All of Three's intersection data
intersections: Intersect[] // All intersections
object: Object3D // The object that was actually hit
eventObject: Object3D // The object that registered the event
unprojectedPoint: Vector3 // Camera-unprojected point
ray: Ray // The ray that was used to strike the object
camera: Camera // The camera that was used in the raycaster
sourceEvent: DomEvent // A reference to the host event
delta: number // Initial-click delta
}) => ...

Propagation and capturing

onPointerDown={e => {
// Only the mesh closest to the camera will be processed
// You may optionally capture the target
onPointerUp={e => {
// Optionally release capture
Edit this page on GitHub