Three.js - ExtrudeGeometry with the top face tilted such that the plane of the face has a certain normal

Question

I need a shape similar to a polygonal prism standing on one its (non-rectangular) polygon faces but where the top face could be tilted.

Similar to this image, but it need not be a square/rectangle but any polygon (concave/convex).

I considered the following ways of doing it, but they feel sub-optimal:

• Extruding a ShapeGeometry and using changing the points (BufferGeometry attributes) of the top face (by checking for a specific normal in BufferGeometry attributes) to translate to points existing on the desired plane.
• Make the bottom Shape using ShapeGeometry. Copy the geometry and translate and rotate it. Make the sides Geometries using the vertices used to define the polygon. (and somehow merge all these geometries)

I also need to be able to have different tilts for both the top and bottom faces later.

Answer 1

You could create a wrapper around the bufferGeometry class where you take in the top and bottom vertices of the polygon. Triangulate the sides of the polygon and create your custom Float32Array. Use this for the position attribute of bufferGeometry, I guess you could use the same array for UVs as well (I'm not sure).

You could refer these for triangulation

https://threejs.org/docs/#api/en/extras/ShapeUtils

https://github.com/mapbox/delaunator