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

Question

我正在使用“PointerLockControls”类，我希望能够在我的菜单中禁用鼠标锁定。我想要锁定鼠标的唯一方法是按下按钮。与此处所做的类似：

https://classic.minecraft.net/

目前，无论我在画布上的哪个位置单击，它都会激活指针锁定。

我尝试编写以下代码，其中“就绪”仅在我们按下按钮时为真。这似乎有效。但是，即使 ready 为 false，它也可以锁定。我强硬 .connect()/.disconnect() 将允许停用锁。我还尝试在整个画布前放置一个 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} />
}