How to activate/deactivate PointerLockControls?

Questions
1

Hello,
I am using PointerLockControls and I would like to be able to disable the mouse lock when I am in the menu. I want the only way to lock the mouse is to press the button for that.
Similar to what is done here:

https://classic.minecraft.net/

I tried to make the following code, where “ready” is true only when we press a button. Which seems to work. However, it can lock even when ready is false. I tough .connect()/.disconnect() would allow to deactivate the lock.
I also tried to have a div in front of the whole canvas in order to avoid clicking the canvas, which theoretically should work as well. But I can’t find a way to avoid the click to go through the div.

function PointerLocks({ ready, setReady }) {
  const controls = useRef()

  useEffect(() => {
    if (ready) {
      controls.current.connect()
      controls.current.lock()
    }
  }, [ready])

  const onUnlockHandle = useCallback(() => {
    setReady(false)
    controls.current.disconnect()
  })

  return <PointerLockControls ref={controls} maxPolarAngle={Math.PI - 0.0001} minPolarAngle={0.0001} onUnlock={onUnlockHandle} />
}
2

I’m having the same problem. I’'ve added some links on a navbar at the top of the page, but I can’t click it since it’ll always lock the mouse and make the menu disappear.
I can only click the links a few seconds after unlocking the mouse, since you can’t lock again for a short moment.

4

I managed to do it like this, but it is a bit hacky:

  setTimeout(() => {
    pointerControls.current.unlock();
  },100);

(This was helpful: Unable to use Pointer Lock API)

5

Hey guys, I know this post is old, but I felt upon the same issue.
I had a transition between two scenes, and I wanted different controls on each scene. My problem was was active, even on the first scene.
I found out that using the props “enabled” does the trick !

<PointerLockControls enabled={myStateVariable} />

Hope it helps !

6 
<PointerLockControls selector="canvas" />

this would also fix it it in React Three Fiber / r3f, assuming you use the drei package.

From the docs:

PointerLockControls additionally supports a selector prop, which enables the binding of click event handlers for control activation to other elements than document (e.g. a ‘Click here to play’ button)