javascript - event.movement 返回奇数值

Question

我一直在玩 webGL，我已经达到了可以制作图形非常可怜的小型三维游戏的程度(到目前为止，它更多的是概念/功能的证明)。对于三维体验来说，向任意方向无限移动鼠标来旋转第一人称视角是很不错的。 Pointerlock 允许我锁定和隐藏光标位置，这非常有帮助，但随后我需要找到另一种跟踪鼠标移动的方法。在我的研究中，event.movementX 和 event.movementY 似乎是标准，但我经常会得到相反方向的较大运动信号(通常在 500 到 583 之间)鼠标的移动。我用大量鼠标和触控板对此进行了测试，并遇到了相同的现象。

这是我的相关事件监听器:

document.addEventListener("mousemove", function(event) {
   xMovement += event.movementX; 
   yMovement += event.movementY; 
   console.log(event.movementX)
}, false);

document.addEventListener("pointerlockchange", function(event) {
   if(pointerLockEnabled) pointerLockEnabled = false; 
   else pointerLockEnabled = true; 
   xMovement = 0; yMovement = 0; 
} , false);

以及相关的渲染循环代码:

function render() {
   if(pointerLockEnabled) {
       camera.rotation.y = -xMovement / 1000;
       camera.rotation.x = -yMovement / 1000;
       if(rightKey && !leftKey) {
          camera.position.x += 10 * Math.cos(camera.rotation.y);
          camera.position.z -= 10 * Math.sin(camera.rotation.y);
       }
       else if(leftKey && !rightKey) {
          camera.position.x -= 10 * Math.cos(camera.rotation.y);
          camera.position.z += 10 * Math.sin(camera.rotation.y);
       }
       if(upKey&& !downKey) {
          camera.position.z -= 10 * Math.cos(camera.rotation.y);
          camera.position.x -= 10 * Math.sin(camera.rotation.y);
       }
       else if(downKey && !upKey) {
          camera.position.z += 10 * Math.cos(camera.rotation.y);
          camera.position.x += 10 * Math.sin(camera.rotation.y);
       }
   }
}

但是我的控制台出现了这样的情况:

我添加了更改xMovement的条件，以防止相机 Angular 发生大幅转动，但我仍然遇到非常烦人的移动。有什么想法可以修补或替换为更无缝的界面移动吗？

Answer 1

如果您以某种方式限制 mousemove 事件，这可能会有所帮助。例如lodash throttle版本:

function handleMouseMove(event) {
   xMovement += event.movementX; 
   yMovement += event.movementY; 
   console.log(event.movementX)
}
var throttledHandleMouseMove = _.throttle(handleMouseMove, 75);
document.addEventListener("mousemove", throttledHandleMouseMove, false);

使用这种方法，handleMouseMove 每 75 毫秒执行次数不会超过 1 次。