How to create 3D trapezoid in three.js?

Question

I'm working on a small animation in three.js that has a few basic 3D models in it and one of them I'm struggling with is "trapezoid".

So far I was only able to create truncated pyramid with the help of THREE.CylinderGeometry which base sides are always the same.

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

But I need an object with different width, height, depth as in the picture.

Can anyone at least point me in the right direction?

Answer 1

You can create a trapezoid whose base is 1 x 1 and height is 1 like so:

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

It is easier if you rotate the geometry before continuing:

geometry.rotateY( Math.PI / 4 );

Likely, you will want to recompute the vertex normals for 'flat' shading:

geometry = geometry.toNonIndexed(); // removes shared vertices
geometry.computeVertexNormals(); // normals will be 'flat' normals

Then, when you create the mesh, you can scale it:

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

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

three.js r.126