From 5ff782c153c625d1b9c4bd26516f159d2ad0a092 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Mon, 16 Apr 2018 17:24:37 -0700 Subject: [PATCH] SVGLoader: Added support for multi data in some commands. --- examples/js/loaders/SVGLoader.js | 156 +++++++++++++++++++------------ 1 file changed, 96 insertions(+), 60 deletions(-) diff --git a/examples/js/loaders/SVGLoader.js b/examples/js/loaders/SVGLoader.js index 5e367740047c0..d5656243abea0 100644 --- a/examples/js/loaders/SVGLoader.js +++ b/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; }