Merge pull request #13878 from mrdoob/svgloader

SVGLoader: Added support for multi data in some commands.

examples/js/loaders/SVGLoader.js

@@ -43,7 +43,7 @@ THREE.SVGLoader.prototype = {
 
 				case 'path':
 					style = parseStyle( node, style );
-					if ( style.fill !== 'none' ) paths.push( parsePathNode( node, style ) );
+					if ( style.fill !== 'none' && node.hasAttribute( 'd' ) ) paths.push( parsePathNode( node, style ) );
 					break;
 
 				case 'rect':
@@ -105,7 +105,7 @@ THREE.SVGLoader.prototype = {
 
 			var commands = d.match( /[a-df-z][^a-df-z]*/ig );
 
-			for ( var i = 0; i < commands.length; i ++ ) {
+			for ( var i = 0, l = commands.length; i < l; i ++ ) {
 
 				var command = commands[ i ];
 
@@ -116,51 +116,62 @@ THREE.SVGLoader.prototype = {
 
 					case 'M':
 						var numbers = parseFloats( data );
-						point.fromArray( numbers );
-						control.x = point.x;
-						control.y = point.y;
-						path.moveTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
+							point.x = numbers[ j + 0 ];
+							point.y = numbers[ j + 1 ];
+							control.x = point.x;
+							control.y = point.y;
+							path.moveTo( point.x, point.y );
+						}
 						break;
 
 					case 'H':
 						var numbers = parseFloats( data );
-						point.x = numbers[ 0 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
+							point.x = numbers[ j ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'V':
 						var numbers = parseFloats( data );
-						point.y = numbers[ 0 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
+							point.y = numbers[ j ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'L':
 						var numbers = parseFloats( data );
-						point.x = numbers[ 0 ];
-						point.y = numbers[ 1 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
+							point.x = numbers[ j + 0 ];
+							point.y = numbers[ j + 1 ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'C':
 						var numbers = parseFloats( data );
-						path.bezierCurveTo(
-							numbers[ 0 ],
-							numbers[ 1 ],
-							numbers[ 2 ],
-							numbers[ 3 ],
-							numbers[ 4 ],
-							numbers[ 5 ]
-						);
-						control.x = numbers[ 2 ];
-						control.y = numbers[ 3 ];
-						point.x = numbers[ 4 ];
-						point.y = numbers[ 5 ];
+						for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
+							path.bezierCurveTo(
+								numbers[ j + 0 ],
+								numbers[ j + 1 ],
+								numbers[ j + 2 ],
+								numbers[ j + 3 ],
+								numbers[ j + 4 ],
+								numbers[ j + 5 ]
+							);
+							control.x = numbers[ j + 2 ];
+							control.y = numbers[ j + 3 ];
+							point.x = numbers[ j + 4 ];
+							point.y = numbers[ j + 5 ];
+						}
 						break;
 
 					case 'S':
@@ -213,50 +224,60 @@ THREE.SVGLoader.prototype = {
 
 					case 'm':
 						var numbers = parseFloats( data );
-						point.x += numbers[ 0 ];
-						point.y += numbers[ 1 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.moveTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
+							point.x += numbers[ j + 0 ];
+							point.y += numbers[ j + 1 ];
+							control.x = point.x;
+							control.y = point.y;
+							path.moveTo( point.x, point.y );
+						}
 						break;
 
 					case 'h':
 						var numbers = parseFloats( data );
-						point.x += numbers[ 0 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
+							point.x += numbers[ j ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'v':
 						var numbers = parseFloats( data );
-						point.y += numbers[ 0 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
+							point.y += numbers[ j ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'l':
 						var numbers = parseFloats( data );
-						point.x += numbers[ 0 ];
-						point.y += numbers[ 1 ];
-						control.x = point.x;
-						control.y = point.y;
-						path.lineTo( point.x, point.y );
+						for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
+							point.x += numbers[ j + 0 ];
+							point.y += numbers[ j + 1 ];
+							control.x = point.x;
+							control.y = point.y;
+							path.lineTo( point.x, point.y );
+						}
 						break;
 
 					case 'c':
 						var numbers = parseFloats( data );
-						path.bezierCurveTo(
-							point.x + numbers[ 0 ],
-							point.y + numbers[ 1 ],
-							point.x + numbers[ 2 ],
-							point.y + numbers[ 3 ],
-							point.x + numbers[ 4 ],
-							point.y + numbers[ 5 ]
-						);
-						point.x += numbers[ 4 ];
-						point.y += numbers[ 5 ];
+						for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
+							path.bezierCurveTo(
+								point.x + numbers[ j + 0 ],
+								point.y + numbers[ j + 1 ],
+								point.x + numbers[ j + 2 ],
+								point.y + numbers[ j + 3 ],
+								point.x + numbers[ j + 4 ],
+								point.y + numbers[ j + 5 ]
+							);
+							point.x += numbers[ j + 4 ];
+							point.y += numbers[ j + 5 ];
+						}
 						break;
 
 					case 's':
@@ -315,10 +336,12 @@ THREE.SVGLoader.prototype = {
 						break;
 
 					default:
-						console.log( command );
+						console.warn( command );
 
 				}
 
+				// console.log( type, parseFloats( data ), parseFloats( data ).length  )
+
 			}
 
 			return path;
@@ -511,11 +534,24 @@ THREE.SVGLoader.prototype = {
 
 		//
 
+		console.log( 'THREE.SVGLoader' );
+
 		var paths = [];
+
+		console.time( 'THREE.SVGLoader: DOMParser' );
+
 		var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
 
+		console.timeEnd( 'THREE.SVGLoader: DOMParser' );
+
+		console.time( 'THREE.SVGLoader: Parse' );
+
 		parseNode( xml.documentElement, { fill: '#000' } );
 
+		// console.log( paths );
+
+		console.timeEnd( 'THREE.SVGLoader: Parse' );
+
 		return paths;
 
 	}