2
0

SVGLoader.js 44 KB

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