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

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

您需要做的是创建对象的层次结构，内部对象将围绕 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 );

这是一个fiddle：http://jsfiddle.net/3gxqboer/

Answer 2

如果你想把你的立方体或盒子变成菱形，那么最简单的方法是使用像这样的图案来改变你的几何形状：

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

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

How to transform a cube mesh into a diamond shape

javascript

mesh

three.js