From 310d7dddec226cb4e106b89d542184f5d9dfceb3 Mon Sep 17 00:00:00 2001 From: Dan Ellis Date: Tue, 25 Oct 2022 16:24:26 +0100 Subject: [PATCH 1/2] Added dashed-array functionality to MeshLine.setGeometry --- src/THREE.MeshLine.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/THREE.MeshLine.js b/src/THREE.MeshLine.js index 433d637..8a081e7 100644 --- a/src/THREE.MeshLine.js +++ b/src/THREE.MeshLine.js @@ -222,14 +222,35 @@ this.previous.push(v[0], v[1], v[2]) this.previous.push(v[0], v[1], v[2]) + + this.makeDashArray = function (p,dashObj) { + // A function to allow dashed arrays + + const total = dashObj.dashArray.reduce ((partialSum, a) => partialSum + a, 0); + const state = p % total; + + var talley = dashObj.dashArray[0]; + for (let i = 1; i < dashObj.dashArray.length; i++) { + if (state > talley) { // odd even + return dashObj.width * (i % 2); + } + talley += dashObj.dashArray[i]; + } + } + + for (var j = 0; j < l; j++) { // sides this.side.push(1) this.side.push(-1) // widths - if (this.widthCallback) w = this.widthCallback(j / (l - 1)) - else w = 1 + if (typeof this.widthCallback == 'function') { + w = this.widthCallback(j / (l - 1)) + } else if (typeof this.widthCallback == 'object'){ + w = this.makeDashArray(j,this.widthCallback) + } else w = 1 + this.width.push(w) this.width.push(w) From 8f57c4f7fab73e41e91c379b8219cd0defd56e62 Mon Sep 17 00:00:00 2001 From: Dan Ellis Date: Tue, 25 Oct 2022 16:30:16 +0100 Subject: [PATCH 2/2] Updating the README to include dashed-array functionality. --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 5f113d9..5b12ccb 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,15 @@ line.setPoints(geometry, p => 2); // makes width 2 * lineWidth line.setPoints(geometry, p => 1 - p); // makes width taper line.setPoints(geometry, p => 2 + Math.sin(50 * p)); // makes width sinusoidal ``` +Should we want to use a dashed array similar to the css command stroke-dasharray, we can supply an object with the number of points we require to be shown / hidden and the total line width: + +```js + +const dashObj = { dashArray: [2,4,6,8,2], width:2 } + +const line = new MeshLine (); +line.setGeometry (geometry, dashObj) +``` ##### Create a MeshLineMaterial #####