Replace dat.gui with lil-gui (#22765)

* dat.gui => lil-gui

* e2e tests clean up lil-gui

* delete dat.gui ... take a bow old friend

docs/scenes/bones-browser.html

@@ -44,7 +44,7 @@
 				WebGLRenderer
 			} from "../../build/three.module.js";
 
-			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
 
 			let gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
@@ -189,10 +189,10 @@
 				let folder = gui.addFolder( "General Options" );
 
 				folder.add( state, "animateBones" );
-				folder.__controllers[ 0 ].name( "Animate Bones" );
+				folder.controllers[ 0 ].name( "Animate Bones" );
 
 				folder.add( mesh, "pose" );
-				folder.__controllers[ 1 ].name( ".pose()" );
+				folder.controllers[ 1 ].name( ".pose()" );
 
 				const bones = mesh.skeleton.bones;
 
@@ -214,17 +214,17 @@
 					folder.add( bone.scale, 'y', 0, 2 );
 					folder.add( bone.scale, 'z', 0, 2 );
 
-					folder.__controllers[ 0 ].name( "position.x" );
-					folder.__controllers[ 1 ].name( "position.y" );
-					folder.__controllers[ 2 ].name( "position.z" );
+					folder.controllers[ 0 ].name( "position.x" );
+					folder.controllers[ 1 ].name( "position.y" );
+					folder.controllers[ 2 ].name( "position.z" );
 
-					folder.__controllers[ 3 ].name( "rotation.x" );
-					folder.__controllers[ 4 ].name( "rotation.y" );
-					folder.__controllers[ 5 ].name( "rotation.z" );
+					folder.controllers[ 3 ].name( "rotation.x" );
+					folder.controllers[ 4 ].name( "rotation.y" );
+					folder.controllers[ 5 ].name( "rotation.z" );
 
-					folder.__controllers[ 6 ].name( "scale.x" );
-					folder.__controllers[ 7 ].name( "scale.y" );
-					folder.__controllers[ 8 ].name( "scale.z" );
+					folder.controllers[ 6 ].name( "scale.x" );
+					folder.controllers[ 7 ].name( "scale.y" );
+					folder.controllers[ 8 ].name( "scale.z" );
 
 				}
 

docs/scenes/geometry-browser.html

@@ -64,7 +64,7 @@
 				WebGLRenderer
 			} from '../../build/three.module.js';
 
-			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
 
 			const twoPi = Math.PI * 2;

docs/scenes/material-browser.html

@@ -28,7 +28,7 @@
 		<script type="module">
 
 			import * as THREE from '../../build/three.module.js';
-			import * as DAT from '../../examples/jsm/libs/dat.gui.module.js';
+			import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js';
 			import { RoomEnvironment } from '../../examples/jsm/environments/RoomEnvironment.js';
 
 			const constants = {
@@ -715,7 +715,7 @@
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
-			const gui = new DAT.GUI();
+			const gui = new GUI();
 
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );

examples/main.css

@@ -41,14 +41,21 @@ a, button, input, select {
 	pointer-events: auto;
 }
 
-.dg.ac {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+.lil-gui {
 	z-index: 2 !important; /* TODO Solve this in HTML */
 }
 
+@media all and ( max-width: 640px ) {
+	.lil-gui.root { 
+		right: auto;
+		top: auto;
+		max-height: 50%;
+		max-width: 80%;
+		bottom: 0;
+		left: 0;
+	}
+}
+
 #overlay {
 	position: absolute;
 	font-size: 16px;

examples/misc_controls_arcball.html

@@ -17,7 +17,7 @@
 		<script type="module">
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { ArcballControls } from './jsm/controls/ArcballControls.js';
 

examples/misc_controls_map.html

@@ -26,7 +26,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { MapControls } from './jsm/controls/OrbitControls.js';
 

examples/misc_controls_trackball.html

@@ -27,7 +27,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 

examples/misc_exporter_collada.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ColladaExporter } from './jsm/exporters/ColladaExporter.js';

examples/webaudio_sandbox.html

@@ -34,7 +34,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 

examples/webgl2_materials_texture3d.html

@@ -16,7 +16,7 @@
 	<script type="module">
 		import * as THREE from '../build/three.module.js';
 
-		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { GUI } from './jsm/libs/lil-gui.module.min.js';
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
 		import { VolumeRenderShader1 } from './jsm/shaders/VolumeShader.js';

examples/webgl2_materials_texture3d_partialupdate.html

@@ -17,7 +17,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { WEBGL } from './jsm/WebGL.js';
 
 			if ( WEBGL.isWebGL2Available() === false ) {

examples/webgl2_rendertarget_texture2darray.html

@@ -101,7 +101,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { unzipSync } from './jsm/libs/fflate.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { WEBGL } from './jsm/WebGL.js';
 

examples/webgl2_volume_cloud.html

@@ -17,7 +17,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { WEBGL } from './jsm/WebGL.js';
 
 			if ( WEBGL.isWebGL2Available() === false ) {

examples/webgl2_volume_perlin.html

@@ -17,7 +17,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { WEBGL } from './jsm/WebGL.js';
 
 			if ( WEBGL.isWebGL2Available() === false ) {

examples/webgl_animation_skinning_additive_blending.html

@@ -9,7 +9,7 @@
 			a {
 				color: blue;
 			}
-			.control-inactive {
+			.control-inactive button {
 				color: #888;
 			}
 		</style>
@@ -26,7 +26,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
@@ -221,18 +221,15 @@
 
 				crossFadeControls.forEach( function ( control ) {
 
-					control.classList1 = control.domElement.parentElement.parentElement.classList;
-					control.classList2 = control.domElement.previousElementSibling.classList;
-
 					control.setInactive = function () {
 
-						control.classList2.add( 'control-inactive' );
+						control.domElement.classList.add( 'control-inactive' );
 
 					};
 
 					control.setActive = function () {
 
-						control.classList2.remove( 'control-inactive' );
+						control.domElement.classList.remove( 'control-inactive' );
 
 					};
 

examples/webgl_animation_skinning_blending.html

@@ -9,13 +9,6 @@
 			a {
 				color: #f00;
 			}
-			.no-pointer-events {
-				pointer-events: none;
-			}
-			.control-disabled {
-				color: #888;
-				text-decoration: line-through;
-			}
 		</style>
 	</head>
 	<body>
@@ -31,7 +24,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
@@ -226,27 +219,6 @@
 				folder5.open();
 				folder6.open();
 
-				crossFadeControls.forEach( function ( control ) {
-
-					control.classList1 = control.domElement.parentElement.parentElement.classList;
-					control.classList2 = control.domElement.previousElementSibling.classList;
-
-					control.setDisabled = function () {
-
-						control.classList1.add( 'no-pointer-events' );
-						control.classList2.add( 'control-disabled' );
-
-					};
-
-					control.setEnabled = function () {
-
-						control.classList1.remove( 'no-pointer-events' );
-						control.classList2.remove( 'control-disabled' );
-
-					};
-
-				} );
-
 			}
 
 
@@ -446,28 +418,30 @@
 
 			function updateCrossFadeControls() {
 
-				crossFadeControls.forEach( function ( control ) {
-
-					control.setDisabled();
-
-				} );
-
 				if ( idleWeight === 1 && walkWeight === 0 && runWeight === 0 ) {
 
-					crossFadeControls[ 1 ].setEnabled();
+					crossFadeControls[ 0 ].disable();
+					crossFadeControls[ 1 ].enable();
+					crossFadeControls[ 2 ].disable();
+					crossFadeControls[ 3 ].disable();
 
 				}
 
 				if ( idleWeight === 0 && walkWeight === 1 && runWeight === 0 ) {
 
-					crossFadeControls[ 0 ].setEnabled();
-					crossFadeControls[ 2 ].setEnabled();
+					crossFadeControls[ 0 ].enable();
+					crossFadeControls[ 1 ].disable();
+					crossFadeControls[ 2 ].enable();
+					crossFadeControls[ 3 ].disable();
 
 				}
 
 				if ( idleWeight === 0 && walkWeight === 0 && runWeight === 1 ) {
 
-					crossFadeControls[ 3 ].setEnabled();
+					crossFadeControls[ 0 ].disable();
+					crossFadeControls[ 1 ].disable();
+					crossFadeControls[ 2 ].disable();
+					crossFadeControls[ 3 ].enable();
 
 				}
 

examples/webgl_animation_skinning_morph.html

@@ -39,7 +39,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 

examples/webgl_buffergeometry_compression.html

@@ -21,7 +21,7 @@
 			import * as GeometryCompressionUtils from './jsm/utils/GeometryCompressionUtils.js';
 			import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';
 			import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			const statsEnabled = true;
 

examples/webgl_buffergeometry_drawrange.html

@@ -19,7 +19,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_buffergeometry_indexed.html

@@ -16,7 +16,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats;
 

examples/webgl_buffergeometry_instancing.html

@@ -70,7 +70,7 @@
 		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
-		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 		let container, stats;
 

examples/webgl_camera_cinematic.html

@@ -26,7 +26,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { CinematicCamera } from './jsm/cameras/CinematicCamera.js';
 

examples/webgl_clipping.html

@@ -13,7 +13,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_clipping_advanced.html

@@ -13,7 +13,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_clipping_intersection.html

@@ -12,7 +12,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_clipping_stencil.html

@@ -13,7 +13,7 @@
 		<script type="module">
 			import * as THREE from '../build/three.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import Stats from './jsm/libs/stats.module.js';
 
 			let camera, scene, renderer, object, stats;

examples/webgl_decals.html

@@ -19,7 +19,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

examples/webgl_depth_texture.html

@@ -68,7 +68,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			let camera, scene, renderer, controls, stats;

examples/webgl_geometry_colors_lookuptable.html

@@ -28,7 +28,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Lut } from './jsm/math/Lut.js';

examples/webgl_geometry_extrude_splines.html

@@ -28,7 +28,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { Curves } from './jsm/curves/CurveExtras.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
@@ -211,7 +211,7 @@
 
 				// dat.GUI
 
-				const gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 285 } );
 
 				const folderGeometry = gui.addFolder( 'Geometry' );
 				folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {

examples/webgl_geometry_spline_editor.html

@@ -26,7 +26,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TransformControls } from './jsm/controls/TransformControls.js';

examples/webgl_geometry_teapot.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';

examples/webgl_gpgpu_birds.html

@@ -302,7 +302,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 

examples/webgl_gpgpu_birds_gltf.html

@@ -211,7 +211,7 @@
 
 			import * as THREE from '../build/three.module.js';
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 

examples/webgl_gpgpu_protoplanet.html

@@ -238,7 +238,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
@@ -505,7 +505,7 @@
 
 			function initGUI() {
 
-				const gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 280 } );
 
 				const folder1 = gui.addFolder( 'Dynamic parameters' );
 

examples/webgl_gpgpu_water.html

@@ -251,7 +251,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 			import { SimplexNoise } from './jsm/math/SimplexNoise.js';

examples/webgl_instancing_dynamic.html

@@ -13,7 +13,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats;
 

examples/webgl_instancing_performance.html

@@ -10,8 +10,9 @@
 			background-color: rgba(0,0,0,0.75);
 		}
 
-		.dg .folder .gui-stats {
-			height: auto;
+		.lil-gui .gui-stats {
+			line-height: var(--widget-height);
+			padding: var(--padding);
 		}
 	</style>
 </head>
@@ -29,7 +30,7 @@
 		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
-		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';
@@ -273,10 +274,10 @@
 
 			const perfFolder = gui.addFolder( 'Performance' );
 
-			guiStatsEl = document.createElement( 'li' );
+			guiStatsEl = document.createElement( 'div' );
 			guiStatsEl.classList.add( 'gui-stats' );
 
-			perfFolder.__ul.appendChild( guiStatsEl );
+			perfFolder.$children.appendChild( guiStatsEl );
 			perfFolder.open();
 
 			// listeners

examples/webgl_instancing_raycast.html

@@ -12,7 +12,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from "./jsm/controls/OrbitControls.js";
 
 			let camera, scene, renderer, stats;

examples/webgl_instancing_scatter.html

@@ -15,7 +15,7 @@
 			import { MeshSurfaceSampler } from './jsm/math/MeshSurfaceSampler.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats;
 

examples/webgl_layers.html

@@ -26,7 +26,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let container, stats;
 			let camera, scene, renderer;

examples/webgl_lightningstrike.html

@@ -16,7 +16,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LightningStrike } from './jsm/geometries/LightningStrike.js';
@@ -98,7 +98,7 @@
 
 				}
 
-				gui = new GUI( { width: 350 } );
+				gui = new GUI( { width: 315 } );
 
 				const sceneFolder = gui.addFolder( "Scene" );
 

examples/webgl_lightprobe.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LightProbeGenerator } from './jsm/lights/LightProbeGenerator.js';
@@ -115,15 +115,9 @@
 
 
 				// gui
-				gui = new GUI();
+				gui = new GUI( { title: 'Intensity' } );
 
-				gui.width = 300;
-
-				gui.domElement.style.userSelect = 'none';
-
-				const fl = gui.addFolder( 'Intensity' );
-
-				fl.add( API, 'lightProbeIntensity', 0, 1, 0.02 )
+				gui.add( API, 'lightProbeIntensity', 0, 1, 0.02 )
 					.name( 'light probe' )
 					.onChange( function () {
 
@@ -131,7 +125,7 @@
 
 					} );
 
-				fl.add( API, 'directionalLightIntensity', 0, 1, 0.02 )
+				gui.add( API, 'directionalLightIntensity', 0, 1, 0.02 )
 					.name( 'directional light' )
 					.onChange( function () {
 
@@ -139,7 +133,7 @@
 
 					} );
 
-				fl.add( API, 'envMapIntensity', 0, 1, 0.02 )
+				gui.add( API, 'envMapIntensity', 0, 1, 0.02 )
 					.name( 'envMap' )
 					.onChange( function () {
 
@@ -147,8 +141,6 @@
 
 					} );
 
-				fl.open();
-
 				// listener
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgl_lights_physical.html

@@ -20,7 +20,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_lights_spotlight.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_lines_fat.html

@@ -20,7 +20,7 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GPUStatsPanel } from './jsm/utils/GPUStatsPanel.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Line2 } from './jsm/lines/Line2.js';
 			import { LineMaterial } from './jsm/lines/LineMaterial.js';

examples/webgl_lines_fat_wireframe.html

@@ -19,7 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LineMaterial } from './jsm/lines/LineMaterial.js';
 			import { Wireframe } from './jsm/lines/Wireframe.js';

examples/webgl_loader_3dm.html

@@ -39,7 +39,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Rhino3dmLoader } from './jsm/loaders/3DMLoader.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer;
 			let controls, gui;
@@ -107,15 +107,12 @@
 
 			function initGUI( layers ) {
 
-				gui = new GUI( { width: 300 } );
-
-				const layersControl = gui.addFolder( 'layers' );
-				layersControl.open();
+				gui = new GUI( { title: 'layers' } );
 
 				for ( let i = 0; i < layers.length; i ++ ) {
 
 					const layer = layers[ i ];
-					layersControl.add( layer, 'visible' ).name( layer.name ).onChange( function ( val ) {
+					gui.add( layer, 'visible' ).name( layer.name ).onChange( function ( val ) {
 
 						const name = this.object.name;
 

examples/webgl_loader_3mf.html

@@ -25,7 +25,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, object, loader, controls;
 
@@ -97,7 +97,7 @@
 
 				//
 
-				const gui = new GUI( { width: 300 } );
+				const gui = new GUI();
 				gui.add( params, 'asset', assets ).onChange( function ( value ) {
 
 					loadAsset( value );

examples/webgl_loader_gltf_sheen.html

@@ -21,7 +21,7 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, controls;
 

examples/webgl_loader_gltf_variants.html

@@ -19,7 +19,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';

examples/webgl_loader_ldraw.html

@@ -24,7 +24,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';

examples/webgl_loader_md2.html

@@ -19,7 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { MD2Character } from './jsm/misc/MD2Character.js';

examples/webgl_loader_mmd.html

@@ -32,7 +32,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';

examples/webgl_loader_mmd_pose.html

@@ -31,7 +31,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
 			import { MMDLoader } from './jsm/loaders/MMDLoader.js';

examples/webgl_loader_nodes.html

@@ -18,7 +18,7 @@
 
 				import * as THREE from '../build/three.module.js';
 
-				import { GUI } from './jsm/libs/dat.gui.module.js';
+				import { GUI } from './jsm/libs/lil-gui.module.min.js';
 				import { OrbitControls } from './jsm/controls/OrbitControls.js';
 				import { NodeMaterialLoader } from './jsm/loaders/NodeMaterialLoader.js';
 				import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';

examples/webgl_loader_nrrd.html

@@ -34,7 +34,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
 			import { VTKLoader } from './jsm/loaders/VTKLoader.js';

examples/webgl_loader_svg.html

@@ -25,7 +25,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { SVGLoader } from './jsm/loaders/SVGLoader.js';
 
@@ -84,7 +84,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new GUI( { width: 350 } );
+				gui = new GUI();
 
 				gui.add( guiData, 'currentURL', {
 

examples/webgl_loader_texture_exr.html

@@ -17,7 +17,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 

examples/webgl_loader_texture_hdr.html

@@ -17,7 +17,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 

examples/webgl_loader_texture_rgbm.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { RGBMLoader } from './jsm/loaders/RGBMLoader.js';
 

examples/webgl_loader_vrml.html

@@ -20,7 +20,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { VRMLLoader } from './jsm/loaders/VRMLLoader.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats, controls, loader;
 
@@ -94,7 +94,7 @@
 
 				//
 
-				const gui = new GUI( { width: 300 } );
+				const gui = new GUI();
 				gui.add( params, 'asset', assets ).onChange( function ( value ) {
 
 					if ( vrmlScene ) {

examples/webgl_marchingcubes.html

@@ -21,7 +21,7 @@
 
 		import Stats from './jsm/libs/stats.module.js';
 
-		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { GUI } from './jsm/libs/lil-gui.module.min.js';
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 		import { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted } from './jsm/shaders/ToonShader.js';

examples/webgl_materials_channels.html

@@ -19,7 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 

examples/webgl_materials_curvature.html

@@ -46,7 +46,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
@@ -323,13 +323,11 @@
 					}
 				};
 
-				const gui = new GUI();
+				const gui = new GUI( { title: 'Topology' } );
 
-				const topologyFolder = gui.addFolder( 'Topology' );
-				topologyFolder.add( params, 'filterConvex' );
-				topologyFolder.add( params, 'filterConcave' );
-				topologyFolder.add( params, 'filterBoth' );
-				topologyFolder.open();
+				gui.add( params, 'filterConvex' );
+				gui.add( params, 'filterConcave' );
+				gui.add( params, 'filterBoth' );
 
 				onWindowResize();
 

examples/webgl_materials_displacementmap.html

@@ -20,7 +20,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			let stats;

examples/webgl_materials_envmaps.html

@@ -18,7 +18,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			let controls, camera, scene, renderer;

examples/webgl_materials_envmaps_exr.html

@@ -17,7 +17,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 

examples/webgl_materials_envmaps_hdr.html

@@ -20,7 +20,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 			import { RGBMLoader } from './jsm/loaders/RGBMLoader.js';

examples/webgl_materials_envmaps_hdr_nodes.html

@@ -20,7 +20,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 			import { RGBMLoader } from './jsm/loaders/RGBMLoader.js';

examples/webgl_materials_envmaps_pmrem_nodes.html

@@ -37,7 +37,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 

examples/webgl_materials_matcap.html

@@ -17,7 +17,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';

examples/webgl_materials_nodes.html

@@ -18,7 +18,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';

examples/webgl_materials_physical_reflectivity.html

@@ -20,7 +20,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';

examples/webgl_materials_physical_transmission.html

@@ -15,7 +15,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 

examples/webgl_materials_standard.html

@@ -19,7 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';

examples/webgl_materials_standard_nodes.html

@@ -26,7 +26,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';

examples/webgl_materials_subsurface_scattering.html

@@ -19,7 +19,7 @@
 
 		import Stats from './jsm/libs/stats.module.js';
 
-		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { GUI } from './jsm/libs/lil-gui.module.min.js';
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { SubsurfaceScatteringShader } from './jsm/shaders/SubsurfaceScatteringShader.js';
 		import { FBXLoader } from './jsm/loaders/FBXLoader.js';
@@ -134,7 +134,7 @@
 
 		function initGUI( uniforms ) {
 
-			const gui = new GUI();
+			const gui = new GUI( { title: 'Thickness Control' } );
 
 			const ThicknessControls = function () {
 
@@ -147,40 +147,38 @@
 			};
 
 			const thicknessControls = new ThicknessControls();
-			const thicknessFolder = gui.addFolder( 'Thickness Control' );
 
-			thicknessFolder.add( thicknessControls, 'distortion' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {
+			gui.add( thicknessControls, 'distortion' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {
 
 				uniforms[ 'thicknessDistortion' ].value = thicknessControls.distortion;
+				console.log('distortion')
 
 			} );
 
-			thicknessFolder.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
+			gui.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
 
 				uniforms[ 'thicknessAmbient' ].value = thicknessControls.ambient;
 
 			} );
 
-			thicknessFolder.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
+			gui.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {
 
 				uniforms[ 'thicknessAttenuation' ].value = thicknessControls.attenuation;
 
 			} );
 
-			thicknessFolder.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {
+			gui.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {
 
 				uniforms[ 'thicknessPower' ].value = thicknessControls.power;
 
 			} );
 
-			thicknessFolder.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {
+			gui.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {
 
 				uniforms[ 'thicknessScale' ].value = thicknessControls.scale;
 
 			} );
 
-			thicknessFolder.open();
-
 		}
 
 		function onWindowResize() {

examples/webgl_materials_texture_rotation.html

@@ -16,7 +16,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			let mesh, renderer, scene, camera;

examples/webgl_materials_wireframe.html

@@ -53,7 +53,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			const API = {
 				thickness: 1

examples/webgl_mirror_nodes.html

@@ -23,7 +23,7 @@
 		<script type="module">
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
 

examples/webgl_modifier_edgesplit.html

@@ -17,7 +17,7 @@
 			import { EdgeSplitModifier } from './jsm/modifiers/EdgeSplitModifier.js';
 			import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let renderer, scene, camera;
 			let modifier, mesh, baseGeometry;

examples/webgl_morphtargets.html

@@ -18,7 +18,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			let container, camera, scene, renderer, mesh;
@@ -127,22 +127,19 @@
 					Spherify: 0,
 					Twist: 0,
 				};
-				const gui = new GUI();
-				const folder = gui.addFolder( 'Morph Targets' );
+				const gui = new GUI( { title: 'Morph Targets' } );
 
-				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 0 ] = value;
 
 				} );
-				folder.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 1 ] = value;
 
 				} );
 
-				folder.open();
-
 			}
 
 			function onWindowResize() {

examples/webgl_morphtargets_face.html

@@ -32,7 +32,7 @@
 
 			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			init();
 

examples/webgl_points_billboards.html

@@ -18,7 +18,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats, material;
 			let mouseX = 0, mouseY = 0;

examples/webgl_points_nodes.html

@@ -25,7 +25,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';
 

examples/webgl_points_sprites.html

@@ -19,7 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats, parameters;
 			let mouseX = 0, mouseY = 0;

examples/webgl_postprocessing_3dlut.html

@@ -28,7 +28,7 @@
 			import { LUTPass } from './jsm/postprocessing/LUTPass.js';
 			import { LUTCubeLoader } from './jsm/loaders/LUTCubeLoader.js';
 			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			const params = {
 				enabled: true,

examples/webgl_postprocessing_afterimage.html

@@ -12,7 +12,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';

examples/webgl_postprocessing_backgrounds.html

@@ -20,7 +20,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { TexturePass } from './jsm/postprocessing/TexturePass.js';

examples/webgl_postprocessing_crossfade.html

@@ -20,7 +20,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { TWEEN } from './jsm/libs/tween.module.min.js';
 
 			let container, stats;

examples/webgl_postprocessing_dof.html

@@ -18,7 +18,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';

examples/webgl_postprocessing_dof2.html

@@ -17,7 +17,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { BokehShader, BokehDepthShader } from './jsm/shaders/BokehShader2.js';
 

examples/webgl_postprocessing_nodes.html

@@ -15,7 +15,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import * as Nodes from './jsm/nodes/Nodes.js';
 
 			let camera, scene, renderer;

examples/webgl_postprocessing_nodes_pass.html

@@ -15,7 +15,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { NodePass } from './jsm/nodes/postprocessing/NodePass.js';

examples/webgl_postprocessing_outline.html

@@ -16,7 +16,7 @@
 			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
@@ -49,7 +49,7 @@
 
 			// Init gui
 
-			const gui = new GUI( { width: 300 } );
+			const gui = new GUI( { width: 280 } );
 
 			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
 

examples/webgl_postprocessing_pixel.html

@@ -18,7 +18,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';