SVGLoader and extrude make a wrong scene

[tolyanor]

I have a simple task: load svg and extrude it. Also I have SVG (link) they look like this:

and it working good with threejs:

My second SVG (link) very similar to the first

but threejs make wrong scene:

I maked a codepen for reproduce this situation. In JS in lines 29, 30 you can select wrong or valid SVG

How I can resolve this issue?

[Mugen87]

It seems you ran into this issue:

Issue: ShapePath: Triangulation problem

Adding the following code section at the end of ShapePath.toShapes() (before the return statement) seems to solve the issue:

for ( ; i < newShapeHoles.length; i ++ ) {

	tmpHoles = newShapeHoles[ i ];

	for ( var j = 0, jl = tmpHoles.length; j < jl; j ++ ) {

		tmpShape.holes.push( tmpHoles[ j ].h );

	}

}

[tolyanor]

I found the solution of my problem. Problem was in subpaths order. Both SVGs have one path and subpath are in d attribute of path In valid SVG outer contour was in first place. In ‘wrong’ SVG in start of subpath list was HOLE. I make my SVGs with paperjs. In wrong svg I moved outer contour subpath to first place. And now all right:

I hope this helps someone

[tolyanor]

Also I faced with one more problem: threejs make wrong extrude if SVG have closed paths are counterclockwise Here is ‘wrong’ svg example:

threejs extrude result:

if I make reorient (in paperjs call CompoundPath.reorient(1,1)) all right: