12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654 |
- ( function () {
- class SVGLoader extends THREE.Loader {
- constructor( manager ) {
- super( manager ); // Default dots per inch
- this.defaultDPI = 90; // Accepted units: 'mm', 'cm', 'in', 'pt', 'pc', 'px'
- this.defaultUnit = 'px';
- }
- load( url, onLoad, onProgress, onError ) {
- const scope = this;
- const 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( text ) {
- const scope = this;
- function parseNode( node, style ) {
- if ( node.nodeType !== 1 ) return;
- const transform = getNodeTransform( node );
- let isDefsNode = false;
- let 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':
- isDefsNode = true;
- break;
- case 'use':
- style = parseStyle( node, style );
- const href = node.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ) || '';
- const usedNodeId = href.substring( 1 );
- const 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
- };
- }
- const childNodes = node.childNodes;
- for ( let i = 0; i < childNodes.length; i ++ ) {
- const node = childNodes[ i ];
- if ( isDefsNode && node.nodeName !== 'style' && node.nodeName !== 'defs' ) {
- // Ignore everything in defs except CSS style definitions
- // and nested defs, because it is OK by the standard to have
- // <style/> there.
- continue;
- }
- parseNode( node, style );
- }
- if ( transform ) {
- transformStack.pop();
- if ( transformStack.length > 0 ) {
- currentTransform.copy( transformStack[ transformStack.length - 1 ] );
- } else {
- currentTransform.identity();
- }
- }
- }
- function parsePathNode( node ) {
- const path = new THREE.ShapePath();
- const point = new THREE.Vector2();
- const control = new THREE.Vector2();
- const firstPoint = new THREE.Vector2();
- let isFirstPoint = true;
- let doSetFirstPoint = false;
- const d = node.getAttribute( 'd' ); // console.log( d );
- const commands = d.match( /[a-df-z][^a-df-z]*/ig );
- for ( let i = 0, l = commands.length; i < l; i ++ ) {
- const command = commands[ i ];
- const type = command.charAt( 0 );
- const data = command.slice( 1 ).trim();
- if ( isFirstPoint === true ) {
- doSetFirstPoint = true;
- isFirstPoint = false;
- }
- let numbers;
- switch ( type ) {
- case 'M':
- numbers = parseFloats( data );
- for ( let 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 ) firstPoint.copy( point );
- }
- break;
- case 'H':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let j = 0, jl = numbers.length; j < jl; j += 2 ) {
- const rx = getReflection( point.x, control.x );
- const 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':
- numbers = parseFloats( data, [ 3, 4 ], 7 );
- for ( let 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;
- const 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':
- numbers = parseFloats( data );
- for ( let 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 ) firstPoint.copy( point );
- }
- break;
- case 'h':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let 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':
- numbers = parseFloats( data );
- for ( let j = 0, jl = numbers.length; j < jl; j += 2 ) {
- const rx = getReflection( point.x, control.x );
- const 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':
- numbers = parseFloats( data, [ 3, 4 ], 7 );
- for ( let j = 0, jl = numbers.length; j < jl; j += 7 ) {
- // skip command if no displacement
- if ( numbers[ j + 5 ] == 0 && numbers[ j + 6 ] == 0 ) continue;
- const 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 THREE.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 ( let i = 0; i < node.sheet.cssRules.length; i ++ ) {
- const stylesheet = node.sheet.cssRules[ i ];
- if ( stylesheet.type !== 1 ) continue;
- const selectorList = stylesheet.selectorText.split( /,/gm ).filter( Boolean ).map( i => i.trim() );
- for ( let j = 0; j < selectorList.length; j ++ ) {
- // Remove empty rules
- const definitions = Object.fromEntries( Object.entries( stylesheet.style ).filter( ( [ , v ] ) => v !== '' ) );
- stylesheets[ selectorList[ j ] ] = Object.assign( stylesheets[ selectorList[ j ] ] || {}, definitions );
- }
- }
- }
- /**
- * 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')
- const dx2 = ( start.x - end.x ) / 2.0;
- const dy2 = ( start.y - end.y ) / 2.0;
- const x1p = Math.cos( x_axis_rotation ) * dx2 + Math.sin( x_axis_rotation ) * dy2;
- const y1p = - Math.sin( x_axis_rotation ) * dx2 + Math.cos( x_axis_rotation ) * dy2; // Compute (cx', cy')
- let rxs = rx * rx;
- let rys = ry * ry;
- const x1ps = x1p * x1p;
- const y1ps = y1p * y1p; // Ensure radii are large enough
- const cr = x1ps / rxs + y1ps / rys;
- if ( cr > 1 ) {
- // scale up rx,ry equally so cr == 1
- const s = Math.sqrt( cr );
- rx = s * rx;
- ry = s * ry;
- rxs = rx * rx;
- rys = ry * ry;
- }
- const dq = rxs * y1ps + rys * x1ps;
- const pq = ( rxs * rys - dq ) / dq;
- let q = Math.sqrt( Math.max( 0, pq ) );
- if ( large_arc_flag === sweep_flag ) q = - q;
- const cxp = q * rx * y1p / ry;
- const cyp = - q * ry * x1p / rx; // Step 3: Compute (cx, cy) from (cx', cy')
- const cx = Math.cos( x_axis_rotation ) * cxp - Math.sin( x_axis_rotation ) * cyp + ( start.x + end.x ) / 2;
- const cy = Math.sin( x_axis_rotation ) * cxp + Math.cos( x_axis_rotation ) * cyp + ( start.y + end.y ) / 2; // Step 4: Compute θ1 and Δθ
- const theta = svgAngle( 1, 0, ( x1p - cxp ) / rx, ( y1p - cyp ) / ry );
- const 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 ) {
- const dot = ux * vx + uy * vy;
- const len = Math.sqrt( ux * ux + uy * uy ) * Math.sqrt( vx * vx + vy * vy );
- let 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 ) {
- const x = parseFloatWithUnits( node.getAttribute( 'x' ) || 0 );
- const y = parseFloatWithUnits( node.getAttribute( 'y' ) || 0 );
- const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || node.getAttribute( 'ry' ) || 0 );
- const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || node.getAttribute( 'rx' ) || 0 );
- const w = parseFloatWithUnits( node.getAttribute( 'width' ) );
- const h = parseFloatWithUnits( node.getAttribute( 'height' ) ); // Ellipse arc to Bezier approximation Coefficient (Inversed). See:
- // https://spencermortensen.com/articles/bezier-circle/
- const bci = 1 - 0.551915024494;
- const path = new THREE.ShapePath(); // top left
- path.moveTo( x + rx, y ); // top right
- path.lineTo( x + w - rx, y );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x + w - rx * bci, y, x + w, y + ry * bci, x + w, y + ry );
- } // bottom right
- path.lineTo( x + w, y + h - ry );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x + w, y + h - ry * bci, x + w - rx * bci, y + h, x + w - rx, y + h );
- } // bottom left
- path.lineTo( x + rx, y + h );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x + rx * bci, y + h, x, y + h - ry * bci, x, y + h - ry );
- } // back to top left
- path.lineTo( x, y + ry );
- if ( rx !== 0 || ry !== 0 ) {
- path.bezierCurveTo( x, y + ry * bci, x + rx * bci, y, x + rx, y );
- }
- return path;
- }
- function parsePolygonNode( node ) {
- function iterator( match, a, b ) {
- const x = parseFloatWithUnits( a );
- const y = parseFloatWithUnits( b );
- if ( index === 0 ) {
- path.moveTo( x, y );
- } else {
- path.lineTo( x, y );
- }
- index ++;
- }
- const regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
- const path = new THREE.ShapePath();
- let index = 0;
- node.getAttribute( 'points' ).replace( regex, iterator );
- path.currentPath.autoClose = true;
- return path;
- }
- function parsePolylineNode( node ) {
- function iterator( match, a, b ) {
- const x = parseFloatWithUnits( a );
- const y = parseFloatWithUnits( b );
- if ( index === 0 ) {
- path.moveTo( x, y );
- } else {
- path.lineTo( x, y );
- }
- index ++;
- }
- const regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
- const path = new THREE.ShapePath();
- let index = 0;
- node.getAttribute( 'points' ).replace( regex, iterator );
- path.currentPath.autoClose = false;
- return path;
- }
- function parseCircleNode( node ) {
- const x = parseFloatWithUnits( node.getAttribute( 'cx' ) || 0 );
- const y = parseFloatWithUnits( node.getAttribute( 'cy' ) || 0 );
- const r = parseFloatWithUnits( node.getAttribute( 'r' ) || 0 );
- const subpath = new THREE.Path();
- subpath.absarc( x, y, r, 0, Math.PI * 2 );
- const path = new THREE.ShapePath();
- path.subPaths.push( subpath );
- return path;
- }
- function parseEllipseNode( node ) {
- const x = parseFloatWithUnits( node.getAttribute( 'cx' ) || 0 );
- const y = parseFloatWithUnits( node.getAttribute( 'cy' ) || 0 );
- const rx = parseFloatWithUnits( node.getAttribute( 'rx' ) || 0 );
- const ry = parseFloatWithUnits( node.getAttribute( 'ry' ) || 0 );
- const subpath = new THREE.Path();
- subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
- const path = new THREE.ShapePath();
- path.subPaths.push( subpath );
- return path;
- }
- function parseLineNode( node ) {
- const x1 = parseFloatWithUnits( node.getAttribute( 'x1' ) || 0 );
- const y1 = parseFloatWithUnits( node.getAttribute( 'y1' ) || 0 );
- const x2 = parseFloatWithUnits( node.getAttribute( 'x2' ) || 0 );
- const y2 = parseFloatWithUnits( node.getAttribute( 'y2' ) || 0 );
- const 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
- let stylesheetStyles = {};
- if ( node.hasAttribute( 'class' ) ) {
- const classSelectors = node.getAttribute( 'class' ).split( /\s/ ).filter( Boolean ).map( i => i.trim() );
- for ( let 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( 'fill-rule', 'fillRule' );
- 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, flags, stride ) {
- if ( typeof input !== 'string' ) {
- throw new TypeError( 'Invalid input: ' + typeof input );
- } // Character groups
- const RE = {
- SEPARATOR: /[ \t\r\n\,.\-+]/,
- WHITESPACE: /[ \t\r\n]/,
- DIGIT: /[\d]/,
- SIGN: /[-+]/,
- POINT: /\./,
- COMMA: /,/,
- EXP: /e/i,
- FLAGS: /[01]/
- }; // States
- const SEP = 0;
- const INT = 1;
- const FLOAT = 2;
- const EXP = 3;
- let state = SEP;
- let seenComma = true;
- let number = '',
- exponent = '';
- const result = [];
- function throwSyntaxError( current, i, partial ) {
- const 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 = '';
- }
- let current;
- const length = input.length;
- for ( let i = 0; i < length; i ++ ) {
- current = input[ i ]; // check for flags
- if ( Array.isArray( flags ) && flags.includes( result.length % stride ) && RE.FLAGS.test( current ) ) {
- state = INT;
- number = current;
- newNumber();
- continue;
- } // 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
- const units = [ 'mm', 'cm', 'in', 'pt', 'pc', 'px' ]; // Conversion: [ fromUnit ][ toUnit ] (-1 means dpi dependent)
- const 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 ) {
- let theUnit = 'px';
- if ( typeof string === 'string' || string instanceof String ) {
- for ( let i = 0, n = units.length; i < n; i ++ ) {
- const u = units[ i ];
- if ( string.endsWith( u ) ) {
- theUnit = u;
- string = string.substring( 0, string.length - u.length );
- break;
- }
- }
- }
- let 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;
- }
- const transform = parseNodeTransform( node );
- if ( transformStack.length > 0 ) {
- transform.premultiply( transformStack[ transformStack.length - 1 ] );
- }
- currentTransform.copy( transform );
- transformStack.push( transform );
- return transform;
- }
- function parseNodeTransform( node ) {
- const transform = new THREE.Matrix3();
- const currentTransform = tempTransform0;
- if ( node.nodeName === 'use' && ( node.hasAttribute( 'x' ) || node.hasAttribute( 'y' ) ) ) {
- const tx = parseFloatWithUnits( node.getAttribute( 'x' ) );
- const ty = parseFloatWithUnits( node.getAttribute( 'y' ) );
- transform.translate( tx, ty );
- }
- if ( node.hasAttribute( 'transform' ) ) {
- const transformsTexts = node.getAttribute( 'transform' ).split( ')' );
- for ( let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex -- ) {
- const transformText = transformsTexts[ tIndex ].trim();
- if ( transformText === '' ) continue;
- const openParPos = transformText.indexOf( '(' );
- const closeParPos = transformText.length;
- if ( openParPos > 0 && openParPos < closeParPos ) {
- const transformType = transformText.slice( 0, openParPos );
- const array = parseFloats( transformText.slice( openParPos + 1 ) );
- currentTransform.identity();
- switch ( transformType ) {
- case 'translate':
- if ( array.length >= 1 ) {
- const tx = array[ 0 ];
- let ty = tx;
- if ( array.length >= 2 ) {
- ty = array[ 1 ];
- }
- currentTransform.translate( tx, ty );
- }
- break;
- case 'rotate':
- if ( array.length >= 1 ) {
- let angle = 0;
- let cx = 0;
- let 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 ) {
- const scaleX = array[ 0 ];
- let 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 );
- }
- const isRotated = isTransformRotated( m );
- const subPaths = path.subPaths;
- for ( let i = 0, n = subPaths.length; i < n; i ++ ) {
- const subPath = subPaths[ i ];
- const curves = subPath.curves;
- for ( let j = 0; j < curves.length; j ++ ) {
- const 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 ) {
- const te = m.elements;
- return Math.sqrt( te[ 0 ] * te[ 0 ] + te[ 1 ] * te[ 1 ] );
- }
- function getTransformScaleY( m ) {
- const te = m.elements;
- return Math.sqrt( te[ 3 ] * te[ 3 ] + te[ 4 ] * te[ 4 ] );
- } //
- const paths = [];
- const stylesheets = {};
- const transformStack = [];
- const tempTransform0 = new THREE.Matrix3();
- const tempTransform1 = new THREE.Matrix3();
- const tempTransform2 = new THREE.Matrix3();
- const tempTransform3 = new THREE.Matrix3();
- const tempV2 = new THREE.Vector2();
- const tempV3 = new THREE.Vector3();
- const currentTransform = new THREE.Matrix3();
- const 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
- } );
- const data = {
- paths: paths,
- xml: xml.documentElement
- }; // console.log( paths );
- return data;
- }
- static createShapes( shapePath ) {
- // Param shapePath: a shapepath as returned by the parse function of this class
- // Returns THREE.Shape object
- const BIGNUMBER = 999999999;
- const IntersectionLocationType = {
- ORIGIN: 0,
- DESTINATION: 1,
- BETWEEN: 2,
- LEFT: 3,
- RIGHT: 4,
- BEHIND: 5,
- BEYOND: 6
- };
- const classifyResult = {
- loc: IntersectionLocationType.ORIGIN,
- t: 0
- };
- function findEdgeIntersection( a0, a1, b0, b1 ) {
- const x1 = a0.x;
- const x2 = a1.x;
- const x3 = b0.x;
- const x4 = b1.x;
- const y1 = a0.y;
- const y2 = a1.y;
- const y3 = b0.y;
- const y4 = b1.y;
- const nom1 = ( x4 - x3 ) * ( y1 - y3 ) - ( y4 - y3 ) * ( x1 - x3 );
- const nom2 = ( x2 - x1 ) * ( y1 - y3 ) - ( y2 - y1 ) * ( x1 - x3 );
- const denom = ( y4 - y3 ) * ( x2 - x1 ) - ( x4 - x3 ) * ( y2 - y1 );
- const t1 = nom1 / denom;
- const t2 = nom2 / denom;
- if ( denom === 0 && nom1 !== 0 || t1 <= 0 || t1 >= 1 || t2 < 0 || t2 > 1 ) {
- //1. lines are parallel or edges don't intersect
- return null;
- } else if ( nom1 === 0 && denom === 0 ) {
- //2. lines are colinear
- //check if endpoints of edge2 (b0-b1) lies on edge1 (a0-a1)
- for ( let i = 0; i < 2; i ++ ) {
- classifyPoint( i === 0 ? b0 : b1, a0, a1 ); //find position of this endpoints relatively to edge1
- if ( classifyResult.loc == IntersectionLocationType.ORIGIN ) {
- const point = i === 0 ? b0 : b1;
- return {
- x: point.x,
- y: point.y,
- t: classifyResult.t
- };
- } else if ( classifyResult.loc == IntersectionLocationType.BETWEEN ) {
- const x = + ( x1 + classifyResult.t * ( x2 - x1 ) ).toPrecision( 10 );
- const y = + ( y1 + classifyResult.t * ( y2 - y1 ) ).toPrecision( 10 );
- return {
- x: x,
- y: y,
- t: classifyResult.t
- };
- }
- }
- return null;
- } else {
- //3. edges intersect
- for ( let i = 0; i < 2; i ++ ) {
- classifyPoint( i === 0 ? b0 : b1, a0, a1 );
- if ( classifyResult.loc == IntersectionLocationType.ORIGIN ) {
- const point = i === 0 ? b0 : b1;
- return {
- x: point.x,
- y: point.y,
- t: classifyResult.t
- };
- }
- }
- const x = + ( x1 + t1 * ( x2 - x1 ) ).toPrecision( 10 );
- const y = + ( y1 + t1 * ( y2 - y1 ) ).toPrecision( 10 );
- return {
- x: x,
- y: y,
- t: t1
- };
- }
- }
- function classifyPoint( p, edgeStart, edgeEnd ) {
- const ax = edgeEnd.x - edgeStart.x;
- const ay = edgeEnd.y - edgeStart.y;
- const bx = p.x - edgeStart.x;
- const by = p.y - edgeStart.y;
- const sa = ax * by - bx * ay;
- if ( p.x === edgeStart.x && p.y === edgeStart.y ) {
- classifyResult.loc = IntersectionLocationType.ORIGIN;
- classifyResult.t = 0;
- return;
- }
- if ( p.x === edgeEnd.x && p.y === edgeEnd.y ) {
- classifyResult.loc = IntersectionLocationType.DESTINATION;
- classifyResult.t = 1;
- return;
- }
- if ( sa < - Number.EPSILON ) {
- classifyResult.loc = IntersectionLocationType.LEFT;
- return;
- }
- if ( sa > Number.EPSILON ) {
- classifyResult.loc = IntersectionLocationType.RIGHT;
- return;
- }
- if ( ax * bx < 0 || ay * by < 0 ) {
- classifyResult.loc = IntersectionLocationType.BEHIND;
- return;
- }
- if ( Math.sqrt( ax * ax + ay * ay ) < Math.sqrt( bx * bx + by * by ) ) {
- classifyResult.loc = IntersectionLocationType.BEYOND;
- return;
- }
- let t;
- if ( ax !== 0 ) {
- t = bx / ax;
- } else {
- t = by / ay;
- }
- classifyResult.loc = IntersectionLocationType.BETWEEN;
- classifyResult.t = t;
- }
- function getIntersections( path1, path2 ) {
- const intersectionsRaw = [];
- const intersections = [];
- for ( let index = 1; index < path1.length; index ++ ) {
- const path1EdgeStart = path1[ index - 1 ];
- const path1EdgeEnd = path1[ index ];
- for ( let index2 = 1; index2 < path2.length; index2 ++ ) {
- const path2EdgeStart = path2[ index2 - 1 ];
- const path2EdgeEnd = path2[ index2 ];
- const intersection = findEdgeIntersection( path1EdgeStart, path1EdgeEnd, path2EdgeStart, path2EdgeEnd );
- if ( intersection !== null && intersectionsRaw.find( i => i.t <= intersection.t + Number.EPSILON && i.t >= intersection.t - Number.EPSILON ) === undefined ) {
- intersectionsRaw.push( intersection );
- intersections.push( new THREE.Vector2( intersection.x, intersection.y ) );
- }
- }
- }
- return intersections;
- }
- function getScanlineIntersections( scanline, boundingBox, paths ) {
- const center = new THREE.Vector2();
- boundingBox.getCenter( center );
- const allIntersections = [];
- paths.forEach( path => {
- // check if the center of the bounding box is in the bounding box of the paths.
- // this is a pruning method to limit the search of intersections in paths that can't envelop of the current path.
- // if a path envelops another path. The center of that oter path, has to be inside the bounding box of the enveloping path.
- if ( path.boundingBox.containsPoint( center ) ) {
- const intersections = getIntersections( scanline, path.points );
- intersections.forEach( p => {
- allIntersections.push( {
- identifier: path.identifier,
- isCW: path.isCW,
- point: p
- } );
- } );
- }
- } );
- allIntersections.sort( ( i1, i2 ) => {
- return i1.point.x - i2.point.x;
- } );
- return allIntersections;
- }
- function isHoleTo( simplePath, allPaths, scanlineMinX, scanlineMaxX, _fillRule ) {
- if ( _fillRule === null || _fillRule === undefined || _fillRule === '' ) {
- _fillRule = 'nonzero';
- }
- const centerBoundingBox = new THREE.Vector2();
- simplePath.boundingBox.getCenter( centerBoundingBox );
- const scanline = [ new THREE.Vector2( scanlineMinX, centerBoundingBox.y ), new THREE.Vector2( scanlineMaxX, centerBoundingBox.y ) ];
- const scanlineIntersections = getScanlineIntersections( scanline, simplePath.boundingBox, allPaths );
- scanlineIntersections.sort( ( i1, i2 ) => {
- return i1.point.x - i2.point.x;
- } );
- const baseIntersections = [];
- const otherIntersections = [];
- scanlineIntersections.forEach( i => {
- if ( i.identifier === simplePath.identifier ) {
- baseIntersections.push( i );
- } else {
- otherIntersections.push( i );
- }
- } );
- const firstXOfPath = baseIntersections[ 0 ].point.x; // build up the path hierarchy
- const stack = [];
- let i = 0;
- while ( i < otherIntersections.length && otherIntersections[ i ].point.x < firstXOfPath ) {
- if ( stack.length > 0 && stack[ stack.length - 1 ] === otherIntersections[ i ].identifier ) {
- stack.pop();
- } else {
- stack.push( otherIntersections[ i ].identifier );
- }
- i ++;
- }
- stack.push( simplePath.identifier );
- if ( _fillRule === 'evenodd' ) {
- const isHole = stack.length % 2 === 0 ? true : false;
- const isHoleFor = stack[ stack.length - 2 ];
- return {
- identifier: simplePath.identifier,
- isHole: isHole,
- for: isHoleFor
- };
- } else if ( _fillRule === 'nonzero' ) {
- // check if path is a hole by counting the amount of paths with alternating rotations it has to cross.
- let isHole = true;
- let isHoleFor = null;
- let lastCWValue = null;
- for ( let i = 0; i < stack.length; i ++ ) {
- const identifier = stack[ i ];
- if ( isHole ) {
- lastCWValue = allPaths[ identifier ].isCW;
- isHole = false;
- isHoleFor = identifier;
- } else if ( lastCWValue !== allPaths[ identifier ].isCW ) {
- lastCWValue = allPaths[ identifier ].isCW;
- isHole = true;
- }
- }
- return {
- identifier: simplePath.identifier,
- isHole: isHole,
- for: isHoleFor
- };
- } else {
- console.warn( 'fill-rule: "' + _fillRule + '" is currently not implemented.' );
- }
- } // check for self intersecting paths
- // TODO
- // check intersecting paths
- // TODO
- // prepare paths for hole detection
- let identifier = 0;
- let scanlineMinX = BIGNUMBER;
- let scanlineMaxX = - BIGNUMBER;
- let simplePaths = shapePath.subPaths.map( p => {
- const points = p.getPoints();
- let maxY = - BIGNUMBER;
- let minY = BIGNUMBER;
- let maxX = - BIGNUMBER;
- let minX = BIGNUMBER; //points.forEach(p => p.y *= -1);
- for ( let i = 0; i < points.length; i ++ ) {
- const p = points[ i ];
- if ( p.y > maxY ) {
- maxY = p.y;
- }
- if ( p.y < minY ) {
- minY = p.y;
- }
- if ( p.x > maxX ) {
- maxX = p.x;
- }
- if ( p.x < minX ) {
- minX = p.x;
- }
- } //
- if ( scanlineMaxX <= maxX ) {
- scanlineMaxX = maxX + 1;
- }
- if ( scanlineMinX >= minX ) {
- scanlineMinX = minX - 1;
- }
- return {
- curves: p.curves,
- points: points,
- isCW: THREE.ShapeUtils.isClockWise( points ),
- identifier: identifier ++,
- boundingBox: new THREE.Box2( new THREE.Vector2( minX, minY ), new THREE.Vector2( maxX, maxY ) )
- };
- } );
- simplePaths = simplePaths.filter( sp => sp.points.length > 1 ); // check if path is solid or a hole
- const isAHole = simplePaths.map( p => isHoleTo( p, simplePaths, scanlineMinX, scanlineMaxX, shapePath.userData.style.fillRule ) );
- const shapesToReturn = [];
- simplePaths.forEach( p => {
- const amIAHole = isAHole[ p.identifier ];
- if ( ! amIAHole.isHole ) {
- const shape = new THREE.Shape();
- shape.curves = p.curves;
- const holes = isAHole.filter( h => h.isHole && h.for === p.identifier );
- holes.forEach( h => {
- const hole = simplePaths[ h.identifier ];
- const path = new THREE.Path();
- path.curves = hole.curves;
- shape.holes.push( path );
- } );
- shapesToReturn.push( shape );
- }
- } );
- return shapesToReturn;
- }
- static getStrokeStyle( 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
- };
- }
- static pointsToStroke( 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 THREE.BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
- const vertices = [];
- const normals = [];
- const uvs = [];
- if ( SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs ) === 0 ) {
- return null;
- }
- const 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;
- }
- static pointsToStrokeWithBuffers( 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
- const tempV2_1 = new THREE.Vector2();
- const tempV2_2 = new THREE.Vector2();
- const tempV2_3 = new THREE.Vector2();
- const tempV2_4 = new THREE.Vector2();
- const tempV2_5 = new THREE.Vector2();
- const tempV2_6 = new THREE.Vector2();
- const tempV2_7 = new THREE.Vector2();
- const lastPointL = new THREE.Vector2();
- const lastPointR = new THREE.Vector2();
- const point0L = new THREE.Vector2();
- const point0R = new THREE.Vector2();
- const currentPointL = new THREE.Vector2();
- const currentPointR = new THREE.Vector2();
- const nextPointL = new THREE.Vector2();
- const nextPointR = new THREE.Vector2();
- const innerPoint = new THREE.Vector2();
- const outerPoint = new THREE.Vector2();
- 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 );
- const numPoints = points.length;
- if ( numPoints < 2 ) return 0;
- const isClosed = points[ 0 ].equals( points[ numPoints - 1 ] );
- let currentPoint;
- let previousPoint = points[ 0 ];
- let nextPoint;
- const strokeWidth2 = style.strokeWidth / 2;
- const deltaU = 1 / ( numPoints - 1 );
- let u0 = 0,
- u1;
- let innerSideModified;
- let joinIsOnLeftSide;
- let isMiter;
- let initialJoinIsOnLeftSide = false;
- let numVertices = 0;
- let currentCoordinate = vertexOffset * 3;
- let 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 ( let 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
- const 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 );
- 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();
- const dot = Math.abs( normal1.dot( tempV2_3 ) ); // If path is straight, don't create join
- if ( dot !== 0 ) {
- // Compute inner and outer segment intersections
- const 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();
- const miterLength2 = tempV2_5.length();
- const segmentLengthPrev = tempV2_4.length();
- tempV2_4.divideScalar( segmentLengthPrev );
- tempV2_6.subVectors( nextPoint, currentPoint );
- const 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:
- const 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
- let lastOuter = outerPoint;
- let 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();
- let angle = Math.PI;
- const dot = tempV2_1.dot( tempV2_2 );
- if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
- angle /= arcDivisions;
- tempV2_3.copy( p1 );
- for ( let 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 ) {
- // THREE.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 {
- // THREE.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 );
- const 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.
- let dupPoints = false;
- for ( let i = 1, n = points.length - 1; i < n; i ++ ) {
- if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
- dupPoints = true;
- break;
- }
- }
- if ( ! dupPoints ) return points;
- const newPoints = [];
- newPoints.push( points[ 0 ] );
- for ( let 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;
- }
- }
- }
- THREE.SVGLoader = SVGLoader;
- } )();
|