SVGLoader.js 23 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author zz85 / http://joshuakoo.com/
  4. * @author yomboprime / https://yombo.org
  5. */
  6. THREE.SVGLoader = function ( manager ) {
  7. this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  8. };
  9. THREE.SVGLoader.prototype = {
  10. constructor: THREE.SVGLoader,
  11. load: function ( url, onLoad, onProgress, onError ) {
  12. var scope = this;
  13. var loader = new THREE.FileLoader( scope.manager );
  14. loader.setPath( scope.path );
  15. loader.load( url, function ( text ) {
  16. onLoad( scope.parse( text ) );
  17. }, onProgress, onError );
  18. },
  19. setPath: function ( value ) {
  20. this.path = value;
  21. return this;
  22. },
  23. parse: function ( text ) {
  24. function parseNode( node, style ) {
  25. if ( node.nodeType !== 1 ) return;
  26. var transform = getNodeTransform( node );
  27. var path = null;
  28. switch ( node.nodeName ) {
  29. case 'svg':
  30. break;
  31. case 'g':
  32. style = parseStyle( node, style );
  33. break;
  34. case 'path':
  35. style = parseStyle( node, style );
  36. if ( node.hasAttribute( 'd' ) && isVisible( style ) ) path = parsePathNode( node, style );
  37. break;
  38. case 'rect':
  39. style = parseStyle( node, style );
  40. if ( isVisible( style ) ) path = parseRectNode( node, style );
  41. break;
  42. case 'polygon':
  43. style = parseStyle( node, style );
  44. if ( isVisible( style ) ) path = parsePolygonNode( node, style );
  45. break;
  46. case 'polyline':
  47. style = parseStyle( node, style );
  48. if ( isVisible( style ) ) path = parsePolylineNode( node, style );
  49. break;
  50. case 'circle':
  51. style = parseStyle( node, style );
  52. if ( isVisible( style ) ) path = parseCircleNode( node, style );
  53. break;
  54. case 'ellipse':
  55. style = parseStyle( node, style );
  56. if ( isVisible( style ) ) path = parseEllipseNode( node, style );
  57. break;
  58. case 'line':
  59. style = parseStyle( node, style );
  60. if ( isVisible( style ) ) path = parseLineNode( node, style );
  61. break;
  62. default:
  63. console.log( node );
  64. }
  65. if ( path ) {
  66. transformPath( path, currentTransform );
  67. paths.push( path );
  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. currentTransform.copy( transformStack.pop() );
  75. }
  76. }
  77. function parsePathNode( node, style ) {
  78. var path = new THREE.ShapePath();
  79. path.color.setStyle( style.fill );
  80. var point = new THREE.Vector2();
  81. var control = new THREE.Vector2();
  82. var firstPoint = new THREE.Vector2();
  83. var isFirstPoint = true;
  84. var doSetFirstPoint = false;
  85. var d = node.getAttribute( 'd' );
  86. // console.log( d );
  87. var commands = d.match( /[a-df-z][^a-df-z]*/ig );
  88. for ( var i = 0, l = commands.length; i < l; i ++ ) {
  89. var command = commands[ i ];
  90. var type = command.charAt( 0 );
  91. var data = command.substr( 1 ).trim();
  92. if ( isFirstPoint === true ) {
  93. doSetFirstPoint = true;
  94. isFirstPoint = false;
  95. }
  96. switch ( type ) {
  97. case 'M':
  98. var numbers = parseFloats( data );
  99. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  100. point.x = numbers[ j + 0 ];
  101. point.y = numbers[ j + 1 ];
  102. control.x = point.x;
  103. control.y = point.y;
  104. if ( j === 0 ) {
  105. path.moveTo( point.x, point.y );
  106. } else {
  107. path.lineTo( point.x, point.y );
  108. }
  109. }
  110. break;
  111. case 'H':
  112. var numbers = parseFloats( data );
  113. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  114. point.x = numbers[ j ];
  115. control.x = point.x;
  116. control.y = point.y;
  117. path.lineTo( point.x, point.y );
  118. }
  119. break;
  120. case 'V':
  121. var numbers = parseFloats( data );
  122. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  123. point.y = numbers[ j ];
  124. control.x = point.x;
  125. control.y = point.y;
  126. path.lineTo( point.x, point.y );
  127. }
  128. break;
  129. case 'L':
  130. var numbers = parseFloats( data );
  131. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  132. point.x = numbers[ j + 0 ];
  133. point.y = numbers[ j + 1 ];
  134. control.x = point.x;
  135. control.y = point.y;
  136. path.lineTo( point.x, point.y );
  137. }
  138. break;
  139. case 'C':
  140. var numbers = parseFloats( data );
  141. for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
  142. path.bezierCurveTo(
  143. numbers[ j + 0 ],
  144. numbers[ j + 1 ],
  145. numbers[ j + 2 ],
  146. numbers[ j + 3 ],
  147. numbers[ j + 4 ],
  148. numbers[ j + 5 ]
  149. );
  150. control.x = numbers[ j + 2 ];
  151. control.y = numbers[ j + 3 ];
  152. point.x = numbers[ j + 4 ];
  153. point.y = numbers[ j + 5 ];
  154. }
  155. break;
  156. case 'S':
  157. var numbers = parseFloats( data );
  158. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  159. path.bezierCurveTo(
  160. getReflection( point.x, control.x ),
  161. getReflection( point.y, control.y ),
  162. numbers[ j + 0 ],
  163. numbers[ j + 1 ],
  164. numbers[ j + 2 ],
  165. numbers[ j + 3 ]
  166. );
  167. control.x = numbers[ j + 0 ];
  168. control.y = numbers[ j + 1 ];
  169. point.x = numbers[ j + 2 ];
  170. point.y = numbers[ j + 3 ];
  171. }
  172. break;
  173. case 'Q':
  174. var numbers = parseFloats( data );
  175. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  176. path.quadraticCurveTo(
  177. numbers[ j + 0 ],
  178. numbers[ j + 1 ],
  179. numbers[ j + 2 ],
  180. numbers[ j + 3 ]
  181. );
  182. control.x = numbers[ j + 0 ];
  183. control.y = numbers[ j + 1 ];
  184. point.x = numbers[ j + 2 ];
  185. point.y = numbers[ j + 3 ];
  186. }
  187. break;
  188. case 'T':
  189. var numbers = parseFloats( data );
  190. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  191. var rx = getReflection( point.x, control.x );
  192. var ry = getReflection( point.y, control.y );
  193. path.quadraticCurveTo(
  194. rx,
  195. ry,
  196. numbers[ j + 0 ],
  197. numbers[ j + 1 ]
  198. );
  199. control.x = rx;
  200. control.y = ry;
  201. point.x = numbers[ j + 0 ];
  202. point.y = numbers[ j + 1 ];
  203. }
  204. break;
  205. case 'A':
  206. var numbers = parseFloats( data );
  207. for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
  208. var start = point.clone();
  209. point.x = numbers[ j + 5 ];
  210. point.y = numbers[ j + 6 ];
  211. control.x = point.x;
  212. control.y = point.y;
  213. parseArcCommand(
  214. path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
  215. );
  216. }
  217. break;
  218. //
  219. case 'm':
  220. var numbers = parseFloats( data );
  221. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  222. point.x += numbers[ j + 0 ];
  223. point.y += numbers[ j + 1 ];
  224. control.x = point.x;
  225. control.y = point.y;
  226. if ( j === 0 ) {
  227. path.moveTo( point.x, point.y );
  228. } else {
  229. path.lineTo( point.x, point.y );
  230. }
  231. }
  232. break;
  233. case 'h':
  234. var numbers = parseFloats( data );
  235. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  236. point.x += numbers[ j ];
  237. control.x = point.x;
  238. control.y = point.y;
  239. path.lineTo( point.x, point.y );
  240. }
  241. break;
  242. case 'v':
  243. var numbers = parseFloats( data );
  244. for ( var j = 0, jl = numbers.length; j < jl; j ++ ) {
  245. point.y += numbers[ j ];
  246. control.x = point.x;
  247. control.y = point.y;
  248. path.lineTo( point.x, point.y );
  249. }
  250. break;
  251. case 'l':
  252. var numbers = parseFloats( data );
  253. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  254. point.x += numbers[ j + 0 ];
  255. point.y += numbers[ j + 1 ];
  256. control.x = point.x;
  257. control.y = point.y;
  258. path.lineTo( point.x, point.y );
  259. }
  260. break;
  261. case 'c':
  262. var numbers = parseFloats( data );
  263. for ( var j = 0, jl = numbers.length; j < jl; j += 6 ) {
  264. path.bezierCurveTo(
  265. point.x + numbers[ j + 0 ],
  266. point.y + numbers[ j + 1 ],
  267. point.x + numbers[ j + 2 ],
  268. point.y + numbers[ j + 3 ],
  269. point.x + numbers[ j + 4 ],
  270. point.y + numbers[ j + 5 ]
  271. );
  272. control.x = point.x + numbers[ j + 2 ];
  273. control.y = point.y + numbers[ j + 3 ];
  274. point.x += numbers[ j + 4 ];
  275. point.y += numbers[ j + 5 ];
  276. }
  277. break;
  278. case 's':
  279. var numbers = parseFloats( data );
  280. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  281. path.bezierCurveTo(
  282. getReflection( point.x, control.x ),
  283. getReflection( point.y, control.y ),
  284. point.x + numbers[ j + 0 ],
  285. point.y + numbers[ j + 1 ],
  286. point.x + numbers[ j + 2 ],
  287. point.y + numbers[ j + 3 ]
  288. );
  289. control.x = point.x + numbers[ j + 0 ];
  290. control.y = point.y + numbers[ j + 1 ];
  291. point.x += numbers[ j + 2 ];
  292. point.y += numbers[ j + 3 ];
  293. }
  294. break;
  295. case 'q':
  296. var numbers = parseFloats( data );
  297. for ( var j = 0, jl = numbers.length; j < jl; j += 4 ) {
  298. path.quadraticCurveTo(
  299. point.x + numbers[ j + 0 ],
  300. point.y + numbers[ j + 1 ],
  301. point.x + numbers[ j + 2 ],
  302. point.y + numbers[ j + 3 ]
  303. );
  304. control.x = point.x + numbers[ j + 0 ];
  305. control.y = point.y + numbers[ j + 1 ];
  306. point.x += numbers[ j + 2 ];
  307. point.y += numbers[ j + 3 ];
  308. }
  309. break;
  310. case 't':
  311. var numbers = parseFloats( data );
  312. for ( var j = 0, jl = numbers.length; j < jl; j += 2 ) {
  313. var rx = getReflection( point.x, control.x );
  314. var ry = getReflection( point.y, control.y );
  315. path.quadraticCurveTo(
  316. rx,
  317. ry,
  318. point.x + numbers[ j + 0 ],
  319. point.y + numbers[ j + 1 ]
  320. );
  321. control.x = rx;
  322. control.y = ry;
  323. point.x = point.x + numbers[ j + 0 ];
  324. point.y = point.y + numbers[ j + 1 ];
  325. }
  326. break;
  327. case 'a':
  328. var numbers = parseFloats( data );
  329. for ( var j = 0, jl = numbers.length; j < jl; j += 7 ) {
  330. var start = point.clone();
  331. point.x += numbers[ j + 5 ];
  332. point.y += numbers[ j + 6 ];
  333. control.x = point.x;
  334. control.y = point.y;
  335. parseArcCommand(
  336. path, numbers[ j ], numbers[ j + 1 ], numbers[ j + 2 ], numbers[ j + 3 ], numbers[ j + 4 ], start, point
  337. );
  338. }
  339. break;
  340. //
  341. case 'Z':
  342. case 'z':
  343. path.currentPath.autoClose = true;
  344. if ( path.currentPath.curves.length > 0 ) {
  345. // Reset point to beginning of Path
  346. point.copy( firstPoint );
  347. path.currentPath.currentPoint.copy( point );
  348. isFirstPoint = true;
  349. }
  350. break;
  351. default:
  352. console.warn( command );
  353. }
  354. // console.log( type, parseFloats( data ), parseFloats( data ).length )
  355. if ( doSetFirstPoint === true ) {
  356. firstPoint.copy( point );
  357. doSetFirstPoint = false;
  358. }
  359. }
  360. return path;
  361. }
  362. /**
  363. * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
  364. * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
  365. * From
  366. * rx ry x-axis-rotation large-arc-flag sweep-flag x y
  367. * To
  368. * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
  369. */
  370. function parseArcCommand( path, rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, start, end ) {
  371. x_axis_rotation = x_axis_rotation * Math.PI / 180;
  372. // Ensure radii are positive
  373. rx = Math.abs( rx );
  374. ry = Math.abs( ry );
  375. // Compute (x1′, y1′)
  376. var dx2 = ( start.x - end.x ) / 2.0;
  377. var dy2 = ( start.y - end.y ) / 2.0;
  378. var x1p = Math.cos( x_axis_rotation ) * dx2 + Math.sin( x_axis_rotation ) * dy2;
  379. var y1p = - Math.sin( x_axis_rotation ) * dx2 + Math.cos( x_axis_rotation ) * dy2;
  380. // Compute (cx′, cy′)
  381. var rxs = rx * rx;
  382. var rys = ry * ry;
  383. var x1ps = x1p * x1p;
  384. var y1ps = y1p * y1p;
  385. // Ensure radii are large enough
  386. var cr = x1ps / rxs + y1ps / rys;
  387. if ( cr > 1 ) {
  388. // scale up rx,ry equally so cr == 1
  389. var s = Math.sqrt( cr );
  390. rx = s * rx;
  391. ry = s * ry;
  392. rxs = rx * rx;
  393. rys = ry * ry;
  394. }
  395. var dq = ( rxs * y1ps + rys * x1ps );
  396. var pq = ( rxs * rys - dq ) / dq;
  397. var q = Math.sqrt( Math.max( 0, pq ) );
  398. if ( large_arc_flag === sweep_flag ) q = - q;
  399. var cxp = q * rx * y1p / ry;
  400. var cyp = - q * ry * x1p / rx;
  401. // Step 3: Compute (cx, cy) from (cx′, cy′)
  402. var cx = Math.cos( x_axis_rotation ) * cxp - Math.sin( x_axis_rotation ) * cyp + ( start.x + end.x ) / 2;
  403. var cy = Math.sin( x_axis_rotation ) * cxp + Math.cos( x_axis_rotation ) * cyp + ( start.y + end.y ) / 2;
  404. // Step 4: Compute θ1 and Δθ
  405. var theta = svgAngle( 1, 0, ( x1p - cxp ) / rx, ( y1p - cyp ) / ry );
  406. var delta = svgAngle( ( x1p - cxp ) / rx, ( y1p - cyp ) / ry, ( - x1p - cxp ) / rx, ( - y1p - cyp ) / ry ) % ( Math.PI * 2 );
  407. path.currentPath.absellipse( cx, cy, rx, ry, theta, theta + delta, sweep_flag === 0, x_axis_rotation );
  408. }
  409. function svgAngle( ux, uy, vx, vy ) {
  410. var dot = ux * vx + uy * vy;
  411. var len = Math.sqrt( ux * ux + uy * uy ) * Math.sqrt( vx * vx + vy * vy );
  412. var ang = Math.acos( Math.max( -1, Math.min( 1, dot / len ) ) ); // floating point precision, slightly over values appear
  413. if ( ( ux * vy - uy * vx ) < 0 ) ang = - ang;
  414. return ang;
  415. }
  416. /*
  417. * According to https://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute
  418. * rounded corner should be rendered to elliptical arc, but bezier curve does the job well enough
  419. */
  420. function parseRectNode( node, style ) {
  421. var x = parseFloat( node.getAttribute( 'x' ) || 0 );
  422. var y = parseFloat( node.getAttribute( 'y' ) || 0 );
  423. var rx = parseFloat( node.getAttribute( 'rx' ) || 0 );
  424. var ry = parseFloat( node.getAttribute( 'ry' ) || 0 );
  425. var w = parseFloat( node.getAttribute( 'width' ) );
  426. var h = parseFloat( node.getAttribute( 'height' ) );
  427. var path = new THREE.ShapePath();
  428. path.color.setStyle( style.fill );
  429. path.moveTo( x + 2 * rx, y );
  430. path.lineTo( x + w - 2 * rx, y );
  431. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
  432. path.lineTo( x + w, y + h - 2 * ry );
  433. if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h );
  434. path.lineTo( x + 2 * rx, y + h );
  435. if ( rx !== 0 || ry !== 0 ) {
  436. path.bezierCurveTo( x, y + h, x, y + h, x, y + h - 2 * ry );
  437. }
  438. path.lineTo( x, y + 2 * ry );
  439. if ( rx !== 0 || ry !== 0 ) {
  440. path.bezierCurveTo( x, y, x, y, x + 2 * rx, y );
  441. }
  442. return path;
  443. }
  444. function parsePolygonNode( node, style ) {
  445. function iterator( match, a, b ) {
  446. var x = parseFloat( a );
  447. var y = parseFloat( b );
  448. if ( index === 0 ) {
  449. path.moveTo( x, y );
  450. } else {
  451. path.lineTo( x, y );
  452. }
  453. index ++;
  454. }
  455. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  456. var path = new THREE.ShapePath();
  457. path.color.setStyle( style.fill );
  458. var index = 0;
  459. node.getAttribute( 'points' ).replace(regex, iterator);
  460. path.currentPath.autoClose = true;
  461. return path;
  462. }
  463. function parsePolylineNode( node, style ) {
  464. function iterator( match, a, b ) {
  465. var x = parseFloat( a );
  466. var y = parseFloat( b );
  467. if ( index === 0 ) {
  468. path.moveTo( x, y );
  469. } else {
  470. path.lineTo( x, y );
  471. }
  472. index ++;
  473. }
  474. var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
  475. var path = new THREE.ShapePath();
  476. path.color.setStyle( style.fill );
  477. var index = 0;
  478. node.getAttribute( 'points' ).replace(regex, iterator);
  479. path.currentPath.autoClose = false;
  480. return path;
  481. }
  482. function parseCircleNode( node, style ) {
  483. var x = parseFloat( node.getAttribute( 'cx' ) );
  484. var y = parseFloat( node.getAttribute( 'cy' ) );
  485. var r = parseFloat( node.getAttribute( 'r' ) );
  486. var subpath = new THREE.Path();
  487. subpath.absarc( x, y, r, 0, Math.PI * 2 );
  488. var path = new THREE.ShapePath();
  489. path.color.setStyle( style.fill );
  490. path.subPaths.push( subpath );
  491. return path;
  492. }
  493. function parseEllipseNode( node, style ) {
  494. var x = parseFloat( node.getAttribute( 'cx' ) );
  495. var y = parseFloat( node.getAttribute( 'cy' ) );
  496. var rx = parseFloat( node.getAttribute( 'rx' ) );
  497. var ry = parseFloat( node.getAttribute( 'ry' ) );
  498. var subpath = new THREE.Path();
  499. subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
  500. var path = new THREE.ShapePath();
  501. path.color.setStyle( style.fill );
  502. path.subPaths.push( subpath );
  503. return path;
  504. }
  505. function parseLineNode( node, style ) {
  506. var x1 = parseFloat( node.getAttribute( 'x1' ) );
  507. var y1 = parseFloat( node.getAttribute( 'y1' ) );
  508. var x2 = parseFloat( node.getAttribute( 'x2' ) );
  509. var y2 = parseFloat( node.getAttribute( 'y2' ) );
  510. var path = new THREE.ShapePath();
  511. path.moveTo( x1, y1 );
  512. path.lineTo( x2, y2 );
  513. path.currentPath.autoClose = false;
  514. return path;
  515. }
  516. //
  517. function parseStyle( node, style ) {
  518. style = Object.assign( {}, style ); // clone style
  519. if ( node.hasAttribute( 'fill' ) ) style.fill = node.getAttribute( 'fill' );
  520. if ( node.style.fill !== '' ) style.fill = node.style.fill;
  521. return style;
  522. }
  523. function isVisible( style ) {
  524. return style.fill !== 'none' && style.fill !== 'transparent';
  525. }
  526. // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
  527. function getReflection( a, b ) {
  528. return a - ( b - a );
  529. }
  530. function parseFloats( string ) {
  531. var array = string.split( /[\s,]+|(?=\s?[+\-])/ );
  532. for ( var i = 0; i < array.length; i ++ ) {
  533. var number = array[ i ];
  534. // Handle values like 48.6037.7.8
  535. // TODO Find a regex for this
  536. if ( number.indexOf( '.' ) !== number.lastIndexOf( '.' ) ) {
  537. var split = number.split( '.' );
  538. for ( var s = 2; s < split.length; s ++ ) {
  539. array.splice( i + s - 1, 0, '0.' + split[ s ] );
  540. }
  541. }
  542. array[ i ] = parseFloat( number );
  543. }
  544. return array;
  545. }
  546. function getNodeTransform( node ) {
  547. if ( ! node.hasAttribute( 'transform' ) ) {
  548. return null;
  549. }
  550. var transform = parseTransformNode( node );
  551. if ( transform ) {
  552. if ( transformStack.length > 0 ) {
  553. transform.premultiply( transformStack[ transformStack.length - 1 ] );
  554. }
  555. currentTransform.copy( transform );
  556. transformStack.push( transform );
  557. }
  558. return transform;
  559. }
  560. function parseTransformNode( node ) {
  561. var transform = new THREE.Matrix3();
  562. var currentTransform = tempTransform0;
  563. var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
  564. for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex-- ) {
  565. var transformText = transformsTexts[ tIndex ];
  566. var openParPos = transformText.indexOf( "(" );
  567. var closeParPos = transformText.indexOf( ")" );
  568. if ( openParPos > 0 && openParPos < closeParPos ) {
  569. var transformType = transformText.substr( 0, openParPos );
  570. var array = parseFloats( transformText.substr( openParPos + 1, closeParPos - openParPos - 1 ) );
  571. currentTransform.identity();
  572. switch ( transformType ) {
  573. case "translate":
  574. if ( array.length >= 1 ) {
  575. var tx = array[ 0 ];
  576. var ty = tx;
  577. if ( array.length >= 2 ) {
  578. ty = array[ 1 ];
  579. }
  580. currentTransform.translate( tx, ty );
  581. }
  582. break;
  583. case "rotate":
  584. if ( array.length >= 1 ) {
  585. var angle = 0;
  586. var cx = 0;
  587. var cy = 0;
  588. // Angle
  589. angle = - array[ 0 ] * Math.PI / 180;
  590. if ( array.length >= 3 ) {
  591. // Center x, y
  592. cx = array[ 1 ];
  593. cy = array[ 2 ];
  594. }
  595. // Rotate around center (cx, cy)
  596. tempTransform1.identity().translate( -cx, -cy );
  597. tempTransform2.identity().rotate( angle );
  598. tempTransform3.multiplyMatrices( tempTransform2, tempTransform1 );
  599. tempTransform1.identity().translate( cx, cy );
  600. currentTransform.multiplyMatrices( tempTransform1, tempTransform3 );
  601. }
  602. break;
  603. case "scale":
  604. if ( array.length >= 1 ) {
  605. var scaleX = array[ 0 ];
  606. var scaleY = scaleX;
  607. if ( array.length >= 2 ) {
  608. scaleY = array[ 1 ];
  609. }
  610. currentTransform.scale( scaleX, scaleY );
  611. }
  612. break;
  613. case "skewX":
  614. if ( array.length === 1 ) {
  615. currentTransform.set(
  616. 1, Math.tan( array[ 0 ] * Math.PI / 180 ), 0,
  617. 0, 1, 0,
  618. 0, 0, 1
  619. );
  620. }
  621. break;
  622. case "skewY":
  623. if ( array.length === 1 ) {
  624. currentTransform.set(
  625. 1, 0, 0,
  626. Math.tan( array[ 0 ] * Math.PI / 180 ), 1, 0,
  627. 0, 0, 1
  628. );
  629. }
  630. break;
  631. case "matrix":
  632. if ( array.length === 6 ) {
  633. currentTransform.set(
  634. array[ 0 ], array[ 2 ], array[ 4 ],
  635. array[ 1 ], array[ 3 ], array[ 5 ],
  636. 0, 0, 1
  637. );
  638. }
  639. break;
  640. }
  641. }
  642. transform.premultiply( currentTransform );
  643. }
  644. return transform;
  645. }
  646. function transformPath( path, m ) {
  647. function transfVec2( v2 ) {
  648. tempV3.set( v2.x, v2.y, 1 ).applyMatrix3( m );
  649. v2.set( tempV3.x, tempV3.y );
  650. }
  651. var isRotated = isTransformRotated( m );
  652. var tempV2 = new THREE.Vector2();
  653. var tempV3 = new THREE.Vector3();
  654. var subPaths = path.subPaths;
  655. for ( var i = 0, n = subPaths.length; i < n; i++ ) {
  656. var subPath = subPaths[ i ];
  657. var curves = subPath.curves;
  658. for ( var j = 0; j < curves.length; j++ ) {
  659. var curve = curves[ j ];
  660. if ( curve.isLineCurve ) {
  661. transfVec2( curve.v1 );
  662. transfVec2( curve.v2 );
  663. } else if ( curve.isCubicBezierCurve ) {
  664. transfVec2( curve.v0 );
  665. transfVec2( curve.v1 );
  666. transfVec2( curve.v2 );
  667. transfVec2( curve.v3 );
  668. } else if ( curve.isQuadraticBezierCurve ) {
  669. transfVec2( curve.v0 );
  670. transfVec2( curve.v1 );
  671. transfVec2( curve.v2 );
  672. } else if ( curve.isEllipseCurve ) {
  673. if ( isRotated ) {
  674. console.warn( "SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented." );
  675. }
  676. tempV2.set( curve.aX, curve.aY );
  677. transfVec2( tempV2 );
  678. curve.aX = tempV2.x;
  679. curve.aY = tempV2.y;
  680. curve.xRadius *= getTransformScaleX( m );
  681. curve.yRadius *= getTransformScaleY( m );
  682. }
  683. }
  684. }
  685. }
  686. function isTransformRotated( m ) {
  687. return m.elements[ 1 ] !== 0 || m.elements[ 3 ] !== 0;
  688. }
  689. function getTransformScaleX( m ) {
  690. var te = m.elements;
  691. return Math.sqrt( te[ 0 ] * te[ 0 ] + te[ 1 ] * te[ 1 ] )
  692. }
  693. function getTransformScaleY( m ) {
  694. var te = m.elements;
  695. return Math.sqrt( te[ 3 ] * te[ 3 ] + te[ 4 ] * te[ 4 ] )
  696. }
  697. //
  698. console.log( 'THREE.SVGLoader' );
  699. var paths = [];
  700. var transformStack = [];
  701. var tempTransform0 = new THREE.Matrix3();
  702. var tempTransform1 = new THREE.Matrix3();
  703. var tempTransform2 = new THREE.Matrix3();
  704. var tempTransform3 = new THREE.Matrix3();
  705. var currentTransform = new THREE.Matrix3();
  706. console.time( 'THREE.SVGLoader: DOMParser' );
  707. var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
  708. console.timeEnd( 'THREE.SVGLoader: DOMParser' );
  709. console.time( 'THREE.SVGLoader: Parse' );
  710. parseNode( xml.documentElement, { fill: '#000' } );
  711. // console.log( paths );
  712. console.timeEnd( 'THREE.SVGLoader: Parse' );
  713. return paths;
  714. }
  715. };