This is a follow-up to #19077. The following svg is rendered correctly in firefox, chrome, and android, but incorrectly in three.js.
Repro: https://jsfiddle.net/L3krx9ho/
This is the result if we use a similar approach like in the SVGLoader example:
https://jsfiddle.net/s7denhm3/
Probably related to #16950.
/cc @yomboprime
@eulertour
Do you know if your shape is specified as (a) shape-hole-hole, or (b) hole-shape-hole, or (c) hole-hole-shape?
Do you know if the winding order of the holes is opposite that of the shape?
It's shape-hole-hole (infinity outline, right hole, left hole), with the infinity outline going clockwise and the two holes going counterclockwise.
Well, that sounds correct...
/ping @mourner
I stumbled on the source of the problem...
let geometry = new THREE.ShapeBufferGeometry( shape, 11 ); // 10, and the default 12, break
...but I have no idea what is causing the triangulation to break. FWIW, there are a lot of duplicate points that are removed.
fiddle: https://jsfiddle.net/m4sn6gcq/
I will likely not be spending any more time on this.
Most helpful comment
I stumbled on the source of the problem...
...but I have no idea what is causing the triangulation to break. FWIW, there are a lot of duplicate points that are removed.
fiddle: https://jsfiddle.net/m4sn6gcq/
I will likely not be spending any more time on this.