1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425 |
- THREE.SVGLoader = function ( manager ) {
- THREE.Loader.call( this, manager );
- // Default dots per inch
- this.defaultDPI = 90;
- // Accepted units: 'mm', 'cm', 'in', 'pt', 'pc', 'px'
- this.defaultUnit = 'px';
- };
- THREE.SVGLoader.prototype = Object.assign( Object.create( THREE.Loader.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.setRequestHeader( scope.requestHeader );
- loader.setWithCredentials( scope.withCredentials );
- loader.load( url, function ( text ) {
- try {
- onLoad( scope.parse( text ) );
- } catch ( e ) {
- if ( onError ) {
- onError( e );
- } else {
- console.error( e );
- }
- scope.manager.itemError( url );
- }
- }, onProgress, onError );
- },
- parse: function ( text ) {
- var scope = this;
- function parseNode( node, style ) {
- if ( node.nodeType !== 1 ) return;
- var transform = getNodeTransform( node );
- var traverseChildNodes = true;
- var path = null;
- switch ( node.nodeName ) {
- case 'svg':
- break;
- case 'style':
- parseCSSStylesheet( node );
- break;
- case 'g':
- style = parseStyle( node, style );
- break;
- case 'path':
- style = parseStyle( node, style );
- if ( node.hasAttribute( 'd' ) ) path = parsePathNode( node );
- break;
- case 'rect':
- style = parseStyle( node, style );
- path = parseRectNode( node );
- break;
- case 'polygon':
- style = parseStyle( node, style );
- path = parsePolygonNode( node );
- break;
- case 'polyline':
- style = parseStyle( node, style );
- path = parsePolylineNode( node );
- break;
- case 'circle':
- style = parseStyle( node, style );
- path = parseCircleNode( node );
- break;
- case 'ellipse':
- style = parseStyle( node, style );
- path = parseEllipseNode( node );
- break;
- case 'line':
- style = parseStyle( node, style );
- path = parseLineNode( node );
- break;
- case 'defs':
- traverseChildNodes = false;
- break;
- case 'use':
- style = parseStyle( node, style );
- var usedNodeId = node.href.baseVal.substring( 1 );
- var usedNode = node.viewportElement.getElementById( usedNodeId );
- if ( usedNode ) {
- parseNode( usedNode, style );
- } else {
- console.warn( 'SVGLoader: \'use node\' references non-existent node id: ' + usedNodeId );
- }
- break;
- default:
- // console.log( node );
- }
- if ( path ) {
- if ( style.fill !== undefined && style.fill !== 'none' ) {
- path.color.setStyle( style.fill );
- }
- transformPath( path, currentTransform );
- paths.push( path );
- path.userData = { node: node, style: style };
- }
- if ( traverseChildNodes ) {
- var nodes = node.childNodes;
- for ( var i = 0; i < nodes.length; i ++ ) {
- parseNode( nodes[ i ], style );
- }
- }
- if ( transform ) {
- transformStack.pop();
- if ( transformStack.length > 0 ) {
- currentTransform.copy( transformStack[ transformStack.length - 1 ] );
- } else {
- currentTransform.identity();
- }
- }
- }
- function parsePathNode( node ) {
- var path = new THREE.ShapePath();
- 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 );
- }
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- break;
- case 'A':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
- // skip command if start point == end point
- if ( numbers[ j + 5 ] == point.x && numbers[ j + 6 ] == point.y ) continue;
- 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
- );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( 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 );
- }
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- 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 ];
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
- }
- break;
- case 'a':
- var numbers = parseFloats( data );
- for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
- // skip command if no displacement
- if ( numbers[ j + 5 ] == 0 && numbers[ j + 6 ] == 0 ) continue;
- 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
- );
- if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( 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 )
- doSetFirstPoint = false;
- }
- return path;
- }
- function parseCSSStylesheet( node ) {
- if ( ! node.sheet || ! node.sheet.cssRules || ! node.sheet.cssRules.length ) return;
- for ( var i = 0; i < node.sheet.cssRules.length; i ++ ) {
- var stylesheet = node.sheet.cssRules[ i ];
- if ( stylesheet.type !== 1 ) continue;
- var selectorList = stylesheet.selectorText
- .split( /,/gm )
- .filter( Boolean )
- .map( i => i.trim() );
- for ( var j = 0; j < selectorList.length; j ++ ) {
- stylesheets[ selectorList[ j ] ] = Object.assign(
- stylesheets[ selectorList[ j ] ] || {},
- stylesheet.style
- );
- }
- }
- }
- /**
- * 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 ) {
- if ( rx == 0 || ry == 0 ) {
- // draw a line if either of the radii == 0
- path.lineTo( end.x, end.y );
- return;
- }
- 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 ) {
- var x = parseFloatWithUnits( node.getAttribute( 'x' ) || 0 );
- var y = parseFloatWithUnits( node.getAttribute( 'y' ) || 0 );
- var rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || 0 );
- var ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || 0 );
- var w = parseFloatWithUnits( node.getAttribute( 'width' ) );
- var h = parseFloatWithUnits( node.getAttribute( 'height' ) );
- var path = new THREE.ShapePath();
- 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 ) {
- function iterator( match, a, b ) {
- var x = parseFloatWithUnits( a );
- var y = parseFloatWithUnits( 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();
- var index = 0;
- node.getAttribute( 'points' ).replace( regex, iterator );
- path.currentPath.autoClose = true;
- return path;
- }
- function parsePolylineNode( node ) {
- function iterator( match, a, b ) {
- var x = parseFloatWithUnits( a );
- var y = parseFloatWithUnits( 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();
- var index = 0;
- node.getAttribute( 'points' ).replace( regex, iterator );
- path.currentPath.autoClose = false;
- return path;
- }
- function parseCircleNode( node ) {
- var x = parseFloatWithUnits( node.getAttribute( 'cx' ) );
- var y = parseFloatWithUnits( node.getAttribute( 'cy' ) );
- var r = parseFloatWithUnits( node.getAttribute( 'r' ) );
- var subpath = new THREE.Path();
- subpath.absarc( x, y, r, 0, Math.PI * 2 );
- var path = new THREE.ShapePath();
- path.subPaths.push( subpath );
- return path;
- }
- function parseEllipseNode( node ) {
- var x = parseFloatWithUnits( node.getAttribute( 'cx' ) );
- var y = parseFloatWithUnits( node.getAttribute( 'cy' ) );
- var rx = parseFloatWithUnits( node.getAttribute( 'rx' ) );
- var ry = parseFloatWithUnits( node.getAttribute( 'ry' ) );
- var subpath = new THREE.Path();
- subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
- var path = new THREE.ShapePath();
- path.subPaths.push( subpath );
- return path;
- }
- function parseLineNode( node ) {
- var x1 = parseFloatWithUnits( node.getAttribute( 'x1' ) );
- var y1 = parseFloatWithUnits( node.getAttribute( 'y1' ) );
- var x2 = parseFloatWithUnits( node.getAttribute( 'x2' ) );
- var y2 = parseFloatWithUnits( 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
- var stylesheetStyles = {};
- if ( node.hasAttribute( 'class' ) ) {
- var classSelectors = node.getAttribute( 'class' )
- .split( /\s/ )
- .filter( Boolean )
- .map( i => i.trim() );
- for ( var i = 0; i < classSelectors.length; i ++ ) {
- stylesheetStyles = Object.assign( stylesheetStyles, stylesheets[ '.' + classSelectors[ i ] ] );
- }
- }
- if ( node.hasAttribute( 'id' ) ) {
- stylesheetStyles = Object.assign( stylesheetStyles, stylesheets[ '#' + node.getAttribute( 'id' ) ] );
- }
- function addStyle( svgName, jsName, adjustFunction ) {
- if ( adjustFunction === undefined ) adjustFunction = function copy( v ) {
- if ( v.startsWith( 'url' ) ) console.warn( 'SVGLoader: url access in attributes is not implemented.' );
- return v;
- };
- if ( node.hasAttribute( svgName ) ) style[ jsName ] = adjustFunction( node.getAttribute( svgName ) );
- if ( stylesheetStyles[ svgName ] ) style[ jsName ] = adjustFunction( stylesheetStyles[ svgName ] );
- if ( node.style && node.style[ svgName ] !== '' ) style[ jsName ] = adjustFunction( node.style[ svgName ] );
- }
- function clamp( v ) {
- return Math.max( 0, Math.min( 1, parseFloatWithUnits( v ) ) );
- }
- function positive( v ) {
- return Math.max( 0, parseFloatWithUnits( v ) );
- }
- addStyle( 'fill', 'fill' );
- addStyle( 'fill-opacity', 'fillOpacity', clamp );
- addStyle( 'opacity', 'opacity', clamp );
- addStyle( 'stroke', 'stroke' );
- addStyle( 'stroke-opacity', 'strokeOpacity', clamp );
- addStyle( 'stroke-width', 'strokeWidth', positive );
- addStyle( 'stroke-linejoin', 'strokeLineJoin' );
- addStyle( 'stroke-linecap', 'strokeLineCap' );
- addStyle( 'stroke-miterlimit', 'strokeMiterLimit', positive );
- addStyle( 'visibility', 'visibility' );
- return style;
- }
- // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
- function getReflection( a, b ) {
- return a - ( b - a );
- }
- // from https://github.com/ppvg/svg-numbers (MIT License)
- function parseFloats( input ) {
- if ( typeof input !== 'string' ) {
- throw new TypeError( 'Invalid input: ' + typeof input );
- }
- // Character groups
- var RE = {
- SEPARATOR: /[ \t\r\n\,.\-+]/,
- WHITESPACE: /[ \t\r\n]/,
- DIGIT: /[\d]/,
- SIGN: /[-+]/,
- POINT: /\./,
- COMMA: /,/,
- EXP: /e/i
- };
- // States
- var SEP = 0;
- var INT = 1;
- var FLOAT = 2;
- var EXP = 3;
- var state = SEP;
- var seenComma = true;
- var result = [], number = '', exponent = '';
- function throwSyntaxError( current, i, partial ) {
- var error = new SyntaxError( 'Unexpected character "' + current + '" at index ' + i + '.' );
- error.partial = partial;
- throw error;
- }
- function newNumber() {
- if ( number !== '' ) {
- if ( exponent === '' ) result.push( Number( number ) );
- else result.push( Number( number ) * Math.pow( 10, Number( exponent ) ) );
- }
- number = '';
- exponent = '';
- }
- var current, i = 0, length = input.length;
- for ( i = 0; i < length; i ++ ) {
- current = input[ i ];
- // parse until next number
- if ( state === SEP ) {
- // eat whitespace
- if ( RE.WHITESPACE.test( current ) ) {
- continue;
- }
- // start new number
- if ( RE.DIGIT.test( current ) || RE.SIGN.test( current ) ) {
- state = INT;
- number = current;
- continue;
- }
- if ( RE.POINT.test( current ) ) {
- state = FLOAT;
- number = current;
- continue;
- }
- // throw on double commas (e.g. "1, , 2")
- if ( RE.COMMA.test( current ) ) {
- if ( seenComma ) {
- throwSyntaxError( current, i, result );
- }
- seenComma = true;
- }
- }
- // parse integer part
- if ( state === INT ) {
- if ( RE.DIGIT.test( current ) ) {
- number += current;
- continue;
- }
- if ( RE.POINT.test( current ) ) {
- number += current;
- state = FLOAT;
- continue;
- }
- if ( RE.EXP.test( current ) ) {
- state = EXP;
- continue;
- }
- // throw on double signs ("-+1"), but not on sign as separator ("-1-2")
- if ( RE.SIGN.test( current )
- && number.length === 1
- && RE.SIGN.test( number[ 0 ] ) ) {
- throwSyntaxError( current, i, result );
- }
- }
- // parse decimal part
- if ( state === FLOAT ) {
- if ( RE.DIGIT.test( current ) ) {
- number += current;
- continue;
- }
- if ( RE.EXP.test( current ) ) {
- state = EXP;
- continue;
- }
- // throw on double decimal points (e.g. "1..2")
- if ( RE.POINT.test( current ) && number[ number.length - 1 ] === '.' ) {
- throwSyntaxError( current, i, result );
- }
- }
- // parse exponent part
- if ( state == EXP ) {
- if ( RE.DIGIT.test( current ) ) {
- exponent += current;
- continue;
- }
- if ( RE.SIGN.test( current ) ) {
- if ( exponent === '' ) {
- exponent += current;
- continue;
- }
- if ( exponent.length === 1 && RE.SIGN.test( exponent ) ) {
- throwSyntaxError( current, i, result );
- }
- }
- }
- // end of number
- if ( RE.WHITESPACE.test( current ) ) {
- newNumber();
- state = SEP;
- seenComma = false;
- } else if ( RE.COMMA.test( current ) ) {
- newNumber();
- state = SEP;
- seenComma = true;
- } else if ( RE.SIGN.test( current ) ) {
- newNumber();
- state = INT;
- number = current;
- } else if ( RE.POINT.test( current ) ) {
- newNumber();
- state = FLOAT;
- number = current;
- } else {
- throwSyntaxError( current, i, result );
- }
- }
- // add the last number found (if any)
- newNumber();
- return result;
- }
- // Units
- var units = [ 'mm', 'cm', 'in', 'pt', 'pc', 'px' ];
- // Conversion: [ fromUnit ][ toUnit ] (-1 means dpi dependent)
- var unitConversion = {
- 'mm': {
- 'mm': 1,
- 'cm': 0.1,
- 'in': 1 / 25.4,
- 'pt': 72 / 25.4,
- 'pc': 6 / 25.4,
- 'px': - 1
- },
- 'cm': {
- 'mm': 10,
- 'cm': 1,
- 'in': 1 / 2.54,
- 'pt': 72 / 2.54,
- 'pc': 6 / 2.54,
- 'px': - 1
- },
- 'in': {
- 'mm': 25.4,
- 'cm': 2.54,
- 'in': 1,
- 'pt': 72,
- 'pc': 6,
- 'px': - 1
- },
- 'pt': {
- 'mm': 25.4 / 72,
- 'cm': 2.54 / 72,
- 'in': 1 / 72,
- 'pt': 1,
- 'pc': 6 / 72,
- 'px': - 1
- },
- 'pc': {
- 'mm': 25.4 / 6,
- 'cm': 2.54 / 6,
- 'in': 1 / 6,
- 'pt': 72 / 6,
- 'pc': 1,
- 'px': - 1
- },
- 'px': {
- 'px': 1
- }
- };
- function parseFloatWithUnits( string ) {
- var theUnit = 'px';
- if ( typeof string === 'string' || string instanceof String ) {
- for ( var i = 0, n = units.length; i < n; i ++ ) {
- var u = units[ i ];
- if ( string.endsWith( u ) ) {
- theUnit = u;
- string = string.substring( 0, string.length - u.length );
- break;
- }
- }
- }
- var scale = undefined;
- if ( theUnit === 'px' && scope.defaultUnit !== 'px' ) {
- // Conversion scale from pixels to inches, then to default units
- scale = unitConversion[ 'in' ][ scope.defaultUnit ] / scope.defaultDPI;
- } else {
- scale = unitConversion[ theUnit ][ scope.defaultUnit ];
- if ( scale < 0 ) {
- // Conversion scale to pixels
- scale = unitConversion[ theUnit ][ 'in' ] * scope.defaultDPI;
- }
- }
- return scale * parseFloat( string );
- }
- // Transforms
- function getNodeTransform( node ) {
- if ( ! ( node.hasAttribute( 'transform' ) || ( node.nodeName === 'use' && ( node.hasAttribute( 'x' ) || node.hasAttribute( 'y' ) ) ) ) ) {
- return null;
- }
- var transform = parseNodeTransform( node );
- if ( transformStack.length > 0 ) {
- transform.premultiply( transformStack[ transformStack.length - 1 ] );
- }
- currentTransform.copy( transform );
- transformStack.push( transform );
- return transform;
- }
- function parseNodeTransform( node ) {
- var transform = new THREE.Matrix3();
- var currentTransform = tempTransform0;
- if ( node.nodeName === 'use' && ( node.hasAttribute( 'x' ) || node.hasAttribute( 'y' ) ) ) {
- var tx = parseFloatWithUnits( node.getAttribute( 'x' ) );
- var ty = parseFloatWithUnits( node.getAttribute( 'y' ) );
- transform.translate( tx, ty );
- }
- if ( node.hasAttribute( 'transform' ) ) {
- var transformsTexts = node.getAttribute( 'transform' ).split( ')' );
- for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex -- ) {
- var transformText = transformsTexts[ tIndex ].trim();
- if ( transformText === '' ) continue;
- var openParPos = transformText.indexOf( '(' );
- var closeParPos = transformText.length;
- 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 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 ] );
- }
- //
- var paths = [];
- var stylesheets = {};
- var transformStack = [];
- var tempTransform0 = new THREE.Matrix3();
- var tempTransform1 = new THREE.Matrix3();
- var tempTransform2 = new THREE.Matrix3();
- var tempTransform3 = new THREE.Matrix3();
- var tempV2 = new THREE.Vector2();
- var tempV3 = new THREE.Vector3();
- var currentTransform = new THREE.Matrix3();
- var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
- parseNode( xml.documentElement, {
- fill: '#000',
- fillOpacity: 1,
- strokeOpacity: 1,
- strokeWidth: 1,
- strokeLineJoin: 'miter',
- strokeLineCap: 'butt',
- strokeMiterLimit: 4
- } );
- var data = { paths: paths, xml: xml.documentElement };
- // console.log( paths );
- return data;
- }
- } );
- THREE.SVGLoader.getStrokeStyle = function ( width, color, lineJoin, lineCap, miterLimit ) {
- // Param width: Stroke width
- // Param color: As returned by THREE.Color.getStyle()
- // Param lineJoin: One of "round", "bevel", "miter" or "miter-limit"
- // Param lineCap: One of "round", "square" or "butt"
- // Param miterLimit: Maximum join length, in multiples of the "width" parameter (join is truncated if it exceeds that distance)
- // Returns style object
- width = width !== undefined ? width : 1;
- color = color !== undefined ? color : '#000';
- lineJoin = lineJoin !== undefined ? lineJoin : 'miter';
- lineCap = lineCap !== undefined ? lineCap : 'butt';
- miterLimit = miterLimit !== undefined ? miterLimit : 4;
- return {
- strokeColor: color,
- strokeWidth: width,
- strokeLineJoin: lineJoin,
- strokeLineCap: lineCap,
- strokeMiterLimit: miterLimit
- };
- };
- THREE.SVGLoader.pointsToStroke = function ( points, style, arcDivisions, minDistance ) {
- // Generates a stroke with some witdh around the given path.
- // The path can be open or closed (last point equals to first point)
- // Param points: Array of Vector2D (the path). Minimum 2 points.
- // Param style: Object with SVG properties as returned by SVGLoader.getStrokeStyle(), or SVGLoader.parse() in the path.userData.style object
- // Params arcDivisions: Arc divisions for round joins and endcaps. (Optional)
- // Param minDistance: Points closer to this distance will be merged. (Optional)
- // Returns BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
- var vertices = [];
- var normals = [];
- var uvs = [];
- if ( THREE.SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs ) === 0 ) {
- return null;
- }
- var geometry = new THREE.BufferGeometry();
- geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
- geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
- geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
- return geometry;
- };
- THREE.SVGLoader.pointsToStrokeWithBuffers = function () {
- var tempV2_1 = new THREE.Vector2();
- var tempV2_2 = new THREE.Vector2();
- var tempV2_3 = new THREE.Vector2();
- var tempV2_4 = new THREE.Vector2();
- var tempV2_5 = new THREE.Vector2();
- var tempV2_6 = new THREE.Vector2();
- var tempV2_7 = new THREE.Vector2();
- var lastPointL = new THREE.Vector2();
- var lastPointR = new THREE.Vector2();
- var point0L = new THREE.Vector2();
- var point0R = new THREE.Vector2();
- var currentPointL = new THREE.Vector2();
- var currentPointR = new THREE.Vector2();
- var nextPointL = new THREE.Vector2();
- var nextPointR = new THREE.Vector2();
- var innerPoint = new THREE.Vector2();
- var outerPoint = new THREE.Vector2();
- return function ( points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset ) {
- // This function can be called to update existing arrays or buffers.
- // Accepts same parameters as pointsToStroke, plus the buffers and optional offset.
- // Param vertexOffset: Offset vertices to start writing in the buffers (3 elements/vertex for vertices and normals, and 2 elements/vertex for uvs)
- // Returns number of written vertices / normals / uvs pairs
- // if 'vertices' parameter is undefined no triangles will be generated, but the returned vertices count will still be valid (useful to preallocate the buffers)
- // 'normals' and 'uvs' buffers are optional
- arcDivisions = arcDivisions !== undefined ? arcDivisions : 12;
- minDistance = minDistance !== undefined ? minDistance : 0.001;
- vertexOffset = vertexOffset !== undefined ? vertexOffset : 0;
- // First ensure there are no duplicated points
- points = removeDuplicatedPoints( points );
- var numPoints = points.length;
- if ( numPoints < 2 ) return 0;
- var isClosed = points[ 0 ].equals( points[ numPoints - 1 ] );
- var currentPoint;
- var previousPoint = points[ 0 ];
- var nextPoint;
- var strokeWidth2 = style.strokeWidth / 2;
- var deltaU = 1 / ( numPoints - 1 );
- var u0 = 0;
- var innerSideModified;
- var joinIsOnLeftSide;
- var isMiter;
- var initialJoinIsOnLeftSide = false;
- var numVertices = 0;
- var currentCoordinate = vertexOffset * 3;
- var currentCoordinateUV = vertexOffset * 2;
- // Get initial left and right stroke points
- getNormal( points[ 0 ], points[ 1 ], tempV2_1 ).multiplyScalar( strokeWidth2 );
- lastPointL.copy( points[ 0 ] ).sub( tempV2_1 );
- lastPointR.copy( points[ 0 ] ).add( tempV2_1 );
- point0L.copy( lastPointL );
- point0R.copy( lastPointR );
- for ( var iPoint = 1; iPoint < numPoints; iPoint ++ ) {
- currentPoint = points[ iPoint ];
- // Get next point
- if ( iPoint === numPoints - 1 ) {
- if ( isClosed ) {
- // Skip duplicated initial point
- nextPoint = points[ 1 ];
- } else nextPoint = undefined;
- } else {
- nextPoint = points[ iPoint + 1 ];
- }
- // Normal of previous segment in tempV2_1
- var normal1 = tempV2_1;
- getNormal( previousPoint, currentPoint, normal1 );
- tempV2_3.copy( normal1 ).multiplyScalar( strokeWidth2 );
- currentPointL.copy( currentPoint ).sub( tempV2_3 );
- currentPointR.copy( currentPoint ).add( tempV2_3 );
- var u1 = u0 + deltaU;
- innerSideModified = false;
- if ( nextPoint !== undefined ) {
- // Normal of next segment in tempV2_2
- getNormal( currentPoint, nextPoint, tempV2_2 );
- tempV2_3.copy( tempV2_2 ).multiplyScalar( strokeWidth2 );
- nextPointL.copy( currentPoint ).sub( tempV2_3 );
- nextPointR.copy( currentPoint ).add( tempV2_3 );
- joinIsOnLeftSide = true;
- tempV2_3.subVectors( nextPoint, previousPoint );
- if ( normal1.dot( tempV2_3 ) < 0 ) {
- joinIsOnLeftSide = false;
- }
- if ( iPoint === 1 ) initialJoinIsOnLeftSide = joinIsOnLeftSide;
- tempV2_3.subVectors( nextPoint, currentPoint );
- tempV2_3.normalize();
- var dot = Math.abs( normal1.dot( tempV2_3 ) );
- // If path is straight, don't create join
- if ( dot !== 0 ) {
- // Compute inner and outer segment intersections
- var miterSide = strokeWidth2 / dot;
- tempV2_3.multiplyScalar( - miterSide );
- tempV2_4.subVectors( currentPoint, previousPoint );
- tempV2_5.copy( tempV2_4 ).setLength( miterSide ).add( tempV2_3 );
- innerPoint.copy( tempV2_5 ).negate();
- var miterLength2 = tempV2_5.length();
- var segmentLengthPrev = tempV2_4.length();
- tempV2_4.divideScalar( segmentLengthPrev );
- tempV2_6.subVectors( nextPoint, currentPoint );
- var segmentLengthNext = tempV2_6.length();
- tempV2_6.divideScalar( segmentLengthNext );
- // Check that previous and next segments doesn't overlap with the innerPoint of intersection
- if ( tempV2_4.dot( innerPoint ) < segmentLengthPrev && tempV2_6.dot( innerPoint ) < segmentLengthNext ) {
- innerSideModified = true;
- }
- outerPoint.copy( tempV2_5 ).add( currentPoint );
- innerPoint.add( currentPoint );
- isMiter = false;
- if ( innerSideModified ) {
- if ( joinIsOnLeftSide ) {
- nextPointR.copy( innerPoint );
- currentPointR.copy( innerPoint );
- } else {
- nextPointL.copy( innerPoint );
- currentPointL.copy( innerPoint );
- }
- } else {
- // The segment triangles are generated here if there was overlapping
- makeSegmentTriangles();
- }
- switch ( style.strokeLineJoin ) {
- case 'bevel':
- makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
- break;
- case 'round':
- // Segment triangles
- createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
- // Join triangles
- if ( joinIsOnLeftSide ) {
- makeCircularSector( currentPoint, currentPointL, nextPointL, u1, 0 );
- } else {
- makeCircularSector( currentPoint, nextPointR, currentPointR, u1, 1 );
- }
- break;
- case 'miter':
- case 'miter-clip':
- default:
- var miterFraction = ( strokeWidth2 * style.strokeMiterLimit ) / miterLength2;
- if ( miterFraction < 1 ) {
- // The join miter length exceeds the miter limit
- if ( style.strokeLineJoin !== 'miter-clip' ) {
- makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
- break;
- } else {
- // Segment triangles
- createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
- // Miter-clip join triangles
- if ( joinIsOnLeftSide ) {
- tempV2_6.subVectors( outerPoint, currentPointL ).multiplyScalar( miterFraction ).add( currentPointL );
- tempV2_7.subVectors( outerPoint, nextPointL ).multiplyScalar( miterFraction ).add( nextPointL );
- addVertex( currentPointL, u1, 0 );
- addVertex( tempV2_6, u1, 0 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( tempV2_6, u1, 0 );
- addVertex( tempV2_7, u1, 0 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( tempV2_7, u1, 0 );
- addVertex( nextPointL, u1, 0 );
- } else {
- tempV2_6.subVectors( outerPoint, currentPointR ).multiplyScalar( miterFraction ).add( currentPointR );
- tempV2_7.subVectors( outerPoint, nextPointR ).multiplyScalar( miterFraction ).add( nextPointR );
- addVertex( currentPointR, u1, 1 );
- addVertex( tempV2_6, u1, 1 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( tempV2_6, u1, 1 );
- addVertex( tempV2_7, u1, 1 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( tempV2_7, u1, 1 );
- addVertex( nextPointR, u1, 1 );
- }
- }
- } else {
- // Miter join segment triangles
- if ( innerSideModified ) {
- // Optimized segment + join triangles
- if ( joinIsOnLeftSide ) {
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( outerPoint, u1, 0 );
- addVertex( lastPointR, u0, 1 );
- addVertex( outerPoint, u1, 0 );
- addVertex( innerPoint, u1, 1 );
- } else {
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( outerPoint, u1, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( innerPoint, u1, 0 );
- addVertex( outerPoint, u1, 1 );
- }
- if ( joinIsOnLeftSide ) {
- nextPointL.copy( outerPoint );
- } else {
- nextPointR.copy( outerPoint );
- }
- } else {
- // Add extra miter join triangles
- if ( joinIsOnLeftSide ) {
- addVertex( currentPointL, u1, 0 );
- addVertex( outerPoint, u1, 0 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( outerPoint, u1, 0 );
- addVertex( nextPointL, u1, 0 );
- } else {
- addVertex( currentPointR, u1, 1 );
- addVertex( outerPoint, u1, 1 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( outerPoint, u1, 1 );
- addVertex( nextPointR, u1, 1 );
- }
- }
- isMiter = true;
- }
- break;
- }
- } else {
- // The segment triangles are generated here when two consecutive points are collinear
- makeSegmentTriangles();
- }
- } else {
- // The segment triangles are generated here if it is the ending segment
- makeSegmentTriangles();
- }
- if ( ! isClosed && iPoint === numPoints - 1 ) {
- // Start line endcap
- addCapGeometry( points[ 0 ], point0L, point0R, joinIsOnLeftSide, true, u0 );
- }
- // Increment loop variables
- u0 = u1;
- previousPoint = currentPoint;
- lastPointL.copy( nextPointL );
- lastPointR.copy( nextPointR );
- }
- if ( ! isClosed ) {
- // Ending line endcap
- addCapGeometry( currentPoint, currentPointL, currentPointR, joinIsOnLeftSide, false, u1 );
- } else if ( innerSideModified && vertices ) {
- // Modify path first segment vertices to adjust to the segments inner and outer intersections
- var lastOuter = outerPoint;
- var lastInner = innerPoint;
- if ( initialJoinIsOnLeftSide !== joinIsOnLeftSide ) {
- lastOuter = innerPoint;
- lastInner = outerPoint;
- }
- if ( joinIsOnLeftSide ) {
- if ( isMiter || initialJoinIsOnLeftSide ) {
- lastInner.toArray( vertices, 0 * 3 );
- lastInner.toArray( vertices, 3 * 3 );
- if ( isMiter ) {
- lastOuter.toArray( vertices, 1 * 3 );
- }
- }
- } else {
- if ( isMiter || ! initialJoinIsOnLeftSide ) {
- lastInner.toArray( vertices, 1 * 3 );
- lastInner.toArray( vertices, 3 * 3 );
- if ( isMiter ) {
- lastOuter.toArray( vertices, 0 * 3 );
- }
- }
- }
- }
- return numVertices;
- // -- End of algorithm
- // -- Functions
- function getNormal( p1, p2, result ) {
- result.subVectors( p2, p1 );
- return result.set( - result.y, result.x ).normalize();
- }
- function addVertex( position, u, v ) {
- if ( vertices ) {
- vertices[ currentCoordinate ] = position.x;
- vertices[ currentCoordinate + 1 ] = position.y;
- vertices[ currentCoordinate + 2 ] = 0;
- if ( normals ) {
- normals[ currentCoordinate ] = 0;
- normals[ currentCoordinate + 1 ] = 0;
- normals[ currentCoordinate + 2 ] = 1;
- }
- currentCoordinate += 3;
- if ( uvs ) {
- uvs[ currentCoordinateUV ] = u;
- uvs[ currentCoordinateUV + 1 ] = v;
- currentCoordinateUV += 2;
- }
- }
- numVertices += 3;
- }
- function makeCircularSector( center, p1, p2, u, v ) {
- // param p1, p2: Points in the circle arc.
- // p1 and p2 are in clockwise direction.
- tempV2_1.copy( p1 ).sub( center ).normalize();
- tempV2_2.copy( p2 ).sub( center ).normalize();
- var angle = Math.PI;
- var dot = tempV2_1.dot( tempV2_2 );
- if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
- angle /= arcDivisions;
- tempV2_3.copy( p1 );
- for ( var i = 0, il = arcDivisions - 1; i < il; i ++ ) {
- tempV2_4.copy( tempV2_3 ).rotateAround( center, angle );
- addVertex( tempV2_3, u, v );
- addVertex( tempV2_4, u, v );
- addVertex( center, u, 0.5 );
- tempV2_3.copy( tempV2_4 );
- }
- addVertex( tempV2_4, u, v );
- addVertex( p2, u, v );
- addVertex( center, u, 0.5 );
- }
- function makeSegmentTriangles() {
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( currentPointL, u1, 0 );
- addVertex( lastPointR, u0, 1 );
- addVertex( currentPointL, u1, 1 );
- addVertex( currentPointR, u1, 0 );
- }
- function makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u ) {
- if ( innerSideModified ) {
- // Optimized segment + bevel triangles
- if ( joinIsOnLeftSide ) {
- // Path segments triangles
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( currentPointL, u1, 0 );
- addVertex( lastPointR, u0, 1 );
- addVertex( currentPointL, u1, 0 );
- addVertex( innerPoint, u1, 1 );
- // Bevel join triangle
- addVertex( currentPointL, u, 0 );
- addVertex( nextPointL, u, 0 );
- addVertex( innerPoint, u, 0.5 );
- } else {
- // Path segments triangles
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( currentPointR, u1, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( innerPoint, u1, 0 );
- addVertex( currentPointR, u1, 1 );
- // Bevel join triangle
- addVertex( currentPointR, u, 1 );
- addVertex( nextPointR, u, 0 );
- addVertex( innerPoint, u, 0.5 );
- }
- } else {
- // Bevel join triangle. The segment triangles are done in the main loop
- if ( joinIsOnLeftSide ) {
- addVertex( currentPointL, u, 0 );
- addVertex( nextPointL, u, 0 );
- addVertex( currentPoint, u, 0.5 );
- } else {
- addVertex( currentPointR, u, 1 );
- addVertex( nextPointR, u, 0 );
- addVertex( currentPoint, u, 0.5 );
- }
- }
- }
- function createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified ) {
- if ( innerSideModified ) {
- if ( joinIsOnLeftSide ) {
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( currentPointL, u1, 0 );
- addVertex( lastPointR, u0, 1 );
- addVertex( currentPointL, u1, 0 );
- addVertex( innerPoint, u1, 1 );
- addVertex( currentPointL, u0, 0 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( innerPoint, u1, 1 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( nextPointL, u0, 0 );
- addVertex( innerPoint, u1, 1 );
- } else {
- addVertex( lastPointR, u0, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( currentPointR, u1, 1 );
- addVertex( lastPointL, u0, 0 );
- addVertex( innerPoint, u1, 0 );
- addVertex( currentPointR, u1, 1 );
- addVertex( currentPointR, u0, 1 );
- addVertex( innerPoint, u1, 0 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( currentPoint, u1, 0.5 );
- addVertex( innerPoint, u1, 0 );
- addVertex( nextPointR, u0, 1 );
- }
- }
- }
- function addCapGeometry( center, p1, p2, joinIsOnLeftSide, start, u ) {
- // param center: End point of the path
- // param p1, p2: Left and right cap points
- switch ( style.strokeLineCap ) {
- case 'round':
- if ( start ) {
- makeCircularSector( center, p2, p1, u, 0.5 );
- } else {
- makeCircularSector( center, p1, p2, u, 0.5 );
- }
- break;
- case 'square':
- if ( start ) {
- tempV2_1.subVectors( p1, center );
- tempV2_2.set( tempV2_1.y, - tempV2_1.x );
- tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
- tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
- // Modify already existing vertices
- if ( joinIsOnLeftSide ) {
- tempV2_3.toArray( vertices, 1 * 3 );
- tempV2_4.toArray( vertices, 0 * 3 );
- tempV2_4.toArray( vertices, 3 * 3 );
- } else {
- tempV2_3.toArray( vertices, 1 * 3 );
- tempV2_3.toArray( vertices, 3 * 3 );
- tempV2_4.toArray( vertices, 0 * 3 );
- }
- } else {
- tempV2_1.subVectors( p2, center );
- tempV2_2.set( tempV2_1.y, - tempV2_1.x );
- tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
- tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
- var vl = vertices.length;
- // Modify already existing vertices
- if ( joinIsOnLeftSide ) {
- tempV2_3.toArray( vertices, vl - 1 * 3 );
- tempV2_4.toArray( vertices, vl - 2 * 3 );
- tempV2_4.toArray( vertices, vl - 4 * 3 );
- } else {
- tempV2_3.toArray( vertices, vl - 2 * 3 );
- tempV2_4.toArray( vertices, vl - 1 * 3 );
- tempV2_4.toArray( vertices, vl - 4 * 3 );
- }
- }
- break;
- case 'butt':
- default:
- // Nothing to do here
- break;
- }
- }
- function removeDuplicatedPoints( points ) {
- // Creates a new array if necessary with duplicated points removed.
- // This does not remove duplicated initial and ending points of a closed path.
- var dupPoints = false;
- for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
- if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
- dupPoints = true;
- break;
- }
- }
- if ( ! dupPoints ) return points;
- var newPoints = [];
- newPoints.push( points[ 0 ] );
- for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
- if ( points[ i ].distanceTo( points[ i + 1 ] ) >= minDistance ) {
- newPoints.push( points[ i ] );
- }
- }
- newPoints.push( points[ points.length - 1 ] );
- return newPoints;
- }
- };
- }();
|