如何在 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

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