SVGLoader.js 44 KB

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