javascript - 在不校正网格位置的情况下在一个方向上就地缩放 three.js 几何体

Question

我们正在尝试构建“编辑 handle ”，允许用户通过在 8 个位置(4 个 Angular + 4 个边)之一拖动来调整(投影)平面的大小。这种调整大小应该只在拖动的方向上缩放/拉伸(stretch)表面，所以 three.js 的默认缩放机制不会做，因为它同时在两个相反的方向上缩放，就像在这个 example 中看到的那样。

我已经阅读并尝试了很多，尤其是这两篇文章:

• Scaling a Three.js geometry only up
• Scaling a geometry in one direction with top as reference in threejs

按照这些我最终得到了这个

// preparing to resize into -x direction aka "left edge"
// moving the geometry center to the right edge
mesh.geometry.translate(width/2, 0, 0);
mesh.geometry.scale(scaleX, 1, 1);
// moving the geometry center back to the middle 
// as more resizing might happen, into another direction, as per comment here: 
// https://stackoverflow.com/questions/26817717#comment74469004_26818522
mesh.geometry.translate(-(width/2 * scaleX), 0, 0);

结果不是我所期望的:缩放再次发生在两个相反的方向上，因此平移相互抵消 - 因此当中心/原点位于右边缘时缩放不会发生，或者我这边有误解。

另一方面这很好用

mesh.scale.set(scaleX, 1, 1);
mesh.position.x = (-width / 2);

但是一遍又一遍地重置网格的位置真的感觉很笨拙 - 我还以为我已经读到缩放网格的性能较低，因为这种转换被重新应用于每一帧(虽然可能弄错了:Three.js - Scale model with scale.set() or increase model size? )，同时底层几何的转换被烘焙到数据中。

我还查看了 TransformControls 的来源，但由于它没有按照我们想要的方式工作，而且我还没有完全掌握四元数的概念，所以我迷失了它。

所以我的问题是:有没有办法在不纠正网格位置的情况下进行就地单向调整大小？

Answer 1

正如您所发现的，您有两种方法可以解决这个问题。

1. 缩放几何图形。
2. 缩放 Mesh 并调整其中心位置。

首先，让我们讨论一下我不推荐的选项 1，原因我稍后会阐明。

要在一个方向上线性缩放几何体，您仍然需要在缩放方向上移动所有顶点。因此，对于每个顶点，您需要根据该顶点将接收到的缩放量来计算其新位置(最靠近缩放侧的顶点移动最多，中间的顶点移动一半，而另一侧的顶点缩放比例几乎没有移动)。如果您正在进行实时缩放，那可能需要进行大量计算。

现在考虑选项 2:更改整个网格的矩阵(这包括它的新位置)。就是这样。矩阵被发送到 GPU，由其处理其余部分。我相信您知道，GPU 非常擅长数学(包括矩阵数学)，而 JavaScript ……不太擅长，或者至少慢得多。执行矩阵操作对 GPU 来说无关紧要。

更不用说，有了变换矩阵，您总能得到顶点的世界位置:

vertexCopy.set(myMesh.geometry.attributes.position.getX(index),
    myMesh.geometry.attributes.position.getY(index).
    myMesh.geometry.attributes.position.getZ(index));
myMesh.localToWorld(vertexCopy);

概要:

如果有的话，操纵几何体比操纵变换矩阵更“hacky”。这就像您告诉系统如何绘制正方形的每个像素，而实际上您可以简单地告诉它绘制正方形。

1. 更新几何体的计算量很大。即使之后基本上“烘焙”了顶点，下一次操作也会触发更多计算。

2. 更新网格的矩阵很简单，并将计算复杂性卸载到 GPU，处理该信息不会有问题。

欢迎您采用符合您要求的任何方法，但根据您提供的信息，我非常推荐选项 2。

第三个想法:

您可能会使用 Morph Targets 来达到您想要的效果，但我对它们没有太多经验。 Here's an example of cube being deformed by morphing.您需要影响多个变形目标才能实现您正在寻求的效果，但这可能仍然比操纵几何体更好，因为变形操作将在 GPU 上完成。