Cómo esquilar un cubo en Three.js

Question

Me pregunto si alguien se ha encontrado antes con este problema específico. Con mi comprensión básica de cómo se dibujan los objetos 3d usando webgl y three.js, parece que no puedo encontrar una manera de crear un paralelipiped (o creo que así es como se llama) que hereda su geometría de la geometría de cubos, pero no tiene todos los ángulos de 90 grados.

Mi objetivo es tener algo como esto:

El resultado debe ser muy similar a lo que

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

haría por un elemento HTML. ¿Alguien puede ayudarme a encontrar una solución?

Gracias por su consideración.

Answer 1

Lo que necesita hacer es crear una malla de cubo, y luego aplicar una matriz de corte a la geometría del cubo. La operación distorsiona la geometría de la manera que describió.

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

Aquí es un violín: http://jsfiddle.net/4kHdQ/54/

EDIT: actualizado para Three.js R.71