How to Shear a Cube in Three.js

Question

I wonder if anybody come across this specific problem before. With my basic understanding of how the 3d objects are drawn using webgl and three.js it seems that I cannot find a way to create a paralelipiped (or I think this is how it is called) that does inherit it's geometry from cubegeometry, but doesn't have all angles of 90 degrees.

My goal is to have something like this:

The result should be very similiar to what

-moz-transform: skew(0,-45.1deg);

would do for an html element. Can anybody help me find a solution?

I thank you for your consideration.

Answer 1

What you need to do is create a cube mesh, and then apply a shear matrix to the cube's geometry. The operation distorts the geometry in the way you described.

var geometry = new THREE.BoxGeometry( 5, 5, 5 );

var matrix = new THREE.Matrix4();

matrix.set(   1,   Syx,  Szx,  0,
            Sxy,     1,  Szy,  0,
            Sxz,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix( matrix );

Here is a Fiddle: http://jsfiddle.net/4kHdQ/54/

EDIT: updated to three.js r.71