使用Javascript处理相机式鼠标移动（可连续移动鼠标）

想法：我正在创建一个简单的WebGL脚本（使用mrdoob的精彩three.js），它允许用户在一个世界中控制相机对象。相机应该模拟传统的第一人称射击相机（例如参考军团要塞2）。也就是说，只有当鼠标移动时，照相机才会移动。使用Javascript处理相机式鼠标移动（可连续移动鼠标）

问题：使用Javascript中的，检测鼠标移动的唯一方法是如果光标本身移动。相比之下，FPS游戏并不显示光标 - 它们只是将摄像头的移动基于鼠标移动的方式。所以，你可以将鼠标移动到任何方向的鼠标垫上，并始终工作。

尽管在浏览器上，由于摄像机的移动是基于光标，所以你不能移动，但是到目前为止。当光标碰到屏幕的边缘时，用户无法再往那个方向看（例如，将鼠标移动到屏幕的左边缘，不能再向左看）。

解决方案：我想到了两种解决方案，但我都不知道如何实现。要么

鼠标移动后，javascript将其重置到屏幕中心。这样，在每次鼠标移动之后，玩家可以自由地再次向任何方向移动。与此相关的问题是，根据我所做的研究，Javascript无法控制用户鼠标的位置（可以理解，因为这对恶性网站来说是一个无法比拟的麻烦）。或者，鼠标在屏幕上“环绕”。意思是，当用户到达屏幕的一个边缘时，鼠标将继续到屏幕的另一侧。（请参阅：http://www.digicowsoftware.com/detail?_app=Wraparound）但是，这似乎也不是JavaScript的固有功能，而只是第三方程序可以解决的问题。

那么，问题是否有意义？如果是这样，有什么办法可以实现上述解决方案，还是有另一个我失踪？

来源

2011-07-26 Will

有趣的问题。永远不要低估F11，即全屏观看。 :-) –

@zourtney全屏并不能解决问题，因为：1）鼠标在屏幕边界被遮住; 2）使用多显示器设置鼠标可以离开浏览器区域。在那里查看我的回复。 – Chiguireitor

@Chiguireitor，是的，我意识到单独的全屏幕不足以提供适当的FPS。我没有意识到这是一个草案规范。谢谢你今天教我一些东西。你的回答有我的赞赏:-)我认为我们都同意，这种类型的要求只会越来越受欢迎，因为网络技术变得越来越流行 –

任何人仍然有兴趣在实现这一点，现在是有点用（我由于这种限制使了一个小游戏是一款FPS，但目前将不会被释放）。

使用：

document.addEventListener('pointerlockchange', changeCallback, false);

见例如 http://www.html5rocks.com/en/tutorials/pointerlock/intro/

来源

2013-01-31 18:09:40

是啊！ API也在这里描述：http://www.chromium.org/developers/design-documents/mouselock – Will

你说的都对。基于标准的网络技术不会让你捕捉到你想要的鼠标。这就是说：您可能可以制作（或查找）一个特殊的SWF，它可以收集鼠标移动数据并将其传递给javascript。它不会限制光标移动，尽管您可以在鼠标捕捉处于活动状态时使用CSS来隐藏光标。但它可能能够即使光标已到达屏幕的左边缘，仍继续点击“移动鼠标左”事件。

当光标位于视口之外，即通过浏览器镶边时，任何此类SWF都可能无法捕获移动。

来源

2011-07-26 22:20:13 Tom

Urgh。虽然这可能会起作用，但我觉得有一个SWF覆盖WebGL脚本会很慢并且很难实现。不过，我很欣赏这些反馈。 – Will

SWF不一定是覆盖。类似于将不可见（或1x1px）的SWF嵌入到例如播放音频资源时，无论鼠标是否在SWF上，该SWF都可以简单地通过在页面上提供鼠标移动数据。不过，你需要询问一些Flash人员。 – Tom

鉴于在HTML5/Javascript中显然不可能这样做，那么这个变体呢：把鼠标的位置（不是鼠标移动）作为代表转动的速度。

因此，如果鼠标超过中心左侧的某个阈值，则相机向左转;鼠标离开越远，相机转动得越快。要停止转动，玩家将鼠标移回中心。

对我来说，这是一个恼人的用户界面，至少在最初，但也许玩家会习惯它。由于我们没有任何完美的解决方案，因此可能值得尝试。您可以通过允许箭头键按照他们在许多FPS中的操作方式来缓解问题，并在相机按下时旋转相机。

来源

2011-07-27 11:43:42 LarsH

我很欣赏答案，但我认为你是对的。该UI可能会令人沮丧。我可能只是用箭头键去。 – Will

全球社区目前正在制定一份草案规范来解决这个问题。你说的是所谓的“鼠标锁定”。我在这个标准的第一阶段做了一些工作，以帮助解决需要的部分。请为这些问题投票并订阅指定的邮件列表，以便我们所有人尽快解决此问题。

铬错误：http://code.google.com/p/chromium/issues/detail?id=72754
Firefox的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=633602
W3C邮件列表：建议http://www.w3.org/Bugs/Public/show_bug.cgi?id=9557
草案：https://docs.google.com/document/d/1uV4uDVIe9-8XdVndW8nNGWBfqn9ieeop-5TRfScOG_o/edit?hl=es&authkey=CM-dw7QG

然而，还是有办法可以实现你的目标（这是我发现的另一种方式）：一个本地插件，控制鼠标。

来源

2011-07-27 21:54:10 Chiguireitor

没有意识到它有一个实际的术语。谢谢（你的）信息！我一定会投中。 – Will

使用Javascript处理相机式鼠标移动（可连续移动鼠标）

回答

相关问题