如何確保我的 threejs 網格僅在 x 上跟隨我的鼠標？

Question

我有一個 threejs 網格，當我單擊它后移動鼠標時，我想從一側移動到另一側。

在 mousemove function 上，這是我的代碼。

我遇到的問題是，如果我先向右移動然后切換方向，它不會開始向左移動，直到我靠近我第一次單擊鼠標的原始 x position。

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值，而您的 cursor 位於該點擊點的左側。

我認為您實際要查找的屬性是MouseEvent.movementX 。 此屬性僅描述自上次MouseEvent以來 position 中的更改。 它還考慮了方向，因此向右移動將產生正值，向左移動將產生負值。

嘗試用movementX替換pageX ，看看是否能讓你更接近你想要的。