Revert webgl_loader_ttf example

Author: Rikahei

examples/screenshots/webgl_loader_ttf.jpg

@@ -29,23 +29,20 @@
 			import { Font } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
 			let container;
 			let camera, cameraTarget, scene, renderer;
 			let group, textMesh1, textMesh2, textGeo, material;
 			let firstLetter = true;
 
 			let text = 'three.js';
 			const depth = 20,
+				size = 70,
 				hover = 30,
 				curveSegments = 4,
 				bevelThickness = 2,
 				bevelSize = 1.5;
 
 			let font = null;
-			let size = 50;
-			let textDirection = 'ltr';
 			const mirror = true;
 
 			let targetRotation = 0;
@@ -84,7 +81,7 @@
 
 				const dirLight2 = new THREE.DirectionalLight( 0xffffff, 2 );
 				dirLight2.position.set( 0, hover, 10 ).normalize();
-				dirLight2.color.setHSL( 0.5, 1, 0.5, THREE.SRGBColorSpace );
+				dirLight2.color.setHSL( Math.random(), 1, 0.5, THREE.SRGBColorSpace );
 				scene.add( dirLight2 );
 
 				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
@@ -96,7 +93,7 @@
 
 				const loader = new TTFLoader();
 
-				loader.load( 'fonts/ttf/MPLUSRounded1c/MPLUSRounded1c-Regular.ttf', function ( json ) {
+				loader.load( 'fonts/ttf/kenpixel.ttf', function ( json ) {
 
 					font = new Font( json );
 					createText();
@@ -124,49 +121,68 @@
 				container.style.touchAction = 'none';
 				container.addEventListener( 'pointerdown', onPointerDown );
 
+				document.addEventListener( 'keypress', onDocumentKeyPress );
+				document.addEventListener( 'keydown', onDocumentKeyDown );
+
 				window.addEventListener( 'resize', onWindowResize );
 
-				// GUI
+			}
 
-				const params = {
-					changeText: text,
-					direction: 'ltr',
-					changeSize: size
-				};
+			function onWindowResize() {
 
-				const gui = new GUI();
+				windowHalfX = window.innerWidth / 2;
 
-				gui.add( params, 'changeText' ).name( 'Display text' ).onChange( value => {
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-					text = value;
-					refreshText();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				} );
-				gui.add( params, 'direction', { LeftToRight: 'ltr', RightToLeft: 'rtl', TopToBottom: 'tb' } ).name( 'Direction' ).onChange( value => {
+			}
 
-					textDirection = value;
-					refreshText();
+			function onDocumentKeyDown( event ) {
 
-				} );
-				gui.add( params, 'changeSize' ).name( 'Size' ).onChange( value => {
+				if ( firstLetter ) {
+
+					firstLetter = false;
+					text = '';
+
+				}
+
+				const keyCode = event.keyCode;
 
-					size = value;
+				// backspace
+
+				if ( keyCode === 8 ) {
+
+					event.preventDefault();
+
+					text = text.substring( 0, text.length - 1 );
 					refreshText();
 
-				} );
+					return false;
 
-				gui.open();
+				}
 
 			}
 
-			function onWindowResize() {
+			function onDocumentKeyPress( event ) {
 
-				windowHalfX = window.innerWidth / 2;
+				const keyCode = event.which;
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+				// backspace
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				if ( keyCode === 8 ) {
+
+					event.preventDefault();
+
+				} else {
+
+					const ch = String.fromCharCode( keyCode );
+					text += ch;
+
+					refreshText();
+
+				}
 
 			}
 
@@ -176,7 +192,6 @@
 
 					font: font,
 
-					direction: textDirection,
 					size: size,
 					depth: depth,
 					curveSegments: curveSegments,