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

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

Use with ClayGL

const {indices, position, uv, normal} = extrudePolygon(squareWithHole);
const geometry = new clay.Geometry();
geometry.attributes.position.value = position;
geometry.attributes.texcoord0.value = uv;
geometry.attributes.normal.value = normal;
geometry.indices = indices;

Use with ThreeJS

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

Example

Use with regl

const {indices, position, uv, normal} = extrudePolygon(squareWithHole);
const draw = regl({
    frag: `...`,
    vert: `...`,

    attributes: {
        position: position,
        uv: uv,
        normal: norma
    },

    elements: indices
});

Example

Full API List

extrudePolygon

extrudePolygon(
    // polygons same with coordinates of MultiPolygon type geometry in GeoJSON
    // See http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygon
    polygons: GeoJSONMultiPolygonGeometry,
    // Options of extrude
    opts: {
        // Can be a constant value, or a function.
        // Default to be 1.
        depth?: ((idx: number) => number) | number,
        // Size of bevel, default to be 0, which is no bevel.
        bevelSize?: number,
        // Segments of bevel, default to be 2. Larger value will lead to smoother bevel.
        bevelSegments?: number,
        // Polygon or polyline simplification tolerance. Default to be 0.
        // 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
        simplify?: number,
        // If has smooth side, default to be false.
        smoothSide?: boolean,
        // If has smooth bevel, default to be false.
        smoothBevel?: boolean,
        // If exclude bottom faces, default to be false.
        // Usefull when bottom side can't be seen.
        excludeBottom?: boolean,
        // Transform the polygon to fit this rect.
        // Will keep polygon aspect if only width or height is given.
        fitRect?: {x?: number, y?: number, width?: number: height?: number},
        // Translate the polygon. Default to be [0, 0]
        // Will be ignored if fitRect is given.
        translate?: ArrayLike<number>,
        // Scale the polygon. Default to be [1, 1]
        // Will be ignored if fitRect is given.
        scale?: ArrayLike<number>
    }
) => {
    indices: Uint16Array|Uint32Array,
    position: Float32Array,
    normal: Float32Array,
    uv: Float32Array,
    boundingRect: {x: number, y: number, width: number, height: number}
}

extrudePolyline

extrudePolyline(
    // polylines same with coordinates of MultiLineString type geometry in GeoJSON
    // See http://wiki.geojson.org/GeoJSON_draft_version_6#MultiLineString
    polylines: GeoJSONMultiLineStringGeometry,
    // Options of extrude
    opts: {
        ////// Extended from opts in extrudePolygon

        // Thickness of line, default to be 1
        lineWidth?: number,
        // default to be 2
        miterLimit?: number
    }
) => {
    indices: Uint16Array|Uint32Array,
    position: Float32Array,
    normal: Float32Array,
    uv: Float32Array,
    boundingRect: {x: number, y: number, width: number, height: number}
}

extrudeGeoJSON

extrudeGeoJSON(
    // Extrude geojson with Polygon/LineString/MultiPolygon/MultiLineString geometries.
    geojson: GeoJSON,
    // Options of extrude
    opts: {
        ////// Extended from opts in extrudePolygon

        // Can be a constant value, or a function with parameter of each feature in geojson.
        // Default to be 1.
        depth?: ((feature: GeoJSONFeature) => number) | number
        // Thickness of line, default to be 1
        lineWidth?: number,
        // default to be 2
        miterLimit?: number
    }
) => {
    // Same result with extrudePolygon
    polygon: Object,
    // Same result with extrudePolyline
    polyline: Object
}