时间戳

首页 > 解决方案 > 如何确保我的 threejs 网格仅在 x 上跟随我的鼠标？

javascript - 如何确保我的 threejs 网格仅在 x 上跟随我的鼠标？

问题描述

我有一个threejs网格，当我单击它后移动鼠标时，我想从一侧移动到另一侧。

关于 mousemove 函数，这里是我的代码。

我遇到的问题是，如果我首先向右移动然后切换方向，它不会开始向左移动，直到我接近我第一次单击鼠标的原始 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);
}

标签： javascriptthree.jsmouseevent

解决方案

目前尚不清楚您要达到的效果，因此我将在黑暗中进行尝试...如果您用更准确的描述更新答案，请告诉我，我将更新此答案。

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

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

尝试替换pageX，movementX看看这是否能让你更接近你想要的。

推荐阅读