SVGLoader and extrude make a wrong scene

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?

1 Like

It seems you ran into this issue:

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 );



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

1 Like

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: