SVGLoader stroke and other params support

Questions
1

Hi, guys!

I’d like to use three.js in combination with mapBox to achieve 2d svg icons placed on map in different locations. While I was successful to implement it by changing this example https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3, I’ve run into problems of SVGLoader implementation being not complete. For example strokes are ignored, some parts of svg completely missing. My question is whether there is known full(er) implementation to use or whether you can point me into some hints how to extend the https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js myself.

This is the code used for SVG load (based on svg example on threejs site):

var loader = new THREE.SVGLoader();
		loader.load( 'spatial.svg', function ( paths ) {
			var group = new THREE.Group();
			group.scale.multiplyScalar( 0.25 );
			group.position.x = - 70;
			group.position.y = 70;
			group.scale.y *= - 1;
			for ( var i = 0; i < paths.length; i ++ ) {
				var path = paths[ i ];
				var material = new THREE.MeshBasicMaterial( {
					color: path.color,
					side: THREE.DoubleSide,
					depthWrite: false
				} );
				var shapes = path.toShapes( true );
				for ( var j = 0; j < shapes.length; j ++ ) {
					var shape = shapes[ j ];
					var geometry = new THREE.ShapeBufferGeometry( shape );
					var mesh = new THREE.Mesh( geometry, material );
					group.add( mesh );
				}
			}
			this.scene.add( group );
		} );

This is the resulting image vs original (with desired complexity):
threejs_svg
real_svg

This is the svg data:

    <svg xmlns="http://www.w3.org/2000/svg" height="800">
      <g id="rotary_wing_heavy_1_friend">
        <path id="Path_20046" data-name="Path 20046" class="rotary_wing_heavy_1_friend-cls-2" stroke="#000" fill="#80e0ff" d="M25,50H86.07V90.713H25Z" />
        <path id="Path_20047" data-name="Path 20047" class="rotary_wing_heavy_1_friend-cls-3" stroke="#000" d="M60,85l16.285,6.107L92.571,85V97.214L76.285,91.107,60,97.214Z" />
      </g>
    </svg>
2

Yes, there are some open issues in context of SVGLoader for example:

It’s best to add or support existing feature requests if you want to extend the functionality of the loader. If you want to write the necessary code by yourself, you will have to study the implementation which is mainly based on three.js's curve and path API.

2 Likes