Example: Refactor webgl_geometry_text. (#25145)

examples/webgl_geometry_text.html

@@ -10,12 +10,7 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - procedural 3D text<br/>
-			type to enter new text, drag to spin the text<br/>
-			<button id="color">change color</button>
-			<button id="font">change font</button>
-			<button id="weight">change weight</button>
-			<button id="bevel">change bevel</button><br/>
-			<a id="permalink" href="#">permalink</a>
+			type to enter new text, drag to spin the text
 		</div>
 
 		<!-- Import maps polyfill -->
@@ -38,11 +33,11 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			THREE.Cache.enabled = true;
 
-			let container, stats, permalink, hex;
+			let container;
 
 			let camera, cameraTarget, scene, renderer;
 
@@ -106,21 +101,11 @@
 			init();
 			animate();
 
-			function decimalToHex( d ) {
-
-				let hex = Number( d ).toString( 16 );
-				hex = '000000'.substring( 0, 6 - hex.length ) + hex;
-				return hex.toUpperCase();
-
-			}
-
 			function init() {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				permalink = document.getElementById( 'permalink' );
-
 				// CAMERA
 
 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
@@ -141,40 +126,10 @@
 				scene.add( dirLight );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				pointLight.color.setHSL( Math.random(), 1, 0.5 );
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
 
-				// Get text from hash
-
-				const hash = document.location.hash.slice( 1 );
-
-				if ( hash.length !== 0 ) {
-
-					const colorhash = hash.substring( 0, 6 );
-					const fonthash = hash.substring( 6, 7 );
-					const weighthash = hash.substring( 7, 8 );
-					const bevelhash = hash.substring( 8, 9 );
-					const texthash = hash.substring( 10 );
-
-					hex = colorhash;
-					pointLight.color.setHex( parseInt( colorhash, 16 ) );
-
-					fontName = reverseFontMap[ parseInt( fonthash ) ];
-					fontWeight = reverseWeightMap[ parseInt( weighthash ) ];
-
-					bevelEnabled = parseInt( bevelhash );
-
-					text = decodeURI( texthash );
-
-					updatePermalink();
-
-				} else {
-
-					pointLight.color.setHSL( Math.random(), 1, 0.5 );
-					hex = decimalToHex( pointLight.color.getHex() );
-
-				}
-
 				materials = [
 					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
 					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
@@ -202,11 +157,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				// STATS
-
-				stats = new Stats();
-				//container.appendChild( stats.dom );
-
 				// EVENTS
 
 				container.style.touchAction = 'none';
@@ -215,49 +165,56 @@
 				document.addEventListener( 'keypress', onDocumentKeyPress );
 				document.addEventListener( 'keydown', onDocumentKeyDown );
 
-				document.getElementById( 'color' ).addEventListener( 'click', function () {
+				//
 
-					pointLight.color.setHSL( Math.random(), 1, 0.5 );
-					hex = decimalToHex( pointLight.color.getHex() );
+				const params = {
+					changeColor: function () {
 
-					updatePermalink();
+						pointLight.color.setHSL( Math.random(), 1, 0.5 );
 
-				} );
+					},
+					changeFont: function () {
 
-				document.getElementById( 'font' ).addEventListener( 'click', function () {
+						fontIndex ++;
 
-					fontIndex ++;
+						fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
 
-					fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
+						loadFont();
 
-					loadFont();
-
-				} );
+					},
+					changeWeight: function () {
 
+						if ( fontWeight === 'bold' ) {
 
-				document.getElementById( 'weight' ).addEventListener( 'click', function () {
+							fontWeight = 'regular';
 
-					if ( fontWeight === 'bold' ) {
+						} else {
 
-						fontWeight = 'regular';
+							fontWeight = 'bold';
 
-					} else {
+						}
 
-						fontWeight = 'bold';
+						loadFont();
 
-					}
+					},
+					changeBevel: function () {
 
-					loadFont();
+						bevelEnabled = ! bevelEnabled;
 
-				} );
+						refreshText();
 
-				document.getElementById( 'bevel' ).addEventListener( 'click', function () {
+					},
+				};
 
-					bevelEnabled = ! bevelEnabled;
+				//
 
-					refreshText();
+				const gui = new GUI();
 
-				} );
+				gui.add( params, 'changeColor' );
+				gui.add( params, 'changeFont' );
+				gui.add( params, 'changeWeight' );
+				gui.add( params, 'changeBevel' );
+				gui.open();
 
 				//
 
@@ -278,21 +235,6 @@
 
 			//
 
-			function boolToNum( b ) {
-
-				return b ? 1 : 0;
-
-			}
-
-			function updatePermalink() {
-
-				const link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + '#' + encodeURI( text );
-
-				permalink.href = '#' + link;
-				window.location.hash = link;
-
-			}
-
 			function onDocumentKeyDown( event ) {
 
 				if ( firstLetter ) {
@@ -403,8 +345,6 @@
 
 			function refreshText() {
 
-				updatePermalink();
-
 				group.remove( textMesh1 );
 				if ( mirror ) group.remove( textMesh2 );
 
@@ -452,7 +392,6 @@
 				requestAnimationFrame( animate );
 
 				render();
-				stats.update();
 
 			}