Question

我通过鼠标移动形状的顶点，效果很好。但是，将旋转应用于形状时，顶点会沿错误的轴移动。

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

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

将光标移到屏幕上，您会看到它的反应，但是方向错误。

将radiansY设置为0，形状将旋转回到其原始位置。现在尝试移动光标，它应该可以正确地响应光标。

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

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

旋转后顶点沿错误轴移动

1 个答案: