如何在Three.js中对立方体进行剪切

Question

我想知道是否有人遇到过这个特定的问题。根据我对使用WebGL和Three.js绘制3D对象的基本理解，似乎找不到一种方法来创建一个平行六面体（或者我认为它是这样称呼的），该平行六面体应该从CubeGeometry继承其几何形状，但并不具有所有90度角。

我的目标是要实现像这样的东西： 结果应该与此非常相似。

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

有没有人能帮我找到一个解决方案，让一个html元素执行某些操作？

感谢您的考虑。

- khael

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.applyMatrix4( matrix );

或者，查看https://dev59.com/T2jWa4cB1Zd3GeqPtbpp#69696461

three.js r.143

- WestLangley

---

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

Answer 2

Three.js r129引入了对Matrix4.makeShear()的更新——由@WestLangley编写

https://threejs.org/docs/#api/zh/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);

- imbrizi