What it does
Hand it a 2D outline, a few points or an SVG path, and get back a solid 3D shape ready for any Three.js scene.
How it works
It runs a constrained Delaunay triangulation on the polygon's interior, using a WebAssembly port of the Triangle library. The result is a clean mesh of non-overlapping triangles that respects the boundary exactly, with no gaps and no slivers.
The cap is then mirrored, and the two faces are joined by side walls to form the final extruded volume. The scene above is a live example: a flat rectangle tessellated by the library, with each triangle painted on its own.
Usage
import { extrude } from 'tess-extrude';
const geometry = extrude(
{ type: 'points', points },
{ depth: 6, capDensity: 9, edgeSubdivisions: 3 },
);Where you'd use it
- Turning SVG logos or icons into 3D objects for product configurators or hero scenes
- Extruded text in WebGL without font-specific geometry builders
- Floor plans or terrain patches that need real depth
- Any 2D outline that needs to become a solid, well-triangulated mesh