如何在Three.js中剪切多维数据集

Question

我想知道以前是否有人遇到过这个具体问题。 基于我对使用webgl和three.js绘制3d对象的基本理解，我似乎无法找到一种方法来创建一个paralelipiped（或者我认为这就是它的调用方式），它确实从cubegeometry继承了它的几何，但是没有所有的角度都是90度。

我的目标是拥有这样的东西：

结果应该与

非常相似

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

会为html元素做。任何人都可以帮我找到解决方案吗？

我感谢你的考虑。

Answer 1

您需要做的是创建一个立方体网格，然后将剪切矩阵应用于立方体的几何体。该操作以您描述的方式扭曲几何体。

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

这是一个小提琴：http://jsfiddle.net/4kHdQ/54/

编辑：更新为three.js r.71