poly-extrude 0.2.0 → 0.4.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

@@ -122,24 +122,31 @@ function generateSides(result, options) {
 const TEMPV1 = { x: 0, y: 0 }, TEMPV2 = { x: 0, y: 0 };
 
 export function expandLine(line, options) {
-    let preAngle = 0;
+    // let preAngle = 0;
     const radius = options.lineWidth / 2;
     const points = [], leftPoints = [], rightPoints = [];
     const len = line.length;
     let i = 0;
-    while (i < len - 1) {
-        const p1 = line[i],
+    while (i < len) {
+        let p1 = line[i],
             p2 = line[i + 1];
+        const currentp = line[i];
+        // last vertex
+        if (i === len - 1) {
+            p1 = line[len - 2];
+            p2 = line[len - 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) {
+        // preAngle = angle;
+        if (i === 0 || i === len - 1) {
             rAngle = angle;
             rAngle -= 90;
         } else {
+            // 至少3个顶点才会触发
             const p0 = line[i - 1];
             TEMPV1.x = p0[0] - p1[0];
             TEMPV1.y = p0[1] - p1[1];
@@ -149,7 +156,26 @@ export function expandLine(line, options) {
             rAngle = angle - vAngle / 2;
         }
         const rRad = degToRad(rAngle);
-        const [op1, op2] = calOffsetPoint(rRad, radius, p1);
+        const p3 = currentp;
+        const x = Math.cos(rRad) + p3[0], y = Math.sin(rRad) + p3[1];
+        const p4 = [x, y];
+        const [line1, line2] = translateLine(p1, p2, radius);
+        let op1 = lineIntersection(line1[0], line1[1], p3, p4);
+        let op2 = lineIntersection(line2[0], line2[1], p3, p4);
+        // 平行，回头路
+        if (!op1 || !op2) {
+            const len1 = points.length;
+            const point1 = points[len1 - 2];
+            const point2 = points[len1 - 1];
+            if (!point1 || !point2) {
+                continue;
+            }
+            op1 = [point1[0], point1[1]];
+            op2 = [point2[0], point2[1]];
+        }
+        op1[2] = currentp[2] || 0;
+        op2[2] = currentp[2] || 0;
+        // const [op1, op2] = calOffsetPoint(rRad, radius, p1);
         points.push(op1, op2);
         if (leftOnLine(op1, p1, p2)) {
             leftPoints.push(op1);
@@ -160,24 +186,11 @@ export function expandLine(line, options) {
         }
         i++;
     }
-    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 };
 }
 
+// eslint-disable-next-line no-unused-vars
 function calOffsetPoint(rad, radius, p) {
     const [x, y] = p;
     const z = p[2] || 0;
@@ -202,3 +215,70 @@ function leftOnLine(p, p1, p2) {
     const [x, y] = p;
     return (y1 - y2) * x + (x2 - x1) * y + x1 * y2 - x2 * y1 > 0;
 }
+
+/**
+ * 平移线
+ * @param {*} p1
+ * @param {*} p2
+ * @param {*} distance
+ * @returns
+ */
+function translateLine(p1, p2, distance) {
+    const dy = p2[1] - p1[1], dx = p2[0] - p1[0];
+    const rad = Math.atan2(dy, dx);
+    const rad1 = rad + Math.PI / 2;
+    let offsetX = Math.cos(rad1) * distance, offsetY = Math.sin(rad1) * distance;
+    const tp1 = [p1[0] + offsetX, p1[1] + offsetY];
+    const tp2 = [p2[0] + offsetX, p2[1] + offsetY];
+    const rad2 = rad - Math.PI / 2;
+    offsetX = Math.cos(rad2) * distance;
+    offsetY = Math.sin(rad2) * distance;
+    const tp3 = [p1[0] + offsetX, p1[1] + offsetY];
+    const tp4 = [p2[0] + offsetX, p2[1] + offsetY];
+    return [[tp1, tp2], [tp3, tp4]];
+}
+
+/**
+ * 直线交点
+ * @param {*} p1
+ * @param {*} p2
+ * @param {*} p3
+ * @param {*} p4
+ * @returns
+ */
+function lineIntersection(p1, p2, p3, p4) {
+    const dx1 = p2[0] - p1[0], dy1 = p2[1] - p1[1];
+    const dx2 = p4[0] - p3[0], dy2 = p4[1] - p3[1];
+    if (dx1 === 0 && dx2 === 0) {
+        return null;
+    }
+    if (dy1 === 0 && dy2 === 0) {
+        return null;
+    }
+
+    const k1 = dy1 / dx1;
+    const k2 = dy2 / dx2;
+
+    const b1 = p1[1] - k1 * p1[0];
+    const b2 = p3[1] - k2 * p3[0];
+
+    let x, y;
+
+    if (dx1 === 0) {
+        x = p1[0];
+        y = k2 * x + b2;
+    } else if (dx2 === 0) {
+        x = p3[0];
+        y = k1 * x + b1;
+    } else if (dy1 === 0) {
+        y = p1[1];
+        x = (y - b2) / k2;
+    } else if (dy2 === 0) {
+        y = p3[1];
+        x = (y - b1) / k1;
+    } else {
+        x = (b2 - b1) / (k1 - k2);
+        y = k1 * x + b1;
+    }
+    return [x, y];
+}