问题标签 [pointerlock]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
213 浏览

javascript - 没有全屏 API 的指针锁

如何在没有全屏模式的情况下使用指针锁?

网络上的教程也使用全屏 API:https ://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

0 投票
1 回答
1546 浏览

javascript - 如何在画布/div中包含我的鼠标指针?

我目前正在尝试制作一个小型 html5 画布游戏。我希望我的鼠标指针停留在 div 元素或画布边界内。

请指出我正确的方向。

0 投票
0 回答
415 浏览

three.js - Three.js:PointerLockControls 以某种方式改变模板的位置

我正在使用模板缓冲区将两个 THREE.js 场景相互合成。这可行,但是当我尝试使用 PointerLockControls 时,移动相机(使用鼠标或键盘)以某种方式导致视图的模板部分被移动/移动。它似乎落后于相机位置。

我尝试过其他控件(轨迹球、轨道),使用这些控件时不会出现此问题。

有些东西似乎在发生冲突,但我不知道在哪里看。

PointerLock 代码直接从示例中复制而来。

这是渲染代码:

这是一个小提琴:http: //jsfiddle.net/g8EWG/

如果你从左向右移动,或者只是环顾四周,这种变化是非常明显的。

任何帮助将不胜感激。

0 投票
2 回答
375 浏览

android - Android上的第一人称射击游戏——如何处理鼠标事件?

作为一种爱好和学习,无论这是否可能,我正在尝试为 Android 实现一个简单的第一人称射击游戏。不幸的是,我在处理鼠标事件处理时遇到了死胡同。

我已经有一个onGenericMotion()-Listener,它处理MotionEvent系统框架生成的对象。问题是,MotionEvent由鼠标生成的对象仅包含绝对坐标,一旦光标到达屏幕的边缘或角落,它们往往会“卡住”。所以我在考虑相对鼠标坐标。虽然我发现没有任何功能MotionEvent可以提供相对运动,但使用

adb shell su -- getevent -lt /dev/input/event3

检查它的输出显示,当一个人试图移动光标时,内核会产生不同的相对运动事件,即使它卡在屏幕的一角也是如此。因此,鉴于我的射手具有 su 访问权限,我可以获得相对运动。

现在的问题是:一点点 Google-fu 透露,在许多第一人称射击游戏中,典型的鼠标移动是通过以下方式实现的

  1. 使用相对鼠标坐标和
  2. 通过将鼠标光标重新定位在屏幕中央。

所以,这个问题真的有两个方面:

  1. 是否可以将鼠标光标重新定位在 Android 上的屏幕中央?和
  2. 如果不是,那么典型的“第一人称射击”鼠标移动是否可以仅通过使用相对鼠标移动信息来实现?
0 投票
0 回答
542 浏览

javascript - 如何使用 PointerLockControls 在 Three.js 中进行鼠标点击检测?

我做了一个开源项目。它是使用 Three.js 为您的 3D 书籍提供的数据可视化工具。(https://github.com/AlinCiocan/BooksIn3D)。现在我想检测用户是否在按一个键时在书前面。像这样的东西:

在此处输入图像描述

例如,在上图中,光标没有碰到任何书籍。

我尽我最大的努力让一个功能真正起作用,但我被卡住了。我搜索了关于如何使用 PointerLockControls 进行命中检测的任何问题,但我一无所获。我必须说我的光标手它没有移动,它总是在屏幕的中心。

0 投票
1 回答
137 浏览

dart - 带飞镖的指针锁

有没有办法在 Firefox 和 Chrome 上使用 dart 锁定光标?我试过:

在 mousedown 事件监听器中

我也试过

其中 renderer 是 three.dart 包中的 WebGLRenderer。问题是这只适用于 Chromium。我为 js 查找了以下跨浏览器解决方案,但这在 dart 中不起作用。

有没有办法在 dart 中进行指针锁定,或者我是否需要找到一种方法来从 dart 执行上面的 javascript?

0 投票
2 回答
1348 浏览

javascript - Three.js Pointerlock控件沿y轴拍摄

目前我正在开发一个带有three.js 和pointerlockcontrols 的FPS。

使用下面的代码,我可以向任何水平方向射击:

但我的代码没有考虑 y 轴。下面的行包含俯仰旋转:

如何应用此值以便我也可以沿 y 轴(垂直于任何方向)拍摄?目前,子弹正沿着一条直线前进。

提前感谢你的帮助。

0 投票
1 回答
388 浏览

webgl - 在 WebVR 模式下同步渲染鼠标 (WebGL) 和指针锁定坐标

我正在尝试将渲染的鼠标与指针锁定坐标同步。指针锁隐藏了鼠标光标,所以我需要单独绘制它。我有一个带有原始鼠标指针的 3D 场景。我使用广告牌在 (0,0, -1) 处绘制鼠标光标,所以它看起来像这个 3D 空间中的 2D 对象,很好。

长得好看

到目前为止,一切都很好。为了计算基于指针锁的 x 和 y 坐标,我使用这个:

第一个问题是,我不知道我最初必须如何设置 x 和 y 坐标。当您进入 VR 模式时,光标设置为 (0,0, -1),因此它们必须在 2D 空间中同步。由于两只眼睛,我认为它类似于 width/2 或 width/4,但这不起作用。另外我需要一个正确的渲染加速因子,因为鼠标太快了。我猜又是有宽度的东西。

0 投票
1 回答
92 浏览

javascript - 使用 HTML5 指针锁定 API 时的确认对话框

我正在使用这个演示页面尝试指针锁定 API。但是在运行代码时,我看到浏览器显示一个确认对话框,询问用户是否要隐藏鼠标指针。有什么办法可以防止这个对话框以编程方式出现,让用户有无缝的体验?

0 投票
0 回答
38 浏览

javascript - 如何在 XUL 中正确检测超出屏幕的 mousemove 增量?

对于我创建的SlyZoom 扩展,我想实现一个虚拟滑块:一个 XUL/XBL 元素,它充当一个小的静态区域,在mousedown该区域中,鼠标指针变为ew-resize,我捕获mousemove事件以检测水平移动,以更改当前缩放级别。

到目前为止,我已经实现了一个暂定的解决方案,使用标准MouseEvent API并利用非常方便的MouseEvent.mozMovementX ,即使我不使用Pointer Lock API似乎也存在。

在此示例图像中,您会看到 (Xubuntu)ew-resize鼠标指针在临时虚拟滑块上,这是一个区域,鼠标指针后面有一个小的黑色双箭头,位于左侧<menulist>

虚拟滑块示例

此图像的右侧是屏幕的右边缘;左侧被简单地裁剪。

但是,正如您所见/想象的那样,鼠标指针很可能会在用户达到令人满意的缩放级别之前定期到达用户屏幕的边缘。在这些情况下,不幸MouseEvent.mozMovementX的是,即使物理指针设备仍在移动,它也会简单地保持为零。

我试图通过使用 Pointer Lock API 来规避这个问题。但是,指针锁定 API 似乎不适用于 XUL/XBL 文档。那是对的吗?或者指针锁 API 是否也应该适用于 XUL/XBL 文档?

在任何情况下,即使 Pointer Lock API我的 XBL 元素有效,它也会隐藏鼠标指针,这是不可取的。虽然我想在这种情况下我可以尝试创建一个人造鼠标指针,但恐怕这相当麻烦并且容易出现不稳定的行为。

所以我的问题归结为:

如何在 XUL/XBL 文档中正确检测超出屏幕边缘的鼠标移动增量?这可能吗?