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.

Administer

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.applyMatrix4( matrix );

Alternatively, see https://mcmap.net/q/1047904/-how-to-shear-a-cube-in-three-js

three.js r.143

Followup

Great! That's exactly what it takes to solve the problem. Thank you. – Administer

Answer 2

Three.js r129 introduced an update to Matrix4.makeShear() — authored by @WestLangley

https://threejs.org/docs/#api/en/math/Matrix4.makeShear

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

const matrix = new THREE.Matrix4();
matrix.makeShear(1, 0, 0, 0, 0, 0);

geometry.applyMatrix4(matrix);

Asuncionasunder