如何在Three.js中使用悬停点调整矩形大小并固定单边

嗨，我来帮你搞定这个问题！你现在遇到的情况是不是特别闹心——拖动左右边缘的悬停点调整矩形宽度时，它居然往两边同时扩展，完全没法固定住其中一边？其实这问题根源很简单，就是你之前只调整了矩形的尺寸，没同步修正它的位置（或者顶点位置），导致矩形的中心点一直没变，自然就两边一起动了。

我给你捋两个实用的解决思路，你可以根据自己的项目情况选：

思路一：用缩放+位置偏移（适合基础几何体场景） #

如果你的矩形是用PlaneGeometry或者BoxGeometry这类基础几何体创建的，最省事的办法就是在调整宽度的同时，同步移动矩形的位置，把你想固定的那一侧“钉”在原地。

举个例子，假设你要固定左边边缘，拖动右边的悬停点时：

• 先计算鼠标拖动带来的宽度变化量deltaX（就是控制点移动的水平距离）
• 更新矩形的宽度：通过缩放X轴来实现，注意要基于原始宽度计算缩放比例，避免越缩越乱

  const originalWidth = rectMesh.geometry.parameters.width;
  rectMesh.scale.x += deltaX / originalWidth;
  

• 关键一步！调整矩形的位置，让左边保持不动：

  rectMesh.position.x += deltaX / 2;
  

  原理很简单：缩放时矩形会以自身中心为基准放大/缩小，所以把位置往拖动方向移一半的变化量，就能让左边边缘固定在原来的位置。

要是你想固定右边边缘，拖动左边控制点时，只需要把位置调整的方向反过来：

rectMesh.position.x -= deltaX / 2;

思路二：直接修改几何体顶点（高精度场景适用） #

如果你的项目对位置精度要求很高，或者不想用缩放（比如缩放会影响材质纹理），那可以直接修改几何体的顶点坐标，只动你要调整的那一侧顶点，固定的一侧完全不动。

还是以固定左边为例，假设用的是PlaneGeometry：

// 获取几何体的顶点位置数组
const positions = rectMesh.geometry.attributes.position.array;
// 遍历所有顶点，只修改右边的顶点X坐标
for (let i = 0; i < positions.length; i += 3) {
  // 这里判断顶点是否属于右侧，你可以根据自己的初始顶点范围调整条件
  if (positions[i] > 0) {
    positions[i] += deltaX;
  }
}
// 一定要标记顶点属性需要更新，Three.js才会重新渲染
rectMesh.geometry.attributes.position.needsUpdate = true;

这样左边的顶点坐标完全不变，只有右边跟着控制点移动，自然就固定住单边了。

最后再提醒你一句：拖动事件里记得要实时计算deltaX，别用绝对位置，不然拖动起来会有跳帧的问题哦！

备注：内容来源于stack exchange，提问作者Kuldeep J