如何在 Three.js 中剪切立方体答案

【问题标题】：How to Shear a Cube in Three.js如何在 Three.js 中剪切立方体
【发布时间】：2012-09-14 06:23:47
【问题描述】：

我想知道以前是否有人遇到过这个特定问题。根据我对如何使用 webgl 和 three.js 绘制 3d 对象的基本了解，我似乎无法找到一种方法来创建一个确实从立方体几何学继承它的几何形状的 paralelipiped（或者我认为这就是它的名称），但没有' 不是所有的角度都是 90 度。

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

结果应该和什么很相似

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

可以用于 html 元素。谁能帮我找到解决办法？

感谢您的考虑。

【问题讨论】：

标签： javascript three.js geometry

【解决方案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

【讨论】：

太棒了！这正是解决问题所需要的。谢谢。

【解决方案2】：

Three.js r129 对Matrix4.makeShear() 进行了更新——作者为@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);

【讨论】：