PointerLockControls drei isLocked not updating

Questions
1

When running the lock() functions, it seems to have no effect on the isLocked property, it remains false. Hence the mouseMove controls do not work.

I am running the lock function via a button click and it works as intended from the eventListeners below. I have tried using the selector property, and working straight from ‘three-stdlib’ but to no avail.

It works if I directly use the src at ‘three/examples/jsm/controls/’.

to be fixed

const PointerLock = () => {
    const { camera, gl } = useThree();
    useEffect(() => {
      plControls.current.addEventListener('lock', () => (setShowMenu(false)));
      plControls.current.addEventListener('unlock', () => (setShowMenu(true)));
    }, [])
    useFrame(() => {
      // console.log(plControls.current.isLocked)
      animate();
    });
    return <PointerLockControls ref={plControls} camera={camera} domElement={gl.domElement} />;
  }

working code

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'
extend({ PointerLockControls })

const PointerLock = () => {
    const { camera, gl } = useThree();
    useEffect(() => {
      plControls.current.addEventListener('lock', () => (setShowMenu(false)));
      plControls.current.addEventListener('unlock', () => (setShowMenu(true)));
    }, [])
    useFrame(() => {
      // console.log(plControls.current.isLocked)
      animate();
    });
    return <pointerLockControls ref={plControls} args={[camera, gl.domElement]} />;
  }
2

I had a similar problem.
I solved it by not using the isLocked property, but adding the pointerlockchange event to the document and managing the menu visibility this way.

  function pointerlockchange() {
    setShowInstructions(!showInstructions)
  }

  useEffect(() => {
    document.addEventListener('pointerlockchange', pointerlockchange, false)
    return () => {
      document.removeEventListener('pointerlockchange', pointerlockchange, false)
    }
  })

Example : React Three Fiber Boilerplate - PointerLockControls Selector - CodeSandbox

3

i havent checked but it seems like three-stdlib pointerlock must be outdated, perhaps it doesn’t have that property yet. in that case a quick pr would take care of it.

btw @teeho you don’t need to pass cam and domelement, all drei controls take care of that automcatically.