SVGs with holes inside hole failing to load properly with SVG Loader

Questions
, , ,
1

concen
This is the SVG in question. It is getting rendered as:

concen
concen636×631 6.34 KB

My code for SVG Loader is as follows:

const loader = new SVGLoader();
        let thisPointer = this;
        loader.load( this.url, function ( data ) {
          const paths = data.paths;
          const group = new THREE.Group();
          group.name = thisPointer.name
          group.scale.multiplyScalar( thisPointer.multiplyScalar );
          group.scale.y *= - 1;
          
          
          for ( let i = 0; i < paths.length; i ++ ) {
    
            const path = paths[ i ];
    
            const fillColor = path.userData.style.fill;
            if ( fillColor !== undefined && fillColor !== 'none' ) {
    
              const material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( fillColor ).convertSRGBToLinear(),
                opacity: path.userData.style.fillOpacity,
                // transparent: true,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
              } );
              material.transparent = true;
    
              const shapes = SVGLoader.createShapes( path );
    
              for ( let j = 0; j < shapes.length; j ++ ) {
    
                const shape = shapes[ j ];
                const geometry = new THREE.ShapeGeometry( shape );
                const mesh = new THREE.Mesh( geometry, material );
                
                  group.add( mesh );

                
              }
    
            }
    
            const strokeColor = path.userData.style.stroke;
    
            if ( strokeColor !== undefined && strokeColor !== 'none' ) {
    
              const material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( strokeColor ).convertSRGBToLinear(),
                opacity: path.userData.style.strokeOpacity,
                transparent: true,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
              } );
              material.transparent = true;
              for ( let j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
    
                const subPath = path.subPaths[ j ];
    
                const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
                if ( geometry ) {
    
                  const mesh = new THREE.Mesh( geometry, material );
                  
                  group.add( mesh );
    
                }
    
              }
    
            }
            
          }
        } );
2

Try organizing it as 10 circles with 10 holes. That is, each circle only has one hole.

1 Like