我如何确保我的三维网格只跟随我的鼠标在x上?

Question

我有一个三维网格，当我点击鼠标后移动它时，我想从一边移动到另一边。

关于鼠标移动函数，这里是我的代码。

我遇到的问题是，如果我先向右移动，然后切换方向，它不会开始向左移动，直到我接近我第一次点击鼠标的原始x位置。

let originx;
onDocumentClick(evt) {
originx = evt.pageX;
document.addEventListener('mousemove', onMouseMove);
}
onMouseMove(evt) {
let _newX = myMesh.position.x + (originx - evt.pageX);
myMesh.position.set(_newX, myMesh.position.y, myMesh.position.z);
}

Answer 1

我不太清楚你想要达到的效果，所以我打算在黑暗中尝试一下…如果你用更精确的描述更新你的答案，让我知道，我会更新这个答案。

我认为你的逻辑最大的问题是你把一切都建立在MouseEvent.pageX的基础上。该属性的坐标系统从左边缘的0开始，在右边缘有一个正值。因此，当您将鼠标移动到原始点击点的右侧时，无论您移动鼠标的方向如何，始终的MouseEvent.pageX大于原始点的MouseEvent.pageX。． 同样地，当你的光标在原点击点的左边时，pageX的只会比原点击点的pageX值小。

我认为你实际上在寻找的属性是MouseEvent.movementX。此属性仅描述自上次MouseEvent以来更改的位置。它还考虑了方向，因此向右移动将产生正值，向左移动将产生负值。

试着用movementX代替pageX，看看是否能让你更接近你想要的。