Migrated examples to dat.gui version 0.5.

Fixes #2524

Some things probably could be done still nicer, e.g. using new gui.dat color controllers.

examples/webgl_kinect.html

@@ -199,10 +199,10 @@
 
 
 					var gui = new dat.GUI();
-					gui.add( material.uniforms.nearClipping, 'value' ).name( 'nearClipping' ).min( 1 ).max( 10000 ).step( 1.0 );
-					gui.add( material.uniforms.farClipping, 'value' ).name( 'farClipping' ).min( 1 ).max( 10000 ).step( 1.0 );
-					gui.add( material.uniforms.pointSize, 'value' ).name( 'pointSize' ).min( 1 ).max( 10 ).step( 1.0 );
-					gui.add( material.uniforms.zOffset, 'value' ).name( 'zOffset' ).min( 0 ).max( 4000 ).step( 1.0 );
+					gui.add( material.uniforms.nearClipping, 'value', 1, 10000, 1.0 ).name( 'nearClipping' );
+					gui.add( material.uniforms.farClipping, 'value', 1, 10000, 1.0 ).name( 'farClipping' );
+					gui.add( material.uniforms.pointSize, 'value', 1, 10, 1.0 ).name( 'pointSize' );
+					gui.add( material.uniforms.zOffset, 'value', 0, 4000, 1.0 ).name( 'zOffset' );
 					gui.close();
 
 

examples/webgl_marching_cubes.html

@@ -119,10 +119,6 @@
 			camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 			camera.position.set( -500, 500, 1500 );
 
-			// CONTROLS
-
-			controls = new THREE.TrackballControls( camera );
-
 			// SCENE
 
 			scene = new THREE.Scene();
@@ -169,12 +165,17 @@
 			renderer.domElement.style.left = "0px";
 
 			container.appendChild( renderer.domElement );
+
 			//
 
 			renderer.gammaInput = true;
 			renderer.gammaOutput = true;
 			renderer.physicallyBasedShading = true;
 
+			// CONTROLS
+
+			controls = new THREE.TrackballControls( camera, renderer.domElement );
+
 			// STATS
 
 			stats = new Stats();
@@ -423,8 +424,6 @@
 					m_s.setValue( mat.s );
 					m_v.setValue( mat.v );
 
-					mm.setValue( current_material );
-
 					if ( current_material === "textured" ) {
 
 						effect.enableUvs = true;
@@ -449,20 +448,6 @@
 
 			};
 
-			function toggle( e ) {
-
-				if ( e.style.display === "block" ) {
-
-					e.style.display = "none";
-
-				} else {
-
-					e.style.display = "block";
-
-				}
-
-			}
-
 			effectController = {
 
 			material:   "shiny",
@@ -490,161 +475,67 @@
 
 			postprocessing: false,
 
-			h_m:  function() {
-			  for (var i = 0; i < g_m.length; i++)  toggle(g_m[ i ].domElement);
-			},
-			h_c:  function() {
-			  for (var i = 0; i < g_c.length; i++)  toggle(g_c[ i ].domElement);
-			},
-			h_pc: function() {
-			  for (var i = 0; i < g_pc.length; i++) toggle(g_pc[ i ].domElement);
-			},
-			h_do: function() {
-			  for (var i = 0; i < g_do.length; i++) toggle(g_do[ i ].domElement);
-			},
-			h_s:  function() {
-			  for (var i = 0; i < g_s.length; i++)  toggle(g_s[ i ].domElement);
-			},
-			h_r:  function() {
-			  for (var i = 0; i < g_r.length; i++)  toggle(g_r[ i ].domElement);
-			},
-
 			dummy: function() {
 			}
 
 			};
 
-			var e1, e2, e3, e4, e5, e6, h, m_h, m_s, m_v,
-			g_m = [], g_c, g_pc, g_do, g_s, g_r, mm,
-			gui = new dat.GUI();
+			var h, m_h, m_s, m_v;
 
-			// material (type)
+			var gui = new dat.GUI();
 
-			mm = gui.add( effectController, "material" );
-			mm.domElement.style.display = "none";
+			// material (type)
 
-			h = gui.add( effectController, "h_m" ).name( "Materials" );
-			setGuiHeaderStyle(h, 0, 65, 50);
+			h = gui.addFolder( "Materials" );
 
 			for ( var m in materials ) {
 
 				effectController[ m ] = createHandler( m );
-
-				e1 = gui.add( effectController, m ).name( m );
-				setGuiElementStyle( [ e1 ], 0, 65, 50, "block" );
-				g_m.push( e1 );
+				h.add( effectController, m ).name( m );
 
 			}
 
 			// material (color)
 
-			h = gui.add( effectController, "h_c" ).name( "Material color" );
-
-			m_h = gui.add( effectController, "hue", 0.0, 1.0, 0.025 );
-			m_s = gui.add( effectController, "saturation", 0.0, 1.0, 0.025 );
-			m_v = gui.add( effectController, "value", 0.0, 1.0, 0.025 );
+			h = gui.addFolder( "Material color" );
 
-			g_c = [ m_h, m_s, m_v ];
-
-			setGuiHeaderStyle( h, 20, 65, 50 );
-			setGuiElementStyle( g_c, 20, 65, 50, "block" );
+			m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
+			m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
+			m_v = h.add( effectController, "value", 0.0, 1.0, 0.025 );
 
 			// light (point)
 
-			h = gui.add(effectController, "h_pc").name("Point light color");
-
-			e1 = gui.add(effectController, "lhue", 0.0, 1.0, 0.025).name("hue");
-			e2 = gui.add(effectController, "lsaturation", 0.0, 1.0, 0.025).name("saturation");
-			e3 = gui.add(effectController, "lvalue", 0.0, 1.0, 0.025).name("value");
+			h = gui.addFolder( "Point light color" );
 
-			g_pc = [ e1, e2, e3 ];
-
-			setGuiHeaderStyle(h, 50, 65, 50);
-			setGuiElementStyle(g_pc, 50, 65, 50);
+			h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
+			h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
+			h.add( effectController, "lvalue", 0.0, 1.0, 0.025 ).name("value");
 
 			// light (directional)
 
-			h = gui.add(effectController, "h_do").name("Directional light orientation");
-
-			e1 = gui.add(effectController, "lx", -1.0, 1.0, 0.025).name("x");
-			e2 = gui.add(effectController, "ly", -1.0, 1.0, 0.025).name("y");
-			e3 = gui.add(effectController, "lz", -1.0, 1.0, 0.025).name("z");
+			h = gui.addFolder( "Directional light orientation" );
 
-			g_do = [ e1, e2, e3 ];
-
-			setGuiHeaderStyle(h, 80, 65, 50);
-			setGuiElementStyle(g_do, 80, 65, 50);
+			h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
+			h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
+			h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
 
 			// simulation
 
-			h = gui.add(effectController, "h_s").name("Simulation");
-
-			e1 = gui.add(effectController, "speed", 0.1, 8.0, 0.05);
-			e2 = gui.add(effectController, "numBlobs", 1, 50, 1);
-			e3 = gui.add(effectController, "resolution", 14, 40, 1);
-			e4 = gui.add(effectController, "isolation", 10, 300, 1);
-
-			e5 = gui.add(effectController, "floor");
-			e6 = gui.add(effectController, "wallx");
-			e7 = gui.add(effectController, "wallz");
-
-			e5.updateDisplay();
-			e6.updateDisplay();
-			e7.updateDisplay();
+			h = gui.addFolder( "Simulation" );
 
-			g_s = [ e1, e2, e3, e4, e5, e6, e7 ];
+			h.add( effectController, "speed", 0.1, 8.0, 0.05 );
+			h.add( effectController, "numBlobs", 1, 50, 1 );
+			h.add( effectController, "resolution", 14, 40, 1 );
+			h.add( effectController, "isolation", 10, 300, 1 );
 
-			setGuiHeaderStyle(h, 200, 65, 50);
-			setGuiElementStyle(g_s, 200, 65, 50, "block");
+			h.add( effectController, "floor" );
+			h.add( effectController, "wallx" );
+			h.add( effectController, "wallz" );
 
 			// rendering
 
-			h = gui.add(effectController, "h_r").name("Rendering");
-			e1 = gui.add(effectController, "postprocessing");
-
-			g_r = [ e1 ];
-
-			setGuiHeaderStyle(h, 225, 65, 50);
-			setGuiElementStyle(g_r, 225, 65, 50, "block");
-
-			// save
-
-			//e1 = gui.add(GUI, "saveURL").name("Save to URL");
-			//setGuiHeaderStyle(e1, 250, 65, 50, "block");
-
-			gui.domElement.style.backgroundColor = "#222";
-
-			// restore material from URL
-
-			id = mm.getValue()
-			current_material = id;
-			var mat = materials[ id ];
-			effect.material = mat.m;
-
-		}
-
-
-		function setGuiHeaderStyle( g, h, s, v ) {
-
-			var color = "hsl(" + h + "," + s + "%, " + v + "%)";
-
-			g.domElement.style.borderLeft = "solid 5px " + color;
-			g.domElement.style.background = color;
-			g.domElement.style.fontWeight = "bold";
-
-		}
-
-		function setGuiElementStyle( a, h, s, v, display ) {
-
-			var s, color = "hsl(" + h + "," + s + "%, " + v + "%)";
-
-			for ( i = 0; i < a.length; i ++ ) {
-
-				s = a[ i ].domElement.style;
-				s.borderLeft = "solid 5px " + color;
-				s.display = display ? display : "none";
-
-			}
+			h = gui.addFolder( "Rendering" );
+			h.add( effectController, "postprocessing" );
 
 		}
 

examples/webgl_morphtargets_md2.html

@@ -22,6 +22,7 @@
 				position: relative;
 				margin: 0 auto -2.1em;
 				top: 0px;
+				width: 70em;
 
 				padding: 5px;
 				z-index:100;
@@ -234,43 +235,6 @@
 
 			// GUI
 
-			function addGuiHeader( label, h, s, v ) {
-
-				// add dummy item
-
-				playbackConfig[ label ] = function() {};
-
-				// hack GUI item styling
-
-				var dummy = gui.add( playbackConfig, label, label );
-				setGuiHeaderStyle( dummy, h, s, v );
-
-			}
-
-			function setGuiHeaderStyle( g, h, s, v ) {
-
-				var color = "hsl(" + h + "," + s + "%, " + v + "%)";
-
-				g.domElement.style.borderLeft = "solid 5px " + color;
-				g.domElement.style.background = color;
-				g.domElement.style.fontWeight = "bold";
-
-			}
-
-			function setGuiElementStyle( a, h, s, v, display ) {
-
-				var i, s, color = "hsl(" + h + "," + s + "%, " + v + "%)";
-
-				for( i = 0; i < a.length; i ++ ) {
-
-					s = a[ i ].domElement.style;
-					s.borderLeft = "solid 5px " + color;
-					s.display = display ? display : "none";
-
-				}
-
-			}
-
 			function labelize( text ) {
 
 				var parts = text.split( "." );
@@ -290,7 +254,7 @@
 
 			function setupWeaponsGUI( character ) {
 
-				addGuiHeader( "Weapons", 20, 90, 30 );
+				var folder = gui.addFolder( "Weapons" );
 
 				var generateCallback = function( index ) {
 
@@ -305,19 +269,17 @@
 					var name = character.weapons[ i ].name;
 
 					playbackConfig[ name ] = generateCallback( i );
-					guiItems[ i ] = gui.add( playbackConfig, name ).name( labelize( name ) );
+					guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) );
 
 				}
 
-				setGuiElementStyle( guiItems, 20, 90, 30, "block" );
-
 			}
 
 			//
 
 			function setupSkinsGUI( character ) {
 
-				addGuiHeader( "Skins", 0, 90, 30 );
+				var folder = gui.addFolder( "Skins" );
 
 				var generateCallback = function( index ) {
 
@@ -332,19 +294,17 @@
 					var name = character.skinsBody[ i ].name;
 
 					playbackConfig[ name ] = generateCallback( i );
-					guiItems[ i ] = gui.add( playbackConfig, name ).name( labelize( name ) );
+					guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) );
 
 				}
 
-				setGuiElementStyle( guiItems, 0, 90, 30, "block" );
-
 			}
 
 			//
 
 			function setupGUIAnimations( character ) {
 
-				addGuiHeader( "Animations", 100, 90, 30 );
+				var folder = gui.addFolder( "Animations" );
 
 				var generateCallback = function( animationName ) {
 
@@ -358,14 +318,12 @@
 				for ( var a in animations ) {
 
 					playbackConfig[ a ] = generateCallback( a );
-					guiItems[ i ] = gui.add( playbackConfig, a, a );
+					guiItems[ i ] = folder.add( playbackConfig, a, a );
 
 					i ++;
 
 				}
 
-				setGuiElementStyle( guiItems, 100, 90, 30, "block" );
-
 			}
 
 			//

examples/webgl_postprocessing_dof.html

@@ -22,8 +22,10 @@
 
 			#info {
 				color:#fff;
-				position: absolute;
-				top: 0px; width: 100%;
+				position: relative;
+				top: 0px;
+				width: 50em;
+				margin: 0 auto -2.1em;
 				padding: 5px;
 				z-index:100;
 			}

examples/webgl_shading_physical.html

@@ -120,21 +120,6 @@
 				camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 2, FAR );
 				camera.position.set( 500, 400, 1200 );
 
-				controls = new THREE.TrackballControls( camera );
-				controls.target.set( 0, 120, 0 );
-
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-
-				controls.noZoom = false;
-				controls.noPan = false;
-
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.15;
-
-				controls.keys = [ 65, 83, 68 ];
-
 				// SCENE
 
 				scene = new THREE.Scene();
@@ -381,6 +366,24 @@
 				renderer.gammaOutput = true;
 				renderer.physicallyBasedShading = true;
 
+				//
+
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls.target.set( 0, 120, 0 );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.15;
+
+				controls.keys = [ 65, 83, 68 ];
+
+
 				// STATS
 
 				stats = new Stats();