Wie schiebe ich einen Würfel in Three.js

Question

Ich frage mich, ob jemand dieses spezifische Problem zuvor begegnet. Mit meinem grundlegenden Verständnis, wie die 3D-Objekte mit webgl und three.js gezeichnet werden, scheint es, dass ich keinen Weg finden kann, um ein paralelipiped zu erstellen (oder ich denke, dass es so heißt), das seine Geometrie von cubegeometry erbt, aber hat nicht alle Winkel von 90 Grad.

Mein Ziel ist es, so etwas zu haben:

Das Ergebnis sollte sich sehr ähnlich, was

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

für ein HTML-Element tun würde. Kann mir jemand helfen, eine Lösung zu finden?

Ich danke Ihnen für Ihre Aufmerksamkeit.

Answer 1

Was Sie tun müssen, ist ein Würfelgitter zu erstellen, und wenden Sie dann eine Schermatrix auf die Geometrie des Würfels. Die Operation verzerrt die Geometrie in der beschriebenen Weise. Hier

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

ist ein Fiddle: http://jsfiddle.net/4kHdQ/54/

EDIT: aktualisiert r.71