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

【问题标题】：How to transform a cube mesh into a diamond shape如何将立方体网格转换为菱形
【发布时间】：2015-11-08 03:16:32
【问题描述】：

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

【问题讨论】：

这是你想要的形状吗？ jsfiddle.net/wkzvvzwk
感谢您的澄清。不（但这很好），我会在原始问题中发布一张关于我想要制作的形状的图片。谢谢。
这是你想要的吗？ jsfiddle.net/3gxqboer。如果是的话，我会把它变成一个答案。
没错，很棒的发现。非常感谢。哇，太简单了，只是在缩放 x 之前在 z 轴上转动它？但这不是我已经在做的吗？我在这里遗漏了一些东西。
你怎么这么快就搞定了？是否有 mrdoobs jsfiddles 的资源列表？我似乎无法在那个小提琴上找到链接。

标签： javascript three.js mesh

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

所以在我的情况下，使用最初问题中的代码，我需要将我的立方体包装在一个组中，然后对其进行缩放。对吗？