Creating trapezoid with intended requirement

Question

I want to create a 3D model. I've tried to explain the whole requirement as follows: -top width=4 -bottom width=8 -It should have only four edges. -it should have height segments 4 and width segments 4.

Could someone help me implement it in React Three Fiber, please?

the following is what I've tried const shape = new THREE.Shape();

  shape.moveTo(-2, -5);
  shape.lineTo(stemBottom * 2, -5);
  shape.lineTo(-1.6 - -0.5 * stemToeOffset + stemTop, stemHeight - 5); //
  shape.lineTo(-1.6 - -0.5 * stemToeOffset, stemHeight - 5);

  shape.closePath();
  const extrudeSettings = {
    steps: stemVerticalBars,
    depth: 3.3,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1,
  };

  const stemGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

<group
      rotation={[-0.1, 0.5, 0]}
      scale={[0.6, 0.6, 0.6]}
      position={[2.8, 1, 0]}
    >
  <mesh
    position={[
      1.233 * baseToeLength - 7.4,
      (baseThickness - 1) * 0.5,
      -0.5,
    ]}
    geometry={geometry}
    scale={[0.3, 0.3, 0.3]}
  >
    <meshBasicMaterial color="#D9D9D9" wireframe />
  </mesh>

Answer 1

if stemGeometry is doing as you wish, then declare it correctly on the mesh

  <mesh
    geometry={stemGeometry}