SVGLoader.js 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871
  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, style );
  37. break;
  38. case 'rect':
  39. style = parseStyle( node, style );
  40. path = parseRectNode( node, style );
  41. break;
  42. case 'polygon':
  43. style = parseStyle( node, style );
  44. path = parsePolygonNode( node, style );
  45. break;
  46. case 'polyline':
  47. style = parseStyle( node, style );
  48. path = parsePolylineNode( node, style );
  49. break;
  50. case 'circle':
  51. style = parseStyle( node, style );
  52. path = parseCircleNode( node, style );
  53. break;
  54. case 'ellipse':
  55. style = parseStyle( node, style );
  56. path = parseEllipseNode( node, style );
  57. break;
  58. case 'line':
  59. style = parseStyle( node, style );
  60. path = parseLineNode( node, style );
  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. currentTransform.copy( transformStack.pop() );
  79. }
  80. }
  81. function parsePathNode( node, style ) {
  82. var path = new THREE.ShapePath();
  83. var point = new THREE.Vector2();
  84. var control = new THREE.Vector2();
  85. var firstPoint = new THREE.Vector2();
  86. var isFirstPoint = true;
  87. var doSetFirstPoint = false;
  88. var d = node.getAttribute( 'd' );
  89. // console.log( d );
  90. var commands = d.match( /[a-df-z][^a-df-z]*/ig );
  91. for ( var i = 0, l = commands.length; i < l; i ++ ) {
  92. var command = commands[ i ];
  93. var type = command.charAt( 0 );
  94. var data = command.substr( 1 ).trim();
  95. if ( isFirstPoint === true ) {
  96. doSetFirstPoint = true;
  97. isFirstPoint = false;
  98. }
  99. switch ( type ) {
  100. case 'M':
  101. var numbers = parseFloats( data );
  102. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  103. point.x = numbers[ j + 0 ];
  104. point.y = numbers[ j + 1 ];
  105. control.x = point.x;
  106. control.y = point.y;
  107. if ( j === 0 ) {
  108. path.moveTo( point.x, point.y );
  109. } else {
  110. path.lineTo( point.x, point.y );
  111. }
  112. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  113. }
  114. break;
  115. case 'H':
  116. var numbers = parseFloats( data );
  117. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  118. point.x = numbers[ j ];
  119. control.x = point.x;
  120. control.y = point.y;
  121. path.lineTo( point.x, point.y );
  122. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  123. }
  124. break;
  125. case 'V':
  126. var numbers = parseFloats( data );
  127. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  128. point.y = numbers[ j ];
  129. control.x = point.x;
  130. control.y = point.y;
  131. path.lineTo( point.x, point.y );
  132. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  133. }
  134. break;
  135. case 'L':
  136. var numbers = parseFloats( data );
  137. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  138. point.x = numbers[ j + 0 ];
  139. point.y = numbers[ j + 1 ];
  140. control.x = point.x;
  141. control.y = point.y;
  142. path.lineTo( point.x, point.y );
  143. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  144. }
  145. break;
  146. case 'C':
  147. var numbers = parseFloats( data );
  148. for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
  149. path.bezierCurveTo(
  150. numbers[ j + 0 ],
  151. numbers[ j + 1 ],
  152. numbers[ j + 2 ],
  153. numbers[ j + 3 ],
  154. numbers[ j + 4 ],
  155. numbers[ j + 5 ]
  156. );
  157. control.x = numbers[ j + 2 ];
  158. control.y = numbers[ j + 3 ];
  159. point.x = numbers[ j + 4 ];
  160. point.y = numbers[ j + 5 ];
  161. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  162. }
  163. break;
  164. case 'S':
  165. var numbers = parseFloats( data );
  166. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  167. path.bezierCurveTo(
  168. getReflection( point.x, control.x ),
  169. getReflection( point.y, control.y ),
  170. numbers[ j + 0 ],
  171. numbers[ j + 1 ],
  172. numbers[ j + 2 ],
  173. numbers[ j + 3 ]
  174. );
  175. control.x = numbers[ j + 0 ];
  176. control.y = numbers[ j + 1 ];
  177. point.x = numbers[ j + 2 ];
  178. point.y = numbers[ j + 3 ];
  179. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  180. }
  181. break;
  182. case 'Q':
  183. var numbers = parseFloats( data );
  184. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  185. path.quadraticCurveTo(
  186. numbers[ j + 0 ],
  187. numbers[ j + 1 ],
  188. numbers[ j + 2 ],
  189. numbers[ j + 3 ]
  190. );
  191. control.x = numbers[ j + 0 ];
  192. control.y = numbers[ j + 1 ];
  193. point.x = numbers[ j + 2 ];
  194. point.y = numbers[ j + 3 ];
  195. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  196. }
  197. break;
  198. case 'T':
  199. var numbers = parseFloats( data );
  200. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  201. var rx = getReflection( point.x, control.x );
  202. var ry = getReflection( point.y, control.y );
  203. path.quadraticCurveTo(
  204. rx,
  205. ry,
  206. numbers[ j + 0 ],
  207. numbers[ j + 1 ]
  208. );
  209. control.x = rx;
  210. control.y = ry;
  211. point.x = numbers[ j + 0 ];
  212. point.y = numbers[ j + 1 ];
  213. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  214. }
  215. break;
  216. case 'A':
  217. var numbers = parseFloats( data );
  218. for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
  219. var start = point.clone();
  220. point.x = numbers[ j + 5 ];
  221. point.y = numbers[ j + 6 ];
  222. control.x = point.x;
  223. control.y = point.y;
  224. parseArcCommand(
  225. path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
  226. );
  227. if ( j === 0 && doSetFirstPoint === true ) firstPoint.copy( point );
  228. }
  229. break;
  230. //
  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. //
  362. case 'Z':
  363. case 'z':
  364. path.currentPath.autoClose = true;
  365. if ( path.currentPath.curves.length > 0 ) {
  366. // Reset point to beginning of Path
  367. point.copy( firstPoint );
  368. path.currentPath.currentPoint.copy( point );
  369. isFirstPoint = true;
  370. }
  371. break;
  372. default:
  373. console.warn( command );
  374. }
  375. // console.log( type, parseFloats( data ), parseFloats( data ).length )
  376. doSetFirstPoint = false;
  377. }
  378. return path;
  379. }
  380. /**
  381. * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
  382. * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
  383. * From
  384. * rx ry x-axis-rotation large-arc-flag sweep-flag x y
  385. * To
  386. * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
  387. */
  388. function parseArcCommand( path, rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, start, end ) {
  389. x_axis_rotation = x_axis_rotation * Math.PI / 180;
  390. // Ensure radii are positive
  391. rx = Math.abs( rx );
  392. ry = Math.abs( ry );
  393. // Compute (x1′, y1′)
  394. var dx2 = ( start.x - end.x ) / 2.0;
  395. var dy2 = ( start.y - end.y ) / 2.0;
  396. var x1p = Math.cos( x_axis_rotation ) * dx2 + Math.sin( x_axis_rotation ) * dy2;
  397. var y1p = - Math.sin( x_axis_rotation ) * dx2 + Math.cos( x_axis_rotation ) * dy2;
  398. // Compute (cx′, cy′)
  399. var rxs = rx * rx;
  400. var rys = ry * ry;
  401. var x1ps = x1p * x1p;
  402. var y1ps = y1p * y1p;
  403. // Ensure radii are large enough
  404. var cr = x1ps / rxs + y1ps / rys;
  405. if ( cr > 1 ) {
  406. // scale up rx,ry equally so cr == 1
  407. var s = Math.sqrt( cr );
  408. rx = s * rx;
  409. ry = s * ry;
  410. rxs = rx * rx;
  411. rys = ry * ry;
  412. }
  413. var dq = ( rxs * y1ps + rys * x1ps );
  414. var pq = ( rxs * rys - dq ) / dq;
  415. var q = Math.sqrt( Math.max( 0, pq ) );
  416. if ( large_arc_flag === sweep_flag ) q = - q;
  417. var cxp = q * rx * y1p / ry;
  418. var cyp = - q * ry * x1p / rx;
  419. // Step 3: Compute (cx, cy) from (cx′, cy′)
  420. var cx = Math.cos( x_axis_rotation ) * cxp - Math.sin( x_axis_rotation ) * cyp + ( start.x + end.x ) / 2;
  421. var cy = Math.sin( x_axis_rotation ) * cxp + Math.cos( x_axis_rotation ) * cyp + ( start.y + end.y ) / 2;
  422. // Step 4: Compute θ1 and Δθ
  423. var theta = svgAngle( 1, 0, ( x1p - cxp ) / rx, ( y1p - cyp ) / ry );
  424. var delta = svgAngle( ( x1p - cxp ) / rx, ( y1p - cyp ) / ry, ( - x1p - cxp ) / rx, ( - y1p - cyp ) / ry ) % ( Math.PI * 2 );
  425. path.currentPath.absellipse( cx, cy, rx, ry, theta, theta + delta, sweep_flag === 0, x_axis_rotation );
  426. }
  427. function svgAngle( ux, uy, vx, vy ) {
  428. var dot = ux * vx + uy * vy;
  429. var len = Math.sqrt( ux * ux + uy * uy ) * Math.sqrt( vx * vx + vy * vy );
  430. var ang = Math.acos( Math.max( -1, Math.min( 1, dot / len ) ) ); // floating point precision, slightly over values appear
  431. if ( ( ux * vy - uy * vx ) < 0 ) ang = - ang;
  432. return ang;
  433. }
  434. /*
  435. * According to https://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute
  436. * rounded corner should be rendered to elliptical arc, but bezier curve does the job well enough
  437. */
  438. function parseRectNode( node, style ) {
  439. var x = parseFloat( node.getAttribute( 'x' ) || 0 );
  440. var y = parseFloat( node.getAttribute( 'y' ) || 0 );
  441. var rx = parseFloat( node.getAttribute( 'rx' ) || 0 );
  442. var ry = parseFloat( node.getAttribute( 'ry' ) || 0 );
  443. var w = parseFloat( node.getAttribute( 'width' ) );
  444. var h = parseFloat( node.getAttribute( 'height' ) );
  445. var path = new THREE.ShapePath();
  446. path.moveTo( x + 2 * rx, y );
  447. path.lineTo( x + w - 2 * rx, y );
  448. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
  449. path.lineTo( x + w, y + h - 2 * ry );
  450. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
  451. path.lineTo( x + 2 * rx, y + h );
  452. if ( rx !== 0 || ry !== 0 ) {
  453. path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
  454. }
  455. path.lineTo( x, y + 2 * ry );
  456. if ( rx !== 0 || ry !== 0 ) {
  457. path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
  458. }
  459. return path;
  460. }
  461. function parsePolygonNode( node, style ) {
  462. function iterator( match, a, b ) {
  463. var x = parseFloat( a );
  464. var y = parseFloat( b );
  465. if ( index === 0 ) {
  466. path.moveTo( x, y );
  467. } else {
  468. path.lineTo( x, y );
  469. }
  470. index ++;
  471. }
  472. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  473. var path = new THREE.ShapePath();
  474. var index = 0;
  475. node.getAttribute( 'points' ).replace(regex, iterator);
  476. path.currentPath.autoClose = true;
  477. return path;
  478. }
  479. function parsePolylineNode( node, style ) {
  480. function iterator( match, a, b ) {
  481. var x = parseFloat( a );
  482. var y = parseFloat( b );
  483. if ( index === 0 ) {
  484. path.moveTo( x, y );
  485. } else {
  486. path.lineTo( x, y );
  487. }
  488. index ++;
  489. }
  490. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  491. var path = new THREE.ShapePath();
  492. var index = 0;
  493. node.getAttribute( 'points' ).replace(regex, iterator);
  494. path.currentPath.autoClose = false;
  495. return path;
  496. }
  497. function parseCircleNode( node, style ) {
  498. var x = parseFloat( node.getAttribute( 'cx' ) );
  499. var y = parseFloat( node.getAttribute( 'cy' ) );
  500. var r = parseFloat( node.getAttribute( 'r' ) );
  501. var subpath = new THREE.Path();
  502. subpath.absarc( x, y, r, 0, Math.PI * 2 );
  503. var path = new THREE.ShapePath();
  504. path.subPaths.push( subpath );
  505. return path;
  506. }
  507. function parseEllipseNode( node, style ) {
  508. var x = parseFloat( node.getAttribute( 'cx' ) );
  509. var y = parseFloat( node.getAttribute( 'cy' ) );
  510. var rx = parseFloat( node.getAttribute( 'rx' ) );
  511. var ry = parseFloat( node.getAttribute( 'ry' ) );
  512. var subpath = new THREE.Path();
  513. subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
  514. var path = new THREE.ShapePath();
  515. path.subPaths.push( subpath );
  516. return path;
  517. }
  518. function parseLineNode( node, style ) {
  519. var x1 = parseFloat( node.getAttribute( 'x1' ) );
  520. var y1 = parseFloat( node.getAttribute( 'y1' ) );
  521. var x2 = parseFloat( node.getAttribute( 'x2' ) );
  522. var y2 = parseFloat( node.getAttribute( 'y2' ) );
  523. var path = new THREE.ShapePath();
  524. path.moveTo( x1, y1 );
  525. path.lineTo( x2, y2 );
  526. path.currentPath.autoClose = false;
  527. return path;
  528. }
  529. //
  530. function parseStyle( node, style ) {
  531. style = Object.assign( {}, style ); // clone style
  532. function addStyle( svgName, jsName, adjustFunction ) {
  533. if ( adjustFunction === undefined ) adjustFunction = function copy( v ) { return v; };
  534. if ( node.hasAttribute( svgName ) ) style[ jsName ] = adjustFunction( node.getAttribute( svgName ) );
  535. if ( node.style[ svgName ] !== '' ) style[ jsName ] = adjustFunction( node.style[ svgName ] );
  536. }
  537. function clamp( v ) {
  538. return Math.max( 0, Math.min( 1, v ) );
  539. }
  540. function positive( v ) {
  541. return Math.max( 0, v );
  542. }
  543. addStyle( 'fill', 'fill' );
  544. addStyle( 'fill-opacity', 'fillOpacity', clamp );
  545. addStyle( 'stroke', 'stroke' );
  546. addStyle( 'stroke-opacity', 'strokeOpacity', clamp );
  547. addStyle( 'stroke-width', 'strokeWidth', positive );
  548. addStyle( 'stroke-linejoin', 'strokeLineJoin' );
  549. addStyle( 'stroke-linecap', 'strokeLineCap' );
  550. addStyle( 'stroke-miterlimit', 'strokeMiterLimit', positive );
  551. return style;
  552. }
  553. // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
  554. function getReflection( a, b ) {
  555. return a - ( b - a );
  556. }
  557. function parseFloats( string ) {
  558. var array = string.split( /[\s,]+|(?=\s?[+\-])/ );
  559. for ( var i = 0; i < array.length; i ++ ) {
  560. var number = array[ i ];
  561. // Handle values like 48.6037.7.8
  562. // TODO Find a regex for this
  563. if ( number.indexOf( '.' ) !== number.lastIndexOf( '.' ) ) {
  564. var split = number.split( '.' );
  565. for ( var s = 2; s < split.length; s ++ ) {
  566. array.splice( i + s - 1, 0, '0.' + split[ s ] );
  567. }
  568. }
  569. array[ i ] = parseFloat( number );
  570. }
  571. return array;
  572. }
  573. function getNodeTransform( node ) {
  574. if ( ! node.hasAttribute( 'transform' ) ) {
  575. return null;
  576. }
  577. var transform = parseNodeTransform( node );
  578. if ( transform ) {
  579. if ( transformStack.length > 0 ) {
  580. transform.premultiply( transformStack[ transformStack.length - 1 ] );
  581. }
  582. currentTransform.copy( transform );
  583. transformStack.push( transform );
  584. }
  585. return transform;
  586. }
  587. function parseNodeTransform( node ) {
  588. var transform = new THREE.Matrix3();
  589. var currentTransform = tempTransform0;
  590. var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
  591. for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex -- ) {
  592. var transformText = transformsTexts[ tIndex ];
  593. var openParPos = transformText.indexOf( "(" );
  594. var closeParPos = transformText.indexOf( ")" );
  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. var scope = this;
  734. console.time( 'THREE.SVGLoader: DOMParser' );
  735. var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
  736. console.timeEnd( 'THREE.SVGLoader: DOMParser' );
  737. console.time( 'THREE.SVGLoader: Parse' );
  738. parseNode( xml.documentElement, {
  739. fill: '#000',
  740. fillOpacity: 1,
  741. strokeOpacity: 1,
  742. strokeWidth: 1,
  743. strokeLineJoin: 'miter',
  744. strokeLineCap: 'butt',
  745. strokeMiterLimit: 4
  746. } );
  747. var data = { paths: paths, xml: xml.documentElement };
  748. // console.log( paths );
  749. console.timeEnd( 'THREE.SVGLoader: Parse' );
  750. return data;
  751. }
  752. };
  753. THREE.SVGLoader.getStrokeStyle = function ( width, color, opacity, lineJoin, lineCap, miterLimit ) {
  754. // Param width: Stroke width
  755. // Param color: As returned by THREE.Color.getStyle()
  756. // Param opacity: 0 (transparent) to 1 (opaque)
  757. // Param lineJoin: One of "round", "bevel", "miter" or "miter-limit"
  758. // Param lineCap: One of "round", "square" or "butt"
  759. // Param miterLimit: Maximum join length, in multiples of the "width" parameter (join is truncated if it exceeds that distance)
  760. // Returns style object
  761. width = width !== undefined ? width : 1;
  762. color = color !== undefined ? color : '#000';
  763. opacity = opacity !== undefined ? opacity : 1;
  764. lineJoin = lineJoin !== undefined ? lineJoin : 'miter';
  765. lineCap = lineCap !== undefined ? lineCap : 'butt';
  766. miterLimit = miterLimit !== undefined ? miterLimit : 4;
  767. return {
  768. strokeColor: color,
  769. strokeWidth: width,
  770. strokeLineJoin: lineJoin,
  771. strokeLineCap: lineCap,
  772. strokeMiterLimit: miterLimit
  773. };
  774. };
  775. THREE.SVGLoader.pointsToStroke = function ( points, style, arcDivisions, minDistance ) {
  776. // Generates a stroke with some witdh around the given path.
  777. // The path can be open or closed (last point equals to first point)
  778. // Param points: Array of Vector2D (the path). Minimum 2 points.
  779. // Param style: Object with SVG properties as returned by SVGLoader.getStrokeStyle(), or SVGLoader.parse() in the path.userData.style object
  780. // Params arcDivisions: Arc divisions for round joins and endcaps. (Optional)
  781. // Param minDistance: Points closer to this distance will be merged. (Optional)
  782. // Returns BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
  783. var vertices = [];
  784. var normals = [];
  785. var uvs = [];
  786. if ( THREE.SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs ) === 0 ) {
  787. return null;
  788. }
  789. var geometry = new THREE.BufferGeometry();
  790. geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
  791. geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
  792. geometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
  793. return geometry;
  794. };
  795. THREE.SVGLoader.pointsToStrokeWithBuffers = function () {
  796. var tempV2_1 = new THREE.Vector2();
  797. var tempV2_2 = new THREE.Vector2();
  798. var tempV2_3 = new THREE.Vector2();
  799. var tempV2_4 = new THREE.Vector2();
  800. var tempV2_5 = new THREE.Vector2();
  801. var tempV2_6 = new THREE.Vector2();
  802. var tempV2_7 = new THREE.Vector2();
  803. var tempV3_1 = new THREE.Vector3();
  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. var tempTransform0 = new THREE.Matrix3();
  815. var tempTransform1 = new THREE.Matrix3();
  816. var tempTransform2 = new THREE.Matrix3();
  817. return function ( points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset ) {
  818. // This function can be called to update existing arrays or buffers.
  819. // Accepts same parameters as pointsToStroke, plus the buffers and optional offset.
  820. // Param vertexOffset: Offset vertices to start writing in the buffers (3 elements/vertex for vertices and normals, and 2 elements/vertex for uvs)
  821. // Returns number of written vertices / normals / uvs
  822. // if 'vertices' parameter is undefined no triangles will be generated, but the returned vertices count will still be valid (useful to preallocate the buffers)
  823. arcLengthDivisions = arcDivisions !== undefined ? arcDivisions : 12;
  824. minDistance = minDistance !== undefined ? minDistance : 0.001;
  825. vertexOffset = vertexOffset !== undefined ? vertexOffset : 0;
  826. // First ensure there are no duplicated points
  827. points = removeDuplicatedPoints( points );
  828. var numPoints = points.length;
  829. if ( numPoints < 2 ) return 0;
  830. var isClosed = points[ 0 ].equals( points[ numPoints - 1 ] );
  831. var currentPoint;
  832. var previousPoint = points[ 0 ];
  833. var nextPoint;
  834. var strokeWidth2 = style.strokeWidth / 2;
  835. var deltaU = 1 / ( numPoints - 1 );
  836. var u0 = 0;
  837. var innerSideModified;
  838. var joinIsOnLeftSide;
  839. var isMiter;
  840. var initialJoinIsOnLeftSide = false;
  841. var numVertices = 0;
  842. var currentCoordinate = vertexOffset * 3;
  843. var currentCoordinateUV = vertexOffset * 2;
  844. // Get initial left and right stroke points
  845. getNormal( points[ 0 ], points[ 1 ], tempV2_1 ).multiplyScalar( strokeWidth2 );
  846. lastPointL.copy( points[ 0 ] ).sub( tempV2_1 );
  847. lastPointR.copy( points[ 0 ] ).add( tempV2_1 );
  848. point0L.copy( lastPointL );
  849. point0R.copy( lastPointR );
  850. for ( var iPoint = 1; iPoint < numPoints; iPoint ++ ) {
  851. currentPoint = points[ iPoint ];
  852. // Get next point
  853. if ( iPoint === numPoints - 1 ) {
  854. if ( isClosed ) {
  855. // Skip duplicated initial point
  856. nextPoint = points[ 1 ];
  857. }
  858. else nextPoint = undefined;
  859. }
  860. else {
  861. nextPoint = points[ iPoint + 1 ];
  862. }
  863. // Normal of previous segment in tempV2_1
  864. var normal1 = tempV2_1;
  865. getNormal( previousPoint, currentPoint, normal1 );
  866. tempV2_3.copy( normal1 ).multiplyScalar( strokeWidth2 );
  867. currentPointL.copy( currentPoint ).sub( tempV2_3 );
  868. currentPointR.copy( currentPoint ).add( tempV2_3 );
  869. var u1 = u0 + deltaU;
  870. innerSideModified = false;
  871. if ( nextPoint !== undefined ) {
  872. // Normal of next segment in tempV2_2
  873. getNormal( currentPoint, nextPoint, tempV2_2 );
  874. tempV2_3.copy( tempV2_2 ).multiplyScalar( strokeWidth2 );
  875. nextPointL.copy( currentPoint ).sub( tempV2_3 );
  876. nextPointR.copy( currentPoint ).add( tempV2_3 );
  877. joinIsOnLeftSide = true;
  878. tempV2_3.subVectors( nextPoint, previousPoint );
  879. if ( normal1.dot( tempV2_3 ) < 0 ) {
  880. joinIsOnLeftSide = false;
  881. }
  882. if ( iPoint === 1 ) initialJoinIsOnLeftSide = joinIsOnLeftSide;
  883. tempV2_3.subVectors( nextPoint, currentPoint )
  884. var maxInnerDistance = tempV2_3.normalize();
  885. var dot = Math.abs( normal1.dot( tempV2_3 ) );
  886. // If path is straight, don't create join
  887. if ( dot !== 0 ) {
  888. // Compute inner and outer segment intersections
  889. var miterSide = strokeWidth2 / dot;
  890. tempV2_3.multiplyScalar( - miterSide );
  891. tempV2_4.subVectors( currentPoint, previousPoint );
  892. tempV2_5.copy( tempV2_4 ).setLength( miterSide ).add( tempV2_3 );
  893. innerPoint.copy( tempV2_5 ).negate();
  894. var miterLength2 = tempV2_5.length();
  895. var segmentLengthPrev = tempV2_4.length();
  896. tempV2_4.divideScalar( segmentLengthPrev );
  897. tempV2_6.subVectors( nextPoint, currentPoint );
  898. var segmentLengthNext = tempV2_6.length();
  899. tempV2_6.divideScalar( segmentLengthNext );
  900. // Check that previous and next segments doesn't overlap with the innerPoint of intersection
  901. if ( tempV2_4.dot( innerPoint ) < segmentLengthPrev && tempV2_6.dot( innerPoint ) < segmentLengthNext ) {
  902. innerSideModified = true;
  903. }
  904. outerPoint.copy( tempV2_5 ).add( currentPoint );
  905. innerPoint.add( currentPoint );
  906. isMiter = false;
  907. if ( innerSideModified ) {
  908. if ( joinIsOnLeftSide ) {
  909. nextPointR.copy( innerPoint );
  910. currentPointR.copy( innerPoint );
  911. }
  912. else {
  913. nextPointL.copy( innerPoint );
  914. currentPointL.copy( innerPoint );
  915. }
  916. }
  917. else {
  918. // The segment triangles are generated here if there was overlapping
  919. makeSegmentTriangles();
  920. }
  921. switch ( style.strokeLineJoin ) {
  922. case 'bevel':
  923. makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
  924. break;
  925. case 'round':
  926. // Segment triangles
  927. createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
  928. // Join triangles
  929. if ( joinIsOnLeftSide ) {
  930. makeCircularSector( currentPoint, currentPointL, nextPointL, u1, 0 );
  931. }
  932. else {
  933. makeCircularSector( currentPoint, nextPointR, currentPointR, u1, 1 );
  934. }
  935. break;
  936. case 'miter':
  937. case 'miter-clip':
  938. default:
  939. var miterFraction = ( strokeWidth2 * style.strokeMiterLimit ) / miterLength2;
  940. if ( miterFraction < 1 ) {
  941. // The join miter length exceeds the miter limit
  942. if ( style.strokeLineJoin !== 'miter-clip' ) {
  943. makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
  944. break;
  945. }
  946. else {
  947. // Segment triangles
  948. createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
  949. // Miter-clip join triangles
  950. if ( joinIsOnLeftSide ) {
  951. tempV2_6.subVectors( outerPoint, currentPointL ).multiplyScalar( miterFraction ).add( currentPointL );
  952. tempV2_7.subVectors( outerPoint, nextPointL ).multiplyScalar( miterFraction ).add( nextPointL );
  953. addVertex( currentPointL, u1, 0 );
  954. addVertex( tempV2_6, u1, 0 );
  955. addVertex( currentPoint, u1, 0.5 );
  956. addVertex( currentPoint, u1, 0.5 );
  957. addVertex( tempV2_6, u1, 0 );
  958. addVertex( tempV2_7, u1, 0 );
  959. addVertex( currentPoint, u1, 0.5 );
  960. addVertex( tempV2_7, u1, 0 );
  961. addVertex( nextPointL, u1, 0 );
  962. }
  963. else {
  964. tempV2_6.subVectors( outerPoint, currentPointR ).multiplyScalar( miterFraction ).add( currentPointR );
  965. tempV2_7.subVectors( outerPoint, nextPointR ).multiplyScalar( miterFraction ).add( nextPointR );
  966. addVertex( currentPointR, u1, 1 );
  967. addVertex( tempV2_6, u1, 1 );
  968. addVertex( currentPoint, u1, 0.5 );
  969. addVertex( currentPoint, u1, 0.5 );
  970. addVertex( tempV2_6, u1, 1 );
  971. addVertex( tempV2_7, u1, 1 );
  972. addVertex( currentPoint, u1, 0.5 );
  973. addVertex( tempV2_7, u1, 1 );
  974. addVertex( nextPointR, u1, 1 );
  975. }
  976. }
  977. }
  978. else {
  979. // Miter join segment triangles
  980. if ( innerSideModified ) {
  981. // Optimized segment + join triangles
  982. if ( joinIsOnLeftSide ) {
  983. addVertex( lastPointR, u0, 1 );
  984. addVertex( lastPointL, u0, 0 );
  985. addVertex( outerPoint, u1, 0 );
  986. addVertex( lastPointR, u0, 1 );
  987. addVertex( outerPoint, u1, 0 );
  988. addVertex( innerPoint, u1, 1 );
  989. }
  990. else {
  991. addVertex( lastPointR, u0, 1 );
  992. addVertex( lastPointL, u0, 0 );
  993. addVertex( outerPoint, u1, 1 );
  994. addVertex( lastPointL, u0, 0 );
  995. addVertex( innerPoint, u1, 0 );
  996. addVertex( outerPoint, u1, 1 );
  997. }
  998. if ( joinIsOnLeftSide ) {
  999. nextPointL.copy( outerPoint );
  1000. }
  1001. else {
  1002. nextPointR.copy( outerPoint );
  1003. }
  1004. }
  1005. else {
  1006. // Add extra miter join triangles
  1007. if ( joinIsOnLeftSide ) {
  1008. addVertex( currentPointL, u1, 0 );
  1009. addVertex( outerPoint, u1, 0 );
  1010. addVertex( currentPoint, u1, 0.5 );
  1011. addVertex( currentPoint, u1, 0.5 );
  1012. addVertex( outerPoint, u1, 0 );
  1013. addVertex( nextPointL, u1, 0 );
  1014. }
  1015. else {
  1016. addVertex( currentPointR, u1, 1 );
  1017. addVertex( outerPoint, u1, 1 );
  1018. addVertex( currentPoint, u1, 0.5 );
  1019. addVertex( currentPoint, u1, 0.5 );
  1020. addVertex( outerPoint, u1, 1 );
  1021. addVertex( nextPointR, u1, 1 );
  1022. }
  1023. }
  1024. isMiter = true;
  1025. }
  1026. break;
  1027. }
  1028. }
  1029. else {
  1030. // The segment triangles are generated here when two consecutive points are collinear
  1031. makeSegmentTriangles();
  1032. }
  1033. }
  1034. else {
  1035. // The segment triangles are generated here if it is the ending segment
  1036. makeSegmentTriangles();
  1037. }
  1038. if ( ! isClosed && iPoint === numPoints - 1 ) {
  1039. // Start line endcap
  1040. addCapGeometry( points[ 0 ], point0L, point0R, joinIsOnLeftSide, true, u0 );
  1041. }
  1042. // Increment loop variables
  1043. u0 = u1;
  1044. previousPoint = currentPoint;
  1045. lastPointL.copy( nextPointL );
  1046. lastPointR.copy( nextPointR );
  1047. }
  1048. if ( ! isClosed ) {
  1049. // Ending line endcap
  1050. addCapGeometry( currentPoint, currentPointL, currentPointR, joinIsOnLeftSide, false, u1 );
  1051. }
  1052. else if ( innerSideModified && vertices ) {
  1053. // Modify path first segment vertices to adjust to the segments inner and outer intersections
  1054. var lastOuter = outerPoint;
  1055. var lastInner = innerPoint;
  1056. if ( initialJoinIsOnLeftSide !== joinIsOnLeftSide) {
  1057. lastOuter = innerPoint;
  1058. lastInner = outerPoint;
  1059. }
  1060. if ( joinIsOnLeftSide ) {
  1061. lastInner.toArray( vertices, 0 * 3 );
  1062. lastInner.toArray( vertices, 3 * 3 );
  1063. if ( isMiter ) {
  1064. lastOuter.toArray( vertices, 1 * 3 );
  1065. }
  1066. }
  1067. else {
  1068. lastInner.toArray( vertices, 1 * 3 );
  1069. lastInner.toArray( vertices, 3 * 3 );
  1070. if ( isMiter ) {
  1071. lastOuter.toArray( vertices, 0 * 3 );
  1072. }
  1073. }
  1074. }
  1075. return numVertices;
  1076. // -- End of algorithm
  1077. // -- Functions
  1078. function getNormal( p1, p2, result ) {
  1079. result.subVectors( p2, p1 );
  1080. return result.set( - result.y, result.x ).normalize();
  1081. }
  1082. function addVertex( position, u, v ) {
  1083. if ( vertices ) {
  1084. vertices[ currentCoordinate ] = position.x;
  1085. vertices[ currentCoordinate + 1 ] = position.y;
  1086. vertices[ currentCoordinate + 2 ] = 0;
  1087. normals[ currentCoordinate ] = 0;
  1088. normals[ currentCoordinate + 1 ] = 0;
  1089. normals[ currentCoordinate + 2 ] = 1;
  1090. uvs[ currentCoordinateUV ] = u;
  1091. uvs[ currentCoordinateUV + 1 ] = v;
  1092. currentCoordinate += 3;
  1093. currentCoordinateUV += 2;
  1094. }
  1095. numVertices += 3;
  1096. }
  1097. function makeCircularSector( center, p1, p2, u, v ) {
  1098. // param p1, p2: Points in the circle arc.
  1099. // p1 and p2 are in clockwise direction.
  1100. tempV2_1.copy( p1 ).sub( center ).normalize();
  1101. tempV2_2.copy( p2 ).sub( center ).normalize();
  1102. var angle = Math.PI;
  1103. var dot = tempV2_1.dot( tempV2_2 );
  1104. if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
  1105. angle /= arcLengthDivisions;
  1106. tempV2_3.copy( p1 );
  1107. for ( var i = 0, il = arcLengthDivisions - 1; i < il; i++ ) {
  1108. tempV2_4.copy( tempV2_3 ).rotateAround( center, angle );
  1109. addVertex( tempV2_3, u, v );
  1110. addVertex( tempV2_4, u, v );
  1111. addVertex( center, u, 0.5 );
  1112. tempV2_3.copy( tempV2_4 );
  1113. }
  1114. addVertex( tempV2_4, u, v );
  1115. addVertex( p2, u, v );
  1116. addVertex( center, u, 0.5 );
  1117. }
  1118. function makeSegmentTriangles() {
  1119. addVertex( lastPointR, u0, 1 );
  1120. addVertex( lastPointL, u0, 0 );
  1121. addVertex( currentPointL, u1, 0 );
  1122. addVertex( lastPointR, u0, 1 );
  1123. addVertex( currentPointL, u1, 1 );
  1124. addVertex( currentPointR, u1, 0 );
  1125. }
  1126. function makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u ) {
  1127. if ( innerSideModified ) {
  1128. // Optimized segment + bevel triangles
  1129. if ( joinIsOnLeftSide ) {
  1130. // Path segments triangles
  1131. addVertex( lastPointR, u0, 1 );
  1132. addVertex( lastPointL, u0, 0 );
  1133. addVertex( currentPointL, u1, 0 );
  1134. addVertex( lastPointR, u0, 1 );
  1135. addVertex( currentPointL, u1, 0 );
  1136. addVertex( innerPoint, u1, 1 );
  1137. // Bevel join triangle
  1138. addVertex( currentPointL, u, 0 );
  1139. addVertex( nextPointL, u, 0 );
  1140. addVertex( innerPoint, u, 0.5 );
  1141. }
  1142. else {
  1143. // Path segments triangles
  1144. addVertex( lastPointR, u0, 1 );
  1145. addVertex( lastPointL, u0, 0 );
  1146. addVertex( currentPointR, u1, 1 );
  1147. addVertex( lastPointL, u0, 0 );
  1148. addVertex( innerPoint, u1, 0 );
  1149. addVertex( currentPointR, u1, 1 );
  1150. // Bevel join triangle
  1151. addVertex( currentPointR, u, 1 );
  1152. addVertex( nextPointR, u, 0 );
  1153. addVertex( innerPoint, u, 0.5 );
  1154. }
  1155. }
  1156. else {
  1157. // Bevel join triangle. The segment triangles are done in the main loop
  1158. if ( joinIsOnLeftSide ) {
  1159. addVertex( currentPointL, u, 0 );
  1160. addVertex( nextPointL, u, 0 );
  1161. addVertex( currentPoint, u, 0.5 );
  1162. }
  1163. else {
  1164. addVertex( currentPointR, u, 1 );
  1165. addVertex( nextPointR, u, 0 );
  1166. addVertex( currentPoint, u, 0.5 );
  1167. }
  1168. }
  1169. }
  1170. function createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified ) {
  1171. if ( innerSideModified ) {
  1172. if ( joinIsOnLeftSide ) {
  1173. addVertex( lastPointR, u0, 1 );
  1174. addVertex( lastPointL, u0, 0 );
  1175. addVertex( currentPointL, u1, 0 );
  1176. addVertex( lastPointR, u0, 1 );
  1177. addVertex( currentPointL, u1, 0 );
  1178. addVertex( innerPoint, u1, 1 );
  1179. addVertex( currentPointL, u0, 0 );
  1180. addVertex( currentPoint, u1, 0.5 );
  1181. addVertex( innerPoint, u1, 1 );
  1182. addVertex( currentPoint, u1, 0.5 );
  1183. addVertex( nextPointL, u0, 0 );
  1184. addVertex( innerPoint, u1, 1 );
  1185. }
  1186. else {
  1187. addVertex( lastPointR, u0, 1 );
  1188. addVertex( lastPointL, u0, 0 );
  1189. addVertex( currentPointR, u1, 1 );
  1190. addVertex( lastPointL, u0, 0 );
  1191. addVertex( innerPoint, u1, 0 );
  1192. addVertex( currentPointR, u1, 1 );
  1193. addVertex( currentPointR, u0, 1 );
  1194. addVertex( innerPoint, u1, 0 );
  1195. addVertex( currentPoint, u1, 0.5 );
  1196. addVertex( currentPoint, u1, 0.5 );
  1197. addVertex( innerPoint, u1, 0 );
  1198. addVertex( nextPointR, u0, 1 );
  1199. }
  1200. }
  1201. }
  1202. function addCapGeometry( center, p1, p2, joinIsOnLeftSide, start, u ) {
  1203. // param center: End point of the path
  1204. // param p1, p2: Left and right cap points
  1205. switch ( style.strokeLineCap ) {
  1206. case 'round':
  1207. if ( start ) {
  1208. makeCircularSector( center, p2, p1, u, 0.5 );
  1209. }
  1210. else {
  1211. makeCircularSector( center, p1, p2, u, 0.5 );
  1212. }
  1213. break;
  1214. case 'square':
  1215. if ( start ) {
  1216. tempV2_1.subVectors( p1, center );
  1217. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1218. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1219. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1220. // Modify already existing vertices
  1221. if ( joinIsOnLeftSide ) {
  1222. tempV2_3.toArray( vertices, 1 * 3 );
  1223. tempV2_4.toArray( vertices, 0 * 3 );
  1224. tempV2_4.toArray( vertices, 3 * 3 );
  1225. }
  1226. else {
  1227. tempV2_3.toArray( vertices, 1 * 3 );
  1228. tempV2_3.toArray( vertices, 3 * 3 );
  1229. tempV2_4.toArray( vertices, 0 * 3 );
  1230. }
  1231. }
  1232. else {
  1233. tempV2_1.subVectors( p2, center );
  1234. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1235. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1236. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1237. var vl = vertices.length;
  1238. // Modify already existing vertices
  1239. if ( joinIsOnLeftSide ) {
  1240. tempV2_3.toArray( vertices, vl - 1 * 3 );
  1241. tempV2_4.toArray( vertices, vl - 2 * 3 );
  1242. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1243. }
  1244. else {
  1245. tempV2_3.toArray( vertices, vl - 2 * 3 );
  1246. tempV2_4.toArray( vertices, vl - 1 * 3 );
  1247. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1248. }
  1249. }
  1250. break;
  1251. case 'butt':
  1252. default:
  1253. // Nothing to do here
  1254. break;
  1255. }
  1256. }
  1257. function removeDuplicatedPoints( points ) {
  1258. // Creates a new array if necessary with duplicated points removed.
  1259. // This does not remove duplicated initial and ending points of a closed path.
  1260. var dupPoints = false;
  1261. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1262. if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
  1263. dupPoints = true;
  1264. break;
  1265. }
  1266. }
  1267. if ( ! dupPoints ) return points;
  1268. var newPoints = [];
  1269. newPoints.push( points[ 0 ] );
  1270. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1271. if ( points[ i ].distanceTo( points[ i + 1 ] ) >= minDistance ) {
  1272. newPoints.push( points[ i ] );
  1273. }
  1274. }
  1275. newPoints.push( points[ points.length - 1 ] );
  1276. return newPoints;
  1277. }
  1278. };
  1279. }();