pissang / geometry-extrude

A small and fast library for extruding 2D polygons and polylines to 3D meshes

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
}

geometry-extrude's Issues

use as input in other 3d tools

Hi, that's exactly what I need! I managed to get output from your script, just don't know how to pass it to xeogl: https://xeogl.org/docs/classes/Geometry.html. Perhaps if I could produce an .obj file I could go on. Would you please provide any hint?

Extrude a shape along customized curve

I want to extrude a shape (polygon) along a curve (a series of points) based on the extrusion depth. Could you consider adding this extension later? Thank you!

Bevel

I don't think it's supposed to work like this:

extrudePolygon uv is error?

https://codepen.io/deyihu/pen/bGVJmYq?editors=1010

@pissang

I use THREE.ExtrudeGeometry there is no such problem

extrudeline is error

extrudePolyline method error

There is an error in this method

there is an error in this method return--> "convertPolylineToTriangulatedPolygon"

"vertices" is undefined

创建的position 放到buffergeometry中会报如下错误

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values
错误会导致，路径不会画出弧度特别大的。弧度大的数据会丢失

Can not be used in Node

In package.json, main points to "src/main.js", when used in Node, error will be throwed.
Maybe main could be modified to dis/geometry-extrude.js to use commonjs module system?

build 文件 含有 ES6语法代码

我这边直接作为依赖使用，打包的时候 UglifyJs 直接识别不了（我这里UglifyJs版本有点低，希望能降级一下（babel转译或者源代码中不使用ES6语法）

pkg support esm

ES6 syntax error

geometry-extrude/src/main.js

Line 616 in 51e34cb

holes = holes || [];

         const {indices, vertices, splittedMap, topVertices, holes, depth} = preparedData[p];
        const bevelSize = Math.min(depth / 2, opts.bevelSize);
        const bevelSegments = !(bevelSize > 0) ? 0 : opts.bevelSegments;
       //hole is const ,Its value cannot be changed
        holes = holes || [];