Three.js - 使用深度和方向矢量的拉伸几何

Question

我想挤出一个形状并创建一个ExtrudeGeometry，但形状必须挤压成一定的方向。我有一个方向Vector3

形状绘制在x，y平面中，通常z是挤压方向（挤压深度）。所以方向矢量(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