From 95c1a08ae956e4350d10957ddd0b0f4720f53632 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 5 Jul 2017 19:12:15 +0200 Subject: [PATCH] TTFLoader: Refactoring --- examples/js/loaders/TTFLoader.js | 219 +++++++++++++++---------------- examples/webgl_loader_ttf.html | 141 +++----------------- 2 files changed, 126 insertions(+), 234 deletions(-) diff --git a/examples/js/loaders/TTFLoader.js b/examples/js/loaders/TTFLoader.js index 57ff60d63b..367c6393fd 100644 --- a/examples/js/loaders/TTFLoader.js +++ b/examples/js/loaders/TTFLoader.js @@ -1,13 +1,12 @@ /** * @author gero3 / https://github.com/gero3 * @author tentone / https://github.com/tentone - * Requires opentype.js to be included in the project + * + * Requires opentype.js to be included in the project. * Loads TTF files and converts them into typeface JSON that can be used directly - * to create THREE.Font objects + * to create THREE.Font objects. */ -'use strict'; - THREE.TTFLoader = function ( manager ) { this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager; @@ -15,179 +14,179 @@ THREE.TTFLoader = function ( manager ) { }; -THREE.TTFLoader.prototype.load = function ( url, onLoad, onProgress, onError ) { - - var scope = this; +THREE.TTFLoader.prototype = { - var loader = new THREE.FileLoader( this.manager ); - loader.setResponseType( 'arraybuffer' ); - loader.load( url, function ( buffer ) { + constructor: THREE.TTFLoader, - if ( onLoad !== undefined ) { + load: function ( url, onLoad, onProgress, onError ) { - onLoad( scope.parse( buffer ) ); - - } + var scope = this; - }, onProgress, onError ); + var loader = new THREE.FileLoader( this.manager ); + loader.setResponseType( 'arraybuffer' ); + loader.load( url, function ( buffer ) { -}; + onLoad( scope.parse( buffer ) ); -THREE.TTFLoader.prototype.parse = function ( arraybuffer ) { + }, onProgress, onError ); - if ( typeof opentype === 'undefined' ) { + }, - console.warn( 'TTFLoader requires opentype.js Make sure it\'s included before using the loader' ); - return null; + parse: function ( arraybuffer ) { - } + function convert( font, reversed ) { - function convert( font, reversed ) { + var round = Math.round; - var round = Math.round; + var glyphs = {}; + var scale = ( 100000 ) / ( ( font.unitsPerEm || 2048 ) * 72 ); - var glyphs = {}; - var scale = ( 100000 ) / ( ( font.unitsPerEm || 2048 ) * 72 ); + for ( var i = 0; i < font.glyphs.length; i ++ ) { - for ( var i = 0; i < font.glyphs.length; i ++ ) { + var glyph = font.glyphs.glyphs[ i ]; - var glyph = font.glyphs.glyphs[ i ]; + if ( glyph.unicode !== undefined ) { - if ( glyph.unicode !== undefined ) { + var token = { + ha: round( glyph.advanceWidth * scale ), + x_min: round( glyph.xMin * scale ), + x_max: round( glyph.xMax * scale ), + o: '' + }; - var token = { - ha: round( glyph.advanceWidth * scale ), - x_min: round( glyph.xMin * scale ), - x_max: round( glyph.xMax * scale ), - o: '' - }; + if ( reversed ) { - if ( reversed ) { + glyph.path.commands = reverseCommands( glyph.path.commands ); - glyph.path.commands = reverseCommands( glyph.path.commands ); + } - } + glyph.path.commands.forEach( function ( command, i ) { - glyph.path.commands.forEach( function ( command, i ) { + if ( command.type.toLowerCase() === 'c' ) { - if ( command.type.toLowerCase() === 'c' ) { + command.type = 'b'; - command.type = 'b'; + } - } + token.o += command.type.toLowerCase() + ' '; - token.o += command.type.toLowerCase() + ' '; + if ( command.x !== undefined && command.y !== undefined ) { - if ( command.x !== undefined && command.y !== undefined ) { + token.o += round( command.x * scale ) + ' ' + round( command.y * scale ) + ' '; - token.o += round( command.x * scale ) + ' ' + round( command.y * scale ) + ' '; + } - } + if ( command.x1 !== undefined && command.y1 !== undefined ) { - if ( command.x1 !== undefined && command.y1 !== undefined ) { + token.o += round( command.x1 * scale ) + ' ' + round( command.y1 * scale ) + ' '; - token.o += round( command.x1 * scale ) + ' ' + round( command.y1 * scale ) + ' '; + } - } + if ( command.x2 !== undefined && command.y2 !== undefined ) { - if ( command.x2 !== undefined && command.y2 !== undefined ) { + token.o += round( command.x2 * scale ) + ' ' + round( command.y2 * scale ) + ' '; - token.o += round( command.x2 * scale ) + ' ' + round( command.y2 * scale ) + ' '; + } - } + } ); - } ); + glyphs[ String.fromCharCode( glyph.unicode ) ] = token; - glyphs[ String.fromCharCode( glyph.unicode ) ] = token; + } } + return { + glyphs: glyphs, + familyName: font.familyName, + ascender: round( font.ascender * scale ), + descender: round( font.descender * scale ), + underlinePosition: font.tables.post.underlinePosition, + underlineThickness: font.tables.post.underlineThickness, + boundingBox: { + xMin: font.tables.head.xMin, + xMax: font.tables.head.xMax, + yMin: font.tables.head.yMin, + yMax: font.tables.head.yMax + }, + resolution: 1000, + original_font_information: font.tables.name + }; + } - return { - glyphs: glyphs, - - familyName: font.familyName, - ascender: round( font.ascender * scale ), - descender: round( font.descender * scale ), - underlinePosition: font.tables.post.underlinePosition, - underlineThickness: font.tables.post.underlineThickness, - boundingBox: { - xMin: font.tables.head.xMin, - xMax: font.tables.head.xMax, - yMin: font.tables.head.yMin, - yMax: font.tables.head.yMax - }, - - resolution: 1000, - original_font_information: font.tables.name - }; + function reverseCommands( commands ) { - } + var paths = []; + var path; - function reverseCommands( commands ) { + commands.forEach( function ( c ) { - var paths = []; - var path; + if ( c.type.toLowerCase() === 'm' ) { - commands.forEach( function ( c ) { + path = [ c ]; + paths.push( path ); - if ( c.type.toLowerCase() === 'm' ) { + } else if ( c.type.toLowerCase() !== 'z' ) { - path = [ c ]; - paths.push( path ); + path.push( c ); - } else if ( c.type.toLowerCase() !== 'z' ) { + } - path.push( c ); + } ); - } + var reversed = []; - } ); + paths.forEach( function ( p ) { - var reversed = []; + var result = { + type: 'm', + x: p[ p.length - 1 ].x, + y: p[ p.length - 1 ].y + }; - paths.forEach( function ( p ) { + reversed.push( result ); - var result = { - type: 'm', - x: p[ p.length - 1 ].x, - y: p[ p.length - 1 ].y - }; + for ( var i = p.length - 1; i > 0; i -- ) { - reversed.push( result ); + var command = p[ i ]; + var result = { type: command.type }; - for ( var i = p.length - 1; i > 0; i -- ) { + if ( command.x2 !== undefined && command.y2 !== undefined ) { - var command = p[ i ]; - var result = { type: command.type }; + result.x1 = command.x2; + result.y1 = command.y2; + result.x2 = command.x1; + result.y2 = command.y1; - if ( command.x2 !== undefined && command.y2 !== undefined ) { + } else if ( command.x1 !== undefined && command.y1 !== undefined ) { - result.x1 = command.x2; - result.y1 = command.y2; - result.x2 = command.x1; - result.y2 = command.y1; + result.x1 = command.x1; + result.y1 = command.y1; - } else if ( command.x1 !== undefined && command.y1 !== undefined ) { + } - result.x1 = command.x1; - result.y1 = command.y1; + result.x = p[ i - 1 ].x; + result.y = p[ i - 1 ].y; + reversed.push( result ); } - result.x = p[ i - 1 ].x; - result.y = p[ i - 1 ].y; - reversed.push( result ); + } ); - } + return reversed; - } ); + } - return reversed; + if ( typeof opentype === 'undefined' ) { - } + console.warn( 'THREE.TTFLoader: The loader requires opentype.js. Make sure it\'s included before using the loader.' ); + return null; - return convert( opentype.parse( arraybuffer ), this.reversed ); + } + + return convert( opentype.parse( arraybuffer ), this.reversed ); + + } }; diff --git a/examples/webgl_loader_ttf.html b/examples/webgl_loader_ttf.html index 0673e60e08..523b6eac05 100644 --- a/examples/webgl_loader_ttf.html +++ b/examples/webgl_loader_ttf.html @@ -5,16 +5,14 @@