How to cut a cube in Three.js

Question

I wonder if anyone has encountered this particular problem before. With my basic understanding of how 3D objects are drawn using webgl and three.js, it seems like I can't find a way to create a parallelepipes (or, I think that's what it is called) that inherits its geometry from cubegeometry, but doesn All angles are 90 degrees.

My goal is to have something like this:

The result should be very similar to what

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

will do for the html element. Can someone help me find a solution?

Thank you for your attention.

Answer 1

What you need to do is create a cubic grid, and then apply the shift matrix to the cube geometry. The operation distorts the geometry as 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 the script: http://jsfiddle.net/4kHdQ/54/

EDIT: Updated to three. js r.71