SVGLoader.js 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author zz85 / http://joshuakoo.com/
  4. * @author yomboprime / https://yombo.org
  5. */
  6. import {
  7. BufferGeometry,
  8. Color,
  9. FileLoader,
  10. Float32BufferAttribute,
  11. Loader,
  12. Matrix3,
  13. Path,
  14. ShapePath,
  15. Vector2,
  16. Vector3
  17. } from "../../../build/three.module.js";
  18. var SVGLoader = function ( manager ) {
  19. Loader.call( this, manager );
  20. };
  21. SVGLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
  22. constructor: SVGLoader,
  23. load: function ( url, onLoad, onProgress, onError ) {
  24. var scope = this;
  25. var loader = new FileLoader( scope.manager );
  26. loader.setPath( scope.path );
  27. loader.load( url, function ( text ) {
  28. onLoad( scope.parse( text ) );
  29. }, onProgress, onError );
  30. },
  31. parse: function ( text ) {
  32. function parseNode( node, style ) {
  33. if ( node.nodeType !== 1 ) return;
  34. var transform = getNodeTransform( node );
  35. var path = null;
  36. switch ( node.nodeName ) {
  37. case 'svg':
  38. break;
  39. case 'g':
  40. style = parseStyle( node, style );
  41. break;
  42. case 'path':
  43. style = parseStyle( node, style );
  44. if ( node.hasAttribute( 'd' ) ) path = parsePathNode( node );
  45. break;
  46. case 'rect':
  47. style = parseStyle( node, style );
  48. path = parseRectNode( node );
  49. break;
  50. case 'polygon':
  51. style = parseStyle( node, style );
  52. path = parsePolygonNode( node );
  53. break;
  54. case 'polyline':
  55. style = parseStyle( node, style );
  56. path = parsePolylineNode( node );
  57. break;
  58. case 'circle':
  59. style = parseStyle( node, style );
  60. path = parseCircleNode( node );
  61. break;
  62. case 'ellipse':
  63. style = parseStyle( node, style );
  64. path = parseEllipseNode( node );
  65. break;
  66. case 'line':
  67. style = parseStyle( node, style );
  68. path = parseLineNode( node );
  69. break;
  70. default:
  71. console.log( node );
  72. }
  73. if ( path ) {
  74. if ( style.fill !== undefined && style.fill !== 'none' ) {
  75. path.color.setStyle( style.fill );
  76. }
  77. transformPath( path, currentTransform );
  78. paths.push( path );
  79. path.userData = { node: node, style: style };
  80. }
  81. var nodes = node.childNodes;
  82. for ( var i = 0; i < nodes.length; i ++ ) {
  83. parseNode( nodes[ i ], style );
  84. }
  85. if ( transform ) {
  86. transformStack.pop();
  87. if ( transformStack.length > 0 ) {
  88. currentTransform.copy( transformStack[ transformStack.length - 1 ] );
  89. } else {
  90. currentTransform.identity();
  91. }
  92. }
  93. }
  94. function parsePathNode( node ) {
  95. var path = new ShapePath();
  96. var point = new Vector2();
  97. var control = new Vector2();
  98. var firstPoint = new Vector2();
  99. var isFirstPoint = true;
  100. var doSetFirstPoint = false;
  101. var d = node.getAttribute( 'd' );
  102. // console.log( d );
  103. var commands = d.match( /[a-df-z][^a-df-z]*/ig );
  104. for ( var i = 0, l = commands.length; i < l; i ++ ) {
  105. var command = commands[ i ];
  106. var type = command.charAt( 0 );
  107. var data = command.substr( 1 ).trim();
  108. if ( isFirstPoint === true ) {
  109. doSetFirstPoint = true;
  110. isFirstPoint = false;
  111. }
  112. switch ( type ) {
  113. case 'M':
  114. var numbers = parseFloats( data );
  115. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  116. point.x = numbers[ j + 0 ];
  117. point.y = numbers[ j + 1 ];
  118. control.x = point.x;
  119. control.y = point.y;
  120. if ( j === 0 ) {
  121. path.moveTo( point.x, point.y );
  122. } else {
  123. path.lineTo( point.x, point.y );
  124. }
  125. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  126. }
  127. break;
  128. case 'H':
  129. var numbers = parseFloats( data );
  130. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  131. point.x = numbers[ j ];
  132. control.x = point.x;
  133. control.y = point.y;
  134. path.lineTo( point.x, point.y );
  135. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  136. }
  137. break;
  138. case 'V':
  139. var numbers = parseFloats( data );
  140. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  141. point.y = numbers[ j ];
  142. control.x = point.x;
  143. control.y = point.y;
  144. path.lineTo( point.x, point.y );
  145. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  146. }
  147. break;
  148. case 'L':
  149. var numbers = parseFloats( data );
  150. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  151. point.x = numbers[ j + 0 ];
  152. point.y = numbers[ j + 1 ];
  153. control.x = point.x;
  154. control.y = point.y;
  155. path.lineTo( point.x, point.y );
  156. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  157. }
  158. break;
  159. case 'C':
  160. var numbers = parseFloats( data );
  161. for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
  162. path.bezierCurveTo(
  163. numbers[ j + 0 ],
  164. numbers[ j + 1 ],
  165. numbers[ j + 2 ],
  166. numbers[ j + 3 ],
  167. numbers[ j + 4 ],
  168. numbers[ j + 5 ]
  169. );
  170. control.x = numbers[ j + 2 ];
  171. control.y = numbers[ j + 3 ];
  172. point.x = numbers[ j + 4 ];
  173. point.y = numbers[ j + 5 ];
  174. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  175. }
  176. break;
  177. case 'S':
  178. var numbers = parseFloats( data );
  179. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  180. path.bezierCurveTo(
  181. getReflection( point.x, control.x ),
  182. getReflection( point.y, control.y ),
  183. numbers[ j + 0 ],
  184. numbers[ j + 1 ],
  185. numbers[ j + 2 ],
  186. numbers[ j + 3 ]
  187. );
  188. control.x = numbers[ j + 0 ];
  189. control.y = numbers[ j + 1 ];
  190. point.x = numbers[ j + 2 ];
  191. point.y = numbers[ j + 3 ];
  192. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  193. }
  194. break;
  195. case 'Q':
  196. var numbers = parseFloats( data );
  197. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  198. path.quadraticCurveTo(
  199. numbers[ j + 0 ],
  200. numbers[ j + 1 ],
  201. numbers[ j + 2 ],
  202. numbers[ j + 3 ]
  203. );
  204. control.x = numbers[ j + 0 ];
  205. control.y = numbers[ j + 1 ];
  206. point.x = numbers[ j + 2 ];
  207. point.y = numbers[ j + 3 ];
  208. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  209. }
  210. break;
  211. case 'T':
  212. var numbers = parseFloats( data );
  213. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  214. var rx = getReflection( point.x, control.x );
  215. var ry = getReflection( point.y, control.y );
  216. path.quadraticCurveTo(
  217. rx,
  218. ry,
  219. numbers[ j + 0 ],
  220. numbers[ j + 1 ]
  221. );
  222. control.x = rx;
  223. control.y = ry;
  224. point.x = numbers[ j + 0 ];
  225. point.y = numbers[ j + 1 ];
  226. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  227. }
  228. break;
  229. case 'A':
  230. var numbers = parseFloats( data );
  231. for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
  232. var start = point.clone();
  233. point.x = numbers[ j + 5 ];
  234. point.y = numbers[ j + 6 ];
  235. control.x = point.x;
  236. control.y = point.y;
  237. parseArcCommand(
  238. path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
  239. );
  240. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  241. }
  242. break;
  243. case 'm':
  244. var numbers = parseFloats( data );
  245. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  246. point.x += numbers[ j + 0 ];
  247. point.y += numbers[ j + 1 ];
  248. control.x = point.x;
  249. control.y = point.y;
  250. if ( j === 0 ) {
  251. path.moveTo( point.x, point.y );
  252. } else {
  253. path.lineTo( point.x, point.y );
  254. }
  255. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  256. }
  257. break;
  258. case 'h':
  259. var numbers = parseFloats( data );
  260. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  261. point.x += numbers[ j ];
  262. control.x = point.x;
  263. control.y = point.y;
  264. path.lineTo( point.x, point.y );
  265. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  266. }
  267. break;
  268. case 'v':
  269. var numbers = parseFloats( data );
  270. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  271. point.y += numbers[ j ];
  272. control.x = point.x;
  273. control.y = point.y;
  274. path.lineTo( point.x, point.y );
  275. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  276. }
  277. break;
  278. case 'l':
  279. var numbers = parseFloats( data );
  280. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  281. point.x += numbers[ j + 0 ];
  282. point.y += numbers[ j + 1 ];
  283. control.x = point.x;
  284. control.y = point.y;
  285. path.lineTo( point.x, point.y );
  286. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  287. }
  288. break;
  289. case 'c':
  290. var numbers = parseFloats( data );
  291. for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
  292. path.bezierCurveTo(
  293. point.x + numbers[ j + 0 ],
  294. point.y + numbers[ j + 1 ],
  295. point.x + numbers[ j + 2 ],
  296. point.y + numbers[ j + 3 ],
  297. point.x + numbers[ j + 4 ],
  298. point.y + numbers[ j + 5 ]
  299. );
  300. control.x = point.x + numbers[ j + 2 ];
  301. control.y = point.y + numbers[ j + 3 ];
  302. point.x += numbers[ j + 4 ];
  303. point.y += numbers[ j + 5 ];
  304. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  305. }
  306. break;
  307. case 's':
  308. var numbers = parseFloats( data );
  309. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  310. path.bezierCurveTo(
  311. getReflection( point.x, control.x ),
  312. getReflection( point.y, control.y ),
  313. point.x + numbers[ j + 0 ],
  314. point.y + numbers[ j + 1 ],
  315. point.x + numbers[ j + 2 ],
  316. point.y + numbers[ j + 3 ]
  317. );
  318. control.x = point.x + numbers[ j + 0 ];
  319. control.y = point.y + numbers[ j + 1 ];
  320. point.x += numbers[ j + 2 ];
  321. point.y += numbers[ j + 3 ];
  322. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  323. }
  324. break;
  325. case 'q':
  326. var numbers = parseFloats( data );
  327. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  328. path.quadraticCurveTo(
  329. point.x + numbers[ j + 0 ],
  330. point.y + numbers[ j + 1 ],
  331. point.x + numbers[ j + 2 ],
  332. point.y + numbers[ j + 3 ]
  333. );
  334. control.x = point.x + numbers[ j + 0 ];
  335. control.y = point.y + numbers[ j + 1 ];
  336. point.x += numbers[ j + 2 ];
  337. point.y += numbers[ j + 3 ];
  338. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  339. }
  340. break;
  341. case 't':
  342. var numbers = parseFloats( data );
  343. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  344. var rx = getReflection( point.x, control.x );
  345. var ry = getReflection( point.y, control.y );
  346. path.quadraticCurveTo(
  347. rx,
  348. ry,
  349. point.x + numbers[ j + 0 ],
  350. point.y + numbers[ j + 1 ]
  351. );
  352. control.x = rx;
  353. control.y = ry;
  354. point.x = point.x + numbers[ j + 0 ];
  355. point.y = point.y + numbers[ j + 1 ];
  356. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  357. }
  358. break;
  359. case 'a':
  360. var numbers = parseFloats( data );
  361. for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
  362. var start = point.clone();
  363. point.x += numbers[ j + 5 ];
  364. point.y += numbers[ j + 6 ];
  365. control.x = point.x;
  366. control.y = point.y;
  367. parseArcCommand(
  368. path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
  369. );
  370. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  371. }
  372. break;
  373. case 'Z':
  374. case 'z':
  375. path.currentPath.autoClose = true;
  376. if ( path.currentPath.curves.length > 0 ) {
  377. // Reset point to beginning of Path
  378. point.copy( firstPoint );
  379. path.currentPath.currentPoint.copy( point );
  380. isFirstPoint = true;
  381. }
  382. break;
  383. default:
  384. console.warn( command );
  385. }
  386. // console.log( type, parseFloats( data ), parseFloats( data ).length )
  387. doSetFirstPoint = false;
  388. }
  389. return path;
  390. }
  391. /**
  392. * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
  393. * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
  394. * From
  395. * rx ry x-axis-rotation large-arc-flag sweep-flag x y
  396. * To
  397. * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
  398. */
  399. function parseArcCommand( path, rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, start, end ) {
  400. x_axis_rotation = x_axis_rotation * Math.PI / 180;
  401. // Ensure radii are positive
  402. rx = Math.abs( rx );
  403. ry = Math.abs( ry );
  404. // Compute (x1′, y1′)
  405. var dx2 = ( start.x - end.x ) / 2.0;
  406. var dy2 = ( start.y - end.y ) / 2.0;
  407. var x1p = Math.cos( x_axis_rotation ) * dx2 + Math.sin( x_axis_rotation ) * dy2;
  408. var y1p = - Math.sin( x_axis_rotation ) * dx2 + Math.cos( x_axis_rotation ) * dy2;
  409. // Compute (cx′, cy′)
  410. var rxs = rx * rx;
  411. var rys = ry * ry;
  412. var x1ps = x1p * x1p;
  413. var y1ps = y1p * y1p;
  414. // Ensure radii are large enough
  415. var cr = x1ps / rxs + y1ps / rys;
  416. if ( cr > 1 ) {
  417. // scale up rx,ry equally so cr == 1
  418. var s = Math.sqrt( cr );
  419. rx = s * rx;
  420. ry = s * ry;
  421. rxs = rx * rx;
  422. rys = ry * ry;
  423. }
  424. var dq = ( rxs * y1ps + rys * x1ps );
  425. var pq = ( rxs * rys - dq ) / dq;
  426. var q = Math.sqrt( Math.max( 0, pq ) );
  427. if ( large_arc_flag === sweep_flag ) q = - q;
  428. var cxp = q * rx * y1p / ry;
  429. var cyp = - q * ry * x1p / rx;
  430. // Step 3: Compute (cx, cy) from (cx′, cy′)
  431. var cx = Math.cos( x_axis_rotation ) * cxp - Math.sin( x_axis_rotation ) * cyp + ( start.x + end.x ) / 2;
  432. var cy = Math.sin( x_axis_rotation ) * cxp + Math.cos( x_axis_rotation ) * cyp + ( start.y + end.y ) / 2;
  433. // Step 4: Compute θ1 and Δθ
  434. var theta = svgAngle( 1, 0, ( x1p - cxp ) / rx, ( y1p - cyp ) / ry );
  435. var delta = svgAngle( ( x1p - cxp ) / rx, ( y1p - cyp ) / ry, ( - x1p - cxp ) / rx, ( - y1p - cyp ) / ry ) % ( Math.PI * 2 );
  436. path.currentPath.absellipse( cx, cy, rx, ry, theta, theta + delta, sweep_flag === 0, x_axis_rotation );
  437. }
  438. function svgAngle( ux, uy, vx, vy ) {
  439. var dot = ux * vx + uy * vy;
  440. var len = Math.sqrt( ux * ux + uy * uy ) * Math.sqrt( vx * vx + vy * vy );
  441. var ang = Math.acos( Math.max( - 1, Math.min( 1, dot / len ) ) ); // floating point precision, slightly over values appear
  442. if ( ( ux * vy - uy * vx ) < 0 ) ang = - ang;
  443. return ang;
  444. }
  445. /*
  446. * According to https://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute
  447. * rounded corner should be rendered to elliptical arc, but bezier curve does the job well enough
  448. */
  449. function parseRectNode( node ) {
  450. var x = parseFloat( node.getAttribute( 'x' ) || 0 );
  451. var y = parseFloat( node.getAttribute( 'y' ) || 0 );
  452. var rx = parseFloat( node.getAttribute( 'rx' ) || 0 );
  453. var ry = parseFloat( node.getAttribute( 'ry' ) || 0 );
  454. var w = parseFloat( node.getAttribute( 'width' ) );
  455. var h = parseFloat( node.getAttribute( 'height' ) );
  456. var path = new ShapePath();
  457. path.moveTo( x + 2 * rx, y );
  458. path.lineTo( x + w - 2 * rx, y );
  459. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
  460. path.lineTo( x + w, y + h - 2 * ry );
  461. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
  462. path.lineTo( x + 2 * rx, y + h );
  463. if ( rx !== 0 || ry !== 0 ) {
  464. path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
  465. }
  466. path.lineTo( x, y + 2 * ry );
  467. if ( rx !== 0 || ry !== 0 ) {
  468. path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
  469. }
  470. return path;
  471. }
  472. function parsePolygonNode( node ) {
  473. function iterator( match, a, b ) {
  474. var x = parseFloat( a );
  475. var y = parseFloat( b );
  476. if ( index === 0 ) {
  477. path.moveTo( x, y );
  478. } else {
  479. path.lineTo( x, y );
  480. }
  481. index ++;
  482. }
  483. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  484. var path = new ShapePath();
  485. var index = 0;
  486. node.getAttribute( 'points' ).replace( regex, iterator );
  487. path.currentPath.autoClose = true;
  488. return path;
  489. }
  490. function parsePolylineNode( node ) {
  491. function iterator( match, a, b ) {
  492. var x = parseFloat( a );
  493. var y = parseFloat( b );
  494. if ( index === 0 ) {
  495. path.moveTo( x, y );
  496. } else {
  497. path.lineTo( x, y );
  498. }
  499. index ++;
  500. }
  501. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  502. var path = new ShapePath();
  503. var index = 0;
  504. node.getAttribute( 'points' ).replace( regex, iterator );
  505. path.currentPath.autoClose = false;
  506. return path;
  507. }
  508. function parseCircleNode( node ) {
  509. var x = parseFloat( node.getAttribute( 'cx' ) );
  510. var y = parseFloat( node.getAttribute( 'cy' ) );
  511. var r = parseFloat( node.getAttribute( 'r' ) );
  512. var subpath = new Path();
  513. subpath.absarc( x, y, r, 0, Math.PI * 2 );
  514. var path = new ShapePath();
  515. path.subPaths.push( subpath );
  516. return path;
  517. }
  518. function parseEllipseNode( node ) {
  519. var x = parseFloat( node.getAttribute( 'cx' ) );
  520. var y = parseFloat( node.getAttribute( 'cy' ) );
  521. var rx = parseFloat( node.getAttribute( 'rx' ) );
  522. var ry = parseFloat( node.getAttribute( 'ry' ) );
  523. var subpath = new Path();
  524. subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
  525. var path = new ShapePath();
  526. path.subPaths.push( subpath );
  527. return path;
  528. }
  529. function parseLineNode( node ) {
  530. var x1 = parseFloat( node.getAttribute( 'x1' ) );
  531. var y1 = parseFloat( node.getAttribute( 'y1' ) );
  532. var x2 = parseFloat( node.getAttribute( 'x2' ) );
  533. var y2 = parseFloat( node.getAttribute( 'y2' ) );
  534. var path = new ShapePath();
  535. path.moveTo( x1, y1 );
  536. path.lineTo( x2, y2 );
  537. path.currentPath.autoClose = false;
  538. return path;
  539. }
  540. //
  541. function parseStyle( node, style ) {
  542. style = Object.assign( {}, style ); // clone style
  543. function addStyle( svgName, jsName, adjustFunction ) {
  544. if ( adjustFunction === undefined ) adjustFunction = function copy( v ) {
  545. return v;
  546. };
  547. if ( node.hasAttribute( svgName ) ) style[ jsName ] = adjustFunction( node.getAttribute( svgName ) );
  548. if ( node.style[ svgName ] !== '' ) style[ jsName ] = adjustFunction( node.style[ svgName ] );
  549. }
  550. function clamp( v ) {
  551. return Math.max( 0, Math.min( 1, parseFloat( v ) ) );
  552. }
  553. function positive( v ) {
  554. return Math.max( 0, parseFloat( v ) );
  555. }
  556. addStyle( 'fill', 'fill' );
  557. addStyle( 'fill-opacity', 'fillOpacity', clamp );
  558. addStyle( 'stroke', 'stroke' );
  559. addStyle( 'stroke-opacity', 'strokeOpacity', clamp );
  560. addStyle( 'stroke-width', 'strokeWidth', positive );
  561. addStyle( 'stroke-linejoin', 'strokeLineJoin' );
  562. addStyle( 'stroke-linecap', 'strokeLineCap' );
  563. addStyle( 'stroke-miterlimit', 'strokeMiterLimit', positive );
  564. return style;
  565. }
  566. // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
  567. function getReflection( a, b ) {
  568. return a - ( b - a );
  569. }
  570. function parseFloats( string ) {
  571. var array = string.split( /[\s,]+|(?=\s?[+\-])/ );
  572. for ( var i = 0; i < array.length; i ++ ) {
  573. var number = array[ i ];
  574. // Handle values like 48.6037.7.8
  575. // TODO Find a regex for this
  576. if ( number.indexOf( '.' ) !== number.lastIndexOf( '.' ) ) {
  577. var split = number.split( '.' );
  578. for ( var s = 2; s < split.length; s ++ ) {
  579. array.splice( i + s - 1, 0, '0.' + split[ s ] );
  580. }
  581. }
  582. array[ i ] = parseFloat( number );
  583. }
  584. return array;
  585. }
  586. function getNodeTransform( node ) {
  587. if ( ! node.hasAttribute( 'transform' ) ) {
  588. return null;
  589. }
  590. var transform = parseNodeTransform( node );
  591. if ( transformStack.length > 0 ) {
  592. transform.premultiply( transformStack[ transformStack.length - 1 ] );
  593. }
  594. currentTransform.copy( transform );
  595. transformStack.push( transform );
  596. return transform;
  597. }
  598. function parseNodeTransform( node ) {
  599. var transform = new Matrix3();
  600. var currentTransform = tempTransform0;
  601. var transformsTexts = node.getAttribute( 'transform' ).split( ')' );
  602. for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex -- ) {
  603. var transformText = transformsTexts[ tIndex ].trim();
  604. if ( transformText === '' ) continue;
  605. var openParPos = transformText.indexOf( '(' );
  606. var closeParPos = transformText.length;
  607. if ( openParPos > 0 && openParPos < closeParPos ) {
  608. var transformType = transformText.substr( 0, openParPos );
  609. var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
  610. currentTransform.identity();
  611. switch ( transformType ) {
  612. case "translate":
  613. if ( array.length >= 1 ) {
  614. var tx = array[ 0 ];
  615. var ty = tx;
  616. if ( array.length >= 2 ) {
  617. ty = array[ 1 ];
  618. }
  619. currentTransform.translate( tx, ty );
  620. }
  621. break;
  622. case "rotate":
  623. if ( array.length >= 1 ) {
  624. var angle = 0;
  625. var cx = 0;
  626. var cy = 0;
  627. // Angle
  628. angle = - array[ 0 ] * Math.PI / 180;
  629. if ( array.length >= 3 ) {
  630. // Center x, y
  631. cx = array[ 1 ];
  632. cy = array[ 2 ];
  633. }
  634. // Rotate around center (cx, cy)
  635. tempTransform1.identity().translate( - cx, - cy );
  636. tempTransform2.identity().rotate( angle );
  637. tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
  638. tempTransform1.identity().translate( cx, cy );
  639. currentTransform.multiplyMatrices( tempTransform1, tempTransform3 );
  640. }
  641. break;
  642. case "scale":
  643. if ( array.length >= 1 ) {
  644. var scaleX = array[ 0 ];
  645. var scaleY = scaleX;
  646. if ( array.length >= 2 ) {
  647. scaleY = array[ 1 ];
  648. }
  649. currentTransform.scale( scaleX, scaleY );
  650. }
  651. break;
  652. case "skewX":
  653. if ( array.length === 1 ) {
  654. currentTransform.set(
  655. 1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
  656. 0, 1, 0,
  657. 0, 0, 1
  658. );
  659. }
  660. break;
  661. case "skewY":
  662. if ( array.length === 1 ) {
  663. currentTransform.set(
  664. 1, 0, 0,
  665. Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
  666. 0, 0, 1
  667. );
  668. }
  669. break;
  670. case "matrix":
  671. if ( array.length === 6 ) {
  672. currentTransform.set(
  673. array[ 0 ], array[ 2 ], array[ 4 ],
  674. array[ 1 ], array[ 3 ], array[ 5 ],
  675. 0, 0, 1
  676. );
  677. }
  678. break;
  679. }
  680. }
  681. transform.premultiply( currentTransform );
  682. }
  683. return transform;
  684. }
  685. function transformPath( path, m ) {
  686. function transfVec2( v2 ) {
  687. tempV3.set( v2.x, v2.y, 1 ).applyMatrix3( m );
  688. v2.set( tempV3.x, tempV3.y );
  689. }
  690. var isRotated = isTransformRotated( m );
  691. var subPaths = path.subPaths;
  692. for ( var i = 0, n = subPaths.length; i < n; i ++ ) {
  693. var subPath = subPaths[ i ];
  694. var curves = subPath.curves;
  695. for ( var j = 0; j < curves.length; j ++ ) {
  696. var curve = curves[ j ];
  697. if ( curve.isLineCurve ) {
  698. transfVec2( curve.v1 );
  699. transfVec2( curve.v2 );
  700. } else if ( curve.isCubicBezierCurve ) {
  701. transfVec2( curve.v0 );
  702. transfVec2( curve.v1 );
  703. transfVec2( curve.v2 );
  704. transfVec2( curve.v3 );
  705. } else if ( curve.isQuadraticBezierCurve ) {
  706. transfVec2( curve.v0 );
  707. transfVec2( curve.v1 );
  708. transfVec2( curve.v2 );
  709. } else if ( curve.isEllipseCurve ) {
  710. if ( isRotated ) {
  711. console.warn( "SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented." );
  712. }
  713. tempV2.set( curve.aX, curve.aY );
  714. transfVec2( tempV2 );
  715. curve.aX = tempV2.x;
  716. curve.aY = tempV2.y;
  717. curve.xRadius *= getTransformScaleX( m );
  718. curve.yRadius *= getTransformScaleY( m );
  719. }
  720. }
  721. }
  722. }
  723. function isTransformRotated( m ) {
  724. return m.elements[ 1 ] !== 0 || m.elements[ 3 ] !== 0;
  725. }
  726. function getTransformScaleX( m ) {
  727. var te = m.elements;
  728. return Math.sqrt( te[ 0 ] * te[ 0 ] + te[ 1 ] * te[ 1 ] );
  729. }
  730. function getTransformScaleY( m ) {
  731. var te = m.elements;
  732. return Math.sqrt( te[ 3 ] * te[ 3 ] + te[ 4 ] * te[ 4 ] );
  733. }
  734. //
  735. console.log( 'THREE.SVGLoader' );
  736. var paths = [];
  737. var transformStack = [];
  738. var tempTransform0 = new Matrix3();
  739. var tempTransform1 = new Matrix3();
  740. var tempTransform2 = new Matrix3();
  741. var tempTransform3 = new Matrix3();
  742. var tempV2 = new Vector2();
  743. var tempV3 = new Vector3();
  744. var currentTransform = new Matrix3();
  745. console.time( 'THREE.SVGLoader: DOMParser' );
  746. var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
  747. console.timeEnd( 'THREE.SVGLoader: DOMParser' );
  748. console.time( 'THREE.SVGLoader: Parse' );
  749. parseNode( xml.documentElement, {
  750. fill: '#000',
  751. fillOpacity: 1,
  752. strokeOpacity: 1,
  753. strokeWidth: 1,
  754. strokeLineJoin: 'miter',
  755. strokeLineCap: 'butt',
  756. strokeMiterLimit: 4
  757. } );
  758. var data = { paths: paths, xml: xml.documentElement };
  759. // console.log( paths );
  760. console.timeEnd( 'THREE.SVGLoader: Parse' );
  761. return data;
  762. }
  763. } );
  764. SVGLoader.getStrokeStyle = function ( width, color, lineJoin, lineCap, miterLimit ) {
  765. // Param width: Stroke width
  766. // Param color: As returned by Color.getStyle()
  767. // Param lineJoin: One of "round", "bevel", "miter" or "miter-limit"
  768. // Param lineCap: One of "round", "square" or "butt"
  769. // Param miterLimit: Maximum join length, in multiples of the "width" parameter (join is truncated if it exceeds that distance)
  770. // Returns style object
  771. width = width !== undefined ? width : 1;
  772. color = color !== undefined ? color : '#000';
  773. lineJoin = lineJoin !== undefined ? lineJoin : 'miter';
  774. lineCap = lineCap !== undefined ? lineCap : 'butt';
  775. miterLimit = miterLimit !== undefined ? miterLimit : 4;
  776. return {
  777. strokeColor: color,
  778. strokeWidth: width,
  779. strokeLineJoin: lineJoin,
  780. strokeLineCap: lineCap,
  781. strokeMiterLimit: miterLimit
  782. };
  783. };
  784. SVGLoader.pointsToStroke = function ( points, style, arcDivisions, minDistance ) {
  785. // Generates a stroke with some witdh around the given path.
  786. // The path can be open or closed (last point equals to first point)
  787. // Param points: Array of Vector2D (the path). Minimum 2 points.
  788. // Param style: Object with SVG properties as returned by SVGLoader.getStrokeStyle(), or SVGLoader.parse() in the path.userData.style object
  789. // Params arcDivisions: Arc divisions for round joins and endcaps. (Optional)
  790. // Param minDistance: Points closer to this distance will be merged. (Optional)
  791. // Returns BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
  792. var vertices = [];
  793. var normals = [];
  794. var uvs = [];
  795. if ( SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs ) === 0 ) {
  796. return null;
  797. }
  798. var geometry = new BufferGeometry();
  799. geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
  800. geometry.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
  801. geometry.addAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
  802. return geometry;
  803. };
  804. SVGLoader.pointsToStrokeWithBuffers = function () {
  805. var tempV2_1 = new Vector2();
  806. var tempV2_2 = new Vector2();
  807. var tempV2_3 = new Vector2();
  808. var tempV2_4 = new Vector2();
  809. var tempV2_5 = new Vector2();
  810. var tempV2_6 = new Vector2();
  811. var tempV2_7 = new Vector2();
  812. var lastPointL = new Vector2();
  813. var lastPointR = new Vector2();
  814. var point0L = new Vector2();
  815. var point0R = new Vector2();
  816. var currentPointL = new Vector2();
  817. var currentPointR = new Vector2();
  818. var nextPointL = new Vector2();
  819. var nextPointR = new Vector2();
  820. var innerPoint = new Vector2();
  821. var outerPoint = new Vector2();
  822. return function ( points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset ) {
  823. // This function can be called to update existing arrays or buffers.
  824. // Accepts same parameters as pointsToStroke, plus the buffers and optional offset.
  825. // Param vertexOffset: Offset vertices to start writing in the buffers (3 elements/vertex for vertices and normals, and 2 elements/vertex for uvs)
  826. // Returns number of written vertices / normals / uvs pairs
  827. // if 'vertices' parameter is undefined no triangles will be generated, but the returned vertices count will still be valid (useful to preallocate the buffers)
  828. // 'normals' and 'uvs' buffers are optional
  829. arcDivisions = arcDivisions !== undefined ? arcDivisions : 12;
  830. minDistance = minDistance !== undefined ? minDistance : 0.001;
  831. vertexOffset = vertexOffset !== undefined ? vertexOffset : 0;
  832. // First ensure there are no duplicated points
  833. points = removeDuplicatedPoints( points );
  834. var numPoints = points.length;
  835. if ( numPoints < 2 ) return 0;
  836. var isClosed = points[ 0 ].equals( points[ numPoints - 1 ] );
  837. var currentPoint;
  838. var previousPoint = points[ 0 ];
  839. var nextPoint;
  840. var strokeWidth2 = style.strokeWidth / 2;
  841. var deltaU = 1 / ( numPoints - 1 );
  842. var u0 = 0;
  843. var innerSideModified;
  844. var joinIsOnLeftSide;
  845. var isMiter;
  846. var initialJoinIsOnLeftSide = false;
  847. var numVertices = 0;
  848. var currentCoordinate = vertexOffset * 3;
  849. var currentCoordinateUV = vertexOffset * 2;
  850. // Get initial left and right stroke points
  851. getNormal( points[ 0 ], points[ 1 ], tempV2_1 ).multiplyScalar( strokeWidth2 );
  852. lastPointL.copy( points[ 0 ] ).sub( tempV2_1 );
  853. lastPointR.copy( points[ 0 ] ).add( tempV2_1 );
  854. point0L.copy( lastPointL );
  855. point0R.copy( lastPointR );
  856. for ( var iPoint = 1; iPoint < numPoints; iPoint ++ ) {
  857. currentPoint = points[ iPoint ];
  858. // Get next point
  859. if ( iPoint === numPoints - 1 ) {
  860. if ( isClosed ) {
  861. // Skip duplicated initial point
  862. nextPoint = points[ 1 ];
  863. } else nextPoint = undefined;
  864. } else {
  865. nextPoint = points[ iPoint + 1 ];
  866. }
  867. // Normal of previous segment in tempV2_1
  868. var normal1 = tempV2_1;
  869. getNormal( previousPoint, currentPoint, normal1 );
  870. tempV2_3.copy( normal1 ).multiplyScalar( strokeWidth2 );
  871. currentPointL.copy( currentPoint ).sub( tempV2_3 );
  872. currentPointR.copy( currentPoint ).add( tempV2_3 );
  873. var u1 = u0 + deltaU;
  874. innerSideModified = false;
  875. if ( nextPoint !== undefined ) {
  876. // Normal of next segment in tempV2_2
  877. getNormal( currentPoint, nextPoint, tempV2_2 );
  878. tempV2_3.copy( tempV2_2 ).multiplyScalar( strokeWidth2 );
  879. nextPointL.copy( currentPoint ).sub( tempV2_3 );
  880. nextPointR.copy( currentPoint ).add( tempV2_3 );
  881. joinIsOnLeftSide = true;
  882. tempV2_3.subVectors( nextPoint, previousPoint );
  883. if ( normal1.dot( tempV2_3 ) < 0 ) {
  884. joinIsOnLeftSide = false;
  885. }
  886. if ( iPoint === 1 ) initialJoinIsOnLeftSide = joinIsOnLeftSide;
  887. tempV2_3.subVectors( nextPoint, currentPoint );
  888. tempV2_3.normalize();
  889. var dot = Math.abs( normal1.dot( tempV2_3 ) );
  890. // If path is straight, don't create join
  891. if ( dot !== 0 ) {
  892. // Compute inner and outer segment intersections
  893. var miterSide = strokeWidth2 / dot;
  894. tempV2_3.multiplyScalar( - miterSide );
  895. tempV2_4.subVectors( currentPoint, previousPoint );
  896. tempV2_5.copy( tempV2_4 ).setLength( miterSide ).add( tempV2_3 );
  897. innerPoint.copy( tempV2_5 ).negate();
  898. var miterLength2 = tempV2_5.length();
  899. var segmentLengthPrev = tempV2_4.length();
  900. tempV2_4.divideScalar( segmentLengthPrev );
  901. tempV2_6.subVectors( nextPoint, currentPoint );
  902. var segmentLengthNext = tempV2_6.length();
  903. tempV2_6.divideScalar( segmentLengthNext );
  904. // Check that previous and next segments doesn't overlap with the innerPoint of intersection
  905. if ( tempV2_4.dot( innerPoint ) < segmentLengthPrev && tempV2_6.dot( innerPoint ) < segmentLengthNext ) {
  906. innerSideModified = true;
  907. }
  908. outerPoint.copy( tempV2_5 ).add( currentPoint );
  909. innerPoint.add( currentPoint );
  910. isMiter = false;
  911. if ( innerSideModified ) {
  912. if ( joinIsOnLeftSide ) {
  913. nextPointR.copy( innerPoint );
  914. currentPointR.copy( innerPoint );
  915. } else {
  916. nextPointL.copy( innerPoint );
  917. currentPointL.copy( innerPoint );
  918. }
  919. } else {
  920. // The segment triangles are generated here if there was overlapping
  921. makeSegmentTriangles();
  922. }
  923. switch ( style.strokeLineJoin ) {
  924. case 'bevel':
  925. makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
  926. break;
  927. case 'round':
  928. // Segment triangles
  929. createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
  930. // Join triangles
  931. if ( joinIsOnLeftSide ) {
  932. makeCircularSector( currentPoint, currentPointL, nextPointL, u1, 0 );
  933. } else {
  934. makeCircularSector( currentPoint, nextPointR, currentPointR, u1, 1 );
  935. }
  936. break;
  937. case 'miter':
  938. case 'miter-clip':
  939. default:
  940. var miterFraction = ( strokeWidth2 * style.strokeMiterLimit ) / miterLength2;
  941. if ( miterFraction < 1 ) {
  942. // The join miter length exceeds the miter limit
  943. if ( style.strokeLineJoin !== 'miter-clip' ) {
  944. makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
  945. break;
  946. } else {
  947. // Segment triangles
  948. createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
  949. // Miter-clip join triangles
  950. if ( joinIsOnLeftSide ) {
  951. tempV2_6.subVectors( outerPoint, currentPointL ).multiplyScalar( miterFraction ).add( currentPointL );
  952. tempV2_7.subVectors( outerPoint, nextPointL ).multiplyScalar( miterFraction ).add( nextPointL );
  953. addVertex( currentPointL, u1, 0 );
  954. addVertex( tempV2_6, u1, 0 );
  955. addVertex( currentPoint, u1, 0.5 );
  956. addVertex( currentPoint, u1, 0.5 );
  957. addVertex( tempV2_6, u1, 0 );
  958. addVertex( tempV2_7, u1, 0 );
  959. addVertex( currentPoint, u1, 0.5 );
  960. addVertex( tempV2_7, u1, 0 );
  961. addVertex( nextPointL, u1, 0 );
  962. } else {
  963. tempV2_6.subVectors( outerPoint, currentPointR ).multiplyScalar( miterFraction ).add( currentPointR );
  964. tempV2_7.subVectors( outerPoint, nextPointR ).multiplyScalar( miterFraction ).add( nextPointR );
  965. addVertex( currentPointR, u1, 1 );
  966. addVertex( tempV2_6, u1, 1 );
  967. addVertex( currentPoint, u1, 0.5 );
  968. addVertex( currentPoint, u1, 0.5 );
  969. addVertex( tempV2_6, u1, 1 );
  970. addVertex( tempV2_7, u1, 1 );
  971. addVertex( currentPoint, u1, 0.5 );
  972. addVertex( tempV2_7, u1, 1 );
  973. addVertex( nextPointR, u1, 1 );
  974. }
  975. }
  976. } else {
  977. // Miter join segment triangles
  978. if ( innerSideModified ) {
  979. // Optimized segment + join triangles
  980. if ( joinIsOnLeftSide ) {
  981. addVertex( lastPointR, u0, 1 );
  982. addVertex( lastPointL, u0, 0 );
  983. addVertex( outerPoint, u1, 0 );
  984. addVertex( lastPointR, u0, 1 );
  985. addVertex( outerPoint, u1, 0 );
  986. addVertex( innerPoint, u1, 1 );
  987. } else {
  988. addVertex( lastPointR, u0, 1 );
  989. addVertex( lastPointL, u0, 0 );
  990. addVertex( outerPoint, u1, 1 );
  991. addVertex( lastPointL, u0, 0 );
  992. addVertex( innerPoint, u1, 0 );
  993. addVertex( outerPoint, u1, 1 );
  994. }
  995. if ( joinIsOnLeftSide ) {
  996. nextPointL.copy( outerPoint );
  997. } else {
  998. nextPointR.copy( outerPoint );
  999. }
  1000. } else {
  1001. // Add extra miter join triangles
  1002. if ( joinIsOnLeftSide ) {
  1003. addVertex( currentPointL, u1, 0 );
  1004. addVertex( outerPoint, u1, 0 );
  1005. addVertex( currentPoint, u1, 0.5 );
  1006. addVertex( currentPoint, u1, 0.5 );
  1007. addVertex( outerPoint, u1, 0 );
  1008. addVertex( nextPointL, u1, 0 );
  1009. } else {
  1010. addVertex( currentPointR, u1, 1 );
  1011. addVertex( outerPoint, u1, 1 );
  1012. addVertex( currentPoint, u1, 0.5 );
  1013. addVertex( currentPoint, u1, 0.5 );
  1014. addVertex( outerPoint, u1, 1 );
  1015. addVertex( nextPointR, u1, 1 );
  1016. }
  1017. }
  1018. isMiter = true;
  1019. }
  1020. break;
  1021. }
  1022. } else {
  1023. // The segment triangles are generated here when two consecutive points are collinear
  1024. makeSegmentTriangles();
  1025. }
  1026. } else {
  1027. // The segment triangles are generated here if it is the ending segment
  1028. makeSegmentTriangles();
  1029. }
  1030. if ( ! isClosed && iPoint === numPoints - 1 ) {
  1031. // Start line endcap
  1032. addCapGeometry( points[ 0 ], point0L, point0R, joinIsOnLeftSide, true, u0 );
  1033. }
  1034. // Increment loop variables
  1035. u0 = u1;
  1036. previousPoint = currentPoint;
  1037. lastPointL.copy( nextPointL );
  1038. lastPointR.copy( nextPointR );
  1039. }
  1040. if ( ! isClosed ) {
  1041. // Ending line endcap
  1042. addCapGeometry( currentPoint, currentPointL, currentPointR, joinIsOnLeftSide, false, u1 );
  1043. } else if ( innerSideModified && vertices ) {
  1044. // Modify path first segment vertices to adjust to the segments inner and outer intersections
  1045. var lastOuter = outerPoint;
  1046. var lastInner = innerPoint;
  1047. if ( initialJoinIsOnLeftSide !== joinIsOnLeftSide ) {
  1048. lastOuter = innerPoint;
  1049. lastInner = outerPoint;
  1050. }
  1051. if ( joinIsOnLeftSide ) {
  1052. lastInner.toArray( vertices, 0 * 3 );
  1053. lastInner.toArray( vertices, 3 * 3 );
  1054. if ( isMiter ) {
  1055. lastOuter.toArray( vertices, 1 * 3 );
  1056. }
  1057. } else {
  1058. lastInner.toArray( vertices, 1 * 3 );
  1059. lastInner.toArray( vertices, 3 * 3 );
  1060. if ( isMiter ) {
  1061. lastOuter.toArray( vertices, 0 * 3 );
  1062. }
  1063. }
  1064. }
  1065. return numVertices;
  1066. // -- End of algorithm
  1067. // -- Functions
  1068. function getNormal( p1, p2, result ) {
  1069. result.subVectors( p2, p1 );
  1070. return result.set( - result.y, result.x ).normalize();
  1071. }
  1072. function addVertex( position, u, v ) {
  1073. if ( vertices ) {
  1074. vertices[ currentCoordinate ] = position.x;
  1075. vertices[ currentCoordinate + 1 ] = position.y;
  1076. vertices[ currentCoordinate + 2 ] = 0;
  1077. if ( normals ) {
  1078. normals[ currentCoordinate ] = 0;
  1079. normals[ currentCoordinate + 1 ] = 0;
  1080. normals[ currentCoordinate + 2 ] = 1;
  1081. }
  1082. currentCoordinate += 3;
  1083. if ( uvs ) {
  1084. uvs[ currentCoordinateUV ] = u;
  1085. uvs[ currentCoordinateUV + 1 ] = v;
  1086. currentCoordinateUV += 2;
  1087. }
  1088. }
  1089. numVertices += 3;
  1090. }
  1091. function makeCircularSector( center, p1, p2, u, v ) {
  1092. // param p1, p2: Points in the circle arc.
  1093. // p1 and p2 are in clockwise direction.
  1094. tempV2_1.copy( p1 ).sub( center ).normalize();
  1095. tempV2_2.copy( p2 ).sub( center ).normalize();
  1096. var angle = Math.PI;
  1097. var dot = tempV2_1.dot( tempV2_2 );
  1098. if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
  1099. angle /= arcDivisions;
  1100. tempV2_3.copy( p1 );
  1101. for ( var i = 0, il = arcDivisions - 1; i < il; i ++ ) {
  1102. tempV2_4.copy( tempV2_3 ).rotateAround( center, angle );
  1103. addVertex( tempV2_3, u, v );
  1104. addVertex( tempV2_4, u, v );
  1105. addVertex( center, u, 0.5 );
  1106. tempV2_3.copy( tempV2_4 );
  1107. }
  1108. addVertex( tempV2_4, u, v );
  1109. addVertex( p2, u, v );
  1110. addVertex( center, u, 0.5 );
  1111. }
  1112. function makeSegmentTriangles() {
  1113. addVertex( lastPointR, u0, 1 );
  1114. addVertex( lastPointL, u0, 0 );
  1115. addVertex( currentPointL, u1, 0 );
  1116. addVertex( lastPointR, u0, 1 );
  1117. addVertex( currentPointL, u1, 1 );
  1118. addVertex( currentPointR, u1, 0 );
  1119. }
  1120. function makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u ) {
  1121. if ( innerSideModified ) {
  1122. // Optimized segment + bevel triangles
  1123. if ( joinIsOnLeftSide ) {
  1124. // Path segments triangles
  1125. addVertex( lastPointR, u0, 1 );
  1126. addVertex( lastPointL, u0, 0 );
  1127. addVertex( currentPointL, u1, 0 );
  1128. addVertex( lastPointR, u0, 1 );
  1129. addVertex( currentPointL, u1, 0 );
  1130. addVertex( innerPoint, u1, 1 );
  1131. // Bevel join triangle
  1132. addVertex( currentPointL, u, 0 );
  1133. addVertex( nextPointL, u, 0 );
  1134. addVertex( innerPoint, u, 0.5 );
  1135. } else {
  1136. // Path segments triangles
  1137. addVertex( lastPointR, u0, 1 );
  1138. addVertex( lastPointL, u0, 0 );
  1139. addVertex( currentPointR, u1, 1 );
  1140. addVertex( lastPointL, u0, 0 );
  1141. addVertex( innerPoint, u1, 0 );
  1142. addVertex( currentPointR, u1, 1 );
  1143. // Bevel join triangle
  1144. addVertex( currentPointR, u, 1 );
  1145. addVertex( nextPointR, u, 0 );
  1146. addVertex( innerPoint, u, 0.5 );
  1147. }
  1148. } else {
  1149. // Bevel join triangle. The segment triangles are done in the main loop
  1150. if ( joinIsOnLeftSide ) {
  1151. addVertex( currentPointL, u, 0 );
  1152. addVertex( nextPointL, u, 0 );
  1153. addVertex( currentPoint, u, 0.5 );
  1154. } else {
  1155. addVertex( currentPointR, u, 1 );
  1156. addVertex( nextPointR, u, 0 );
  1157. addVertex( currentPoint, u, 0.5 );
  1158. }
  1159. }
  1160. }
  1161. function createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified ) {
  1162. if ( innerSideModified ) {
  1163. if ( joinIsOnLeftSide ) {
  1164. addVertex( lastPointR, u0, 1 );
  1165. addVertex( lastPointL, u0, 0 );
  1166. addVertex( currentPointL, u1, 0 );
  1167. addVertex( lastPointR, u0, 1 );
  1168. addVertex( currentPointL, u1, 0 );
  1169. addVertex( innerPoint, u1, 1 );
  1170. addVertex( currentPointL, u0, 0 );
  1171. addVertex( currentPoint, u1, 0.5 );
  1172. addVertex( innerPoint, u1, 1 );
  1173. addVertex( currentPoint, u1, 0.5 );
  1174. addVertex( nextPointL, u0, 0 );
  1175. addVertex( innerPoint, u1, 1 );
  1176. } else {
  1177. addVertex( lastPointR, u0, 1 );
  1178. addVertex( lastPointL, u0, 0 );
  1179. addVertex( currentPointR, u1, 1 );
  1180. addVertex( lastPointL, u0, 0 );
  1181. addVertex( innerPoint, u1, 0 );
  1182. addVertex( currentPointR, u1, 1 );
  1183. addVertex( currentPointR, u0, 1 );
  1184. addVertex( innerPoint, u1, 0 );
  1185. addVertex( currentPoint, u1, 0.5 );
  1186. addVertex( currentPoint, u1, 0.5 );
  1187. addVertex( innerPoint, u1, 0 );
  1188. addVertex( nextPointR, u0, 1 );
  1189. }
  1190. }
  1191. }
  1192. function addCapGeometry( center, p1, p2, joinIsOnLeftSide, start, u ) {
  1193. // param center: End point of the path
  1194. // param p1, p2: Left and right cap points
  1195. switch ( style.strokeLineCap ) {
  1196. case 'round':
  1197. if ( start ) {
  1198. makeCircularSector( center, p2, p1, u, 0.5 );
  1199. } else {
  1200. makeCircularSector( center, p1, p2, u, 0.5 );
  1201. }
  1202. break;
  1203. case 'square':
  1204. if ( start ) {
  1205. tempV2_1.subVectors( p1, center );
  1206. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1207. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1208. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1209. // Modify already existing vertices
  1210. if ( joinIsOnLeftSide ) {
  1211. tempV2_3.toArray( vertices, 1 * 3 );
  1212. tempV2_4.toArray( vertices, 0 * 3 );
  1213. tempV2_4.toArray( vertices, 3 * 3 );
  1214. } else {
  1215. tempV2_3.toArray( vertices, 1 * 3 );
  1216. tempV2_3.toArray( vertices, 3 * 3 );
  1217. tempV2_4.toArray( vertices, 0 * 3 );
  1218. }
  1219. } else {
  1220. tempV2_1.subVectors( p2, center );
  1221. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1222. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1223. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1224. var vl = vertices.length;
  1225. // Modify already existing vertices
  1226. if ( joinIsOnLeftSide ) {
  1227. tempV2_3.toArray( vertices, vl - 1 * 3 );
  1228. tempV2_4.toArray( vertices, vl - 2 * 3 );
  1229. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1230. } else {
  1231. tempV2_3.toArray( vertices, vl - 2 * 3 );
  1232. tempV2_4.toArray( vertices, vl - 1 * 3 );
  1233. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1234. }
  1235. }
  1236. break;
  1237. case 'butt':
  1238. default:
  1239. // Nothing to do here
  1240. break;
  1241. }
  1242. }
  1243. function removeDuplicatedPoints( points ) {
  1244. // Creates a new array if necessary with duplicated points removed.
  1245. // This does not remove duplicated initial and ending points of a closed path.
  1246. var dupPoints = false;
  1247. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1248. if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
  1249. dupPoints = true;
  1250. break;
  1251. }
  1252. }
  1253. if ( ! dupPoints ) return points;
  1254. var newPoints = [];
  1255. newPoints.push( points[ 0 ] );
  1256. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1257. if ( points[ i ].distanceTo( points[ i + 1 ] ) >= minDistance ) {
  1258. newPoints.push( points[ i ] );
  1259. }
  1260. }
  1261. newPoints.push( points[ points.length - 1 ] );
  1262. return newPoints;
  1263. }
  1264. };
  1265. }();
  1266. export { SVGLoader };