如何实现ThreeJS网格点击后仅沿鼠标X轴移动，解决方向切换延迟问题？

问题原因 #

你的代码核心逻辑错误是：仅存储了点击触发时的鼠标X坐标，没有同步记录点击时刻网格本身的X轴位置，且每次鼠标移动时都基于网格当前位置累加全局差值，导致位置计算出现严重的累积偏移，方向切换时差值的正负反转需要先抵消之前的累积偏移量，因此会出现要靠近初始点击位置才会响应移动的问题。

修复方案 #

点击选中网格时，需要同时记录两个初始值：点击时的鼠标X坐标、点击时网格自身的X轴位置，鼠标移动时直接基于初始值计算新位置即可，不需要基于当前网格位置累加差值，同时补充鼠标抬起事件解绑移动监听，避免异常残留。

修复后代码如下：

// 存储两个拖拽初始值
let startMouseX, startMeshX;

onDocumentClick(evt) {
  // 点击时同步记录鼠标初始位置和网格初始位置
  startMouseX = evt.pageX;
  startMeshX = myMesh.position.x;
  // 先移除再绑定，避免重复绑定事件
  document.removeEventListener('mousemove', onMouseMove);
  document.addEventListener('mousemove', onMouseMove);
  // 鼠标抬起自动结束拖拽
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
}

onMouseMove(evt) {
  // 计算鼠标移动偏移量，直接叠加到网格初始X上
  const moveOffsetX = evt.pageX - startMouseX;
  myMesh.position.x = startMeshX + moveOffsetX;
}

内容的提问来源于stack exchange，提问作者mattwallace