12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010 |
- /**
- * @author mrdoob / http://mrdoob.com/
- * @author zz85 / http://joshuakoo.com/
- * @author yomboprime / https://yombo.org
- */
- THREE.SVGLoader = function ( manager ) {
- this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
- };
- THREE.SVGLoader.prototype = {
- constructor: THREE.SVGLoader,
- load: function ( url, onLoad, onProgress, onError ) {
- var scope = this;
- var loader = new THREE.FileLoader( scope.manager );
- loader.setPath( scope.path );
- loader.load( url, function ( text ) {
- onLoad( scope.parse( text ) );
- }, onProgress, onError );
- },
- setPath: function ( value ) {
- this.path = value;
- return this;
- },
- parse: function ( text ) {
- function parseNode( node, style ) {
- if ( node.nodeType !== 1 ) return;
- var transform = getNodeTransform( node );
- var path = null;
- switch ( node.nodeName ) {
- case 'svg':
- break;
- case 'g':
- style = parseStyle( node, style );
- break;
- case 'path':
- style = parseStyle( node, style );
- if ( node.hasAttribute( 'd' ) && isVisible( style ) ) path = parsePathNode( node, style );
- break;
- case 'rect':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parseRectNode( node, style );
- break;
- case 'polygon':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parsePolygonNode( node, style );
- break;
- case 'polyline':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parsePolylineNode( node, style );
- break;
- case 'circle':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parseCircleNode( node, style );
- break;
- case 'ellipse':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parseEllipseNode( node, style );
- break;
- case 'line':
- style = parseStyle( node, style );
- if ( isVisible( style ) ) path = parseLineNode( node, style );
- break;
- default:
- console.log( node );
- }
- if ( path ) {
- transformPath( path, currentTransform );
- paths.push( path );
- }
- var nodes = node.childNodes;
- for ( var i = 0; i < nodes.length; i ++ ) {
- parseNode( nodes[ i ], style );
- }
- if ( transform ) {
- currentTransform.copy( transformStack.pop() );
- }
- }
- function parsePathNode( node, style ) {
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- var point = new THREE.Vector2();
- var control = new THREE.Vector2();
- var firstPoint = new THREE.Vector2();
- var isFirstPoint = true;
- var doSetFirstPoint = false;
- var d = node.getAttribute( 'd' );
- // console.log( d );
- var commands = d.match( /[a-df-z][^a-df-z]*/ig );
- for ( var i = 0, l = commands.length; i < l; i ++ ) {
- var command = commands[ i ];
- var type = command.charAt( 0 );
- var data = command.substr( 1 ).trim();
- if ( isFirstPoint === true ) {
- doSetFirstPoint = true;
- isFirstPoint = false;
- }
- switch ( type ) {
- case 'M':
- var numbers = parseFloats( data );
- 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;
- if ( j === 0 ) {
- path.moveTo( point.x, point.y );
- } else {
- path.lineTo( point.x, point.y );
- }
- }
- break;
- case 'H':
- var numbers = parseFloats( data );
- 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 );
- 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 );
- 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 );
- 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':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
- path.bezierCurveTo(
- getReflection( point.x, control.x ),
- getReflection( point.y, control.y ),
- numbers[ j + 0 ],
- numbers[ j + 1 ],
- numbers[ j + 2 ],
- numbers[ j + 3 ]
- );
- control.x = numbers[ j + 0 ];
- control.y = numbers[ j + 1 ];
- point.x = numbers[ j + 2 ];
- point.y = numbers[ j + 3 ];
- }
- break;
- case 'Q':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
- path.quadraticCurveTo(
- numbers[ j + 0 ],
- numbers[ j + 1 ],
- numbers[ j + 2 ],
- numbers[ j + 3 ]
- );
- control.x = numbers[ j + 0 ];
- control.y = numbers[ j + 1 ];
- point.x = numbers[ j + 2 ];
- point.y = numbers[ j + 3 ];
- }
- break;
- case 'T':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
- var rx = getReflection( point.x, control.x );
- var ry = getReflection( point.y, control.y );
- path.quadraticCurveTo(
- rx,
- ry,
- numbers[ j + 0 ],
- numbers[ j + 1 ]
- );
- control.x = rx;
- control.y = ry;
- point.x = numbers[ j + 0 ];
- point.y = numbers[ j + 1 ];
- }
- break;
- case 'A':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
- var start = point.clone();
- point.x = numbers[ j + 5 ];
- point.y = numbers[ j + 6 ];
- control.x = point.x;
- control.y = point.y;
- parseArcCommand(
- path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
- );
- }
- break;
- //
- case 'm':
- var numbers = parseFloats( data );
- 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;
- if ( j === 0 ) {
- path.moveTo( point.x, point.y );
- } else {
- path.lineTo( point.x, point.y );
- }
- }
- break;
- case 'h':
- var numbers = parseFloats( data );
- 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 );
- 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 );
- 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 );
- 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 ]
- );
- control.x = point.x + numbers[ j + 2 ];
- control.y = point.y + numbers[ j + 3 ];
- point.x += numbers[ j + 4 ];
- point.y += numbers[ j + 5 ];
- }
- break;
- case 's':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
- path.bezierCurveTo(
- getReflection( point.x, control.x ),
- getReflection( point.y, control.y ),
- point.x + numbers[ j + 0 ],
- point.y + numbers[ j + 1 ],
- point.x + numbers[ j + 2 ],
- point.y + numbers[ j + 3 ]
- );
- control.x = point.x + numbers[ j + 0 ];
- control.y = point.y + numbers[ j + 1 ];
- point.x += numbers[ j + 2 ];
- point.y += numbers[ j + 3 ];
- }
- break;
- case 'q':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
- path.quadraticCurveTo(
- point.x + numbers[ j + 0 ],
- point.y + numbers[ j + 1 ],
- point.x + numbers[ j + 2 ],
- point.y + numbers[ j + 3 ]
- );
- control.x = point.x + numbers[ j + 0 ];
- control.y = point.y + numbers[ j + 1 ];
- point.x += numbers[ j + 2 ];
- point.y += numbers[ j + 3 ];
- }
- break;
- case 't':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
- var rx = getReflection( point.x, control.x );
- var ry = getReflection( point.y, control.y );
- path.quadraticCurveTo(
- rx,
- ry,
- point.x + numbers[ j + 0 ],
- point.y + numbers[ j + 1 ]
- );
- control.x = rx;
- control.y = ry;
- point.x = point.x + numbers[ j + 0 ];
- point.y = point.y + numbers[ j + 1 ];
- }
- break;
- case 'a':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
- var start = point.clone();
- point.x += numbers[ j + 5 ];
- point.y += numbers[ j + 6 ];
- control.x = point.x;
- control.y = point.y;
- parseArcCommand(
- path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
- );
- }
- break;
- //
- case 'Z':
- case 'z':
- path.currentPath.autoClose = true;
- if ( path.currentPath.curves.length > 0 ) {
- // Reset point to beginning of Path
- point.copy( firstPoint );
- path.currentPath.currentPoint.copy( point );
- isFirstPoint = true;
- }
- break;
- default:
- console.warn( command );
- }
- // console.log( type, parseFloats( data ), parseFloats( data ).length )
- if ( doSetFirstPoint === true ) {
- firstPoint.copy( point );
- doSetFirstPoint = false;
- }
- }
- return path;
- }
- /**
- * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
- * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
- * From
- * rx ry x-axis-rotation large-arc-flag sweep-flag x y
- * To
- * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
- */
- function parseArcCommand( path, rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, start, end ) {
- x_axis_rotation = x_axis_rotation * Math.PI / 180;
- // Ensure radii are positive
- rx = Math.abs( rx );
- ry = Math.abs( ry );
- // Compute (x1′, y1′)
- var dx2 = ( start.x - end.x ) / 2.0;
- var dy2 = ( start.y - end.y ) / 2.0;
- var x1p = Math.cos( x_axis_rotation ) * dx2 + Math.sin( x_axis_rotation ) * dy2;
- var y1p = - Math.sin( x_axis_rotation ) * dx2 + Math.cos( x_axis_rotation ) * dy2;
- // Compute (cx′, cy′)
- var rxs = rx * rx;
- var rys = ry * ry;
- var x1ps = x1p * x1p;
- var y1ps = y1p * y1p;
- // Ensure radii are large enough
- var cr = x1ps / rxs + y1ps / rys;
- if ( cr > 1 ) {
- // scale up rx,ry equally so cr == 1
- var s = Math.sqrt( cr );
- rx = s * rx;
- ry = s * ry;
- rxs = rx * rx;
- rys = ry * ry;
- }
- var dq = ( rxs * y1ps + rys * x1ps );
- var pq = ( rxs * rys - dq ) / dq;
- var q = Math.sqrt( Math.max( 0, pq ) );
- if ( large_arc_flag === sweep_flag ) q = - q;
- var cxp = q * rx * y1p / ry;
- var cyp = - q * ry * x1p / rx;
- // Step 3: Compute (cx, cy) from (cx′, cy′)
- var cx = Math.cos( x_axis_rotation ) * cxp - Math.sin( x_axis_rotation ) * cyp + ( start.x + end.x ) / 2;
- var cy = Math.sin( x_axis_rotation ) * cxp + Math.cos( x_axis_rotation ) * cyp + ( start.y + end.y ) / 2;
- // Step 4: Compute θ1 and Δθ
- var theta = svgAngle( 1, 0, ( x1p - cxp ) / rx, ( y1p - cyp ) / ry );
- var delta = svgAngle( ( x1p - cxp ) / rx, ( y1p - cyp ) / ry, ( - x1p - cxp ) / rx, ( - y1p - cyp ) / ry ) % ( Math.PI * 2 );
- path.currentPath.absellipse( cx, cy, rx, ry, theta, theta + delta, sweep_flag === 0, x_axis_rotation );
- }
- function svgAngle( ux, uy, vx, vy ) {
- var dot = ux * vx + uy * vy;
- var len = Math.sqrt( ux * ux + uy * uy ) * Math.sqrt( vx * vx + vy * vy );
- var ang = Math.acos( Math.max( -1, Math.min( 1, dot / len ) ) ); // floating point precision, slightly over values appear
- if ( ( ux * vy - uy * vx ) < 0 ) ang = - ang;
- return ang;
- }
- /*
- * According to https://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute
- * rounded corner should be rendered to elliptical arc, but bezier curve does the job well enough
- */
- function parseRectNode( node, style ) {
- var x = parseFloat( node.getAttribute( 'x' ) || 0 );
- var y = parseFloat( node.getAttribute( 'y' ) || 0 );
- var rx = parseFloat( node.getAttribute( 'rx' ) || 0 );
- var ry = parseFloat( node.getAttribute( 'ry' ) || 0 );
- var w = parseFloat( node.getAttribute( 'width' ) );
- var h = parseFloat( node.getAttribute( 'height' ) );
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- path.moveTo( x + 2 * rx, y );
- path.lineTo( x + w - 2 * rx, y );
- if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
- path.lineTo( x + w, y + h - 2 * ry );
- if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
- path.lineTo( x + 2 * rx, y + h );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
- }
- path.lineTo( x, y + 2 * ry );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
- }
- return path;
- }
- function parsePolygonNode( node, style ) {
- function iterator( match, a, b ) {
- var x = parseFloat( a );
- var y = parseFloat( b );
- if ( index === 0 ) {
- path.moveTo( x, y );
- } else {
- path.lineTo( x, y );
- }
- index ++;
- }
- var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- var index = 0;
- node.getAttribute( 'points' ).replace(regex, iterator);
- path.currentPath.autoClose = true;
- return path;
- }
- function parsePolylineNode( node, style ) {
- function iterator( match, a, b ) {
- var x = parseFloat( a );
- var y = parseFloat( b );
- if ( index === 0 ) {
- path.moveTo( x, y );
- } else {
- path.lineTo( x, y );
- }
- index ++;
- }
- var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- var index = 0;
- node.getAttribute( 'points' ).replace(regex, iterator);
- path.currentPath.autoClose = false;
- return path;
- }
- function parseCircleNode( node, style ) {
- var x = parseFloat( node.getAttribute( 'cx' ) );
- var y = parseFloat( node.getAttribute( 'cy' ) );
- var r = parseFloat( node.getAttribute( 'r' ) );
- var subpath = new THREE.Path();
- subpath.absarc( x, y, r, 0, Math.PI * 2 );
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- path.subPaths.push( subpath );
- return path;
- }
- function parseEllipseNode( node, style ) {
- var x = parseFloat( node.getAttribute( 'cx' ) );
- var y = parseFloat( node.getAttribute( 'cy' ) );
- var rx = parseFloat( node.getAttribute( 'rx' ) );
- var ry = parseFloat( node.getAttribute( 'ry' ) );
- var subpath = new THREE.Path();
- subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
- var path = new THREE.ShapePath();
- path.color.setStyle( style.fill );
- path.subPaths.push( subpath );
- return path;
- }
- function parseLineNode( node, style ) {
- var x1 = parseFloat( node.getAttribute( 'x1' ) );
- var y1 = parseFloat( node.getAttribute( 'y1' ) );
- var x2 = parseFloat( node.getAttribute( 'x2' ) );
- var y2 = parseFloat( node.getAttribute( 'y2' ) );
- var path = new THREE.ShapePath();
- path.moveTo( x1, y1 );
- path.lineTo( x2, y2 );
- path.currentPath.autoClose = false;
- return path;
- }
- //
- function parseStyle( node, style ) {
- style = Object.assign( {}, style ); // clone style
- if ( node.hasAttribute( 'fill' ) ) style.fill = node.getAttribute( 'fill' );
- if ( node.style.fill !== '' ) style.fill = node.style.fill;
- return style;
- }
- function isVisible( style ) {
- return style.fill !== 'none' && style.fill !== 'transparent';
- }
- // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
- function getReflection( a, b ) {
- return a - ( b - a );
- }
- function parseFloats( string ) {
- var array = string.split( /[\s,]+|(?=\s?[+\-])/ );
- for ( var i = 0; i < array.length; i ++ ) {
- var number = array[ i ];
- // Handle values like 48.6037.7.8
- // TODO Find a regex for this
- if ( number.indexOf( '.' ) !== number.lastIndexOf( '.' ) ) {
- var split = number.split( '.' );
- for ( var s = 2; s < split.length; s ++ ) {
- array.splice( i + s - 1, 0, '0.' + split[ s ] );
- }
- }
- array[ i ] = parseFloat( number );
- }
- return array;
- }
- function getNodeTransform( node ) {
- if ( ! node.hasAttribute( 'transform' ) ) {
- return null;
- }
- var transform = parseTransformNode( node );
- if ( transform ) {
- if ( transformStack.length > 0 ) {
- transform.premultiply( transformStack[ transformStack.length - 1 ] );
- }
- currentTransform.copy( transform );
- transformStack.push( transform );
- }
- return transform;
- }
- function parseTransformNode( node ) {
- var transform = new THREE.Matrix3();
- var currentTransform = tempTransform0;
- var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
- for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex-- ) {
- var transformText = transformsTexts[ tIndex ];
- var openParPos = transformText.indexOf( "(" );
- var closeParPos = transformText.indexOf( ")" );
- if ( openParPos > 0 && openParPos < closeParPos ) {
- var transformType = transformText.substr( 0, openParPos );
- var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
- currentTransform.identity();
- switch ( transformType ) {
- case "translate":
- if ( array.length >= 1 ) {
- var tx = array[ 0 ];
- var ty = tx;
- if ( array.length >= 2 ) {
- ty = array[ 1 ];
- }
- currentTransform.translate( tx, ty );
- }
- break;
- case "rotate":
- if ( array.length >= 1 ) {
- var angle = 0;
- var cx = 0;
- var cy = 0;
- // Angle
- angle = - array[ 0 ] * Math.PI / 180;
- if ( array.length >= 3 ) {
- // Center x, y
- cx = array[ 1 ];
- cy = array[ 2 ];
- }
- // Rotate around center (cx, cy)
- tempTransform1.identity().translate( -cx, -cy );
- tempTransform2.identity().rotate( angle );
- tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
- tempTransform1.identity().translate( cx, cy );
- currentTransform.multiplyMatrices( tempTransform1, tempTransform3 );
- }
- break;
- case "scale":
- if ( array.length >= 1 ) {
- var scaleX = array[ 0 ];
- var scaleY = scaleX;
- if ( array.length >= 2 ) {
- scaleY = array[ 1 ];
- }
- currentTransform.scale( scaleX, scaleY );
- }
- break;
- case "skewX":
- if ( array.length === 1 ) {
- currentTransform.set(
- 1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
- 0, 1, 0,
- 0, 0, 1
- );
- }
- break;
- case "skewY":
- if ( array.length === 1 ) {
- currentTransform.set(
- 1, 0, 0,
- Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
- 0, 0, 1
- );
- }
- break;
- case "matrix":
- if ( array.length === 6 ) {
- currentTransform.set(
- array[ 0 ], array[ 2 ], array[ 4 ],
- array[ 1 ], array[ 3 ], array[ 5 ],
- 0, 0, 1
- );
- }
- break;
- }
- }
- transform.premultiply( currentTransform );
- }
- return transform;
- }
- function transformPath( path, m ) {
- function transfVec2( v2 ) {
- tempV3.set( v2.x, v2.y, 1 ).applyMatrix3( m );
- v2.set( tempV3.x, tempV3.y );
- }
- var isRotated = isTransformRotated( m );
- var tempV2 = new THREE.Vector2();
- var tempV3 = new THREE.Vector3();
- var subPaths = path.subPaths;
- for ( var i = 0, n = subPaths.length; i < n; i++ ) {
- var subPath = subPaths[ i ];
- var curves = subPath.curves;
- for ( var j = 0; j < curves.length; j++ ) {
- var curve = curves[ j ];
- if ( curve.isLineCurve ) {
- transfVec2( curve.v1 );
- transfVec2( curve.v2 );
- } else if ( curve.isCubicBezierCurve ) {
- transfVec2( curve.v0 );
- transfVec2( curve.v1 );
- transfVec2( curve.v2 );
- transfVec2( curve.v3 );
- } else if ( curve.isQuadraticBezierCurve ) {
- transfVec2( curve.v0 );
- transfVec2( curve.v1 );
- transfVec2( curve.v2 );
- } else if ( curve.isEllipseCurve ) {
- if ( isRotated ) {
- console.warn( "SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented." );
- }
- tempV2.set( curve.aX, curve.aY );
- transfVec2( tempV2 );
- curve.aX = tempV2.x;
- curve.aY = tempV2.y;
- curve.xRadius *= getTransformScaleX( m );
- curve.yRadius *= getTransformScaleY( m );
- }
- }
- }
- }
- function isTransformRotated( m ) {
- return m.elements[ 1 ] !== 0 || m.elements[ 3 ] !== 0;
- }
- function getTransformScaleX( m ) {
- var te = m.elements;
- return Math.sqrt( te[ 0 ] * te[ 0 ] + te[ 1 ] * te[ 1 ] )
- }
- function getTransformScaleY( m ) {
- var te = m.elements;
- return Math.sqrt( te[ 3 ] * te[ 3 ] + te[ 4 ] * te[ 4 ] )
- }
- //
- console.log( 'THREE.SVGLoader' );
- var paths = [];
- var transformStack = [];
- var tempTransform0 = new THREE.Matrix3();
- var tempTransform1 = new THREE.Matrix3();
- var tempTransform2 = new THREE.Matrix3();
- var tempTransform3 = new THREE.Matrix3();
- var currentTransform = new THREE.Matrix3();
- 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;
- }
- };
|