search

spite / THREE.MeshLine

Mesh replacement for THREE.Line
MIT License
2.13k stars 379 forks source link

Declarative line widths #108

Closed neftaly closed 3 years ago

neftaly commented 3 years ago

I'm excited to see #102 land! Has anyone looked into supporting varying line widths with declarative components (for tapers, etc)?

neftaly commented 3 years ago

One approach might be with an array of widths: <meshLine attach='geometry' points={points} widths={[1, 2, 2, 1]} />

Another approach might be to use 4D points (X, Y, Z, width), though I'm not sure if this is idiomatic.

ryanking1809 commented 3 years ago

You can do this using widthCallback which will take the same function as the second arg of .setPoints() described in the readme. I think this will taper from a width of 1->2 at the center of the line.

<meshLine attach='geometry' points={points} widthCallback={p => 1 + (Math.abs(p - 0.5)-0.5)*-2} />

Note p is the percentage value along the line. So if you wanted to use an array of points, you might need to do something like.

const pointWidths = [1, 2, 2, 1]
<meshLine attach='geometry' points={points} widthCallback={p => pointWidths[Math.round(p*(pointWidths.length-1))] />
neftaly commented 3 years ago

Thanks! I have made a small PR to the readme regarding this.

withintheruins14 commented 3 years ago

Please see https://github.com/spite/THREE.MeshLine/issues/116 as I think something is wrong with this functionality when used in the declarative style