Declarative line widths

[neftaly]

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

[neftaly]

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]

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]

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

[withintheruins14]

Please see #116 as I think something is wrong with this functionality when used in the declarative style