Three.js: SVGLoader.pointsToStroke doesn't work when strokeLineJoin is 'round'

[nickmcmillan]

Using the geometry text stroke example from here: https://threejs.org/examples/#webgl_geometry_text_stroke

I've added the SVG style property strokeLineJoin: "round" to the geometry style, expecting that the stroke text would become rounded (as is the case with regular SVG). However the strokeText no longer renders at all. No messages logged to the console.

I've created a test case; https://codesandbox.io/s/charming-fermat-crsl5

The only change I've made is on line 61 where strokeLineJoin: "round" is added. I've commented it out for now. If you add it back the stroked text no longer renders.

Three.js version

• [x] r110

Browser

• [x] Chrome
• [x] Firefox
• [x] Safari

OS

• [x] macOS

[Mugen87]

/ping @yomboprime

[yomboprime]

If I execute your sandbox with line 61 uncommented I get error "Too many iterations in a loop". It seems some limitation of that website.

If I add the same line to the official example and run locally, I get this result which is not totally correct but almost it is:

I can debug those artifacts in some days or a week.

(Note to me in the future): It seems there is only a missing triangle when the path between two rounded corners is only one straight segment.

[nickmcmillan]

Wow, can't believe it was actually an issue with codesandbox - I should have checked it locally first. Many thanks @yomboprime.

FYI The artefacts aren't a deal breaker so no rush from me at all. Great work.