3d 如何在three.js中创建三维梯形？

我正在用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)

但我需要一个与图片中不同宽度、高度和深度的物体

---

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

你可以创建一个底部为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 );

---

three.js r.126

您可以创建一个底部为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 );

---

three.js r.126

看看这个。看看这个。这正是我所需要的，我认为圆柱体几何体会是一种方式，但不能使其侧面大小不同，scale.set（）做到了。谢谢，它很管用！这正是我所需要的，我认为圆柱体几何体是一种方式，但不能使其边的大小不同，scale.set（）做到了这一点。谢谢，它很管用！