poly-extrude 0.0.9 → 0.2.0

package/dist/poly-extrude.mjs

@@ -1,5 +1,5 @@
 /*!
- * poly-extrude v0.0.9
+ * poly-extrude v0.2.0
   */
 var earcut$2 = {exports: {}};
 
@@ -1101,28 +1101,30 @@ function generateTopAndBottom(result, options) {
     var idx0 = i * 3;
     var _leftPoints$i = leftPoints[i],
         x1 = _leftPoints$i[0],
-        y1 = _leftPoints$i[1];
+        y1 = _leftPoints$i[1],
+        z1 = _leftPoints$i[2];
     points[idx0] = x1;
     points[idx0 + 1] = y1;
-    points[idx0 + 2] = z; // top right
+    points[idx0 + 2] = z + z1; // top right
 
     var _rightPoints$i = rightPoints[i],
         x2 = _rightPoints$i[0],
-        y2 = _rightPoints$i[1];
+        y2 = _rightPoints$i[1],
+        z2 = _rightPoints$i[2];
     var idx1 = len * 3 + idx0;
     points[idx1] = x2;
     points[idx1 + 1] = y2;
-    points[idx1 + 2] = z; // bottom left
+    points[idx1 + 2] = z + z2; // bottom left
 
     var idx2 = len * 2 * 3 + idx0;
     points[idx2] = x1;
     points[idx2 + 1] = y1;
-    points[idx2 + 2] = 0; // bottom right
+    points[idx2 + 2] = z1; // bottom right
 
     var idx3 = len * 2 * 3 + len * 3 + idx0;
     points[idx3] = x2;
     points[idx3 + 1] = y2;
-    points[idx3 + 2] = 0;
+    points[idx3 + 2] = z2;
     i++;
   }
 
@@ -1176,7 +1178,7 @@ function generateSides(result, options) {
 
   function addOneSideIndex(v1, v2) {
     var idx = points.length / 3;
-    points.push(v1[0], v1[1], z, v2[0], v2[1], z, v1[0], v1[1], 0, v2[0], v2[1], 0);
+    points.push(v1[0], v1[1], z + v1[2], v2[0], v2[1], z + v2[2], v1[0], v1[1], v1[2], v2[0], v2[1], v2[2]);
     var a = idx + 2,
         b = idx + 3,
         c = idx,
@@ -1305,13 +1307,14 @@ function expandLine(line, options) {
 function calOffsetPoint(rad, radius, p) {
   var x = p[0],
       y = p[1];
+  var z = p[2] || 0;
   var x1 = Math.cos(rad) * radius,
       y1 = Math.sin(rad) * radius;
-  var p1 = [x + x1, y + y1];
+  var p1 = [x + x1, y + y1, z];
   var rad1 = rad += Math.PI;
   var x2 = Math.cos(rad1) * radius,
       y2 = Math.sin(rad1) * radius;
-  var p2 = [x + x2, y + y2];
+  var p2 = [x + x2, y + y2, z];
   return [p1, p2];
 }
 
@@ -1336,4 +1339,122 @@ function leftOnLine(p, p1, p2) {
   return (y1 - y2) * x + (x2 - x1) * y + x1 * y2 - x2 * y1 > 0;
 }
 
-export { expandLine, extrudePolygons, extrudePolylines };
+function cylinder(point, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  options = Object.assign({}, {
+    radius: 1,
+    height: 2,
+    radialSegments: 6
+  }, options);
+  var radialSegments = Math.round(Math.max(4, options.radialSegments));
+  var _options = options,
+      radius = _options.radius,
+      height = _options.height;
+  var aRad = 360 / radialSegments / 360 * Math.PI * 2;
+  var circlePointsLen = radialSegments + 1;
+  var points = new Float32Array(circlePointsLen * 3 * 2);
+  var centerx = point[0],
+      centery = point[1];
+  var idx = 0,
+      uIdx = 0;
+  var offset = circlePointsLen * 3,
+      uOffset = circlePointsLen * 2;
+  var indices = [],
+      uvs = [];
+
+  for (var i = -1; i < radialSegments; i++) {
+    var rad = aRad * i;
+    var x = Math.cos(rad) * radius + centerx,
+        y = Math.sin(rad) * radius + centery; // bottom vertices
+
+    points[idx] = x;
+    points[idx + 1] = y;
+    points[idx + 2] = 0; // top vertices
+
+    points[idx + offset] = x;
+    points[idx + 1 + offset] = y;
+    points[idx + 2 + offset] = height;
+    var u = 0,
+        v = 0;
+    u = 0.5 + x / radius / 2;
+    v = 0.5 + y / radius / 2;
+    uvs[uIdx] = u;
+    uvs[uIdx + 1] = v;
+    uvs[uIdx + uOffset] = u;
+    uvs[uIdx + 1 + uOffset] = v;
+    idx += 3;
+    uIdx += 2;
+
+    if (i > 1) {
+      // bottom indices
+      indices.push(0, i - 1, i);
+    }
+  }
+
+  idx -= 3;
+  points[idx] = points[0];
+  points[idx + 1] = points[1];
+  points[idx + 2] = points[2];
+  var pointsLen = points.length;
+  points[pointsLen - 3] = points[0];
+  points[pointsLen - 2] = points[1];
+  points[pointsLen - 1] = height;
+  var indicesLen = indices.length; // top indices
+
+  for (var _i = 0; _i < indicesLen; _i++) {
+    var index = indices[_i];
+    indices.push(index + circlePointsLen);
+  }
+
+  var sidePoints = new Float32Array((circlePointsLen * 3 * 2 - 6) * 2);
+  var pIndex = -1;
+  idx = circlePointsLen * 2;
+  uIdx = 0;
+
+  for (var _i2 = 0, len = points.length / 2; _i2 < len - 3; _i2 += 3) {
+    var x1 = points[_i2],
+        y1 = points[_i2 + 1],
+        x2 = points[_i2 + 3],
+        y2 = points[_i2 + 4];
+    sidePoints[++pIndex] = x1;
+    sidePoints[++pIndex] = y1;
+    sidePoints[++pIndex] = height;
+    sidePoints[++pIndex] = x2;
+    sidePoints[++pIndex] = y2;
+    sidePoints[++pIndex] = height;
+    sidePoints[++pIndex] = x1;
+    sidePoints[++pIndex] = y1;
+    sidePoints[++pIndex] = 0;
+    sidePoints[++pIndex] = x2;
+    sidePoints[++pIndex] = y2;
+    sidePoints[++pIndex] = 0;
+    var a = idx + 2,
+        b = idx + 3,
+        c = idx,
+        d = idx + 1; // indices.push(a, c, b, c, d, b);
+
+    indices.push(c, a, d, a, b, d);
+    idx += 4;
+    var u1 = uIdx / circlePointsLen,
+        u2 = (uIdx + 1) / circlePointsLen;
+    uvs.push(u1, height / radius / 2, u2, height / radius / 2, u1, 0, u2, 0);
+    uIdx++;
+  }
+
+  var position = new Float32Array(points.length + sidePoints.length);
+  position.set(points, 0);
+  position.set(sidePoints, points.length);
+  var normal = generateNormal(indices, position);
+  return {
+    points: points,
+    indices: new Uint32Array(indices),
+    position: position,
+    normal: normal,
+    uv: new Float32Array(uvs)
+  };
+}
+
+export { cylinder, expandLine, extrudePolygons, extrudePolylines };

package/index.js

@@ -1,3 +1,4 @@
 import { extrudePolygons } from './src/polygon';
 import { extrudePolylines, expandLine } from './src/polyline';
-export { extrudePolygons, extrudePolylines, expandLine };
+import { cylinder } from './src/cylinder';
+export { extrudePolygons, extrudePolylines, expandLine, cylinder };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poly-extrude",
-  "version": "0.0.9",
+  "version": "0.2.0",
   "description": "",
   "main": "dist/poly-extrude.js",
   "module": "dist/poly-extrude.mjs",

package/readme.md

@@ -1,6 +1,9 @@
 # poly-extrude
 
+
 Extrude polygons/polylines. Born in [maptalks.three](https://github.com/maptalks/maptalks.three) project<br>
+
+## Examples
 [building](https://deyihu.github.io/poly-extrude/test/building.html)<br>
 ![](./gallery/building.png)<br>
 [buildings](https://deyihu.github.io/poly-extrude/test/buildings.html)<br>
@@ -11,8 +14,16 @@ Extrude polygons/polylines. Born in [maptalks.three](https://github.com/maptalks
 ![](./gallery/street.png)<br>
 [line-uv](https://deyihu.github.io/poly-extrude/test/line-uv.html)<br>
 ![](./gallery/line-uv.png)
+[ny-building](https://deyihu.github.io/poly-extrude/test/ny-building.html)<br>
+![](./gallery/ny-building.png)
+[cylinder](https://deyihu.github.io/poly-extrude/test/cylinder.html)<br>
+![](./gallery/cylinder.png)
+[brige](https://deyihu.github.io/poly-extrude/test/brige.html)<br>
+![](./gallery/brige.png)
+[spring](https://deyihu.github.io/poly-extrude/test/spring.html)<br>
+![](./gallery/spring.png)
 
-## install
+## Install
 
 ```sh
 npm i poly-extrude
@@ -31,34 +42,79 @@ pnpm i poly-extrude
 ### ESM
 
 ```js
-  import {extrudePolygons,extrudePolylines} from 'poly-extrude';
-  const polygons=[
-    //polygon
-     [
-        //outring
-        [[x,y],[x,y],...........],
-        //holes
-        [[x,y],[x,y],...........],
-        ........
-
-     ],
-     //other polygons
-     ......
+  import {
+      extrudePolygons,
+      extrudePolylines,
+      cylinder
+  } from 'poly-extrude';
+  const polygons = [
+      //polygon
+      [
+          //outring
+          [
+              [x, y],
+              [x, y], ...........
+          ],
+          //holes
+          [
+              [x, y],
+              [x, y], ...........
+          ],
+          ........
+
+      ],
+      //other polygons
+      ......
   ]
 
-  const result = extrudePolygons(polygons,{depth:2});
-  const {positon,normal,uv,indices}=result;
+  const result = extrudePolygons(polygons, {
+      depth: 2
+  });
+  const {
+      positon,
+      normal,
+      uv,
+      indices
+  } = result;
   //do something
 
-  const polylines=[
-        // polyline
-        [[x,y],[x,y],...........],
-        //polyline
-        [[x,y],[x,y],...........],
+  const polylines = [
+      // polyline
+      [
+          [x, y],
+          [x, y], ...........
+      ],
+      //polyline
+      [
+          [x, y],
+          [x, y], ...........
+      ],
   ];
 
-  const result = extrudePolylines(polylines,{depth:2,lineWidth:2});
-  const {positon,normal,uv,indices}=result;
+  const result = extrudePolylines(polylines, {
+      depth: 2,
+      lineWidth: 2
+  });
+  const {
+      positon,
+      normal,
+      uv,
+      indices
+  } = result;
+  //do something
+
+  const center = [0, 0];
+  const result = cylinder(center, {
+      radius: 1,
+      height: 2,
+      radialSegments: 6
+  });
+  const {
+      positon,
+      normal,
+      uv,
+      indices
+  } = result;
   //do something
 ```
 
@@ -68,13 +124,19 @@ pnpm i poly-extrude
 <script src="https://unpkg.com/poly-extrude/dist/poly-extrude.js"></script>
 
 <script>
-    const polygons=[
+    const polygons = [
         //polygon
         [
             //outring
-            [[x,y],[x,y],...........],
+            [
+                [x, y],
+                [x, y], ...........
+            ],
             //holes
-            [[x,y],[x,y],...........],
+            [
+                [x, y],
+                [x, y], ...........
+            ],
             ........
 
         ],
@@ -82,19 +144,54 @@ pnpm i poly-extrude
         ......
     ]
 
-    const result =    polyextrude.extrudePolygons(polygons,{depth:2})
-    const {positon,normal,uv,indices}=result;
+    const result = polyextrude.extrudePolygons(polygons, {
+        depth: 2
+    })
+    const {
+        positon,
+        normal,
+        uv,
+        indices
+    } = result;
     //do something
 
-    const polylines=[
-            // polyline
-            [[x,y],[x,y],...........],
-            //polyline
-            [[x,y],[x,y],...........],
+    const polylines = [
+        // polyline
+        [
+            [x, y],
+            [x, y], ...........
+        ],
+        //polyline
+        [
+            [x, y],
+            [x, y], ...........
+        ],
     ];
 
-    const result = polyextrude.extrudePolylines(polylines,{depth:2,lineWidth:2});
-    const {positon,normal,uv,indices}=result;
+    const result = polyextrude.extrudePolylines(polylines, {
+        depth: 2,
+        lineWidth: 2
+    });
+    const {
+        positon,
+        normal,
+        uv,
+        indices
+    } = result;
+    //do something
+
+    const center = [0, 0];
+    const result = polyextrude.cylinder(center, {
+        radius: 1,
+        height: 2,
+        radialSegments: 6
+    });
+    const {
+        positon,
+        normal,
+        uv,
+        indices
+    } = result;
     //do something
 </script>
 ```

package/src/cylinder.js

@@ -0,0 +1,89 @@
+import { generateNormal } from './util';
+
+export function cylinder(point, options = {}) {
+    options = Object.assign({}, { radius: 1, height: 2, radialSegments: 6 }, options);
+    const radialSegments = Math.round(Math.max(4, options.radialSegments));
+    const { radius, height } = options;
+    const aRad = 360 / radialSegments / 360 * Math.PI * 2;
+    const circlePointsLen = (radialSegments + 1);
+    const points = new Float32Array(circlePointsLen * 3 * 2);
+    const [centerx, centery] = point;
+    let idx = 0, uIdx = 0;
+    const offset = circlePointsLen * 3, uOffset = circlePointsLen * 2;
+    const indices = [], uvs = [];
+    for (let i = -1; i < radialSegments; i++) {
+        const rad = aRad * i;
+        const x = Math.cos(rad) * radius + centerx, y = Math.sin(rad) * radius + centery;
+        // bottom vertices
+        points[idx] = x;
+        points[idx + 1] = y;
+        points[idx + 2] = 0;
+
+        // top vertices
+        points[idx + offset] = x;
+        points[idx + 1 + offset] = y;
+        points[idx + 2 + offset] = height;
+
+        let u = 0, v = 0;
+        u = 0.5 + x / radius / 2;
+        v = 0.5 + y / radius / 2;
+        uvs[uIdx] = u;
+        uvs[uIdx + 1] = v;
+        uvs[uIdx + uOffset] = u;
+        uvs[uIdx + 1 + uOffset] = v;
+
+        idx += 3;
+        uIdx += 2;
+        if (i > 1) {
+            // bottom indices
+            indices.push(0, i - 1, i);
+        }
+    }
+    idx -= 3;
+    points[idx] = points[0];
+    points[idx + 1] = points[1];
+    points[idx + 2] = points[2];
+    const pointsLen = points.length;
+    points[pointsLen - 3] = points[0];
+    points[pointsLen - 2] = points[1];
+    points[pointsLen - 1] = height;
+
+    const indicesLen = indices.length;
+    // top indices
+    for (let i = 0; i < indicesLen; i++) {
+        const index = indices[i];
+        indices.push(index + circlePointsLen);
+    }
+
+    const sidePoints = new Float32Array((circlePointsLen * 3 * 2 - 6) * 2);
+    let pIndex = -1;
+    idx = circlePointsLen * 2;
+    uIdx = 0;
+    for (let i = 0, len = points.length / 2; i < len - 3; i += 3) {
+        const x1 = points[i], y1 = points[i + 1], x2 = points[i + 3], y2 = points[i + 4];
+        sidePoints[++pIndex] = x1;
+        sidePoints[++pIndex] = y1;
+        sidePoints[++pIndex] = height;
+        sidePoints[++pIndex] = x2;
+        sidePoints[++pIndex] = y2;
+        sidePoints[++pIndex] = height;
+        sidePoints[++pIndex] = x1;
+        sidePoints[++pIndex] = y1;
+        sidePoints[++pIndex] = 0;
+        sidePoints[++pIndex] = x2;
+        sidePoints[++pIndex] = y2;
+        sidePoints[++pIndex] = 0;
+        const a = idx + 2, b = idx + 3, c = idx, d = idx + 1;
+        // indices.push(a, c, b, c, d, b);
+        indices.push(c, a, d, a, b, d);
+        idx += 4;
+        const u1 = uIdx / circlePointsLen, u2 = (uIdx + 1) / circlePointsLen;
+        uvs.push(u1, height / radius / 2, u2, height / radius / 2, u1, 0, u2, 0);
+        uIdx++;
+    }
+    const position = new Float32Array(points.length + sidePoints.length);
+    position.set(points, 0);
+    position.set(sidePoints, points.length);
+    const normal = generateNormal(indices, position);
+    return { points, indices: new Uint32Array(indices), position, normal, uv: new Float32Array(uvs) };
+}

package/src/polyline.js

@@ -26,29 +26,29 @@ function generateTopAndBottom(result, options) {
     while (i < len) {
         // top left
         const idx0 = i * 3;
-        const [x1, y1] = leftPoints[i];
+        const [x1, y1, z1] = leftPoints[i];
         points[idx0] = x1;
         points[idx0 + 1] = y1;
-        points[idx0 + 2] = z;
+        points[idx0 + 2] = z + z1;
 
         // top right
-        const [x2, y2] = rightPoints[i];
+        const [x2, y2, z2] = rightPoints[i];
         const idx1 = len * 3 + idx0;
         points[idx1] = x2;
         points[idx1 + 1] = y2;
-        points[idx1 + 2] = z;
+        points[idx1 + 2] = z + z2;
 
         // bottom left
         const idx2 = (len * 2) * 3 + idx0;
         points[idx2] = x1;
         points[idx2 + 1] = y1;
-        points[idx2 + 2] = 0;
+        points[idx2 + 2] = z1;
 
         // bottom right
         const idx3 = (len * 2) * 3 + len * 3 + idx0;
         points[idx3] = x2;
         points[idx3 + 1] = y2;
-        points[idx3 + 2] = 0;
+        points[idx3 + 2] = z2;
 
         i++;
     }
@@ -88,7 +88,7 @@ function generateSides(result, options) {
 
     function addOneSideIndex(v1, v2) {
         const idx = points.length / 3;
-        points.push(v1[0], v1[1], z, v2[0], v2[1], z, v1[0], v1[1], 0, v2[0], v2[1], 0);
+        points.push(v1[0], v1[1], z + v1[2], v2[0], v2[1], z + v2[2], v1[0], v1[1], v1[2], v2[0], v2[1], v2[2]);
         const a = idx + 2, b = idx + 3, c = idx, d = idx + 1;
         index.push(a, c, b, c, d, b);
         generateSideWallUV(uvs, points, a, b, c, d);
@@ -180,11 +180,12 @@ export function expandLine(line, options) {
 
 function calOffsetPoint(rad, radius, p) {
     const [x, y] = p;
+    const z = p[2] || 0;
     const x1 = Math.cos(rad) * radius, y1 = Math.sin(rad) * radius;
-    const p1 = [x + x1, y + y1];
+    const p1 = [x + x1, y + y1, z];
     const rad1 = rad += Math.PI;
     const x2 = Math.cos(rad1) * radius, y2 = Math.sin(rad1) * radius;
-    const p2 = [x + x2, y + y2];
+    const p2 = [x + x2, y + y2, z];
     return [p1, p2];
 }