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

Question

我正在用Three.js制作一个小动画，其中有一些基本的 3D 模型，其中一个我正在努力解决的问题是“梯形”。

到目前为止，我只能在 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 = geometry.toNonIndexed(); // removes shared vertices
geometry.computeVertexNormals(); // normals will be 'flat' normals

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

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

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

三.js r.126