javascript - 如何在 Three.js 中剪切立方体

Question

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