在Javascript中处理相机式鼠标移动(启用连续鼠标移动)

Wil*_*ill 9 javascript mouse handler webgl

这个想法:我正在创建一个简单的WebGL脚本(使用mrdoob的精彩three.js),允许用户控制对象世界中的摄像头.相机应该模拟传统的第一人称射击相机(例如参考Team Fortress 2).也就是说,相机仅在鼠标移动时移动.

问题:在Javascript中,检测鼠标移动的唯一方法是光标本身是否移动.相比之下,FPS游戏不会显示光标 - 它们只是将相机的移动基于鼠标本身的移动方式.因此,您可以在任何方向上将鼠标移动到鼠标垫上,它始终有效.

但是在浏览器上,由于相机移动是基于光标的,所以你不能移动到目前为止.当光标到达屏幕边缘时,用户无法再向该方向看(例如,您将鼠标移动到屏幕的左边缘,您不能再向左看).

解决方案:我已经想到了两个解决方案,但我都不知道如何实现.或

  1. 移动鼠标后,javascript会将其重置为屏幕中心.这样,在每次鼠标移动后,玩家可以自由地再次向任何方向移动.问题在于,根据我所做的研究,Javascript无法控制用户鼠标的位置(可以理解的是,因为它会对恶意网站造成无法比拟的麻烦).

  2. 或者,鼠标在屏幕周围"包裹".这意味着,当用户到达屏幕的一个边缘时,鼠标将简单地继续到屏幕的另一侧.(参见:http://www.digicowsoftware.com/detail ?_app = Wastearound)但是,它似乎也不是javascript的固有功能,而只是第三方程序可以解决的问题.

那么问题是否有意义?如果是这样,有什么方法可以实现上述解决方案,还是有另外一个我错过了?

Ale*_*nch 6

对于任何仍然有兴趣实现这一目标的人来说,现在已经可以实现了。

使用:

document.addEventListener('pointerlockchange', changeCallback, false);
Run Code Online (Sandbox Code Playgroud)

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