@react-three/handle

A handle turns pointer interaction on one object (the handle) into a transformation of another object (the target). The same handle works with a mouse, touch, an XR ray, or a grabbing hand.

Required event setup

Handles listen to @pmndrs/pointer-events, which R3F's built-in event system does not dispatch. Replace it:

import { noEvents, PointerEvents } from '@react-three/xr'

<Canvas events={noEvents}>
  <PointerEvents />
  {/* inside an XR app, also wrap the scene in <XR store={store}> for controller and hand input */}
</Canvas>

<XR> alone covers XR input during a session but does not forward mouse/touch; without <PointerEvents /> handles do nothing on desktop. Regular onClick and friends keep working through PointerEvents.