PointerLockControls: Can't lock pointer back immediately after escape

[satelllte]

Version

• three version: 0.151.3
• @react-three/fiber version: 8.14.2
• @react-three/drei version: 9.106.0

Problem description

Some browsers like Chrome don't allow to lock pointer immediately after unlocking it. This is why this error is logged when user tries to do it:

THREE.PointerLockControls: Unable to use Pointer Lock API @ PointerLockControls.ts:61
Uncaught (in promise) DOMException: The user has exited the lock before this request was completed.

Reproduction steps

• Go to https://drei.pmnd.rs/iframe.html?args=&id=controls-pointerlockcontrols--pointer-lock-controls-scene-st&viewMode=story
• Click to get to the main view (lock pointer)
• Press "esc" to escape from it
• Try to click again to get back to it immediately, see it won't allow to do that for about a second

Potential solution

As far as I'm aware, this issue can't be solved entirely due to the native behaviour of browsers, but maybe there are some ways to have an API for PointerLockControls, which could tell consumers when the pointer is allowed to be locked again, so they can handle it to have a better UX.

Video demo

https://github.com/pmndrs/drei/assets/20585619/2d61c24a-422a-4110-8fbd-1c9d10928105

Related topics

• https://discourse.threejs.org/t/how-to-avoid-pointerlockcontrols-error/33017

[Wyundi]

It is a "feature" of Chrome. We use a timer to avoid that.