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

Question

我想挤出一个形状并创建一个ExtrudeGeometry，但是这个形状必须被挤出到某个方向。我在 Vector3

中有一个方向

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

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

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

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

---

所以问题:

如何获得可靠的解决方案以将我的形状拉伸(stretch)到给定方向。这是一个例子。形状是 x,y 平面中的正方形(宽度和长度为 2000)，挤压深度也为 2000，三个不同的矢量以及在 2D(前 View )和 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.applyMatrix4( matrix );

(three.js 坐标系的 y 轴向上——与您的插图不同。您必须适应。)

three.js r.113