Examples: Clean up. (#25146)

examples/webgl_geometry_text.html

@@ -203,17 +203,17 @@
 
 						refreshText();
 
-					},
+					}
 				};
 
 				//
 
 				const gui = new GUI();
 
-				gui.add( params, 'changeColor' );
-				gui.add( params, 'changeFont' );
-				gui.add( params, 'changeWeight' );
-				gui.add( params, 'changeBevel' );
+				gui.add( params, 'changeColor' ).name( 'change color' );
+				gui.add( params, 'changeFont' ).name( 'change font' );
+				gui.add( params, 'changeWeight' ).name( 'change weight' );
+				gui.add( params, 'changeBevel' ).name( 'change bevel' );
 				gui.open();
 
 				//

examples/webgl_lights_hemisphere.html

@@ -19,9 +19,7 @@
 		<div id="container"></div>
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl hemisphere light example<br/>
-			flamingo by <a href="https://mirada.com/" target="_blank" rel="noopener">mirada</a> from <a href="http://www.ro.me" target="_blank" rel="noopener">ro.me</a><br/><br/>
-			<button id="hemisphereButton">toggle hemisphere light</button>
-			<button id="directionalButton">toggle directional light</button>
+			flamingo by <a href="https://mirada.com/" target="_blank" rel="noopener">mirada</a> from <a href="http://www.ro.me" target="_blank" rel="noopener">ro.me</a>
 		</div>
 
 		<script type="x-shader/x-vertex" id="vertexShader">
@@ -75,10 +73,10 @@
 			import * as THREE from 'three';
 
 			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-
 			let camera, scene, renderer;
 			const mixers = [];
 			let stats;
@@ -213,23 +211,30 @@
 
 				//
 
-				window.addEventListener( 'resize', onWindowResize );
+				const params = {
+					toggleHemisphereLight: function () {
 
-				const hemisphereButton = document.getElementById( 'hemisphereButton' );
-				hemisphereButton.addEventListener( 'click', function () {
+						hemiLight.visible = ! hemiLight.visible;
+						hemiLightHelper.visible = ! hemiLightHelper.visible;
 
-					hemiLight.visible = ! hemiLight.visible;
-					hemiLightHelper.visible = ! hemiLightHelper.visible;
+					},
+					toggleDirectionalLight: function () {
 
-				} );
+						dirLight.visible = ! dirLight.visible;
+						dirLightHelper.visible = ! dirLightHelper.visible;
 
-				const directionalButton = document.getElementById( 'directionalButton' );
-				directionalButton.addEventListener( 'click', function () {
+					}
+				};
 
-					dirLight.visible = ! dirLight.visible;
-					dirLightHelper.visible = ! dirLightHelper.visible;
+				const gui = new GUI();
 
-				} );
+				gui.add( params, 'toggleHemisphereLight' ).name( 'toggle hemisphere light' );
+				gui.add( params, 'toggleDirectionalLight' ).name( 'toggle directional light' );
+				gui.open();
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 

examples/webgl_loader_pcd.html

@@ -10,8 +10,6 @@
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
 			<a href="https://pointclouds.org/documentation/tutorials/pcd_file_format.html" target="_blank" rel="noopener">PCD File format</a>
-			<div>+/-: Increase/Decrease point size</div>
-			<div>c: Change color</div>
 		</div>
 
 		<!-- Import maps polyfill -->
@@ -33,6 +31,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer;
 
@@ -67,14 +66,22 @@
 					points.name = 'Zaghetto.pcd';
 					scene.add( points );
 
+					//
+
+					const gui = new GUI();
+
+					gui.add( points.material, 'size', 0.001, 0.01 ).onChange( render );
+					gui.addColor( points.material, 'color' ).onChange( render );
+					gui.open();
+
+					//
+
 					render();
 
 				} );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				window.addEventListener( 'keypress', keyboard );
-
 			}
 
 			function onWindowResize() {
@@ -84,28 +91,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			}
-
-			function keyboard( ev ) {
-
-				const points = scene.getObjectByName( 'Zaghetto.pcd' );
-
-				switch ( ev.key || String.fromCharCode( ev.keyCode || ev.charCode ) ) {
-
-					case '+':
-						points.material.size *= 1.2;
-						break;
-
-					case '-':
-						points.material.size /= 1.2;
-						break;
-
-					case 'c':
-						points.material.color.setHex( Math.random() * 0xffffff );
-						break;
-
-				}
-
 				render();
 
 			}