如何在three.js中创建3D梯形？

Question

我正在研究 three.js 中的一个小动画，其中包含一些基本的3D模型，其中一个我正在努力的是“ trapezoid ”。

到目前为止，我只能在THREE.CylinderGeometry的帮助下创建截断的金字塔，其底边始终相同。

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
const dash_geometry = new THREE.CylinderGeometry( 140, 150, 50, 4, 1 )
const dash_material = new THREE.MeshLambertMaterial(dash_settings.material)
const dash_mesh = new THREE.Mesh(dash_geometry, dash_material)

但是我需要一个宽度，高度和深度都与图片不同的物体。

至少有人能指出我正确的方向吗？

Answer 1

您可以创建一个基数为1 x 1且高度为1的梯形，如下所示：

var geometry = new THREE.CylinderGeometry( 0.8 / Math.sqrt( 2 ), 1 / Math.sqrt( 2 ), 1, 4, 1 ); // size of top can be changed

在继续之前旋转几何体会更容易：

geometry.rotateY( Math.PI / 4 );

可能，您需要重新计算顶点法线：

geometry.computeFlatVertexNormals();

然后，在创建网格时，可以缩放它：

mesh = new THREE.Mesh( geometry, material );

mesh.scale.set( width, height, depth );

three.js r.91