3dthree.jsgeometry3d-modelling

How to create 3D trapezoid in three.js?

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.

trapezoid / truncated cuboid pyramid

Can anyone at least point me in the right direction?

Solution

  • 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