Pointer Events via @pmndrs/pointer-events

@pmndrs/pointer-events forwards real input into a Three.js scene so 3D objects fire pointer listeners, filters which objects get hit, and lets you define the shape of the pointer itself.

Overview

The library rests on three pillars:

1. Forward input in. forwardHtmlEvents brings DOM events into the scene; forwardObjectEvents brings events from a surface into a separate portal scene. Each returns an update() that runs every frame.
2. Filter what's hit. The pointerEvents property (CSS-derived: none/listener/auto) and the pointerEventsType property (all/allow/deny/function) decide, per object, which events land.
3. Define the pointer. You can construct your own Pointer and choose how its intersection is computed.

These chain together: forwarding produces events that each carry a pointerType; filtering decides per object which of those events land; and custom pointers determine how and where intersection is computed. The sections below follow that order — forwarding events into a scene, filtering what gets hit, and custom pointers.

Forwarding events into a scene

Forwarding installs a source of pointer events on the scene and gives you an update() to advance it each frame.

forwardHtmlEvents forwards the HTML document's events into the 3D scene. Call it with the DOM target, a camera getter, and the scene — forwardHtmlEvents(document.body, () => camera, scene) — and it returns { update }. Call update() every frame in the render loop, before renderer.render(scene, camera). Objects then receive events through addEventListener('pointerover' | 'pointerout', (e: PointerEvent) => ...), where the PointerEvent type is imported from @pmndrs/pointer-events alongside forwardHtmlEvents. Each event exposes e.point (a vector, with e.point.toArray()), and you can attach multiple listeners for the same event type.