如何仅在单击按钮时激活PointerLockControls

Question

我正在使用；PointerLockControls"；类，并且我希望当我在菜单中时能够禁用鼠标锁定。我想锁定鼠标的唯一方法就是按下按钮。类似于这里所做的：

https://classic.minecraft.net/

目前，无论我在画布上点击哪里，它都会激活指针锁定。

我尝试制作以下代码，其中只有当我们按下按钮时，"ready"才是真的。这似乎奏效了。但是，即使ready为false，它也可以锁定。我认为.connect((/.dedisconnect((将允许解除锁定。我还尝试在整个画布前面设置一个div，以避免单击画布，理论上这也应该有效。但我找不到一种方法来避免点击通过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} />
}

Answer 1

我一直在使用这个(作为点击事件，例如"游戏"外的按钮(来迫使指针在某些点脱离(有点黑客(：

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

对于锁定，我使用：

pointerControls.current.connect();
setTimeout(() => {pointerControls.current.lock()},110);

如果html元素单击事件发生冲突，则lock的较高超时将覆盖解锁中的100。

这些可能也有帮助：

https://discourse.threejs.org/t/unable-to-use-pointer-lock-api/11092

https://discourse.threejs.org/t/how-to-activate-deactivate-pointerlockcontrols/33618/4