Examples for PointerLockControls?

[OllyNural]

I'm working on something where I want to switch between OrbitControls and PointerLockControls, ideally using Spacebar. I can't seem to find any examples on PointerLockControls - are there any available?

So far my best guess is to have OrbitControls conditionally rendered, and switch to an always rendered PointerLockControls when some key is pressed for example.

{ controlState === 'orbit' && <Controls /> }
<PointerControls />

Which currently looks like:

extend({ OrbitControls, PointerLockControls });
const PointerControls = () => {
        const controlsRef = useRef();
        const { camera, gl } = useThree();

        useFrame(() => {
            if (controlsRef !== undefined && controlsRef.current !== undefined) {
                controlsRef.current.target = new THREE.Vector3(worldMap.length / 2 * CELL_WIDTH, 0, worldMap.length / 2 * CELL_WIDTH)
                controlsRef.current.addEventListener('lock', handleLock)
                controlsRef.current.addEventListener('unlock', handleUnlock)
                document.addEventListener("keydown", (event) => {
                    if (event.code === 'Space') {
                        controlsRef.current && controlsRef.current.lock()
                    }
                })
            }
        })

        const handleLock = () => {
            console.log('locked')
        }

        const handleUnlock = () => {
            console.log('unlocked')
        }

        return (
            <pointerLockControls
                ref={controlsRef}
                args={[camera, gl.domElement]}
            />)
    }

I'm 99% sure this is wrong though, hence wondering if there are examples!

[drcmda]

doing it conditionally is fine, you could also leave both mounted and enable them

<OrbitControls enabled={orbit} />
<PiinterlockControls enabled={!orbit} />

btw, if your PL controls work, do you want to add them to https://github.com/react-spring/drei/ ? i collected some of the others already.

[space1worm]

This doesn't work :/

[OllyNural]

Hi! More than happy to - once it's properly working!

Currently I'm seeing the locked and unlocked functions being called a ridiculous amount of times - I'm assuming this is because my event listener is within a useFrame?

Also any movement controls aren't working, it just locks the camera and hides the mouse.

By extending the PointerLockControls, i'm assuming it should give me WASD movement out of the box? Or do I have to add that myself.

[drcmda]

useframe is called 60 times per second. event listeners are for useEffect, and useEffect probably also should remove them on unmount

[OllyNural]

Okay - update. I've made some decent progress, and can almost see the light at the end of the tunnel. I was having problems around using the ref outside of a useFrame, but checking if it exists and if so, then using it was enough. Moving the event handlers in useEffects, and only using useFrame for camera movement updates works great.

I'll hopefully get this working, and create a PR for drei when I can! Still new to this, but hope I can help.

Cheers!