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

Question

Is there a way in three.js to turn a cube mesh shape into a diamond shape doing something like rotating the axis of the scale and then scaling it? I'm trying to create a flat-ish diamond shape, something like x50,y50,x10. If not, then what's the best way to create a diamond mesh, or a triangle mesh shape?

If you just turn the cube on its end and scale x you'll still have a (now imbalanced) rectangle shape, but if you turn it on it's end, reorient the axis of scale somehow so it's stretching across the middle from point to point, now you could just squeeze the cube with scale x, and you'd have a nice diamond shape with a thin waist.

For clarification, here's a pic of the mesh shape I am trying to make, ideally the diamond shape on the left, but the triangle shape will do also.

So, is there some way to rotate the axis of the scale? Is that what new THREE.Matrix4().makeTranslation is for? How do I use that in this context?

See plunker of my attempt here . Clearly my cube.scale.x = 0.5; code is not working and needs the axis of transform to be shifted.

Here's the 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

If you want to convert your cube or box into a diamond shape, then the easiest method is to transform your geometry using a pattern like this one:

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

Once you create your mesh, you still have the option of further scaling the mesh, itself.

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

three.js r.71

Answer 2

What you need to do is to create a hierarchy of objects, the inner object will rotate around the z-axis and the outer object will scale on the x-axis.

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

Here is a fiddle: http://jsfiddle.net/3gxqboer/