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

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