Geometry Extrude

A small and fast JavaScript library for extruding 2D polygons and polylines to 3D meshes. It depends on earcut to do triangulation.

Features

• Extrude polygons with holes.

• Extrude polylines with specific line thickness.

• Generate position / uv / normal / indices TypedArray.

• Support bevel style.

Basic Usage

Install with npm

npm i geometry-extrude

Extrude a simple square with hole

1import {extrudePolygon} from 'geometry-extrude';
2const squareWithHole = [
3    [[0, 0], [10, 0], [10, 10], [0, 10]],
4    // Hole
5    [[2, 2], [8, 2], [8, 8], [2, 8]]
6];
7const {indices, position, uv, normal} = extrudePolygon([squareWithHole], {
8    depth: 2
9});

Use with ClayGL

1const {indices, position, uv, normal} = extrudePolygon(squareWithHole);
2const geometry = new clay.Geometry();
3geometry.attributes.position.value = position;
4geometry.attributes.texcoord0.value = uv;
5geometry.attributes.normal.value = normal;
6geometry.indices = indices;

Use with ThreeJS

1const {indices, position, uv, normal} = extrudePolygon(squareWithHole);
2const geometry = new THREE.BufferGeometry();
3geometry.addAttribute('position', new THREE.Float32BufferAttribute(position, 3));
4geometry.addAttribute('normal', new THREE.Float32BufferAttribute(normal, 3));
5geometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));

Example

Use with regl

1const {indices, position, uv, normal} = extrudePolygon(squareWithHole);
2const draw = regl({
3    frag: `...`,
4    vert: `...`,
5
6    attributes: {
7        position: position,
8        uv: uv,
9        normal: norma
10    },
11
12    elements: indices
13});

Example

Full API List

extrudePolygon

1extrudePolygon(
2    // polygons same with coordinates of MultiPolygon type geometry in GeoJSON
3    // See http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygon
4    polygons: GeoJSONMultiPolygonGeometry,
5    // Options of extrude
6    opts: {
7        // Can be a constant value, or a function.
8        // Default to be 1.
9        depth?: ((idx: number) => number) | number,
10        // Size of bevel, default to be 0, which is no bevel.
11        bevelSize?: number,
12        // Segments of bevel, default to be 2. Larger value will lead to smoother bevel.
13        bevelSegments?: number,
14        // Polygon or polyline simplification tolerance. Default to be 0.
15        // Use https://www.npmjs.com/package/simplify-js to do the simplification. Same with the tolerance parameter in it. The unit is same with depth and bevelSize
16        simplify?: number,
17        // If has smooth side, default to be false.
18        smoothSide?: boolean,
19        // If has smooth bevel, default to be false.
20        smoothBevel?: boolean,
21        // If exclude bottom faces, default to be false.
22        // Usefull when bottom side can't be seen.
23        excludeBottom?: boolean,
24        // Transform the polygon to fit this rect.
25        // Will keep polygon aspect if only width or height is given.
26        fitRect?: {x?: number, y?: number, width?: number: height?: number},
27        // Translate the polygon. Default to be [0, 0]
28        // Will be ignored if fitRect is given.
29        translate?: ArrayLike<number>,
30        // Scale the polygon. Default to be [1, 1]
31        // Will be ignored if fitRect is given.
32        scale?: ArrayLike<number>
33    }
34) => {
35    indices: Uint16Array|Uint32Array,
36    position: Float32Array,
37    normal: Float32Array,
38    uv: Float32Array,
39    boundingRect: {x: number, y: number, width: number, height: number}
40}

extrudePolyline

1extrudePolyline(
2    // polylines same with coordinates of MultiLineString type geometry in GeoJSON
3    // See http://wiki.geojson.org/GeoJSON_draft_version_6#MultiLineString
4    polylines: GeoJSONMultiLineStringGeometry,
5    // Options of extrude
6    opts: {
7        ////// Extended from opts in extrudePolygon
8
9        // Thickness of line, default to be 1
10        lineWidth?: number,
11        // default to be 2
12        miterLimit?: number
13    }
14) => {
15    indices: Uint16Array|Uint32Array,
16    position: Float32Array,
17    normal: Float32Array,
18    uv: Float32Array,
19    boundingRect: {x: number, y: number, width: number, height: number}
20}

extrudeGeoJSON

1extrudeGeoJSON(
2    // Extrude geojson with Polygon/LineString/MultiPolygon/MultiLineString geometries.
3    geojson: GeoJSON,
4    // Options of extrude
5    opts: {
6        ////// Extended from opts in extrudePolygon
7
8        // Can be a constant value, or a function with parameter of each feature in geojson.
9        // Default to be 1.
10        depth?: ((feature: GeoJSONFeature) => number) | number
11        // Thickness of line, default to be 1
12        lineWidth?: number,
13        // default to be 2
14        miterLimit?: number
15    }
16) => {
17    // Same result with extrudePolygon
18    polygon: Object,
19    // Same result with extrudePolyline
20    polyline: Object
21}