问题标签 [pointerlock]

当我在 Firefox 上时，画布调用requestPointerLock并按 F11 进行全屏显示 - 我看到该事件mousemove正在被触发。这使得一些必须是静态的东西移动，因为鼠标没有移动。

我试图创建一个演示，但我得到了错误Blocked pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set.

因此，这是一个您至少可以阅读的代码示例。

HTML部分：

JavaScript 部分：

结果，当窗口全屏显示时（而 Firefox 缓慢地进行） - 我在控制台中打印e.movementY并且值并不总是0。

问题是如何防止这个 Firefox “功能”，以便不触发鼠标移动事件？

如果指针锁定到某个元素，我想防止鼠标滚轮实际滚动文档。

这是一个最小的例子：

当我单击红色 div 时，指针被锁定到 div（这有效）并且变量locked设置为 true（有效）。当我按下 ESC 时，锁定被释放，我可以再次移动鼠标（工作）。

locked如果变量设置为 true，我还会监听鼠标滚轮事件并阻止它们。在 Firefox 甚至 Edge 上这工作正常，但在 Google Chrome 上event.preventDefault()被忽略并且页面向下/向上滚动（不是我想要的）。

示例工作流程可能如下所示：

1. 我将光标移动到任何地方（是否在 div 上无关紧要）
2. 我使用滚轮并相应地滚动页面（应该如此）
3. 在控制台中我看到break
4. 现在我点击 div 并且指针被锁定
5. 控制台说setting locked: true
6. 现在我再次滚动，但页面仍然滚动（错误）
7. 安慰：locked: true cancelable: false

现在是有趣的部分：如果我if (!locked) {}从轮事件侦听器中删除该部分，则实际上在控制台打印时会阻止该事件locked: true cancelable: true。

那么由于某种原因，该if块使事件不可取消？

我的问题来了：如何有条件地防止鼠标滚轮滚动页面，条件是指针是否锁定到某个元素？

我也尝试了一些事情：

• 将车轮事件侦听器附加到div.
• 当指针被锁定时附加一个无条件阻止的事件侦听器，并在释放锁时删除它。
• 将车轮事件侦听器附加到“一切”：window document div...
• event.stopPropagation();
• event.stopImmediatePropagation();（那里有多少？）

所有的结果都与上面的最小示例相同。

编辑：我在Windows 10上的Google Chrome 71和CentOS 7.4上的Chromium 65上尝试了最小示例：它在那里不起作用。

如何正确添加 Three.js PointerLockControl？我尝试使用示例，但没有运气，总是会出现某种错误。我像这样通过头部导入库<script src="lib/controls/PointerLockControls.js"></script>

如果我这样做

PointerLockControls.jf 文件中出现错误

错误所在的那一行，看起来像这样

从哪里开始以及如何将它整齐地放在代码中？我正在使用这个示例。非常感谢您的帮助。有我的代码

在请求指针锁定后尝试添加mousemove侦听器时，我观察到奇怪的行为。document

我已经实现了以下内容，主要基于 MDN 的文档：

...

我看到控制台日志完全符合我的预期。当我在画布元素上计时时，指针被困住，我看到：

但我从来没有见过EVENT!。

为了让事情变得更奇怪，如果我注释掉对我的调用，document.removeEventListener我观察到 mousemove 事件被捕获但仅在锁定关闭时。

我正在为我的项目使用指针锁定控件并发现了一个错误。
如果玩家在按下键盘上的任何方向键的同时按下 esc 按钮（打开指针锁定控件），相机仍然在背景中移动，尽管它不可​​见。稍后在玩家单击鼠标按钮（打开指针锁定控件）后，相机处于另一个位置。
如何解决？控件关闭时如何停止相机移动？这可以在指针锁定控制示例中看到 - https://threejs.org/examples/misc_controls_pointerlock.html

我想知道是否有办法限制极角，这样当我在 Three.js 中使用 PointerLock 控件时相机不会进入地面？类似于 Orbit 控件的 minPolarAngle 和 maxPolarAngle？

因此，我们使用该requestPointerLock()功能来锁定用户在我们网站上玩游戏时的鼠标指针。在web.dev disable-mouse-acceleration 文章之后，我测试了他们的指针锁定 API 示例，发现使用“unadjustedMovement”请求指针锁定在我的 Chrome 浏览器 (v88.0.4324.104) 上有效。

然而，现在发生了一些奇怪的事情。我基本上只是通过转到源代码链接并单击“remix to edit”来复制上述项目。然后，我打开示例并进行了相同的测试，结果显示以下消息：

不支持禁用鼠标加速

所以基本上，两个相同的项目代码，原始项目完美无缺，但复制的项目说不支持禁用鼠标加速。

此外，我在本地项目中测试了完全相同的代码，但返回了相同的错误消息。

有人知道这里出了什么问题吗？

原始源代码
原始现场测试

源代码副本
现场测试副本

用于 PC 的 PointerLockControls 工作正常，但后来我发现了另一个用于移动设备的 pointerLockControls，它也支持触摸控制，但是当我尝试使用它时，它不会旋转一整圈

谁能帮我这个

链接到该仓库：pointerLockControls for mobile

链接到我的仓库：pointerLockControls for mobile

我也分享了我的仓库的原因是因为会出现一个错误onTouchmove is not defined，我解决了我的仓库中的错误

在 Chrome 的未来版本中，有望使用 pointerLock 来获取鼠标的原始或未经调整的移动，即鼠标在通过操作系统传递函数之前的移动 [1]。

请求未调整移动的 pointerLock 的工作原理如下：

似乎这目前仅适用于 Chrome（例如版本 88-91），并且仅在用户手动启用 chrome://flags/#enable-pointer-lock-options 时才有效。

我想检查浏览器是否支持 unadjustedMovement 而此时实际上没有请求 pointerLock 。因此，我的问题是是否有一种方法可以检查是否支持 unadjustedMovement 而无需请求指针锁。

更新： 以防万一，自然可以使用以下代码段对其进行检查。

但是，我不确定这是否会产生负面影响，更重要的是，它需要激活手势。即导致调用函数的单击。

[1] https://web.dev/disable-mouse-acceleration/

这是 MDN 推荐的在线演示：

1. https://mdn.github.io/dom-examples/pointer-lock/

它适用于桌面，但不适用于移动设备（Chrome、Edge、FF）。同时，指针锁定 API 被列为在移动设备上广泛支持： https ://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

更多演示：

2. Quake 3 WebGL 演示 http://media.tojicode.com/q3bsp/

3. http://www.smartjava.org/examples/pointerlock/

我自己也实现了，当我使用 JSON.stringify(e) 读取错误事件的内容时，我得到：'{isTrusted:true}'

更新： 我使用了一个更复杂的函数来序列化整个事件对象，所以在添加了 MDN 事件侦听器建议之后：

和

我从序列化函数中得到：

更新#2： 我包含了 FF，因为它也不起作用，它只是不会引发错误，而它不规律地跟随指针（高速），没有锁定它并且在触发 pointerlockchange 事件时！