R3f pointerEvents & raycaster

Questions
,
1 
        <group onPointerDown={down} onPointerMove={move} position={position}>
            ...meshes
        </group>

I have 2 questions regarding raycasting in r3f.

  1. I want to call above events function conditionally.
  • Let’s say if user selected any object by pointerDown, then after I want to check raycasting for move, otherwise I don’t want check raycasting on obejct , is it possible?
  1. Let’s assume group has lot meshes with different layers. is it possible onPointerDown will consider only specific layer?
2

You can just append or remove onPointer props conditionally in JSX.

Yup, as above, just append or remove the event listener of the mesh component depending on its layer.

3

you can add/remove events the same way you handle every other prop

const [isActive, setActive] = useState(false)
const down = (e) => {
  // Only the mesh closest to the camera will be processed
  e.stopPropagation()
  // You may optionally capture the target
  // The pointer can leave the browser while dragging
  e.target.setPointerCapture(e.pointerId)
  setActive(true)
}
const up = (e) => {
  setActive(false)
  e.target.releasePointerCapture(e.pointerId)
}
const move = (e) => {
  if (isActive) { ... }
}

<group
  onPointerDown={down}
  onPointerUp={up}
  onPointerMove={move}>
  ...
</group>
  1. Let’s assume group has lot meshes with different layers. is it possible onPointerDown will consider only specific layer?

you can set layers on the raycaster

function Layers({ channel }) {
  const raycaster = useThree(state => state.raycaster)
  useEffect(() => raycaster.layers.set(channel), [raycaster, channel])
  useEffect(() => {
    const prev = raycaster.layers.mask
    // Reset original state on unmount
    return () => raycaster.layers.mask = prev
  }, [raycaster])
}

// Only meshes with layer x can receive pointers now
// Unmount the component and it goes back to normal
{filterEnabled && <Layers channel={which} />}

you have full control over the event system, you can either bend it to suit your needs or even exchange it React Three Fiber Documentation

4

example https://codesandbox.io/p/sandbox/draggable-lines-yuyr6z