2
0

SVGLoader.js 45 KB

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