0

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

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

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

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

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

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

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

4

1 回答 1

-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

于 2019-07-11T16:39:26.273 回答