Three.js - ExtrudeGeometry using depth and a direction vector

Question

I want to extrude a shape and create an ExtrudeGeometry , but the shape has to be extruded into a certain direction. I have a direction in a Vector3

The shape is drawn in in the x, y plane and normally the z is the extrude direction (extrusion depth). So a direction vector (0,0,1) would result in the default extrusion. But for example a (0,0,-1) would extrude the shape in the other direction.

I first tried to use an extrude path to achieve this, but when using a path the shape is allowed to "spin" freely and the initial orientation is arbitrary. This is not what I need, the shape must stay oriented as is. You can read details on this here in my previous question .

I already came up with the idea of applying a matrix to the second half of the vertices of the resulting ExtrudedGeometry, but I cannot seem to get the geometry I want. Maybe it is my clumsy use of matrices, but I think that the face normals are pointing inside out after this trick.

Note The direction vector will never be orthogonal to the z axis since this would give invalid shapes

---

So the question:

How do I get a reliable solution to extrude my shape into the given direction. Here an example. The shape is a square in the x,y plane (width and length 2000) the extrusion depth is also 2000 and three different vectors with a drawing of the expected result seen in 2D (front view) and 3D.

Answer 1

Extrude your geometry in the usual way by specifying an extrusion depth, and then apply a shear matrix to your geometry.

Here is how to specify a shear matrix that will tilt a geometry.

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 );

(The three.js coordinate system has the y-axis up -- unlike in your illustration. You will have to accommodate.)

three.js r.113