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

问题描述

我想知道有没有人遇到过这个特定的问题。
通过对使用webgl和three.js绘制3d对象的基本理解，我似乎找不到创建paralelipiped（或者我认为这是如何调用它）的方法，它可以继承它的几何立方体几何，但没有90度的所有角度。

我的目标是有这样的事情：

结果应该非常类似到什么

  -moz-transform：skew（0，-45.1deg）; 
  

会为html元素执行。任何人都可以帮我找到解决方案吗？

我感谢您的考虑。 div>

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

  var geometry = new THREE.BoxGeometry（5，5，5）; 
 
 var matrix = new THREE.Matrix4（）; 
 $ b $ 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

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:

The result should be very similiar to what

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

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

I thank you for your consideration.

解决方案

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

Here is a Fiddle: http://jsfiddle.net/4kHdQ/54/

EDIT: updated to three.js r.71

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