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 ##### 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)