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

Question

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

在此处创建了 codesandbox.io：https://codesandbox.io/embed/gatsby-starter-default-l16ui

您需要关注的两个文件是页面目录中的 index.js 和组件目录中的 shape.js。

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

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

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

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

Answer 1

从您的描述来看，您似乎在 object space 中移动 object 而不是世界 space。有两种方法可能会有所帮助。 Object.localToWorld 和 .worldToLocal.

尝试使用 object.worldToLocal(yourMovementVector) 转换您的运动矢量，然后再将矢量添加到您的 object.position ?

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

尽量避免这样的代码：

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

应该在函数中.. .clone() 也是一项昂贵的操作。此外，pre-init originalV1...只需 .clone() 一次几何体，而不是 .clone() 它的每个顶点。据我所知，.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;

而且..你可能甚至不需要做这个顶点修改的东西......只需制作一组延伸到 horizon 的超长立方体，然后设置你的 camera.far 足够大，使立方体透视消失到那个点。

这是一个例子：

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

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

Vertices Move Along Wrong Axis After Rotation

javascript

three.js

react-three-fiber