This is the SVG in question. It is getting rendered as:
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 );
}
}
}
}
} );