@pmndrs/pointer-events

Objects receive events through three's own addEventListener, with the same names and semantics as DOM pointer events: pointerdown/up/move/over/out/enter/leave/cancel, click, dblclick, contextmenu, wheel. Every event source — mouse, touch, an XR ray, a grabbing hand — is a pointer, so one listener works for all of them.

Choosing an entry point

• Screen input (mouse, touch, pen): forwardHtmlEvents(canvas, () => camera, scene).
• Events hitting a mesh that shows another scene (a render-target screen, a portal, an in-world editor viewport): forwardObjectEvents(mesh, () => innerCamera, innerScene). The hit's uv becomes the screen coordinate for the inner camera, so the mesh needs UVs.
• A tracked object that points or touches (XR controller, hand, a tool in the scene): createRayPointer for a straight ray along the object's -Z, createLinesPointer for a curved/polyline ray (teleport arcs), createGrabPointer for a sphere you press with down/up yourself (squeeze to grab), createTouchPointer for a fingertip sphere that presses on its own when close enough.
• Several pointers on the same hand: register them in one CombinedPointer so the scene is traversed once per frame instead of once per pointer, and only the nearest pointer stays active when constructed with enableMultiplePointers = false.

Wiring

const { update, destroy } = forwardHtmlEvents(canvas, () => camera, scene)
mesh.addEventListener('click', (e) => console.log(e.point))