SVGLoader.js 48 KB

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