旋转后顶点沿错误的轴移动

Question

我正在移动鼠标移动形状的顶点，这很好用。但是，当对形状应用旋转时，顶点会沿错误的轴移动。

在这里创建了一个代码sandbox.io：https://codesandbox.io/embed/gatsby-starter-default-l16ui

需要关注的两个文件是page目录下的index.js和components目录下的shape.js。

在屏幕上移动光标，您可以看到它的反应，但方向错误。

将 radiansY 设置为 0，形状将旋转回其原始位置。现在试着移动你的光标，它应该会正确地对光标做出反应。

更新：我在第 47 行的 shape.js 中更新了代码沙箱以将添加的矢量从世界空间转换为本地空间，但这现在将所有形状都放在一个位置。

const changedPoint = self.worldToLocal(point.clone())

Answer 1

通过阅读您的描述，听起来您是在对象空间而不是世界空间中移动对象。有两种方法可能会有所帮助。 Object.localToWorld 和 .worldToLocal。

在将矢量添加到 object.position 之前，尝试使用 object.worldToLocal(yourMovementVector) 转换您的运动矢量？

编辑：关于编码风格的一些反馈：

尽量避免这样的代码：

  const vertex1 = self.geometry.vertices[1].clone()
    if (originalV1 === undefined) {
      setOriginalV1(vertex1)
      mousePosition = vertex1.add(changedPoint)
    } else {
      mousePosition = originalV1.clone().add(changedPoint)
    }

应该在函数中.. .clone() 也是一项昂贵的操作。 此外，预初始化 originalV1... 只需 .clone() 几何一次，而不是 .cloning() 其每个顶点。 AFAIK，.clone() 为您做到这一点。

您可以将整个文件替换为：

if(!originalGeometry)originalGeometry = geometry.clone()
for(let i=0;i<geometry.vertices.length;i++)
geometry.vertices[i].copy(originalGeometry.vertices[i]).add(changedPoint);
geometry.needsUpdate = true;

而且.. 你可能甚至不需要做这些顶点转换的东西......只需制作一组延伸到地平线的超长立方体，然后将你的 camera.far 设置为足够大，以便立方体透视消失到那个点。

这是一个例子：

https://codesandbox.io/embed/threejs-simple-template-mousey-cubes-vmx91