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

Question

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

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

我首先尝试使用拉伸路径来实现这一点，但是当使用路径时，允许形状自由地“旋转”并且初始方向是任意的。这不是我需要的，形状必须保持原样。您可以阅读有关此here in my previous question的详细信息。

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

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

---

所以问题：

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

Answer 1

通过指定拉伸深度以常规方式挤出几何体，然后apply a shear matrix到几何体。

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

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.applyMatrix( matrix );

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

three.js r.68