SVGLoader.js 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968
  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[ 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. lastInner.toArray( vertices, 0 * 3 );
  1041. lastInner.toArray( vertices, 3 * 3 );
  1042. if ( isMiter ) {
  1043. lastOuter.toArray( vertices, 1 * 3 );
  1044. }
  1045. } else {
  1046. lastInner.toArray( vertices, 1 * 3 );
  1047. lastInner.toArray( vertices, 3 * 3 );
  1048. if ( isMiter ) {
  1049. lastOuter.toArray( vertices, 0 * 3 );
  1050. }
  1051. }
  1052. }
  1053. return numVertices;
  1054. // -- End of algorithm
  1055. // -- Functions
  1056. function getNormal( p1, p2, result ) {
  1057. result.subVectors( p2, p1 );
  1058. return result.set( - result.y, result.x ).normalize();
  1059. }
  1060. function addVertex( position, u, v ) {
  1061. if ( vertices ) {
  1062. vertices[ currentCoordinate ] = position.x;
  1063. vertices[ currentCoordinate + 1 ] = position.y;
  1064. vertices[ currentCoordinate + 2 ] = 0;
  1065. if ( normals ) {
  1066. normals[ currentCoordinate ] = 0;
  1067. normals[ currentCoordinate + 1 ] = 0;
  1068. normals[ currentCoordinate + 2 ] = 1;
  1069. }
  1070. currentCoordinate += 3;
  1071. if ( uvs ) {
  1072. uvs[ currentCoordinateUV ] = u;
  1073. uvs[ currentCoordinateUV + 1 ] = v;
  1074. currentCoordinateUV += 2;
  1075. }
  1076. }
  1077. numVertices += 3;
  1078. }
  1079. function makeCircularSector( center, p1, p2, u, v ) {
  1080. // param p1, p2: Points in the circle arc.
  1081. // p1 and p2 are in clockwise direction.
  1082. tempV2_1.copy( p1 ).sub( center ).normalize();
  1083. tempV2_2.copy( p2 ).sub( center ).normalize();
  1084. var angle = Math.PI;
  1085. var dot = tempV2_1.dot( tempV2_2 );
  1086. if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
  1087. angle /= arcDivisions;
  1088. tempV2_3.copy( p1 );
  1089. for ( var i = 0, il = arcDivisions - 1; i < il; i ++ ) {
  1090. tempV2_4.copy( tempV2_3 ).rotateAround( center, angle );
  1091. addVertex( tempV2_3, u, v );
  1092. addVertex( tempV2_4, u, v );
  1093. addVertex( center, u, 0.5 );
  1094. tempV2_3.copy( tempV2_4 );
  1095. }
  1096. addVertex( tempV2_4, u, v );
  1097. addVertex( p2, u, v );
  1098. addVertex( center, u, 0.5 );
  1099. }
  1100. function makeSegmentTriangles() {
  1101. addVertex( lastPointR, u0, 1 );
  1102. addVertex( lastPointL, u0, 0 );
  1103. addVertex( currentPointL, u1, 0 );
  1104. addVertex( lastPointR, u0, 1 );
  1105. addVertex( currentPointL, u1, 1 );
  1106. addVertex( currentPointR, u1, 0 );
  1107. }
  1108. function makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u ) {
  1109. if ( innerSideModified ) {
  1110. // Optimized segment + bevel triangles
  1111. if ( joinIsOnLeftSide ) {
  1112. // Path segments triangles
  1113. addVertex( lastPointR, u0, 1 );
  1114. addVertex( lastPointL, u0, 0 );
  1115. addVertex( currentPointL, u1, 0 );
  1116. addVertex( lastPointR, u0, 1 );
  1117. addVertex( currentPointL, u1, 0 );
  1118. addVertex( innerPoint, u1, 1 );
  1119. // Bevel join triangle
  1120. addVertex( currentPointL, u, 0 );
  1121. addVertex( nextPointL, u, 0 );
  1122. addVertex( innerPoint, u, 0.5 );
  1123. } else {
  1124. // Path segments triangles
  1125. addVertex( lastPointR, u0, 1 );
  1126. addVertex( lastPointL, u0, 0 );
  1127. addVertex( currentPointR, u1, 1 );
  1128. addVertex( lastPointL, u0, 0 );
  1129. addVertex( innerPoint, u1, 0 );
  1130. addVertex( currentPointR, u1, 1 );
  1131. // Bevel join triangle
  1132. addVertex( currentPointR, u, 1 );
  1133. addVertex( nextPointR, u, 0 );
  1134. addVertex( innerPoint, u, 0.5 );
  1135. }
  1136. } else {
  1137. // Bevel join triangle. The segment triangles are done in the main loop
  1138. if ( joinIsOnLeftSide ) {
  1139. addVertex( currentPointL, u, 0 );
  1140. addVertex( nextPointL, u, 0 );
  1141. addVertex( currentPoint, u, 0.5 );
  1142. } else {
  1143. addVertex( currentPointR, u, 1 );
  1144. addVertex( nextPointR, u, 0 );
  1145. addVertex( currentPoint, u, 0.5 );
  1146. }
  1147. }
  1148. }
  1149. function createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified ) {
  1150. if ( innerSideModified ) {
  1151. if ( joinIsOnLeftSide ) {
  1152. addVertex( lastPointR, u0, 1 );
  1153. addVertex( lastPointL, u0, 0 );
  1154. addVertex( currentPointL, u1, 0 );
  1155. addVertex( lastPointR, u0, 1 );
  1156. addVertex( currentPointL, u1, 0 );
  1157. addVertex( innerPoint, u1, 1 );
  1158. addVertex( currentPointL, u0, 0 );
  1159. addVertex( currentPoint, u1, 0.5 );
  1160. addVertex( innerPoint, u1, 1 );
  1161. addVertex( currentPoint, u1, 0.5 );
  1162. addVertex( nextPointL, u0, 0 );
  1163. addVertex( innerPoint, u1, 1 );
  1164. } else {
  1165. addVertex( lastPointR, u0, 1 );
  1166. addVertex( lastPointL, u0, 0 );
  1167. addVertex( currentPointR, u1, 1 );
  1168. addVertex( lastPointL, u0, 0 );
  1169. addVertex( innerPoint, u1, 0 );
  1170. addVertex( currentPointR, u1, 1 );
  1171. addVertex( currentPointR, u0, 1 );
  1172. addVertex( innerPoint, u1, 0 );
  1173. addVertex( currentPoint, u1, 0.5 );
  1174. addVertex( currentPoint, u1, 0.5 );
  1175. addVertex( innerPoint, u1, 0 );
  1176. addVertex( nextPointR, u0, 1 );
  1177. }
  1178. }
  1179. }
  1180. function addCapGeometry( center, p1, p2, joinIsOnLeftSide, start, u ) {
  1181. // param center: End point of the path
  1182. // param p1, p2: Left and right cap points
  1183. switch ( style.strokeLineCap ) {
  1184. case 'round':
  1185. if ( start ) {
  1186. makeCircularSector( center, p2, p1, u, 0.5 );
  1187. } else {
  1188. makeCircularSector( center, p1, p2, u, 0.5 );
  1189. }
  1190. break;
  1191. case 'square':
  1192. if ( start ) {
  1193. tempV2_1.subVectors( p1, center );
  1194. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1195. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1196. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1197. // Modify already existing vertices
  1198. if ( joinIsOnLeftSide ) {
  1199. tempV2_3.toArray( vertices, 1 * 3 );
  1200. tempV2_4.toArray( vertices, 0 * 3 );
  1201. tempV2_4.toArray( vertices, 3 * 3 );
  1202. } else {
  1203. tempV2_3.toArray( vertices, 1 * 3 );
  1204. tempV2_3.toArray( vertices, 3 * 3 );
  1205. tempV2_4.toArray( vertices, 0 * 3 );
  1206. }
  1207. } else {
  1208. tempV2_1.subVectors( p2, center );
  1209. tempV2_2.set( tempV2_1.y, - tempV2_1.x );
  1210. tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
  1211. tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
  1212. var vl = vertices.length;
  1213. // Modify already existing vertices
  1214. if ( joinIsOnLeftSide ) {
  1215. tempV2_3.toArray( vertices, vl - 1 * 3 );
  1216. tempV2_4.toArray( vertices, vl - 2 * 3 );
  1217. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1218. } else {
  1219. tempV2_3.toArray( vertices, vl - 2 * 3 );
  1220. tempV2_4.toArray( vertices, vl - 1 * 3 );
  1221. tempV2_4.toArray( vertices, vl - 4 * 3 );
  1222. }
  1223. }
  1224. break;
  1225. case 'butt':
  1226. default:
  1227. // Nothing to do here
  1228. break;
  1229. }
  1230. }
  1231. function removeDuplicatedPoints( points ) {
  1232. // Creates a new array if necessary with duplicated points removed.
  1233. // This does not remove duplicated initial and ending points of a closed path.
  1234. var dupPoints = false;
  1235. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1236. if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
  1237. dupPoints = true;
  1238. break;
  1239. }
  1240. }
  1241. if ( ! dupPoints ) return points;
  1242. var newPoints = [];
  1243. newPoints.push( points[ 0 ] );
  1244. for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
  1245. if ( points[ i ].distanceTo( points[ i + 1 ] ) >= minDistance ) {
  1246. newPoints.push( points[ i ] );
  1247. }
  1248. }
  1249. newPoints.push( points[ points.length - 1 ] );
  1250. return newPoints;
  1251. }
  1252. };
  1253. }();