如何将立方体网格转换为菱形

Question

在three.js中是否有办法将立方体网格形状转换为钻石形状，例如旋转刻度轴然后缩放它？我试图创造一个平面钻石形状，像x50，y50，x10。如果没有，那么创建菱形网格或三角形网格形状的最佳方法是什么？

如果你只是在它的末端转动立方体并且缩放x，你仍然会有一个（现在是不平衡的）矩形形状，但是如果你打开它的结束，那么以某种方式重新调整比例轴的方向。它从一点到另一点在中间伸展，现在你可以用刻度x挤压立方体，并且你的钻石形状很好，腰部很细。

为了澄清，这里是我想要制作的网格形状的图片，理想情况下左边是钻石形状，但三角形也会这样。

那么，有没有办法旋转刻度轴？这是new THREE.Matrix4().makeTranslation的用途吗？我如何在这种情况下使用它？

See plunker of my attempt here。很明显，我的cube.scale.x = 0.5;代码不正在运行，需要转换转换轴。

这里是js：

cube = new THREE.Mesh( geometry, material );
                cube.rotation.z = Math.PI / 4 ;
                cube.position.y = 35;
                cube.scale.x = 0.5;
                scene.add( cube );

Answer 1

如果您想将立方体或盒子转换为菱形，那么最简单的方法是使用如下图案转换几何体：

var geometry = new THREE.BoxGeometry( 100, 100, 20 );

geometry.applyMatrix( new THREE.Matrix4().makeRotationZ( Math.PI / 4 ) );
geometry.applyMatrix( new THREE.Matrix4().makeScale( 1, 2, 1 ) ); // optional

创建网格后，您仍然可以选择进一步缩放网格本身。

mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( sz, sy, sz );
scene.add( mesh );

three.js r.71

Answer 2

您需要做的是创建一个对象层次结构，内部对象将围绕z轴旋转，外部对象将在x轴上缩放。

mesh = new THREE.Mesh(geometry, material);
mesh.rotation.z = Math.PI / 4; // rotate by 45 degrees

var group = new THREE.Group();
group.add( mesh );
group.scale.x = 0.5; // scale by 0.5

scene.add( group );

这是一个小提琴：http://jsfiddle.net/3gxqboer/