Javascript 返回奇数值的event.movement

我一直在玩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

时添加了一些条件，以防止相机角度发生大幅度的旋转，但我仍然会有非常恼人的移动。有什么想法可以修补或替换为更无缝的界面移动吗？

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

---

使用这种方法，

handleMouseMove

不会每75毫秒执行超过1次。

我也有同样的问题，但对我来说，坏值总是与移动方向相同。我发现如果我用最后一个值替换50以上的任何值，我会得到非常好的精度。唯一的问题是当坏值在30-49范围内时，但我不想取消这些值，以防用户实际移动鼠标太快或鼠标的轮询率太差。一些趋势线比较有助于平滑这些数据，但如果您不需要太多的精度，这很好：

const movement = {X: 0, Y: 0};
const lastMovement = {X: 0, Y: 0};
function onMouseMove(evt) {
  if (checkPointerLock()) {
    ['X', 'Y'].forEach(axis => {
      const checkValue = evt['movement' + axis] || evt['mozMovement' + axis]|| 0;
      //ignore >=50. probably erroneous. smooth to last value
      if (Math.abs(checkValue) < 50) {
        lastMovement[axis] = checkValue;
      }
      movement[axis] = lastMovement[axis];
    });

    yaw += movement.X * -0.001 * data.sensitivityX;
    pitch += movement.Y * (data.invertY ? .001 : -.001) * data.sensitivityY;
    pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch));
  }
}

const movement={X:0，Y:0}；
常量lastmotation={X:0，Y:0}；
MouseMove（evt）的功能{
if（checkPointerLock（））{
['X'，'Y'].forEach（轴=>{
const checkValue=evt[‘移动’+轴]| | evt[‘移动’+轴]| | 0；
//忽略>=50。可能错误。平滑到最后一个值
if（数学绝对值（校验值）<50）{
lastMovement[轴]=检查值；
}
移动[轴]=上次移动[轴]；
});
偏航+=移动X*-0.001*数据灵敏度X；
节距+=移动.Y*（data.invertY？.001:-.001）*data.sensitivityY；
螺距=数学最大值（-Math.PI/2，数学最小值（Math.PI/2，螺距））；
}
}

需要查看更多上下文，例如与鼠标移动或功能相关的其他代码等（如您提到的相机锁定），因此，这基本上通过限制事件检查的频率来防止噪音？@BenjaminBrownlee。请参见，它基于

limit.js

，但实现并不重要。所以我建议…这不起作用，任何人谁读了这篇文章，并考虑尝试它。限制处理程序函数不会限制事件传播。我有点怀疑，但还是尝试了一下，将处理函数限制为帧速率，然后是75毫秒。它没有修复错误的值

const movement = {X: 0, Y: 0};
const lastMovement = {X: 0, Y: 0};
function onMouseMove(evt) {
  if (checkPointerLock()) {
    ['X', 'Y'].forEach(axis => {
      const checkValue = evt['movement' + axis] || evt['mozMovement' + axis]|| 0;
      //ignore >=50. probably erroneous. smooth to last value
      if (Math.abs(checkValue) < 50) {
        lastMovement[axis] = checkValue;
      }
      movement[axis] = lastMovement[axis];
    });

    yaw += movement.X * -0.001 * data.sensitivityX;
    pitch += movement.Y * (data.invertY ? .001 : -.001) * data.sensitivityY;
    pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch));
  }
}