poly-extrude 0.0.1

package/rollup.config.js

@@ -0,0 +1,108 @@
+// Rollup plugins
+
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { terser } from 'rollup-plugin-terser';
+// import swc from 'rollup-plugin-swc';
+import pkg from './package.json';
+const path = require('path');
+
+const product = process.env.NODE_ENV.trim() === 'prd';
+const FILEMANE = pkg.name;
+const sourceMap = !product;
+
+const banner = `/*!\n * ${pkg.name} v${pkg.version}\n  */`;
+let outro = pkg.name + ' v' + pkg.version;
+outro = `typeof console !== 'undefined' && console.log('${outro}');`;
+const plugins = [
+    json(),
+    nodeResolve(),
+    commonjs(),
+    // swc({
+    //     // rollup: {
+    //     //     exclude: 'path/to/exclude/',
+    //     // },
+    //     jsc: {
+    //         parser: {
+    //             syntax: 'ecmascript'
+    //         },
+    //         target: 'es5'
+    //     },
+    //     'sourceMaps': true
+    // })
+    babel({
+        babelHelpers: 'bundled'
+        // exclude: ['node_modules/**']
+    })
+];
+const external = [];
+const globals = {
+
+};
+const name = 'polyextrude';
+export default [
+    {
+        input: path.join(__dirname, './index.js'),
+        plugins: plugins,
+        // sourceMap: true,
+        external,
+        output:
+        {
+            'format': 'umd',
+            'name': name,
+            'file': `dist/${FILEMANE}.js`,
+            'sourcemap': sourceMap,
+            'extend': true,
+            'banner': banner,
+            'outro': outro,
+            'globals': globals
+        }
+    },
+    {
+        input: path.join(__dirname, './index.js'),
+        plugins: plugins.concat([terser()]),
+        // sourceMap: true,
+        external,
+        output:
+        {
+            'format': 'umd',
+            'name': name,
+            'file': `dist/${FILEMANE}.min.js`,
+            'sourcemap': false,
+            'extend': true,
+            'banner': banner,
+            'outro': outro,
+            'globals': globals
+        }
+    },
+    {
+        input: path.join(__dirname, './index.js'),
+        plugins: plugins,
+        // sourceMap: true,
+        external,
+        output:
+        {
+            'format': 'es',
+            'name': name,
+            'file': `dist/${FILEMANE}.mjs`,
+            'sourcemap': false,
+            'extend': true,
+            'banner': banner,
+            'outro': outro,
+            'globals': globals
+        }
+    }
+    // {
+    //     'sourcemap': false,
+    //     'format': 'es',
+    //     // banner,
+    //     'file': `dist/${FILEMANE}.es.js`,
+    //     'extend': true,
+    //     'banner': banner,
+    //     'globals': {
+    //         'YY': 'YY'
+    //     }
+    // }
+];

package/src/polygon.js

@@ -0,0 +1,148 @@
+
+import earcut from 'earcut';
+import { generateNormal, generateSideWallUV, isClockwise, merge } from './util';
+
+export function extrudePolygons(polygons, options) {
+    options = Object.assign({}, { depth: 2 }, options);
+    const results = polygons.map(polygon => {
+        if (!isClockwise(polygon[0])) {
+            polygon[0] = polygon[0].reverse();
+        }
+        polygon.slice(1, Infinity).forEach((coordinates, index) => {
+            if (isClockwise(coordinates)) {
+                polygon[index + 1] = coordinates.reverse();
+            }
+        });
+        polygon.forEach(ring => {
+            const len = ring.length;
+            const [x1, y1] = ring[0], [x2, y2] = ring[len - 1];
+            if (x1 === x2 && y1 === y2) {
+                ring.splice(len - 1, 1);
+            }
+        });
+        const result = flatVertices(polygon, options);
+        result.polygon = polygon;
+        const time = 'earcut';
+        console.time(time);
+        const triangles = earcut(result.flatVertices, result.holes, 2);
+        console.timeEnd(time);
+        generateTopAndBottom(result, triangles);
+        generateSides(result, options);
+        result.position = new Float32Array(result.points);
+        result.indices = new Uint32Array(result.index);
+        result.uv = new Float32Array(result.uvs);
+        result.normal = generateNormal(result.indices, result.position);
+        return result;
+    });
+    const result = merge(results);
+    result.polygons = polygons;
+    return result;
+
+}
+
+function generateTopAndBottom(result, triangles) {
+    const index = [];
+    const { count } = result;
+    for (let i = 0, len = triangles.length; i < len; i += 3) {
+        // top
+        const a = triangles[i], b = triangles[i + 1], c = triangles[i + 2];
+        index[i] = a;
+        index[i + 1] = b;
+        index[i + 2] = c;
+        // bottom
+        const idx = len + i;
+        const a1 = count + a, b1 = count + b, c1 = count + c;
+        index[idx] = a1;
+        index[idx + 1] = b1;
+        index[idx + 2] = c1;
+    }
+    result.index = index;
+}
+
+function generateSides(result, options) {
+    const { points, index, polygon, uvs } = result;
+    const z = options.depth;
+    for (let i = 0, len = polygon.length; i < len; i++) {
+        const ring = polygon[i];
+        for (let j = 0, len1 = ring.length; j < len1; j++) {
+            const v1 = ring[j];
+            let v2 = ring[j + 1];
+            if (j === len1 - 1) {
+                v2 = ring[0];
+            }
+            // const p1 = [v1[0], v1[1], options.depth],
+            //     p2 = [v2[0], v2[1], options.depth],
+            //     p3 = [v1[0], v1[1], 0],
+            //     p4 = [v2[0], v2[1], 0];
+            const idx = points.length / 3;
+            points.push(v1[0], v1[1], 0, v2[0], v2[1], 0, v1[0], v1[1], z, v2[0], v2[1], z);
+            const a = idx, b = idx + 1, c = idx + 2, d = idx + 3;
+            // points.push(p3, p4, p1, p2);
+            index.push(a, c, b);
+            index.push(c, d, b);
+
+            generateSideWallUV(uvs, points, a, b, c, d);
+        }
+    }
+}
+
+function calPolygonPointsCount(polygon) {
+    let count = 0;
+    let i = 0;
+    const len = polygon.length;
+    while (i < len) {
+        count += (polygon[i].length);
+        i++;
+    }
+    return count;
+}
+
+function flatVertices(polygon, options) {
+    const count = calPolygonPointsCount(polygon);
+    const len = polygon.length;
+    const holes = [], flatVertices = new Float32Array(count * 2), points = [], uvs = [];
+    const pOffset = count * 3, uOffset = count * 2;
+    const z = options.depth;
+
+    let idx0 = 0, idx1 = 0, idx2 = 0;
+    for (let i = 0; i < len; i++) {
+        const ring = polygon[i];
+        if (i > 0) {
+            holes.push(idx0 / 2);
+        }
+        for (let j = 0, len1 = ring.length; j < len1; j++) {
+            const c = ring[j];
+            const x = c[0], y = c[1];
+
+            flatVertices[idx0++] = x;
+            flatVertices[idx0++] = y;
+
+            // top vertices
+            points[idx1] = x;
+            points[idx1 + 1] = y;
+            points[idx1 + 2] = z;
+
+            // bottom vertices
+            points[pOffset + idx1] = x;
+            points[pOffset + idx1 + 1] = y;
+            points[pOffset + idx1 + 2] = 0;
+
+            uvs[idx2] = x;
+            uvs[idx2 + 1] = y;
+
+            uvs[uOffset + idx2] = x;
+            uvs[uOffset + idx2 + 1] = y;
+
+            idx1 += 3;
+            idx2 += 2;
+        }
+    }
+    return {
+        flatVertices,
+        holes,
+        points,
+        count,
+        uvs
+    };
+
+}

package/src/polyline.js

@@ -0,0 +1,190 @@
+import { degToRad, generateNormal, generateSideWallUV, merge, radToDeg } from './util';
+
+export function extrudePolylines(lines, options) {
+    options = Object.assign({}, { depth: 2, lineWidth: 1 }, options);
+    const results = lines.map(line => {
+        const result = expandLine(line, options);
+        result.line = line;
+        generateTopAndBottom(result, options);
+        generateSides(result, options);
+        result.position = new Float32Array(result.points);
+        result.indices = new Uint32Array(result.index);
+        result.uv = new Float32Array(result.uvs);
+        result.normal = generateNormal(result.indices, result.position);
+        return result;
+    });
+    const result = merge(results);
+    result.lines = lines;
+    return result;
+}
+
+function generateTopAndBottom(result, options) {
+    const z = options.depth;
+    const points = [], index = [], uvs = [];
+    const { leftPoints, rightPoints } = result;
+    for (let i = 0, len = leftPoints.length; i < len; i++) {
+        // top left
+        const idx0 = i * 3;
+        const [x1, y1] = leftPoints[i];
+        points[idx0] = x1;
+        points[idx0 + 1] = y1;
+        points[idx0 + 2] = z;
+
+        // top right
+        const [x2, y2] = rightPoints[i];
+        const idx1 = len * 3 + idx0;
+        points[idx1] = x2;
+        points[idx1 + 1] = y2;
+        points[idx1 + 2] = z;
+
+        // bottom left
+        const idx2 = (len * 2) * 3 + idx0;
+        points[idx2] = x1;
+        points[idx2 + 1] = y1;
+        points[idx2 + 2] = 0;
+
+        // bottom right
+        const idx3 = (len * 2) * 3 + len * 3 + idx0;
+        points[idx3] = x2;
+        points[idx3 + 1] = y2;
+        points[idx3 + 2] = 0;
+    }
+    for (let i = 0, len = points.length; i < len; i += 3) {
+        const x = points[i], y = points[i + 1];
+        uvs.push(x, y);
+    }
+    for (let i = 0, len = leftPoints.length; i < len - 1; i++) {
+        // top
+        // left1 left2 right1,right2
+        const a1 = i, b1 = i + 1, c1 = a1 + len, d1 = b1 + len;
+        index.push(a1, c1, b1);
+        index.push(c1, d1, b1);
+
+        // bottom
+        // left1 left2 right1,right2
+        const len2 = len * 2;
+        const a2 = i + len2, b2 = a2 + 1, c2 = a2 + len, d2 = b2 + len;
+        index.push(a2, c2, b2);
+        index.push(c2, d2, b2);
+    }
+    result.index = index;
+    result.points = points;
+    result.uvs = uvs;
+}
+
+function generateSides(result, options) {
+    const { points, index, leftPoints, rightPoints, uvs } = result;
+    const z = options.depth;
+    const rings = [leftPoints, rightPoints];
+    function addOneSideIndex(v1, v2) {
+        const idx = points.length / 3;
+        points.push(v1[0], v1[1], 0, v2[0], v2[1], 0, v1[0], v1[1], z, v2[0], v2[1], z);
+        const a = idx, b = idx + 1, c = idx + 2, d = idx + 3;
+        // points.push(p3, p4, p1, p2);
+        index.push(a, c, b);
+        index.push(c, d, b);
+        generateSideWallUV(uvs, points, a, b, c, d);
+    }
+
+    for (let i = 0, len = rings.length; i < len; i++) {
+        let ring = rings[i];
+        if (i > 0) {
+            ring = ring.map(p => {
+                return p;
+            });
+            ring = ring.reverse();
+        }
+        for (let j = 0, len1 = ring.length - 1; j < len1; j++) {
+            const v1 = ring[j];
+            const v2 = ring[j + 1];
+            addOneSideIndex(v1, v2);
+        }
+    }
+    const len = leftPoints.length;
+    const vs = [rightPoints[0], leftPoints[0], leftPoints[len - 1], rightPoints[len - 1]];
+    for (let i = 0; i < vs.length; i += 2) {
+        const v1 = vs[i], v2 = vs[i + 1];
+        addOneSideIndex(v1, v2);
+    }
+}
+
+const TEMPV1 = { x: 0, y: 0 }, TEMPV2 = { x: 0, y: 0 };
+
+function expandLine(line, options) {
+    let preAngle = 0;
+    const radius = options.lineWidth / 2;
+    const points = [], leftPoints = [], rightPoints = [];
+    const len = line.length;
+    for (let i = 0; i < len - 1; i++) {
+        const p1 = line[i],
+            p2 = line[i + 1];
+        const dy = p2[1] - p1[1],
+            dx = p2[0] - p1[0];
+        let rAngle = 0;
+        const rad = Math.atan(dy / dx);
+        const angle = radToDeg(rad);
+        preAngle = angle;
+        if (i === 0) {
+            rAngle = angle;
+            rAngle -= 90;
+        } else {
+            const p0 = line[i - 1];
+            TEMPV1.x = p0[0] - p1[0];
+            TEMPV1.y = p0[1] - p1[1];
+            TEMPV2.x = p2[0] - p1[0];
+            TEMPV2.y = p2[1] - p1[1];
+            const vAngle = getAngle(TEMPV1, TEMPV2);
+            rAngle = angle - vAngle / 2;
+        }
+        const rRad = degToRad(rAngle);
+        const [op1, op2] = calOffsetPoint(rRad, radius, p1);
+        points.push(op1, op2);
+        if (leftOnLine(op1, p1, p2)) {
+            leftPoints.push(op1);
+            rightPoints.push(op2);
+        } else {
+            leftPoints.push(op2);
+            rightPoints.push(op1);
+        }
+    }
+    let rAngle = preAngle;
+    rAngle -= 90;
+    const rRad = degToRad(rAngle);
+    const p1 = line[len - 2];
+    const p2 = line[len - 1];
+    const [op1, op2] = calOffsetPoint(rRad, radius, p2);
+    points.push(op1, op2);
+    if (leftOnLine(op1, p1, p2)) {
+        leftPoints.push(op1);
+        rightPoints.push(op2);
+    } else {
+        leftPoints.push(op2);
+        rightPoints.push(op1);
+    }
+
+    return { offsetPoints: points, leftPoints, rightPoints };
+}
+
+function calOffsetPoint(rad, radius, p) {
+    const [x, y] = p;
+    const x1 = Math.cos(rad) * radius, y1 = Math.sin(rad) * radius;
+    const p1 = [x + x1, y + y1];
+    const rad1 = rad += Math.PI;
+    const x2 = Math.cos(rad1) * radius, y2 = Math.sin(rad1) * radius;
+    const p2 = [x + x2, y + y2];
+    return [p1, p2];
+}
+
+const getAngle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
+    const dot = x1 * x2 + y1 * y2;
+    const det = x1 * y2 - y1 * x2;
+    const angle = Math.atan2(det, dot) / Math.PI * 180;
+    return (angle + 360) % 360;
+};
+
+function leftOnLine(p, p1, p2) {
+    const [x1, y1] = p1;
+    const [x2, y2] = p2;
+    const [x, y] = p;
+    return (y1 - y2) * x + (x2 - x1) * y + x1 * y2 - x2 * y1 > 0;
+}

package/src/util.js

@@ -0,0 +1,205 @@
+/**
+ * https://github.com/Turfjs/turf/blob/master/packages/turf-boolean-clockwise/index.ts
+ * @param {*} ring
+ * @returns
+ */
+export function isClockwise(ring) {
+    let sum = 0;
+    let i = 1;
+    let prev;
+    let cur;
+    const len = ring.length;
+
+    while (i < len) {
+        prev = cur || ring[0];
+        cur = ring[i];
+        sum += (cur[0] - prev[0]) * (cur[1] + prev[1]);
+        i++;
+    }
+    return sum > 0;
+}
+
+function v3Sub(out, v1, v2) {
+    out[0] = v1[0] - v2[0];
+    out[1] = v1[1] - v2[1];
+    out[2] = v1[2] - v2[2];
+    return out;
+}
+
+function v3Normalize(out, v) {
+    const x = v[0];
+    const y = v[1];
+    const z = v[2];
+    const d = Math.sqrt(x * x + y * y + z * z) || 1;
+    out[0] = x / d;
+    out[1] = y / d;
+    out[2] = z / d;
+    return out;
+}
+
+function v3Cross(out, v1, v2) {
+    const ax = v1[0], ay = v1[1], az = v1[2],
+        bx = v2[0], by = v2[1], bz = v2[2];
+
+    out[0] = ay * bz - az * by;
+    out[1] = az * bx - ax * bz;
+    out[2] = ax * by - ay * bx;
+    return out;
+}
+
+export function generateNormal(indices, position) {
+
+    function v3Set(p, a, b, c) {
+        p[0] = a; p[1] = b; p[2] = c;
+    }
+
+    const p1 = [];
+    const p2 = [];
+    const p3 = [];
+
+    const v21 = [];
+    const v32 = [];
+
+    const n = [];
+
+    const len = indices.length;
+    const normals = new Float32Array(position.length);
+
+    for (let f = 0; f < len; f += 3) {
+        // const i1 = indices[f++] * 3;
+        // const i2 = indices[f++] * 3;
+        // const i3 = indices[f++] * 3;
+        // const i1 = indices[f];
+        // const i2 = indices[f + 1];
+        // const i3 = indices[f + 2];
+        const a = indices[f], b = indices[f + 1], c = indices[f + 2];
+        const i1 = a * 3, i2 = b * 3, i3 = c * 3;
+
+        v3Set(p1, position[i1], position[i1 + 1], position[i1 + 2]);
+        v3Set(p2, position[i2], position[i2 + 1], position[i2 + 2]);
+        v3Set(p3, position[i3], position[i3 + 1], position[i3 + 2]);
+
+        // pA.fromBufferAttribute(positionAttribute, vA);
+        // pB.fromBufferAttribute(positionAttribute, vB);
+        // pC.fromBufferAttribute(positionAttribute, vC);
+
+        // cb.subVectors(pC, pB);
+        // ab.subVectors(pA, pB);
+        // cb.cross(ab);
+        v3Sub(v32, p3, p2);
+        v3Sub(v21, p1, p2);
+        v3Cross(n, v32, v21);
+        // Already be weighted by the triangle area
+        for (let i = 0; i < 3; i++) {
+            normals[i1 + i] += n[i];
+            normals[i2 + i] += n[i];
+            normals[i3 + i] += n[i];
+        }
+    }
+
+    for (let i = 0; i < normals.length; i += 3) {
+        v3Set(n, normals[i], normals[i + 1], normals[i + 2]);
+        v3Normalize(n, n);
+        normals[i] = n[0] || 1;
+        normals[i + 1] = n[1] || 1;
+        normals[i + 2] = n[2] || 1;
+
+    }
+
+    return normals;
+}
+
+export function merge(results) {
+    if (results.length === 1) {
+        const result = {
+            position: results[0].position,
+            normal: results[0].normal,
+            uv: results[0].uv,
+            indices: results[0].indices,
+            results
+        };
+        return result;
+    }
+    let plen = 0, ilen = 0;
+    for (let i = 0, len = results.length; i < len; i++) {
+        const { position, indices } = results[i];
+        plen += position.length;
+        ilen += indices.length;
+    }
+    const result = {
+        position: new Float32Array(plen),
+        normal: new Float32Array(plen),
+        uv: new Float32Array(plen / 3 * 2),
+        indices: new Uint32Array(ilen),
+        results
+    };
+    let pOffset = 0, pCount = 0, iIdx = 0, uvOffset = 0;
+    for (let i = 0, len = results.length; i < len; i++) {
+        const { position, indices, normal, uv } = results[i];
+        result.position.set(position, pOffset);
+        result.normal.set(normal, pOffset);
+        result.uv.set(uv, uvOffset);
+        for (let j = 0, len1 = indices.length; j < len1; j++) {
+            const pIndex = indices[j] + pCount;
+            result.indices[iIdx] = pIndex;
+            iIdx++;
+        }
+        uvOffset += uv.length;
+        pOffset += position.length;
+        pCount += position.length / 3;
+    }
+    return result;
+}
+
+export function radToDeg(rad) {
+    return rad * 180 / Math.PI;
+}
+
+export function degToRad(angle) {
+    return angle / 180 * Math.PI;
+}
+
+// https://github.com/mrdoob/three.js/blob/16f13e3b07e31d0e9a00df7c3366bbe0e464588c/src/geometries/ExtrudeGeometry.js?_pjax=%23js-repo-pjax-container#L736
+export function generateSideWallUV(uvs, vertices, indexA, indexB, indexC, indexD) {
+
+    const a_x = vertices[indexA * 3];
+    const a_y = vertices[indexA * 3 + 1];
+    const a_z = vertices[indexA * 3 + 2];
+    const b_x = vertices[indexB * 3];
+    const b_y = vertices[indexB * 3 + 1];
+    const b_z = vertices[indexB * 3 + 2];
+    const c_x = vertices[indexC * 3];
+    const c_y = vertices[indexC * 3 + 1];
+    const c_z = vertices[indexC * 3 + 2];
+    const d_x = vertices[indexD * 3];
+    const d_y = vertices[indexD * 3 + 1];
+    const d_z = vertices[indexD * 3 + 2];
+
+    if (Math.abs(a_y - b_y) < Math.abs(a_x - b_x)) {
+
+        uvs.push(a_x, 1 - a_z);
+        uvs.push(b_x, 1 - b_z);
+        uvs.push(c_x, 1 - c_z);
+        uvs.push(d_x, 1 - d_z);
+        // return [
+        //     new Vector2(a_x, 1 - a_z),
+        //     new Vector2(b_x, 1 - b_z),
+        //     new Vector2(c_x, 1 - c_z),
+        //     new Vector2(d_x, 1 - d_z)
+        // ];
+
+    } else {
+        uvs.push(a_y, 1 - a_z);
+        uvs.push(b_y, 1 - b_z);
+        uvs.push(c_y, 1 - c_z);
+        uvs.push(d_y, 1 - d_z);
+        // return [
+        //     new Vector2(a_y, 1 - a_z),
+        //     new Vector2(b_y, 1 - b_z),
+        //     new Vector2(c_y, 1 - c_z),
+        //     new Vector2(d_y, 1 - d_z)
+        // ];
+
+    }
+
+}