poly-extrude 0.1.0 → 0.3.0

package/src/path/PathPoint.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-tabs */
+
+// code copy from https://github.com/shawn0326/three.path/blob/master/src/PathPoint.js
+
+import { Vector3 } from '../math/Vector3';
+
+/**
+ * PathPoint
+ */
+class PathPoint {
+	constructor() {
+		this.pos = new Vector3();
+		this.dir = new Vector3();
+		this.right = new Vector3();
+		this.up = new Vector3(); // normal
+		this.dist = 0; // distance from start
+		this.widthScale = 1; // for corner
+		this.sharp = false; // marks as sharp corner
+	}
+
+	lerpPathPoints(p1, p2, alpha) {
+		this.pos.lerpVectors(p1.pos, p2.pos, alpha);
+		this.dir.lerpVectors(p1.dir, p2.dir, alpha);
+		this.up.lerpVectors(p1.up, p2.up, alpha);
+		this.right.lerpVectors(p1.right, p2.right, alpha);
+		this.dist = (p2.dist - p1.dist) * alpha + p1.dist;
+		this.widthScale = (p2.widthScale - p1.widthScale) * alpha + p1.widthScale;
+	}
+
+	copy(source) {
+		this.pos.copy(source.pos);
+		this.dir.copy(source.dir);
+		this.up.copy(source.up);
+		this.right.copy(source.right);
+		this.dist = source.dist;
+		this.widthScale = source.widthScale;
+	}
+
+}
+
+export { PathPoint };

package/src/path/PathPointList.js

@@ -0,0 +1,251 @@
+/* eslint-disable no-tabs */
+// code copy from https://github.com/shawn0326/three.path/blob/master/src/PathPointList.js
+import { Matrix4 } from '../math/Matrix4.js';
+import { QuadraticBezierCurve3 } from '../math/QuadraticBezierCurve3.js';
+import { Vector3 } from '../math/Vector3.js';
+import { PathPoint } from './PathPoint.js';
+
+const helpVec3_1 = new Vector3();
+const helpVec3_2 = new Vector3();
+const helpVec3_3 = new Vector3();
+const helpMat4 = new Matrix4();
+const helpCurve = new QuadraticBezierCurve3();
+
+function _getCornerBezierCurve(last, current, next, cornerRadius, firstCorner, out) {
+	const lastDir = helpVec3_1.subVectors(current, last);
+	const nextDir = helpVec3_2.subVectors(next, current);
+
+	const lastDirLength = lastDir.length();
+	const nextDirLength = nextDir.length();
+
+	lastDir.normalize();
+	nextDir.normalize();
+
+	// cornerRadius can not bigger then lineDistance / 2, auto fix this
+	const v0Dist = Math.min((firstCorner ? lastDirLength / 2 : lastDirLength) * 0.999999, cornerRadius);
+	out.v0.copy(current).sub(lastDir.multiplyScalar(v0Dist));
+
+	out.v1.copy(current);
+
+	const v2Dist = Math.min(nextDirLength / 2 * 0.999999, cornerRadius);
+	out.v2.copy(current).add(nextDir.multiplyScalar(v2Dist));
+
+	return out;
+}
+
+/**
+ * PathPointList
+ * input points to generate a PathPoint list
+ */
+class PathPointList {
+
+	constructor() {
+		this.array = []; // path point array
+		this.count = 0;
+	}
+
+	/**
+	 * Set points
+	 * @param {THREE.Vector3[]} points key points array
+	 * @param {number} cornerRadius? the corner radius. set 0 to disable round corner. default is 0.1
+	 * @param {number} cornerSplit? the corner split. default is 10.
+	 * @param {number} up? force up. default is auto up (calculate by tangent).
+	 * @param {boolean} close? close path. default is false.
+	 */
+	set(points, cornerRadius = 0.1, cornerSplit = 10, up = null, close = false) {
+		points = points.slice(0);
+
+		if (points.length < 2) {
+			console.warn('PathPointList: points length less than 2.');
+			this.count = 0;
+			return;
+		}
+
+		// Auto close
+		if (close && !points[0].equals(points[points.length - 1])) {
+			points.push(new Vector3().copy(points[0]));
+		}
+
+		// Generate path point list
+		for (let i = 0, l = points.length; i < l; i++) {
+			if (i === 0) {
+				this._start(points[i], points[i + 1], up);
+			} else if (i === l - 1) {
+				if (close) {
+					// Connect end point and start point
+					this._corner(points[i], points[1], cornerRadius, cornerSplit, up);
+
+					// Fix start point
+					const dist = this.array[0].dist; // should not copy dist
+					this.array[0].copy(this.array[this.count - 1]);
+					this.array[0].dist = dist;
+				} else {
+					this._end(points[i]);
+				}
+			} else {
+				this._corner(points[i], points[i + 1], cornerRadius, cornerSplit, up);
+			}
+		}
+	}
+
+	/**
+	 * Get distance of this path
+	 * @return {number}
+	 */
+	distance() {
+		if (this.count > 0) {
+			return this.array[this.count - 1].dist;
+		}
+		return 0;
+	}
+
+	_getByIndex(index) {
+		if (!this.array[index]) {
+			this.array[index] = new PathPoint();
+		}
+		return this.array[index];
+	}
+
+	_start(current, next, up) {
+		this.count = 0;
+
+		const point = this._getByIndex(this.count);
+
+		point.pos.copy(current);
+		point.dir.subVectors(next, current);
+
+		// init start up dir
+		if (up) {
+			point.up.copy(up);
+		} else {
+			// select an initial normal vector perpendicular to the first tangent vector
+			let min = Number.MAX_VALUE;
+			const tx = Math.abs(point.dir.x);
+			const ty = Math.abs(point.dir.y);
+			const tz = Math.abs(point.dir.z);
+			if (tx < min) {
+				min = tx;
+				point.up.set(1, 0, 0);
+			}
+			if (ty < min) {
+				min = ty;
+				point.up.set(0, 1, 0);
+			}
+			if (tz < min) {
+				point.up.set(0, 0, 1);
+			}
+		}
+
+		point.right.crossVectors(point.dir, point.up).normalize();
+		point.up.crossVectors(point.right, point.dir).normalize();
+		point.dist = 0;
+		point.widthScale = 1;
+		point.sharp = false;
+
+		point.dir.normalize();
+
+		this.count++;
+	}
+
+	_end(current) {
+		const lastPoint = this.array[this.count - 1];
+		const point = this._getByIndex(this.count);
+
+		point.pos.copy(current);
+		point.dir.subVectors(current, lastPoint.pos);
+		const dist = point.dir.length();
+		point.dir.normalize();
+
+		point.up.copy(lastPoint.up); // copy last up
+
+		const vec = helpVec3_1.crossVectors(lastPoint.dir, point.dir);
+		if (vec.length() > Number.EPSILON) {
+			vec.normalize();
+			const theta = Math.acos(Math.min(Math.max(lastPoint.dir.dot(point.dir), -1), 1)); // clamp for floating pt errors
+			point.up.applyMatrix4(helpMat4.makeRotationAxis(vec, theta));
+		}
+
+		point.right.crossVectors(point.dir, point.up).normalize();
+
+		point.dist = lastPoint.dist + dist;
+		point.widthScale = 1;
+		point.sharp = false;
+
+		this.count++;
+	}
+
+	_corner(current, next, cornerRadius, cornerSplit, up) {
+		if (cornerRadius > 0 && cornerSplit > 0) {
+			const lastPoint = this.array[this.count - 1];
+			const curve = _getCornerBezierCurve(lastPoint.pos, current, next, cornerRadius, (this.count - 1) === 0, helpCurve);
+			const samplerPoints = curve.getPoints(cornerSplit); // TODO optimize
+
+			for (let f = 0; f < cornerSplit; f++) {
+				this._sharpCorner(samplerPoints[f], samplerPoints[f + 1], up, f === 0 ? 1 : 0);
+			}
+
+			if (!samplerPoints[cornerSplit].equals(next)) {
+				this._sharpCorner(samplerPoints[cornerSplit], next, up, 2);
+			}
+		} else {
+			this._sharpCorner(current, next, up, 0, true);
+		}
+	}
+
+	// dirType: 0 - use middle dir / 1 - use last dir / 2- use next dir
+	_sharpCorner(current, next, up, dirType = 0, sharp = false) {
+		const lastPoint = this.array[this.count - 1];
+		const point = this._getByIndex(this.count);
+
+		const lastDir = helpVec3_1.subVectors(current, lastPoint.pos);
+		const nextDir = helpVec3_2.subVectors(next, current);
+
+		const lastDirLength = lastDir.length();
+
+		lastDir.normalize();
+		nextDir.normalize();
+
+		point.pos.copy(current);
+
+		if (dirType === 1) {
+			point.dir.copy(lastDir);
+		} else if (dirType === 2) {
+			point.dir.copy(nextDir);
+		} else {
+			point.dir.addVectors(lastDir, nextDir);
+			point.dir.normalize();
+		}
+
+		if (up) {
+			if (point.dir.dot(up) === 1) {
+				point.right.crossVectors(nextDir, up).normalize();
+			} else {
+				point.right.crossVectors(point.dir, up).normalize();
+			}
+
+			point.up.crossVectors(point.right, point.dir).normalize();
+		} else {
+			point.up.copy(lastPoint.up);
+
+			const vec = helpVec3_3.crossVectors(lastPoint.dir, point.dir);
+			if (vec.length() > Number.EPSILON) {
+				vec.normalize();
+				const theta = Math.acos(Math.min(Math.max(lastPoint.dir.dot(point.dir), -1), 1)); // clamp for floating pt errors
+				point.up.applyMatrix4(helpMat4.makeRotationAxis(vec, theta));
+			}
+
+			point.right.crossVectors(point.dir, point.up).normalize();
+		}
+
+		point.dist = lastPoint.dist + lastDirLength;
+
+		const _cos = lastDir.dot(nextDir);
+		point.widthScale = Math.min(1 / Math.sqrt((1 + _cos) / 2), 1.415) || 1;
+		point.sharp = (Math.abs(_cos - 1) > 0.05) && sharp;
+
+		this.count++;
+	}
+
+}
+
+export { PathPointList };

package/src/path.js

@@ -0,0 +1,259 @@
+import { Vector3 } from './math/Vector3';
+import { PathPoint } from './path/PathPoint';
+import { PathPointList } from './path/PathPointList';
+import { merge } from './util';
+const UP = new Vector3(0, 0, 1);
+
+export function expandPaths(lines, options) {
+    options = Object.assign({}, { lineWidth: 1, cornerRadius: 0, cornerSplit: 10 }, options);
+    const results = lines.map(line => {
+        const points = line.map(p => {
+            const [x, y, z] = p;
+            return new Vector3(x, y, z || 0);
+        });
+        const pathPointList = new PathPointList();
+        pathPointList.set(points, options.cornerRadius, options.cornerSplit, UP);
+        const result = generatePathVertexData(pathPointList, options);
+        result.line = line;
+        result.position = new Float32Array(result.points);
+        result.indices = new Uint32Array(result.index);
+        result.uv = new Float32Array(result.uvs);
+        result.normal = new Float32Array(result.normal);
+        return result;
+    });
+    const result = merge(results);
+    result.lines = lines;
+    return result;
+}
+
+// Vertex Data Generate Functions
+// code copy from https://github.com/shawn0326/three.path/blob/master/src/PathGeometry.js
+function generatePathVertexData(pathPointList, options) {
+    const width = options.lineWidth || 0.1;
+    const progress = 1;
+    const side = 'both';
+
+    const halfWidth = width / 2;
+    const sideWidth = (side !== 'both' ? width / 2 : width);
+    const totalDistance = pathPointList.distance();
+    const progressDistance = progress * totalDistance;
+    if (totalDistance === 0) {
+        return null;
+    }
+
+    const sharpUvOffset = halfWidth / sideWidth;
+    // const sharpUvOffset2 = halfWidth / totalDistance;
+
+    let count = 0;
+
+    // modify data
+    const position = [];
+    const normal = [];
+    const uv = [];
+    const indices = [];
+    let verticesCount = 0;
+
+    const right = new Vector3();
+    const left = new Vector3();
+
+    // for sharp corners
+    const leftOffset = new Vector3();
+    const rightOffset = new Vector3();
+    const tempPoint1 = new Vector3();
+    const tempPoint2 = new Vector3();
+
+    function addVertices(pathPoint) {
+        const first = position.length === 0;
+        const sharpCorner = pathPoint.sharp && !first;
+
+        const uvDist = pathPoint.dist / sideWidth;
+        // const uvDist2 = pathPoint.dist / totalDistance;
+
+        const dir = pathPoint.dir;
+        const up = pathPoint.up;
+        const _right = pathPoint.right;
+
+        if (side !== 'left') {
+            right.copy(_right).multiplyScalar(halfWidth * pathPoint.widthScale);
+        } else {
+            right.set(0, 0, 0);
+        }
+
+        if (side !== 'right') {
+            left.copy(_right).multiplyScalar(-halfWidth * pathPoint.widthScale);
+        } else {
+            left.set(0, 0, 0);
+        }
+
+        right.add(pathPoint.pos);
+        left.add(pathPoint.pos);
+
+        if (sharpCorner) {
+            leftOffset.fromArray(position, position.length - 6).sub(left);
+            rightOffset.fromArray(position, position.length - 3).sub(right);
+
+            const leftDist = leftOffset.length();
+            const rightDist = rightOffset.length();
+
+            const sideOffset = leftDist - rightDist;
+            let longerOffset, longEdge;
+
+            if (sideOffset > 0) {
+                longerOffset = leftOffset;
+                longEdge = left;
+            } else {
+                longerOffset = rightOffset;
+                longEdge = right;
+            }
+
+            tempPoint1.copy(longerOffset).setLength(Math.abs(sideOffset)).add(longEdge);
+
+            // eslint-disable-next-line prefer-const
+            let _cos = tempPoint2.copy(longEdge).sub(tempPoint1).normalize().dot(dir);
+            // eslint-disable-next-line prefer-const
+            let _len = tempPoint2.copy(longEdge).sub(tempPoint1).length();
+            // eslint-disable-next-line prefer-const
+            let _dist = _cos * _len * 2;
+
+            tempPoint2.copy(dir).setLength(_dist).add(tempPoint1);
+
+            if (sideOffset > 0) {
+                position.push(
+                    tempPoint1.x, tempPoint1.y, tempPoint1.z, // 6
+                    right.x, right.y, right.z, // 5
+                    left.x, left.y, left.z, // 4
+                    right.x, right.y, right.z, // 3
+                    tempPoint2.x, tempPoint2.y, tempPoint2.z, // 2
+                    right.x, right.y, right.z // 1
+                );
+
+                verticesCount += 6;
+
+                indices.push(
+                    verticesCount - 6, verticesCount - 8, verticesCount - 7,
+                    verticesCount - 6, verticesCount - 7, verticesCount - 5,
+
+                    verticesCount - 4, verticesCount - 6, verticesCount - 5,
+                    verticesCount - 2, verticesCount - 4, verticesCount - 1
+                );
+
+                count += 12;
+            } else {
+                position.push(
+                    left.x, left.y, left.z, // 6
+                    tempPoint1.x, tempPoint1.y, tempPoint1.z, // 5
+                    left.x, left.y, left.z, // 4
+                    right.x, right.y, right.z, // 3
+                    left.x, left.y, left.z, // 2
+                    tempPoint2.x, tempPoint2.y, tempPoint2.z // 1
+                );
+
+                verticesCount += 6;
+
+                indices.push(
+                    verticesCount - 6, verticesCount - 8, verticesCount - 7,
+                    verticesCount - 6, verticesCount - 7, verticesCount - 5,
+
+                    verticesCount - 6, verticesCount - 5, verticesCount - 3,
+                    verticesCount - 2, verticesCount - 3, verticesCount - 1
+                );
+
+                count += 12;
+            }
+
+            normal.push(
+                up.x, up.y, up.z,
+                up.x, up.y, up.z,
+                up.x, up.y, up.z,
+                up.x, up.y, up.z,
+                up.x, up.y, up.z,
+                up.x, up.y, up.z
+            );
+
+            uv.push(
+                uvDist - sharpUvOffset, 0,
+                uvDist - sharpUvOffset, 1,
+                uvDist, 0,
+                uvDist, 1,
+                uvDist + sharpUvOffset, 0,
+                uvDist + sharpUvOffset, 1
+            );
+
+            // if (generateUv2) {
+            //     uv2.push(
+            //         uvDist2 - sharpUvOffset2, 0,
+            //         uvDist2 - sharpUvOffset2, 1,
+            //         uvDist2, 0,
+            //         uvDist2, 1,
+            //         uvDist2 + sharpUvOffset2, 0,
+            //         uvDist2 + sharpUvOffset2, 1
+            //     );
+            // }
+        } else {
+            position.push(
+                left.x, left.y, left.z,
+                right.x, right.y, right.z
+            );
+
+            normal.push(
+                up.x, up.y, up.z,
+                up.x, up.y, up.z
+            );
+
+            uv.push(
+                uvDist, 0,
+                uvDist, 1
+            );
+
+            // if (generateUv2) {
+            //     uv2.push(
+            //         uvDist2, 0,
+            //         uvDist2, 1
+            //     );
+            // }
+
+            verticesCount += 2;
+
+            if (!first) {
+                indices.push(
+                    verticesCount - 2, verticesCount - 4, verticesCount - 3,
+                    verticesCount - 2, verticesCount - 3, verticesCount - 1
+                );
+
+                count += 6;
+            }
+        }
+    }
+
+    let lastPoint;
+
+    if (progressDistance > 0) {
+        for (let i = 0; i < pathPointList.count; i++) {
+            const pathPoint = pathPointList.array[i];
+
+            if (pathPoint.dist > progressDistance) {
+                const prevPoint = pathPointList.array[i - 1];
+                lastPoint = new PathPoint();
+
+                // linear lerp for progress
+                const alpha = (progressDistance - prevPoint.dist) / (pathPoint.dist - prevPoint.dist);
+                lastPoint.lerpPathPoints(prevPoint, pathPoint, alpha);
+
+                addVertices(lastPoint);
+                break;
+            } else {
+                addVertices(pathPoint);
+            }
+        }
+    } else {
+        lastPoint = pathPointList.array[0];
+    }
+
+    return {
+        points: position,
+        normal,
+        uvs: uv,
+        index: indices,
+        count
+    };
+}

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];
 }