Updated examples with new TextGeometry API.

examples/canvas_geometry_text.html

@@ -23,10 +23,6 @@
 
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-
 
 		<script>
 
@@ -34,7 +30,7 @@
 
 			var camera, scene, renderer;
 
-			var group, text;
+			var group;
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -45,10 +41,15 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+				init( font );
+				animate();
 
-			function init() {
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -78,34 +79,35 @@
 
 				}
 
-				var text3d = new THREE.TextGeometry( theText, {
+				var geometry = new THREE.TextGeometry( theText, {
 
+					font: font,
 					size: 80,
 					height: 20,
-					curveSegments: 2,
-					font: "helvetiker"
+					curveSegments: 2
 
 				});
 
-				text3d.computeBoundingBox();
-				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
+				geometry.computeBoundingBox();
+
+				var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
 
 				var material = new THREE.MeshFaceMaterial( [
 					new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
 					new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
 				] );
 
-				text = new THREE.Mesh( text3d, material );
+				var mesh = new THREE.Mesh( geometry, material );
 
-				text.position.x = centerOffset;
-				text.position.y = 100;
-				text.position.z = 0;
+				mesh.position.x = centerOffset;
+				mesh.position.y = 100;
+				mesh.position.z = 0;
 
-				text.rotation.x = 0;
-				text.rotation.y = Math.PI * 2;
+				mesh.rotation.x = 0;
+				mesh.rotation.y = Math.PI * 2;
 
 				group = new THREE.Group();
-				group.add( text );
+				group.add( mesh );
 
 				scene.add( group );
 

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -26,7 +26,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 
@@ -92,10 +91,6 @@
 		<script src="../build/three.min.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-
 		<script>
 
 			// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
@@ -134,17 +129,23 @@
 			];
 
 			init();
-			animate();
 
 			function init() {
 
 				container = document.getElementById( 'container' );
 
-				var scene = initScene();
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+					var scene = initScene( font );
+
+					// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
+					objects.normal = initView( scene, 'normal', false );
+					objects.logzbuf = initView( scene, 'logzbuf', true );
+
+					animate();
 
-				// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
-				objects.normal = initView( scene, 'normal', false );
-				objects.logzbuf = initView( scene, 'logzbuf', true );
+				} );
 
 				stats = new Stats();
 				container.appendChild(stats.domElement);
@@ -158,7 +159,6 @@
 				window.addEventListener( 'MozMousePixelScroll', onMouseWheel, false );
 				window.addEventListener( 'mousemove', onMouseMove, false );
 
-				render();
 			}
 
 			function initView( scene, name, logDepthBuf ) {
@@ -179,7 +179,7 @@
 
 			}
 
-			function initScene() {
+			function initScene( font ) {
 
 				var scene = new THREE.Scene();
 
@@ -203,12 +203,15 @@
 				var geometry = new THREE.SphereBufferGeometry(0.5, 24, 12);
 
 				for (var i = 0; i < labeldata.length; i++) {
+
 					var scale = labeldata[i].scale || 1;
+
 					var labelgeo = new THREE.TextGeometry( labeldata[i].label, {
+						font: font,
 						size: labeldata[i].size,
 						height: labeldata[i].size / 2,
-						font: 'helvetiker',
-					});
+					} );
+
 					labelgeo.computeBoundingSphere();
 
 					// center text

examples/webgl_custom_attributes_lines.html

@@ -36,10 +36,6 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			uniform float amplitude;
@@ -85,10 +81,15 @@
 
 		var object, uniforms;
 
-		init();
-		animate();
+		var loader = new THREE.FontLoader();
+		loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
+
+			init( font );
+			animate();
 
-		function init() {
+		} );
+
+		function init( font ) {
 
 			camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.z = 400;
@@ -114,16 +115,15 @@
 
 			});
 
+
 			var geometry = new THREE.TextGeometry( 'three.js', {
 
+				font: font,
+
 				size: 50,
 				height: 15,
 				curveSegments: 10,
 
-				font: 'helvetiker',
-				weight: 'bold',
-				style: 'normal',
-
 				bevelThickness: 5,
 				bevelSize: 1.5,
 				bevelEnabled: true,
@@ -131,7 +131,7 @@
 
 				steps: 40
 
-			});
+			} );
 
 			geometry.center();
 

examples/webgl_geometry_normals.html

@@ -19,10 +19,6 @@
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-
 		<script>
 
 			var container, stats;
@@ -37,7 +33,7 @@
 
 				var F = function( klass, args ) {
 
-				    return klass.apply( this, args );
+					return klass.apply( this, args );
 
 				};
 
@@ -58,8 +54,6 @@
 
 			}
 
-
-
 			var geometriesParams = [
 
 				{ type: 'BoxGeometry', args: [ 200, 200, 200, 2, 2, 2, materials ] },
@@ -90,16 +84,21 @@
 					new THREE.Vector3(0,50,050),
 					new THREE.Vector3(0,0,100) ], 12, Math.PI*2/3, Math.PI*3/2 ] },
 				{ type: 'TextGeometry', args: ['&', {
-										size: 200,
-										height: 50,
-										curveSegments: 1,
-										font: "helvetiker"
-
-									}]},
+						size: 200,
+						height: 50,
+						curveSegments: 1
+					}]},
 				{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
 
 			];
 
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+				geometriesParams[ 12 ].args[ 1 ].font = font;
+
+			} );
+
 			var info;
 			var geometryIndex = 0;
 
@@ -197,7 +196,6 @@
 
 					f  = geometry.faces[ i ];
 
-
 					n = ( f instanceof THREE.Face3 ) ? 3 : 4;
 
 					for( var j = 0; j < n; j++ ) {

examples/webgl_geometry_text.html

@@ -31,8 +31,7 @@
 		<br/><span class="button" id="color">change color</span>,
 			<span class="button" id="font">change font</span>,
 			<span class="button" id="weight">change weight</span>,
-			<span class="button" id="bevel">change bevel</span>,
-			<span class="button" id="postprocessing">change postprocessing</span>,
+			<span class="button" id="bevel">change bevel</span>
 			<a id="permalink" href="#">permalink</a>
 		</div>
 
@@ -40,46 +39,19 @@
 		<script src="../build/three.min.js"></script>
 		<script src="js/utils/GeometryUtils.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-
-		<script src="fonts/gentilis_bold.typeface.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
-		<script src="fonts/optimer_bold.typeface.js"></script>
-		<script src="fonts/optimer_regular.typeface.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			THREE.Cache.enabled = true;
+
 			var container, stats, permalink, hex, color;
 
 			var camera, cameraTarget, scene, renderer;
 
-			var composer;
-			var effectFXAA;
-
 			var group, textMesh1, textMesh2, textGeo, material;
 
 			var firstLetter = true;
@@ -97,9 +69,10 @@
 				bevelSegments = 3,
 				bevelEnabled = true,
 
-				font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
-				weight = "bold", // normal bold
-				style = "normal"; // normal italic
+				font = undefined,
+
+				fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
+				fontWeight = "bold"; // normal bold
 
 			var mirror = true;
 
@@ -108,14 +81,14 @@
 				"helvetiker": 0,
 				"optimer": 1,
 				"gentilis": 2,
-				"droid sans": 3,
-				"droid serif": 4
+				"droid/droid_sans": 3,
+				"droid/droid_serif": 4
 
 			};
 
 			var weightMap = {
 
-				"normal": 0,
+				"regular": 0,
 				"bold": 1
 
 			};
@@ -135,9 +108,7 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled : false };
-			var glow = 0.9;
-        		var fontIndex = 0;
+			var fontIndex = 1;
 
 			init();
 			animate();
@@ -179,10 +150,6 @@
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
 
-				//text = capitalize( font ) + " " + capitalize( weight );
-				//text = "abcdefghijklmnopqrstuvwxyz0123456789";
-				//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-
 				// Get text from hash
 
 				var hash = document.location.hash.substr( 1 );
@@ -192,17 +159,15 @@
 					var colorhash  = hash.substring( 0, 6 );
 					var fonthash   = hash.substring( 6, 7 );
 					var weighthash = hash.substring( 7, 8 );
-					var pphash 	   = hash.substring( 8, 9 );
-					var bevelhash  = hash.substring( 9, 10 );
+					var bevelhash  = hash.substring( 8, 9 );
 					var texthash   = hash.substring( 10 );
 
 					hex = colorhash;
 					pointLight.color.setHex( parseInt( colorhash, 16 ) );
 
-					font = reverseFontMap[ parseInt( fonthash ) ];
-					weight = reverseWeightMap[ parseInt( weighthash ) ];
+					fontName = reverseFontMap[ parseInt( fonthash ) ];
+					fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
 
-					postprocessing.enabled = parseInt( pphash );
 					bevelEnabled = parseInt( bevelhash );
 
 					text = decodeURI( texthash );
@@ -226,7 +191,7 @@
 
 				scene.add( group );
 
-				createText();
+				loadFont();
 
 				var plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 10000, 10000 ),
@@ -258,10 +223,6 @@
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'keypress', onDocumentKeyPress, false );
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
-				renderer.domElement.addEventListener( 'drop', onDrop, false );
-			        renderer.domElement.addEventListener("dragover", function (evt) {
-			            evt.preventDefault();
-			        }, false);
 
 				document.getElementById( "color" ).addEventListener( 'click', function() {
 
@@ -275,32 +236,27 @@
 				document.getElementById( "font" ).addEventListener( 'click', function() {
 
 					fontIndex ++;
-					if ( fontIndex >= reverseFontMap.length ) {
-
-						fontIndex = 0;
-
-					}
 
-					font = reverseFontMap[fontIndex];
+					fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
 
-					refreshText();
+					loadFont();
 
 				}, false );
 
 
 				document.getElementById( "weight" ).addEventListener( 'click', function() {
 
-					if ( weight == "bold" ) {
+					if ( fontWeight === "bold" ) {
 
-						weight = "normal";
+						fontWeight = "regular";
 
 					} else {
 
-						weight = "bold";
+						fontWeight = "bold";
 
 					}
 
-					refreshText();
+					loadFont();
 
 				}, false );
 
@@ -312,38 +268,6 @@
 
 				}, false );
 
-				document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
-
-					postprocessing.enabled = !postprocessing.enabled;
-					updatePermalink();
-
-				}, false );
-
-
-				// POSTPROCESSING
-
-				renderer.autoClear = false;
-
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectBloom = new THREE.BloomPass( 0.25 );
-				var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
-
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-
-				var width = window.innerWidth || 2;
-				var height = window.innerHeight || 2;
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
-
-				effectFilm.renderToScreen = true;
-
-				composer = new THREE.EffectComposer( renderer );
-
-				composer.addPass( renderModel );
-				composer.addPass( effectFXAA );
-				composer.addPass( effectBloom );
-				composer.addPass( effectFilm );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -360,10 +284,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				composer.reset();
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
-
 			}
 
 			//
@@ -376,45 +296,13 @@
 
 			function updatePermalink() {
 
-				var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
+				var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
 
 				permalink.href = "#" + link;
 				window.location.hash = link;
 
 			}
 
-			function onDrop( e ) {
-				e.preventDefault();
-
-				var file = e.dataTransfer.files[0],
-				    reader = new FileReader();
-
-				reader.onload = function ( event ) {
-					console.log( event.target );
-					eval( event.target.result );
-
-					var index = 0;
-					for ( f in THREE.FontUtils.faces ) {
-
-						if ( ! fontMap[ f ] ) {
-
-						fontMap[ f ] = reverseFontMap.length;
-						reverseFontMap[ reverseFontMap.length ] = f;
-						font = f;
-
-						}
-					};
-
-					refreshText();
-
-				};
-
-				console.log(file);
-				reader.readAsText(file);
-
-				return false;
-			};
-
 			function onDocumentKeyDown( event ) {
 
 				if ( firstLetter ) {
@@ -462,18 +350,29 @@
 
 			}
 
+			function loadFont() {
+
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
+
+					font = response;
+
+					refreshText();
+
+				} );
+
+			}
+
 			function createText() {
 
 				textGeo = new THREE.TextGeometry( text, {
 
+					font: font,
+
 					size: size,
 					height: height,
 					curveSegments: curveSegments,
 
-					font: font,
-					weight: weight,
-					style: style,
-
 					bevelThickness: bevelThickness,
 					bevelSize: bevelSize,
 					bevelEnabled: bevelEnabled,
@@ -652,16 +551,7 @@
 				camera.lookAt( cameraTarget );
 
 				renderer.clear();
-
-				if ( postprocessing.enabled ) {
-
-					composer.render( 0.05 );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_geometry_text_earcut.html

@@ -32,8 +32,7 @@
 		<br/><span class="button" id="color">change color</span>,
 			<span class="button" id="font">change font</span>,
 			<span class="button" id="weight">change weight</span>,
-			<span class="button" id="bevel">change bevel</span>,
-			<span class="button" id="postprocessing">change postprocessing</span>,
+			<span class="button" id="bevel">change bevel</span>
 			<a id="permalink" href="#">permalink</a>
 		</div>
 
@@ -41,34 +40,9 @@
 		<script src="../build/three.min.js"></script>
 		<script src="js/utils/GeometryUtils.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-
-		<script src="fonts/gentilis_bold.typeface.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
-		<script src="fonts/optimer_bold.typeface.js"></script>
-		<script src="fonts/optimer_regular.typeface.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
 
 		<!-- replace built-in triangulation with Earcut -->
 		<script src="js/libs/earcut.js"></script>
@@ -101,7 +75,7 @@
 			        grouped.push( result.slice( i, i + 3 ) );
 			    }
 			    return grouped;
-			};	
+			};
 		</script>
 
 
@@ -109,13 +83,12 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			THREE.Cache.enabled = true;
+
 			var container, stats, permalink, hex, color;
 
 			var camera, cameraTarget, scene, renderer;
 
-			var composer;
-			var effectFXAA;
-
 			var group, textMesh1, textMesh2, textGeo, material;
 
 			var firstLetter = true;
@@ -133,9 +106,10 @@
 				bevelSegments = 3,
 				bevelEnabled = true,
 
-				font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
-				weight = "bold", // normal bold
-				style = "normal"; // normal italic
+				font = undefined,
+
+				fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
+				fontWeight = "bold"; // normal bold
 
 			var mirror = true;
 
@@ -144,20 +118,20 @@
 				"helvetiker": 0,
 				"optimer": 1,
 				"gentilis": 2,
-				"droid sans": 3,
-				"droid serif": 4
+				"droid/droid_sans": 3,
+				"droid/droid_serif": 4
 
 			};
 
 			var weightMap = {
 
-				"normal": 0,
+				"regular": 0,
 				"bold": 1
 
 			};
 
-			var reverseFontMap = {};
-			var reverseWeightMap = {};
+			var reverseFontMap = [];
+			var reverseWeightMap = [];
 
 			for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
 			for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
@@ -171,18 +145,11 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled : false };
-			var glow = 0.9;
+			var fontIndex = 1;
 
 			init();
 			animate();
 
-			function capitalize( txt ) {
-
-				return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );
-
-			}
-
 			function decimalToHex( d ) {
 
 				var hex = Number( d ).toString( 16 );
@@ -220,10 +187,6 @@
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
 
-				//text = capitalize( font ) + " " + capitalize( weight );
-				//text = "abcdefghijklmnopqrstuvwxyz0123456789";
-				//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-
 				// Get text from hash
 
 				var hash = document.location.hash.substr( 1 );
@@ -233,17 +196,15 @@
 					var colorhash  = hash.substring( 0, 6 );
 					var fonthash   = hash.substring( 6, 7 );
 					var weighthash = hash.substring( 7, 8 );
-					var pphash 	   = hash.substring( 8, 9 );
-					var bevelhash  = hash.substring( 9, 10 );
+					var bevelhash  = hash.substring( 8, 9 );
 					var texthash   = hash.substring( 10 );
 
 					hex = colorhash;
 					pointLight.color.setHex( parseInt( colorhash, 16 ) );
 
-					font = reverseFontMap[ parseInt( fonthash ) ];
-					weight = reverseWeightMap[ parseInt( weighthash ) ];
+					fontName = reverseFontMap[ parseInt( fonthash ) ];
+					fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
 
-					postprocessing.enabled = parseInt( pphash );
 					bevelEnabled = parseInt( bevelhash );
 
 					text = decodeURI( texthash );
@@ -267,7 +228,7 @@
 
 				scene.add( group );
 
-				createText();
+				loadFont();
 
 				var plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 10000, 10000 ),
@@ -311,45 +272,28 @@
 
 				document.getElementById( "font" ).addEventListener( 'click', function() {
 
-					if ( font == "helvetiker" ) {
-
-						font = "optimer";
-
-					} else if ( font == "optimer" ) {
-
-						font = "gentilis";
+					fontIndex ++;
 
-					} else if ( font == "gentilis" ) {
+					fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
 
-						font = "droid sans";
-
-					} else if ( font == "droid sans" ) {
-
-						font = "droid serif";
-
-					} else {
-
-						font = "helvetiker";
-
-					}
-
-					refreshText();
+					loadFont();
 
 				}, false );
 
+
 				document.getElementById( "weight" ).addEventListener( 'click', function() {
 
-					if ( weight == "bold" ) {
+					if ( fontWeight === "bold" ) {
 
-						weight = "normal";
+						fontWeight = "regular";
 
 					} else {
 
-						weight = "bold";
+						fontWeight = "bold";
 
 					}
 
-					refreshText();
+					loadFont();
 
 				}, false );
 
@@ -361,38 +305,6 @@
 
 				}, false );
 
-				document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
-
-					postprocessing.enabled = !postprocessing.enabled;
-					updatePermalink();
-
-				}, false );
-
-
-				// POSTPROCESSING
-
-				renderer.autoClear = false;
-
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectBloom = new THREE.BloomPass( 0.25 );
-				var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
-
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-
-				var width = window.innerWidth || 2;
-				var height = window.innerHeight || 2;
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
-
-				effectFilm.renderToScreen = true;
-
-				composer = new THREE.EffectComposer( renderer );
-
-				composer.addPass( renderModel );
-				composer.addPass( effectFXAA );
-				composer.addPass( effectBloom );
-				composer.addPass( effectFilm );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -409,10 +321,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				composer.reset();
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
-
 			}
 
 			//
@@ -425,7 +333,7 @@
 
 			function updatePermalink() {
 
-				var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
+				var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
 
 				permalink.href = "#" + link;
 				window.location.hash = link;
@@ -479,18 +387,29 @@
 
 			}
 
+			function loadFont() {
+
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
+
+					font = response;
+
+					refreshText();
+
+				} );
+
+			}
+
 			function createText() {
 
 				textGeo = new THREE.TextGeometry( text, {
 
+					font: font,
+
 					size: size,
 					height: height,
 					curveSegments: curveSegments,
 
-					font: font,
-					weight: weight,
-					style: style,
-
 					bevelThickness: bevelThickness,
 					bevelSize: bevelSize,
 					bevelEnabled: bevelEnabled,
@@ -669,16 +588,7 @@
 				camera.lookAt( cameraTarget );
 
 				renderer.clear();
-
-				if ( postprocessing.enabled ) {
-
-					composer.render( 0.05 );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_geometry_text_pnltri.html

@@ -32,8 +32,7 @@
 		<br/><span class="button" id="color">change color</span>,
 			<span class="button" id="font">change font</span>,
 			<span class="button" id="weight">change weight</span>,
-			<span class="button" id="bevel">change bevel</span>,
-			<span class="button" id="postprocessing">change postprocessing</span>,
+			<span class="button" id="bevel">change bevel</span>
 			<a id="permalink" href="#">permalink</a>
 		</div>
 
@@ -41,34 +40,9 @@
 		<script src="../build/three.min.js"></script>
 		<script src="js/utils/GeometryUtils.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-
-		<script src="fonts/gentilis_bold.typeface.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
-		<script src="fonts/optimer_bold.typeface.js"></script>
-		<script src="fonts/optimer_regular.typeface.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
-		<script src="fonts/droid/droid_serif_bold.typeface.js"></script>
 
 		<!-- replace built-in triangulation with PnlTri.js -->
 		<script src="js/libs/pnltri.min.js"></script>
@@ -82,23 +56,21 @@
 			} )();
 		</script>
 
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			THREE.Cache.enabled = true;
+
 			var container, stats, permalink, hex, color;
 
 			var camera, cameraTarget, scene, renderer;
 
-			var composer;
-			var effectFXAA;
-
 			var group, textMesh1, textMesh2, textGeo, material;
 
 			var firstLetter = true;
 
-			var text = "three.js",
+			var text = "PnlTri",
 
 				height = 20,
 				size = 70,
@@ -111,9 +83,10 @@
 				bevelSegments = 3,
 				bevelEnabled = true,
 
-				font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
-				weight = "bold", // normal bold
-				style = "normal"; // normal italic
+				font = undefined,
+
+				fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
+				fontWeight = "bold"; // normal bold
 
 			var mirror = true;
 
@@ -122,20 +95,20 @@
 				"helvetiker": 0,
 				"optimer": 1,
 				"gentilis": 2,
-				"droid sans": 3,
-				"droid serif": 4
+				"droid/droid_sans": 3,
+				"droid/droid_serif": 4
 
 			};
 
 			var weightMap = {
 
-				"normal": 0,
+				"regular": 0,
 				"bold": 1
 
 			};
 
-			var reverseFontMap = {};
-			var reverseWeightMap = {};
+			var reverseFontMap = [];
+			var reverseWeightMap = [];
 
 			for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
 			for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
@@ -149,18 +122,11 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled : false };
-			var glow = 0.9;
+			var fontIndex = 1;
 
 			init();
 			animate();
 
-			function capitalize( txt ) {
-
-				return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );
-
-			}
-
 			function decimalToHex( d ) {
 
 				var hex = Number( d ).toString( 16 );
@@ -198,10 +164,6 @@
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
 
-				//text = capitalize( font ) + " " + capitalize( weight );
-				//text = "abcdefghijklmnopqrstuvwxyz0123456789";
-				//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-
 				// Get text from hash
 
 				var hash = document.location.hash.substr( 1 );
@@ -211,17 +173,15 @@
 					var colorhash  = hash.substring( 0, 6 );
 					var fonthash   = hash.substring( 6, 7 );
 					var weighthash = hash.substring( 7, 8 );
-					var pphash 	   = hash.substring( 8, 9 );
-					var bevelhash  = hash.substring( 9, 10 );
+					var bevelhash  = hash.substring( 8, 9 );
 					var texthash   = hash.substring( 10 );
 
 					hex = colorhash;
 					pointLight.color.setHex( parseInt( colorhash, 16 ) );
 
-					font = reverseFontMap[ parseInt( fonthash ) ];
-					weight = reverseWeightMap[ parseInt( weighthash ) ];
+					fontName = reverseFontMap[ parseInt( fonthash ) ];
+					fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
 
-					postprocessing.enabled = parseInt( pphash );
 					bevelEnabled = parseInt( bevelhash );
 
 					text = decodeURI( texthash );
@@ -245,7 +205,7 @@
 
 				scene.add( group );
 
-				createText();
+				loadFont();
 
 				var plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 10000, 10000 ),
@@ -289,45 +249,28 @@
 
 				document.getElementById( "font" ).addEventListener( 'click', function() {
 
-					if ( font == "helvetiker" ) {
-
-						font = "optimer";
-
-					} else if ( font == "optimer" ) {
-
-						font = "gentilis";
+					fontIndex ++;
 
-					} else if ( font == "gentilis" ) {
+					fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
 
-						font = "droid sans";
-
-					} else if ( font == "droid sans" ) {
-
-						font = "droid serif";
-
-					} else {
-
-						font = "helvetiker";
-
-					}
-
-					refreshText();
+					loadFont();
 
 				}, false );
 
+
 				document.getElementById( "weight" ).addEventListener( 'click', function() {
 
-					if ( weight == "bold" ) {
+					if ( fontWeight === "bold" ) {
 
-						weight = "normal";
+						fontWeight = "regular";
 
 					} else {
 
-						weight = "bold";
+						fontWeight = "bold";
 
 					}
 
-					refreshText();
+					loadFont();
 
 				}, false );
 
@@ -339,38 +282,6 @@
 
 				}, false );
 
-				document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
-
-					postprocessing.enabled = !postprocessing.enabled;
-					updatePermalink();
-
-				}, false );
-
-
-				// POSTPROCESSING
-
-				renderer.autoClear = false;
-
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectBloom = new THREE.BloomPass( 0.25 );
-				var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
-
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-
-				var width = window.innerWidth || 2;
-				var height = window.innerHeight || 2;
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
-
-				effectFilm.renderToScreen = true;
-
-				composer = new THREE.EffectComposer( renderer );
-
-				composer.addPass( renderModel );
-				composer.addPass( effectFXAA );
-				composer.addPass( effectBloom );
-				composer.addPass( effectFilm );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -387,10 +298,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				composer.reset();
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
-
 			}
 
 			//
@@ -403,7 +310,7 @@
 
 			function updatePermalink() {
 
-				var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
+				var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
 
 				permalink.href = "#" + link;
 				window.location.hash = link;
@@ -457,18 +364,29 @@
 
 			}
 
+			function loadFont() {
+
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
+
+					font = response;
+
+					refreshText();
+
+				} );
+
+			}
+
 			function createText() {
 
 				textGeo = new THREE.TextGeometry( text, {
 
+					font: font,
+
 					size: size,
 					height: height,
 					curveSegments: curveSegments,
 
-					font: font,
-					weight: weight,
-					style: style,
-
 					bevelThickness: bevelThickness,
 					bevelSize: bevelSize,
 					bevelEnabled: bevelEnabled,
@@ -647,16 +565,7 @@
 				camera.lookAt( cameraTarget );
 
 				renderer.clear();
-
-				if ( postprocessing.enabled ) {
-
-					composer.render( 0.05 );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_variations_basic.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-					body {
+			body {
 				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
 
-				background-color: #fff;
+				background-color: #000;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -30,9 +30,6 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -46,10 +43,15 @@
 			var camera, scene, renderer, controls, objects = [];
 			var particleLight;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
-			function init() {
+				init( font );
+				animate();
+
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -118,20 +120,15 @@
 						}
 					}
 				}
-	
+
 				function addLabel( name, location ) {
 					var textGeo = new THREE.TextGeometry( name, {
 
-						size: 20,
-						height: 5,
-						curveSegments: 10,
-
-						font: 'gentilis',
-						weight: 'normal',
-						style: 'normal',
+						font: font,
 
-						material: 0,
-						extrudeMaterial: 1
+						size: 20,
+						height: 1,
+						curveSegments: 1
 
 					});
 

examples/webgl_materials_variations_lambert.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-					body {
+			body {
 				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
 
-				background-color: #fff;
+				background-color: #000;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -30,9 +30,6 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -46,10 +43,15 @@
 			var camera, scene, renderer, controls, objects = [];
 			var particleLight;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
-			function init() {
+				init( font );
+				animate();
+
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -100,7 +102,7 @@
 
 						var reflectivity = beta;
 
-						var side = THREE.FrontSide; 
+						var side = THREE.FrontSide;
 						if( ( betaIndex % 2 ) === 0 ) {
 							side = THREE.DoubleSide;
 						}
@@ -124,20 +126,15 @@
 						}
 					}
 				}
-	
+
 				function addLabel( name, location ) {
 					var textGeo = new THREE.TextGeometry( name, {
 
-						size: 20,
-						height: 5,
-						curveSegments: 10,
+						font: font,
 
-						font: 'gentilis',
-						weight: 'normal',
-						style: 'normal',
-
-						material: 0,
-						extrudeMaterial: 1
+						size: 20,
+						height: 1,
+						curveSegments: 1
 
 					});
 
@@ -155,7 +152,7 @@
 
 				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
-	
+
 				addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
 				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 

examples/webgl_materials_variations_phong.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-					body {
+			body {
 				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
 
-				background-color: #fff;
+				background-color: #000;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -31,9 +31,6 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -47,10 +44,15 @@
 			var camera, scene, renderer, controls, objects = [];
 			var particleLight;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
-			function init() {
+				init( font );
+				animate();
+
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -81,7 +83,7 @@
 
 				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
 				reflectionCube.format = THREE.RGBFormat;
-		
+
 				var cubeWidth = 400;
 				var numberOfSphersPerSide = 5;
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
@@ -89,9 +91,9 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-	
+
 				var localReflectionCube;
-				
+
 				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
 					if( alphaIndex % 2 === 0 ) {
@@ -127,21 +129,16 @@
 						}
 					}
 				}
-	
-	
+
+
 				function addLabel( name, location ) {
 					var textGeo = new THREE.TextGeometry( name, {
 
-						size: 20,
-						height: 5,
-						curveSegments: 10,
+						font: font,
 
-						font: 'gentilis',
-						weight: 'normal',
-						style: 'normal',
-
-						material: 0,
-						extrudeMaterial: 1
+						size: 20,
+						height: 1,
+						curveSegments: 1
 
 					});
 

examples/webgl_materials_variations_standard.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-					body {
+			body {
 				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
 
-				background-color: #fff;
+				background-color: #000;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -30,9 +30,6 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -46,10 +43,15 @@
 			var camera, scene, renderer, controls, objects = [];
 			var particleLight;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
-			function init() {
+				init( font );
+				animate();
+
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -128,16 +130,11 @@
 				function addLabel( name, location ) {
 					var textGeo = new THREE.TextGeometry( name, {
 
-						size: 20,
-						height: 5,
-						curveSegments: 10,
+						font: font,
 
-						font: 'gentilis',
-						weight: 'normal',
-						style: 'normal',
-
-						material: 0,
-						extrudeMaterial: 1
+						size: 20,
+						height: 1,
+						curveSegments: 1
 
 					});
 

examples/webgl_materials_variations_standard2.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-					body {
+			body {
 				color: #fff;
 				font-family:Monospace;
 				font-size:13px;
 				text-align:center;
 
-				background-color: #fff;
+				background-color: #000;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -30,9 +30,6 @@
 
 		<script src="../build/three.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/gentilis_regular.typeface.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -46,10 +43,15 @@
 			var camera, scene, renderer, controls, objects = [];
 			var particleLight;
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
-			function init() {
+				init( font );
+				animate();
+
+			} );
+
+			function init( font ) {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -128,16 +130,11 @@
 				function addLabel( name, location ) {
 					var textGeo = new THREE.TextGeometry( name, {
 
-						size: 20,
-						height: 5,
-						curveSegments: 10,
+						font: font,
 
-						font: 'gentilis',
-						weight: 'normal',
-						style: 'normal',
-
-						material: 0,
-						extrudeMaterial: 1
+						size: 20,
+						height: 1,
+						curveSegments: 1
 
 					});
 

examples/webgl_modifier_subdivision.html

@@ -20,10 +20,6 @@
 		<script src="js/modifiers/SubdivisionModifier.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-
 		<script>
 
 			var container, stats;
@@ -77,16 +73,21 @@
 					new THREE.Vector3(0,50,150),
 					new THREE.Vector3(0,0,200) ] ]},
 				{ type: 'TextGeometry', args: ['&', {
-										size: 200,
-										height: 50,
-										curveSegments: 1,
-										font: "helvetiker"
-
-									}]},
+						size: 200,
+						height: 50,
+						curveSegments: 1
+					}]},
 				{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
 
 			];
 
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+				geometriesParams[ 8 ].args[ 1 ].font = font;
+
+			} );
+
 			var loader = new THREE.JSONLoader();
 			loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
 

examples/webgl_modifier_tessellation.html

@@ -47,10 +47,6 @@
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			uniform float amplitude;
@@ -105,10 +101,15 @@
 		var WIDTH = window.innerWidth,
 			HEIGHT = window.innerHeight;
 
-		init();
-		animate();
+		var loader = new THREE.FontLoader();
+		loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
+
+			init( font );
+			animate();
+
+		} );
 
-		function init() {
+		function init( font ) {
 
 			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 			camera.position.set( -100, 100, 200 );
@@ -121,14 +122,12 @@
 
 			var geometry = new THREE.TextGeometry( "THREE.JS", {
 
+				font: font,
+
 				size: 40,
 				height: 5,
 				curveSegments: 3,
 
-				font: "helvetiker",
-				weight: "bold",
-				style: "normal",
-
 				bevelThickness: 2,
 				bevelSize: 1,
 				bevelEnabled: true

examples/webgl_shaders_vector.html

@@ -29,10 +29,6 @@
 
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_regular.typeface.js"></script>
-
 		<script type="x-shader/x-fragment" id="fs">
 
 			varying vec2 vUv;
@@ -99,10 +95,15 @@
 				t = !t;
 			}
 
-			init();
-			animate();
+			var loader = new THREE.FontLoader();
+			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+				init( font );
+				animate();
 
-			function init() {
+			} );
+
+			function init( font ) {
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 100, 500 );
@@ -114,14 +115,6 @@
 
 				var theText = "&"; // i % & j b 8
 
-				var options = {
-					size: 180,
-					height: 20,
-					curveSegments: 2,
-					font: "helvetiker",
-					bevelEnabled: false
-				};
-
 				group = new THREE.Group();
 				scene.add( group );
 
@@ -132,7 +125,7 @@
 					wireframe: true
 				} );
 
-				textShapes = THREE.FontUtils.generateShapes( theText, options );
+				textShapes = font.generateShapes( theText, 180, 2 );
 
 				text3d = new THREE.ShapeGeometry( textShapes );
 

examples/webgl_shadowmap.html

@@ -41,10 +41,6 @@
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
@@ -252,35 +248,38 @@
 
 				// TEXT
 
-				var textGeo = new THREE.TextGeometry( "THREE.JS", {
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
-					size: 200,
-					height: 50,
-					curveSegments: 12,
+					var textGeo = new THREE.TextGeometry( "THREE.JS", {
 
-					font: "helvetiker",
-					weight: "bold",
-					style: "normal",
+						font: font,
 
-					bevelThickness: 2,
-					bevelSize: 5,
-					bevelEnabled: true
+						size: 200,
+						height: 50,
+						curveSegments: 12,
 
-				});
+						bevelThickness: 2,
+						bevelSize: 5,
+						bevelEnabled: true
 
-				textGeo.computeBoundingBox();
-				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+					});
 
-				var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
+					textGeo.computeBoundingBox();
+					var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				var mesh = new THREE.Mesh( textGeo, textMaterial );
-				mesh.position.x = centerOffset;
-				mesh.position.y = FLOOR + 67;
+					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+					var mesh = new THREE.Mesh( textGeo, textMaterial );
+					mesh.position.x = centerOffset;
+					mesh.position.y = FLOOR + 67;
 
-				scene.add( mesh );
+					mesh.castShadow = true;
+					mesh.receiveShadow = true;
+
+					scene.add( mesh );
+
+				} );
 
 				// CUBES
 

examples/webgl_shadowmap_performance.html

@@ -40,10 +40,6 @@
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/geometries/TextGeometry.js"></script>
-		<script src="js/utils/FontUtils.js"></script>
-		<script src="fonts/helvetiker_bold.typeface.js"></script>
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
@@ -188,35 +184,38 @@
 
 				// TEXT
 
-				var textGeo = new THREE.TextGeometry( "THREE.JS", {
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
-					size: 200,
-					height: 50,
-					curveSegments: 12,
+					var textGeo = new THREE.TextGeometry( "THREE.JS", {
 
-					font: "helvetiker",
-					weight: "bold",
-					style: "normal",
+						font: font,
 
-					bevelThickness: 2,
-					bevelSize: 5,
-					bevelEnabled: true
+						size: 200,
+						height: 50,
+						curveSegments: 12,
 
-				});
+						bevelThickness: 2,
+						bevelSize: 5,
+						bevelEnabled: true
 
-				textGeo.computeBoundingBox();
-				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+					});
 
-				var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
+					textGeo.computeBoundingBox();
+					var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				var mesh = new THREE.Mesh( textGeo, textMaterial );
-				mesh.position.x = centerOffset;
-				mesh.position.y = FLOOR + 67;
+					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+					var mesh = new THREE.Mesh( textGeo, textMaterial );
+					mesh.position.x = centerOffset;
+					mesh.position.y = FLOOR + 67;
 
-				scene.add( mesh );
+					mesh.castShadow = true;
+					mesh.receiveShadow = true;
+
+					scene.add( mesh );
+
+				} );
 
 				// CUBES