Three.js - 使用深度和方向向量的 ExtrudeGeometry

Question

我想挤压一个形状并创建一个ExtrudeGeometry，但该形状必须挤压到某个方向。我有一个方向Vector3

形状在 x、y 平面中绘制，通常 z 是挤出方向（挤出深度）。因此方向向量(0,0,1)将导致默认的挤压。但例如 a(0,0,-1)会在另一个方向上挤压形状。

我首先尝试使用拉伸路径来实现此目的，但是当使用路径时，形状可以自由“旋转”，并且初始方向是任意的。这不是我需要的，形状必须保持原样。您可以在我之前的问题中阅读有关此内容的详细信息。

我已经想出了将矩阵应用于生成的 ExtrudedGeometry 顶点的后半部分的想法，但我似乎无法获得我想要的几何图形。也许这是我对矩阵的笨拙使用，但我认为在这个技巧之后，面部法线是由内向外指向的。

注意 方向向量永远不会与 z 轴正交，因为这会产生无效的形状

---

所以问题是：

如何获得可靠的解决方案将我的形状挤压到给定方向。这里有一个例子。形状是 x,y 平面中的正方形（宽度和长度 2000），挤出深度也是 2000，以及三个不同的矢量，并绘制了 2D（前视图）和 3D 中的预期结果图。

Answer 1

通过指定挤出深度以通常的方式挤出几何体，然后将剪切矩阵应用于几何体。

以下是如何指定将倾斜几何体的剪切矩阵。

var matrix = new THREE.Matrix4();

var dir = new THREE.Vector3( 0.25, 1, 0.25 ); // you set this. a unit-length vector is not required.

var Syx = dir.x / dir.y,
    Syz = dir.z / dir.y;

matrix.set(   1,   Syx,   0,   0,
              0,     1,   0,   0,
              0,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix4( matrix );

（two.js 坐标系的 y 轴向上 - 与您的插图不同。您必须适应。）

三.js r.113