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

Question

我想要拉伸(stretch)一个形状并创建一个 ExtrudeGeometry，但该形状必须拉伸(stretch)到某个方向。我有一个 Vector3

的方向

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

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

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

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

---

所以问题是:

如何获得可靠的解决方案将我的形状挤压到给定方向。这里有一个例子。形状是 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 );

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

三.js r.113