Add gui and clean up (#31530)

examples/webgpu_loader_materialx.html

@@ -32,12 +32,14 @@
 
 			import * as THREE from 'three/webgpu';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
+			import { MaterialXLoader } from 'three/addons/loaders/MaterialXLoader.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
 			const LOCAL_SAMPLE_PATH = 'materialx/';
@@ -142,6 +144,8 @@
 
 						}
 
+						addGUI();
+
 					} );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -150,7 +154,7 @@
 
 			function updateModelsAlign() {
 
-				const COLUMN_COUNT = 6;
+				const COLUMN_COUNT = 8;
 				const DIST_X = 3;
 				const DIST_Y = 4;
 
@@ -190,8 +194,43 @@
 				const calibrationMesh = model.getObjectByName( 'Calibration_Mesh' );
 				calibrationMesh.material = material;
 
-				const Preview_Mesh = model.getObjectByName( 'Preview_Mesh' );
-				Preview_Mesh.material = material;
+				const previewMesh = model.getObjectByName( 'Preview_Mesh' );
+				previewMesh.material = material;
+
+			}
+
+			function addGUI() {
+
+				const gui = new GUI();
+
+				const API = {
+					showCalibrationMesh: true,
+					showPreviewMesh: true
+				};
+
+				const folder = gui.addFolder( 'SHOW' );
+
+				folder.add( API, 'showCalibrationMesh' )
+					.name( 'Calibration Mesh')
+					.onChange( function( value ) { setVisibility( 'Calibration_Mesh', value ) } );
+
+				folder.add( API, 'showPreviewMesh' )
+					.name( 'Preview Mesh')
+					.onChange( function( value ) { setVisibility( 'Preview_Mesh', value ) } );
+
+			}
+
+			function setVisibility( name, visible ) {
+
+				scene.traverse( function( node ) {
+
+					if ( node.isMesh ) {
+
+						if ( node.name == name ) node.visible = visible;
+
+					}
+
+				} );
 
 			}