FontLoader.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. ( function () {
  2. class FontLoader extends THREE.Loader {
  3. constructor( manager ) {
  4. super( manager );
  5. }
  6. load( url, onLoad, onProgress, onError ) {
  7. const scope = this;
  8. const loader = new THREE.FileLoader( this.manager );
  9. loader.setPath( this.path );
  10. loader.setRequestHeader( this.requestHeader );
  11. loader.setWithCredentials( this.withCredentials );
  12. loader.load( url, function ( text ) {
  13. const font = scope.parse( JSON.parse( text ) );
  14. if ( onLoad ) onLoad( font );
  15. }, onProgress, onError );
  16. }
  17. parse( json ) {
  18. return new Font( json );
  19. }
  20. }
  21. //
  22. class Font {
  23. constructor( data ) {
  24. this.isFont = true;
  25. this.type = 'Font';
  26. this.data = data;
  27. }
  28. generateShapes( text, size = 100 ) {
  29. const shapes = [];
  30. const paths = createPaths( text, size, this.data );
  31. for ( let p = 0, pl = paths.length; p < pl; p ++ ) {
  32. shapes.push( ...paths[ p ].toShapes() );
  33. }
  34. return shapes;
  35. }
  36. }
  37. function createPaths( text, size, data ) {
  38. const chars = Array.from( text );
  39. const scale = size / data.resolution;
  40. const line_height = ( data.boundingBox.yMax - data.boundingBox.yMin + data.underlineThickness ) * scale;
  41. const paths = [];
  42. let offsetX = 0,
  43. offsetY = 0;
  44. for ( let i = 0; i < chars.length; i ++ ) {
  45. const char = chars[ i ];
  46. if ( char === '\n' ) {
  47. offsetX = 0;
  48. offsetY -= line_height;
  49. } else {
  50. const ret = createPath( char, scale, offsetX, offsetY, data );
  51. offsetX += ret.offsetX;
  52. paths.push( ret.path );
  53. }
  54. }
  55. return paths;
  56. }
  57. function createPath( char, scale, offsetX, offsetY, data ) {
  58. const glyph = data.glyphs[ char ] || data.glyphs[ '?' ];
  59. if ( ! glyph ) {
  60. console.error( 'THREE.Font: character "' + char + '" does not exists in font family ' + data.familyName + '.' );
  61. return;
  62. }
  63. const path = new THREE.ShapePath();
  64. let x, y, cpx, cpy, cpx1, cpy1, cpx2, cpy2;
  65. if ( glyph.o ) {
  66. const outline = glyph._cachedOutline || ( glyph._cachedOutline = glyph.o.split( ' ' ) );
  67. for ( let i = 0, l = outline.length; i < l; ) {
  68. const action = outline[ i ++ ];
  69. switch ( action ) {
  70. case 'm':
  71. // moveTo
  72. x = outline[ i ++ ] * scale + offsetX;
  73. y = outline[ i ++ ] * scale + offsetY;
  74. path.moveTo( x, y );
  75. break;
  76. case 'l':
  77. // lineTo
  78. x = outline[ i ++ ] * scale + offsetX;
  79. y = outline[ i ++ ] * scale + offsetY;
  80. path.lineTo( x, y );
  81. break;
  82. case 'q':
  83. // quadraticCurveTo
  84. cpx = outline[ i ++ ] * scale + offsetX;
  85. cpy = outline[ i ++ ] * scale + offsetY;
  86. cpx1 = outline[ i ++ ] * scale + offsetX;
  87. cpy1 = outline[ i ++ ] * scale + offsetY;
  88. path.quadraticCurveTo( cpx1, cpy1, cpx, cpy );
  89. break;
  90. case 'b':
  91. // bezierCurveTo
  92. cpx = outline[ i ++ ] * scale + offsetX;
  93. cpy = outline[ i ++ ] * scale + offsetY;
  94. cpx1 = outline[ i ++ ] * scale + offsetX;
  95. cpy1 = outline[ i ++ ] * scale + offsetY;
  96. cpx2 = outline[ i ++ ] * scale + offsetX;
  97. cpy2 = outline[ i ++ ] * scale + offsetY;
  98. path.bezierCurveTo( cpx1, cpy1, cpx2, cpy2, cpx, cpy );
  99. break;
  100. }
  101. }
  102. }
  103. return {
  104. offsetX: glyph.ha * scale,
  105. path: path
  106. };
  107. }
  108. THREE.Font = Font;
  109. THREE.FontLoader = FontLoader;
  110. } )();