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

Question

在 three.js 中有没有办法将立方体网格形状变成菱形，比如旋转刻度轴然后缩放它？我正在尝试创建一个扁平的菱形，例如 x50、y50、x10。如果不是，那么创建菱形网格或三 Angular 形网格形状的最佳方法是什么？

如果你只是转动立方体的末端并缩放 x 你仍然会有一个(现在不平衡的)矩形，但是如果你转动它的末端，以某种方式重新调整比例轴的方向，使其从中间延伸点对点，现在你只需挤压带有 x 刻度的立方体，你就会得到一个细腰的漂亮菱形。

为澄清起见，这是我尝试制作的网格形状的图片，理想情况下是左侧的菱形，但三 Angular 形也可以。

那么，有什么方法可以旋转刻度轴吗？这就是 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