如何在 Three.js 中剪切立方体 [英] How to Shear a Cube in Three.js

问题描述

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

I wonder if anybody come across this specific problem before. With my basic understanding of how the 3d objects are drawn using webgl and three.js it seems that I cannot find a way to create a paralelipiped (or I think this is how it is called) that does inherit it's geometry from cubegeometry, but doesn't have all angles of 90 degrees.

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

My goal is to have something like this:

结果应该很像

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

可以用于 html 元素.有人能帮我找到解决办法吗?

would do for an html element. Can anybody help me find a solution?

感谢您的考虑.

推荐答案

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

What you need to do is create a cube mesh, and then apply a shear matrix to the cube's geometry. The operation distorts the geometry in the way you described.

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

updated to three.js r.71

这篇关于如何在 Three.js 中剪切立方体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！