diff --git a/docs/scenes/bones-browser.html b/docs/scenes/bones-browser.html
index 969944596669e5..4ced6c66e4b899 100644
--- a/docs/scenes/bones-browser.html
+++ b/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" );
 
 				}
 
diff --git a/docs/scenes/geometry-browser.html b/docs/scenes/geometry-browser.html
index 3b545f7bb64e0c..8f9ba69eeb1d9f 100644
--- a/docs/scenes/geometry-browser.html
+++ b/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;
diff --git a/docs/scenes/material-browser.html b/docs/scenes/material-browser.html
index 6d86fd36ee7a9a..5816d92375b4a5 100644
--- a/docs/scenes/material-browser.html
+++ b/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 );
diff --git a/examples/js/libs/dat.gui.min.js b/examples/js/libs/dat.gui.min.js
deleted file mode 100644
index 5b69be5aae03ed..00000000000000
--- a/examples/js/libs/dat.gui.min.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * dat-gui JavaScript Controller Library
- * https://github.com/dataarts/dat.gui
- *
- * Copyright 2016 Data Arts Team, Google Creative Lab
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.dat=t():e.dat=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var i=n(1),r=o(i);e.exports=r["default"]},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(2),r=o(i),a=n(6),l=o(a),s=n(3),u=o(s),d=n(7),c=o(d),f=n(8),_=o(f),p=n(10),h=o(p),m=n(11),b=o(m),g=n(12),v=o(g),y=n(13),w=o(y),x=n(14),E=o(x),C=n(15),A=o(C),S=n(16),k=o(S),O=n(9),T=o(O),R=n(17),L=o(R);t["default"]={color:{Color:r["default"],math:l["default"],interpret:u["default"]},controllers:{Controller:c["default"],BooleanController:_["default"],OptionController:h["default"],StringController:b["default"],NumberController:v["default"],NumberControllerBox:w["default"],NumberControllerSlider:E["default"],FunctionController:A["default"],ColorController:k["default"]},dom:{dom:T["default"]},gui:{GUI:L["default"]},GUI:L["default"]}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t,n){Object.defineProperty(e,t,{get:function(){return"RGB"===this.__state.space?this.__state[t]:(h.recalculateRGB(this,t,n),this.__state[t])},set:function(e){"RGB"!==this.__state.space&&(h.recalculateRGB(this,t,n),this.__state.space="RGB"),this.__state[t]=e}})}function a(e,t){Object.defineProperty(e,t,{get:function(){return"HSV"===this.__state.space?this.__state[t]:(h.recalculateHSV(this),this.__state[t])},set:function(e){"HSV"!==this.__state.space&&(h.recalculateHSV(this),this.__state.space="HSV"),this.__state[t]=e}})}t.__esModule=!0;var l=n(3),s=o(l),u=n(6),d=o(u),c=n(4),f=o(c),_=n(5),p=o(_),h=function(){function e(){if(i(this,e),this.__state=s["default"].apply(this,arguments),this.__state===!1)throw new Error("Failed to interpret color arguments");this.__state.a=this.__state.a||1}return e.prototype.toString=function(){return(0,f["default"])(this)},e.prototype.toHexString=function(){return(0,f["default"])(this,!0)},e.prototype.toOriginal=function(){return this.__state.conversion.write(this)},e}();h.recalculateRGB=function(e,t,n){if("HEX"===e.__state.space)e.__state[t]=d["default"].component_from_hex(e.__state.hex,n);else{if("HSV"!==e.__state.space)throw new Error("Corrupted color state");p["default"].extend(e.__state,d["default"].hsv_to_rgb(e.__state.h,e.__state.s,e.__state.v))}},h.recalculateHSV=function(e){var t=d["default"].rgb_to_hsv(e.r,e.g,e.b);p["default"].extend(e.__state,{s:t.s,v:t.v}),p["default"].isNaN(t.h)?p["default"].isUndefined(e.__state.h)&&(e.__state.h=0):e.__state.h=t.h},h.COMPONENTS=["r","g","b","h","s","v","hex","a"],r(h.prototype,"r",2),r(h.prototype,"g",1),r(h.prototype,"b",0),a(h.prototype,"h"),a(h.prototype,"s"),a(h.prototype,"v"),Object.defineProperty(h.prototype,"a",{get:function(){return this.__state.a},set:function(e){this.__state.a=e}}),Object.defineProperty(h.prototype,"hex",{get:function(){return"HEX"!==!this.__state.space&&(this.__state.hex=d["default"].rgb_to_hex(this.r,this.g,this.b)),this.__state.hex},set:function(e){this.__state.space="HEX",this.__state.hex=e}}),t["default"]=h},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(4),r=o(i),a=n(5),l=o(a),s=[{litmus:l["default"].isString,conversions:{THREE_CHAR_HEX:{read:function(e){var t=e.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return null!==t&&{space:"HEX",hex:parseInt("0x"+t[1].toString()+t[1].toString()+t[2].toString()+t[2].toString()+t[3].toString()+t[3].toString(),0)}},write:r["default"]},SIX_CHAR_HEX:{read:function(e){var t=e.match(/^#([A-F0-9]{6})$/i);return null!==t&&{space:"HEX",hex:parseInt("0x"+t[1].toString(),0)}},write:r["default"]},CSS_RGB:{read:function(e){var t=e.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);return null!==t&&{space:"RGB",r:parseFloat(t[1]),g:parseFloat(t[2]),b:parseFloat(t[3])}},write:r["default"]},CSS_RGBA:{read:function(e){var t=e.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);return null!==t&&{space:"RGB",r:parseFloat(t[1]),g:parseFloat(t[2]),b:parseFloat(t[3]),a:parseFloat(t[4])}},write:r["default"]}}},{litmus:l["default"].isNumber,conversions:{HEX:{read:function(e){return{space:"HEX",hex:e,conversionName:"HEX"}},write:function(e){return e.hex}}}},{litmus:l["default"].isArray,conversions:{RGB_ARRAY:{read:function(e){return 3===e.length&&{space:"RGB",r:e[0],g:e[1],b:e[2]}},write:function(e){return[e.r,e.g,e.b]}},RGBA_ARRAY:{read:function(e){return 4===e.length&&{space:"RGB",r:e[0],g:e[1],b:e[2],a:e[3]}},write:function(e){return[e.r,e.g,e.b,e.a]}}}},{litmus:l["default"].isObject,conversions:{RGBA_OBJ:{read:function(e){return!!(l["default"].isNumber(e.r)&&l["default"].isNumber(e.g)&&l["default"].isNumber(e.b)&&l["default"].isNumber(e.a))&&{space:"RGB",r:e.r,g:e.g,b:e.b,a:e.a}},write:function(e){return{r:e.r,g:e.g,b:e.b,a:e.a}}},RGB_OBJ:{read:function(e){return!!(l["default"].isNumber(e.r)&&l["default"].isNumber(e.g)&&l["default"].isNumber(e.b))&&{space:"RGB",r:e.r,g:e.g,b:e.b}},write:function(e){return{r:e.r,g:e.g,b:e.b}}},HSVA_OBJ:{read:function(e){return!!(l["default"].isNumber(e.h)&&l["default"].isNumber(e.s)&&l["default"].isNumber(e.v)&&l["default"].isNumber(e.a))&&{space:"HSV",h:e.h,s:e.s,v:e.v,a:e.a}},write:function(e){return{h:e.h,s:e.s,v:e.v,a:e.a}}},HSV_OBJ:{read:function(e){return!!(l["default"].isNumber(e.h)&&l["default"].isNumber(e.s)&&l["default"].isNumber(e.v))&&{space:"HSV",h:e.h,s:e.s,v:e.v}},write:function(e){return{h:e.h,s:e.s,v:e.v}}}}}],u=void 0,d=void 0,c=function(){d=!1;var e=arguments.length>1?l["default"].toArray(arguments):arguments[0];return l["default"].each(s,function(t){if(t.litmus(e))return l["default"].each(t.conversions,function(t,n){if(u=t.read(e),d===!1&&u!==!1)return d=u,u.conversionName=n,u.conversion=t,l["default"].BREAK}),l["default"].BREAK}),d};t["default"]=c},function(e,t){"use strict";t.__esModule=!0,t["default"]=function(e,t){var n=e.__state.conversionName.toString(),o=Math.round(e.r),i=Math.round(e.g),r=Math.round(e.b),a=e.a,l=Math.round(e.h),s=e.s.toFixed(1),u=e.v.toFixed(1);if(t||"THREE_CHAR_HEX"===n||"SIX_CHAR_HEX"===n){for(var d=e.hex.toString(16);d.length<6;)d="0"+d;return"#"+d}return"CSS_RGB"===n?"rgb("+o+","+i+","+r+")":"CSS_RGBA"===n?"rgba("+o+","+i+","+r+","+a+")":"HEX"===n?"0x"+e.hex.toString(16):"RGB_ARRAY"===n?"["+o+","+i+","+r+"]":"RGBA_ARRAY"===n?"["+o+","+i+","+r+","+a+"]":"RGB_OBJ"===n?"{r:"+o+",g:"+i+",b:"+r+"}":"RGBA_OBJ"===n?"{r:"+o+",g:"+i+",b:"+r+",a:"+a+"}":"HSV_OBJ"===n?"{h:"+l+",s:"+s+",v:"+u+"}":"HSVA_OBJ"===n?"{h:"+l+",s:"+s+",v:"+u+",a:"+a+"}":"unknown format"}},function(e,t){"use strict";t.__esModule=!0;var n=Array.prototype.forEach,o=Array.prototype.slice,i={BREAK:{},extend:function(e){return this.each(o.call(arguments,1),function(t){var n=this.isObject(t)?Object.keys(t):[];n.forEach(function(n){this.isUndefined(t[n])||(e[n]=t[n])}.bind(this))},this),e},defaults:function(e){return this.each(o.call(arguments,1),function(t){var n=this.isObject(t)?Object.keys(t):[];n.forEach(function(n){this.isUndefined(e[n])&&(e[n]=t[n])}.bind(this))},this),e},compose:function(){var e=o.call(arguments);return function(){for(var t=o.call(arguments),n=e.length-1;n>=0;n--)t=[e[n].apply(this,t)];return t[0]}},each:function(e,t,o){if(e)if(n&&e.forEach&&e.forEach===n)e.forEach(t,o);else if(e.length===e.length+0){var i=void 0,r=void 0;for(i=0,r=e.length;i<r;i++)if(i in e&&t.call(o,e[i],i)===this.BREAK)return}else for(var a in e)if(t.call(o,e[a],a)===this.BREAK)return},defer:function(e){setTimeout(e,0)},debounce:function(e,t){var n=void 0;return function(){function o(){n=null}var i=this,r=arguments,a=!n;clearTimeout(n),n=setTimeout(o,t),a&&e.apply(i,r)}},toArray:function(e){return e.toArray?e.toArray():o.call(e)},isUndefined:function(e){return void 0===e},isNull:function(e){return null===e},isNaN:function(e){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}(function(e){return isNaN(e)}),isArray:Array.isArray||function(e){return e.constructor===Array},isObject:function(e){return e===Object(e)},isNumber:function(e){return e===e+0},isString:function(e){return e===e+""},isBoolean:function(e){return e===!1||e===!0},isFunction:function(e){return"[object Function]"===Object.prototype.toString.call(e)}};t["default"]=i},function(e,t){"use strict";t.__esModule=!0;var n=void 0,o={hsv_to_rgb:function(e,t,n){var o=Math.floor(e/60)%6,i=e/60-Math.floor(e/60),r=n*(1-t),a=n*(1-i*t),l=n*(1-(1-i)*t),s=[[n,l,r],[a,n,r],[r,n,l],[r,a,n],[l,r,n],[n,r,a]][o];return{r:255*s[0],g:255*s[1],b:255*s[2]}},rgb_to_hsv:function(e,t,n){var o=Math.min(e,t,n),i=Math.max(e,t,n),r=i-o,a=void 0,l=void 0;return 0===i?{h:NaN,s:0,v:0}:(l=r/i,a=e===i?(t-n)/r:t===i?2+(n-e)/r:4+(e-t)/r,a/=6,a<0&&(a+=1),{h:360*a,s:l,v:i/255})},rgb_to_hex:function(e,t,n){var o=this.hex_with_component(0,2,e);return o=this.hex_with_component(o,1,t),o=this.hex_with_component(o,0,n)},component_from_hex:function(e,t){return e>>8*t&255},hex_with_component:function(e,t,o){return o<<(n=8*t)|e&~(255<<n)}};t["default"]=o},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=function(){function e(t,o){n(this,e),this.initialValue=t[o],this.domElement=document.createElement("div"),this.object=t,this.property=o,this.__onChange=void 0,this.__onFinishChange=void 0}return e.prototype.onChange=function(e){return this.__onChange=e,this},e.prototype.onFinishChange=function(e){return this.__onFinishChange=e,this},e.prototype.setValue=function(e){return this.object[this.property]=e,this.__onChange&&this.__onChange.call(this,e),this.updateDisplay(),this},e.prototype.getValue=function(){return this.object[this.property]},e.prototype.updateDisplay=function(){return this},e.prototype.isModified=function(){return this.initialValue!==this.getValue()},e}();t["default"]=o},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o){function a(){s.setValue(!s.__prev)}i(this,t);var l=r(this,e.call(this,n,o)),s=l;return l.__prev=l.getValue(),l.__checkbox=document.createElement("input"),l.__checkbox.setAttribute("type","checkbox"),d["default"].bind(l.__checkbox,"change",a,!1),l.domElement.appendChild(l.__checkbox),l.updateDisplay(),l}return a(t,e),t.prototype.setValue=function(t){var n=e.prototype.setValue.call(this,t);return this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue()),this.__prev=this.getValue(),n},t.prototype.updateDisplay=function(){return this.getValue()===!0?(this.__checkbox.setAttribute("checked","checked"),this.__checkbox.checked=!0):this.__checkbox.checked=!1,e.prototype.updateDisplay.call(this)},t}(s["default"]);t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e){if("0"===e||a["default"].isUndefined(e))return 0;var t=e.match(u);return a["default"].isNull(t)?0:parseFloat(t[1])}t.__esModule=!0;var r=n(5),a=o(r),l={HTMLEvents:["change"],MouseEvents:["click","mousemove","mousedown","mouseup","mouseover"],KeyboardEvents:["keydown"]},s={};a["default"].each(l,function(e,t){a["default"].each(e,function(e){s[e]=t})});var u=/(\d+(\.\d+)?)px/,d={makeSelectable:function(e,t){void 0!==e&&void 0!==e.style&&(e.onselectstart=t?function(){return!1}:function(){},e.style.MozUserSelect=t?"auto":"none",e.style.KhtmlUserSelect=t?"auto":"none",e.unselectable=t?"on":"off")},makeFullscreen:function(e,t,n){var o=n,i=t;a["default"].isUndefined(i)&&(i=!0),a["default"].isUndefined(o)&&(o=!0),e.style.position="absolute",i&&(e.style.left=0,e.style.right=0),o&&(e.style.top=0,e.style.bottom=0)},fakeEvent:function(e,t,n,o){var i=n||{},r=s[t];if(!r)throw new Error("Event type "+t+" not supported.");var l=document.createEvent(r);switch(r){case"MouseEvents":var u=i.x||i.clientX||0,d=i.y||i.clientY||0;l.initMouseEvent(t,i.bubbles||!1,i.cancelable||!0,window,i.clickCount||1,0,0,u,d,!1,!1,!1,!1,0,null);break;case"KeyboardEvents":var c=l.initKeyboardEvent||l.initKeyEvent;a["default"].defaults(i,{cancelable:!0,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,keyCode:void 0,charCode:void 0}),c(t,i.bubbles||!1,i.cancelable,window,i.ctrlKey,i.altKey,i.shiftKey,i.metaKey,i.keyCode,i.charCode);break;default:l.initEvent(t,i.bubbles||!1,i.cancelable||!0)}a["default"].defaults(l,o),e.dispatchEvent(l)},bind:function(e,t,n,o){var i=o||!1;return e.addEventListener?e.addEventListener(t,n,i):e.attachEvent&&e.attachEvent("on"+t,n),d},unbind:function(e,t,n,o){var i=o||!1;return e.removeEventListener?e.removeEventListener(t,n,i):e.detachEvent&&e.detachEvent("on"+t,n),d},addClass:function(e,t){if(void 0===e.className)e.className=t;else if(e.className!==t){var n=e.className.split(/ +/);n.indexOf(t)===-1&&(n.push(t),e.className=n.join(" ").replace(/^\s+/,"").replace(/\s+$/,""))}return d},removeClass:function(e,t){if(t)if(e.className===t)e.removeAttribute("class");else{var n=e.className.split(/ +/),o=n.indexOf(t);o!==-1&&(n.splice(o,1),e.className=n.join(" "))}else e.className=void 0;return d},hasClass:function(e,t){return new RegExp("(?:^|\\s+)"+t+"(?:\\s+|$)").test(e.className)||!1},getWidth:function(e){var t=getComputedStyle(e);return i(t["border-left-width"])+i(t["border-right-width"])+i(t["padding-left"])+i(t["padding-right"])+i(t.width)},getHeight:function(e){var t=getComputedStyle(e);return i(t["border-top-width"])+i(t["border-bottom-width"])+i(t["padding-top"])+i(t["padding-bottom"])+i(t.height)},getOffset:function(e){var t=e,n={left:0,top:0};if(t.offsetParent)do n.left+=t.offsetLeft,n.top+=t.offsetTop,t=t.offsetParent;while(t);return n},isActive:function(e){return e===document.activeElement&&(e.type||e.href)}};t["default"]=d},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=n(5),f=o(c),_=function(e){function t(n,o,a){i(this,t);var l=r(this,e.call(this,n,o)),s=a,u=l;return l.__select=document.createElement("select"),f["default"].isArray(s)&&!function(){var e={};f["default"].each(s,function(t){e[t]=t}),s=e}(),f["default"].each(s,function(e,t){var n=document.createElement("option");n.innerHTML=t,n.setAttribute("value",e),u.__select.appendChild(n)}),l.updateDisplay(),d["default"].bind(l.__select,"change",function(){var e=this.options[this.selectedIndex].value;u.setValue(e)}),l.domElement.appendChild(l.__select),l}return a(t,e),t.prototype.setValue=function(t){var n=e.prototype.setValue.call(this,t);return this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue()),n},t.prototype.updateDisplay=function(){return d["default"].isActive(this.__select)?this:(this.__select.value=this.getValue(),e.prototype.updateDisplay.call(this))},t}(s["default"]);t["default"]=_},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o){function a(){u.setValue(u.__input.value)}function l(){u.__onFinishChange&&u.__onFinishChange.call(u,u.getValue())}i(this,t);var s=r(this,e.call(this,n,o)),u=s;return s.__input=document.createElement("input"),s.__input.setAttribute("type","text"),d["default"].bind(s.__input,"keyup",a),d["default"].bind(s.__input,"change",a),d["default"].bind(s.__input,"blur",l),d["default"].bind(s.__input,"keydown",function(e){13===e.keyCode&&this.blur()}),s.updateDisplay(),s.domElement.appendChild(s.__input),s}return a(t,e),t.prototype.updateDisplay=function(){return d["default"].isActive(this.__input)||(this.__input.value=this.getValue()),e.prototype.updateDisplay.call(this)},t}(s["default"]);t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e){var t=e.toString();return t.indexOf(".")>-1?t.length-t.indexOf(".")-1:0}t.__esModule=!0;var s=n(7),u=o(s),d=n(5),c=o(d),f=function(e){function t(n,o,a){i(this,t);var s=r(this,e.call(this,n,o)),u=a||{};return s.__min=u.min,s.__max=u.max,s.__step=u.step,c["default"].isUndefined(s.__step)?0===s.initialValue?s.__impliedStep=1:s.__impliedStep=Math.pow(10,Math.floor(Math.log(Math.abs(s.initialValue))/Math.LN10))/10:s.__impliedStep=s.__step,s.__precision=l(s.__impliedStep),s}return a(t,e),t.prototype.setValue=function(t){var n=t;return void 0!==this.__min&&n<this.__min?n=this.__min:void 0!==this.__max&&n>this.__max&&(n=this.__max),void 0!==this.__step&&n%this.__step!==0&&(n=Math.round(n/this.__step)*this.__step),e.prototype.setValue.call(this,n)},t.prototype.min=function(e){return this.__min=e,this},t.prototype.max=function(e){return this.__max=e,this},t.prototype.step=function(e){return this.__step=e,this.__impliedStep=e,this.__precision=l(e),this},t}(u["default"]);t["default"]=f},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n=Math.pow(10,t);return Math.round(e*n)/n}t.__esModule=!0;var s=n(12),u=o(s),d=n(9),c=o(d),f=n(5),_=o(f),p=function(e){function t(n,o,a){function l(){var e=parseFloat(m.__input.value);_["default"].isNaN(e)||m.setValue(e)}function s(){m.__onFinishChange&&m.__onFinishChange.call(m,m.getValue())}function u(){s()}function d(e){var t=b-e.clientY;m.setValue(m.getValue()+t*m.__impliedStep),b=e.clientY}function f(){c["default"].unbind(window,"mousemove",d),c["default"].unbind(window,"mouseup",f),s()}function p(e){c["default"].bind(window,"mousemove",d),c["default"].bind(window,"mouseup",f),b=e.clientY}i(this,t);var h=r(this,e.call(this,n,o,a));h.__truncationSuspended=!1;var m=h,b=void 0;return h.__input=document.createElement("input"),h.__input.setAttribute("type","text"),c["default"].bind(h.__input,"change",l),c["default"].bind(h.__input,"blur",u),c["default"].bind(h.__input,"mousedown",p),c["default"].bind(h.__input,"keydown",function(e){13===e.keyCode&&(m.__truncationSuspended=!0,this.blur(),m.__truncationSuspended=!1,s())}),h.updateDisplay(),h.domElement.appendChild(h.__input),h}return a(t,e),t.prototype.updateDisplay=function(){return this.__input.value=this.__truncationSuspended?this.getValue():l(this.getValue(),this.__precision),e.prototype.updateDisplay.call(this)},t}(u["default"]);t["default"]=p},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,n,o,i){return o+(i-o)*((e-t)/(n-t))}t.__esModule=!0;var s=n(12),u=o(s),d=n(9),c=o(d),f=function(e){function t(n,o,a,s,u){function d(e){document.activeElement.blur(),c["default"].bind(window,"mousemove",f),c["default"].bind(window,"mouseup",_),f(e)}function f(e){e.preventDefault();var t=h.__background.getBoundingClientRect();return h.setValue(l(e.clientX,t.left,t.right,h.__min,h.__max)),!1}function _(){c["default"].unbind(window,"mousemove",f),c["default"].unbind(window,"mouseup",_),h.__onFinishChange&&h.__onFinishChange.call(h,h.getValue())}i(this,t);var p=r(this,e.call(this,n,o,{min:a,max:s,step:u})),h=p;return p.__background=document.createElement("div"),p.__foreground=document.createElement("div"),c["default"].bind(p.__background,"mousedown",d),c["default"].addClass(p.__background,"slider"),c["default"].addClass(p.__foreground,"slider-fg"),p.updateDisplay(),p.__background.appendChild(p.__foreground),p.domElement.appendChild(p.__background),p}return a(t,e),t.prototype.updateDisplay=function(){var t=(this.getValue()-this.__min)/(this.__max-this.__min);return this.__foreground.style.width=100*t+"%",e.prototype.updateDisplay.call(this)},t}(u["default"]);t["default"]=f},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var l=n(7),s=o(l),u=n(9),d=o(u),c=function(e){function t(n,o,a){i(this,t);var l=r(this,e.call(this,n,o)),s=l;return l.__button=document.createElement("div"),l.__button.innerHTML=void 0===a?"Fire":a,d["default"].bind(l.__button,"click",function(e){return e.preventDefault(),s.fire(),!1}),d["default"].addClass(l.__button,"button"),l.domElement.appendChild(l.__button),l}return a(t,e),t.prototype.fire=function(){this.__onChange&&this.__onChange.call(this),this.getValue().call(this.object),this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue())},t}(s["default"]);t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,n,o){e.style.background="",g["default"].each(y,function(i){e.style.cssText+="background: "+i+"linear-gradient("+t+", "+n+" 0%, "+o+" 100%); "})}function s(e){e.style.background="",e.style.cssText+="background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);",e.style.cssText+="background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);",e.style.cssText+="background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"}t.__esModule=!0;var u=n(7),d=o(u),c=n(9),f=o(c),_=n(2),p=o(_),h=n(3),m=o(h),b=n(5),g=o(b),v=function(e){function t(n,o){function a(e){h(e),f["default"].bind(window,"mousemove",h),f["default"].bind(window,"mouseup",u)}function u(){f["default"].unbind(window,"mousemove",h),f["default"].unbind(window,"mouseup",u),_()}function d(){var e=(0,m["default"])(this.value);e!==!1?(y.__color.__state=e,y.setValue(y.__color.toOriginal())):this.value=y.__color.toString()}function c(){f["default"].unbind(window,"mousemove",b),f["default"].unbind(window,"mouseup",c),_()}function _(){y.__onFinishChange&&y.__onFinishChange.call(y,y.__color.toOriginal())}function h(e){e.preventDefault();var t=y.__saturation_field.getBoundingClientRect(),n=(e.clientX-t.left)/(t.right-t.left),o=1-(e.clientY-t.top)/(t.bottom-t.top);return o>1?o=1:o<0&&(o=0),n>1?n=1:n<0&&(n=0),y.__color.v=o,y.__color.s=n,y.setValue(y.__color.toOriginal()),!1}function b(e){e.preventDefault();var t=y.__hue_field.getBoundingClientRect(),n=1-(e.clientY-t.top)/(t.bottom-t.top);return n>1?n=1:n<0&&(n=0),y.__color.h=360*n,y.setValue(y.__color.toOriginal()),!1}i(this,t);var v=r(this,e.call(this,n,o));v.__color=new p["default"](v.getValue()),v.__temp=new p["default"](0);var y=v;v.domElement=document.createElement("div"),f["default"].makeSelectable(v.domElement,!1),v.__selector=document.createElement("div"),v.__selector.className="selector",v.__saturation_field=document.createElement("div"),v.__saturation_field.className="saturation-field",v.__field_knob=document.createElement("div"),v.__field_knob.className="field-knob",v.__field_knob_border="2px solid ",v.__hue_knob=document.createElement("div"),v.__hue_knob.className="hue-knob",v.__hue_field=document.createElement("div"),v.__hue_field.className="hue-field",v.__input=document.createElement("input"),v.__input.type="text",v.__input_textShadow="0 1px 1px ",f["default"].bind(v.__input,"keydown",function(e){13===e.keyCode&&d.call(this)}),f["default"].bind(v.__input,"blur",d),f["default"].bind(v.__selector,"mousedown",function(){f["default"].addClass(this,"drag").bind(window,"mouseup",function(){f["default"].removeClass(y.__selector,"drag")})});var w=document.createElement("div");return g["default"].extend(v.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"}),g["default"].extend(v.__field_knob.style,{position:"absolute",width:"12px",height:"12px",border:v.__field_knob_border+(v.__color.v<.5?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1}),g["default"].extend(v.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1}),g["default"].extend(v.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"}),g["default"].extend(w.style,{width:"100%",height:"100%",background:"none"}),l(w,"top","rgba(0,0,0,0)","#000"),g["default"].extend(v.__hue_field.style,{width:"15px",height:"100px",border:"1px solid #555",cursor:"ns-resize",position:"absolute",top:"3px",right:"3px"}),s(v.__hue_field),g["default"].extend(v.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:v.__input_textShadow+"rgba(0,0,0,0.7)"}),f["default"].bind(v.__saturation_field,"mousedown",a),f["default"].bind(v.__field_knob,"mousedown",a),f["default"].bind(v.__hue_field,"mousedown",function(e){b(e),f["default"].bind(window,"mousemove",b),f["default"].bind(window,"mouseup",c)}),v.__saturation_field.appendChild(w),v.__selector.appendChild(v.__field_knob),v.__selector.appendChild(v.__saturation_field),v.__selector.appendChild(v.__hue_field),v.__hue_field.appendChild(v.__hue_knob),v.domElement.appendChild(v.__input),v.domElement.appendChild(v.__selector),v.updateDisplay(),v}return a(t,e),t.prototype.updateDisplay=function(){var e=(0,m["default"])(this.getValue());if(e!==!1){var t=!1;g["default"].each(p["default"].COMPONENTS,function(n){if(!g["default"].isUndefined(e[n])&&!g["default"].isUndefined(this.__color.__state[n])&&e[n]!==this.__color.__state[n])return t=!0,{}},this),t&&g["default"].extend(this.__color.__state,e)}g["default"].extend(this.__temp.__state,this.__color.__state),this.__temp.a=1;var n=this.__color.v<.5||this.__color.s>.5?255:0,o=255-n;g["default"].extend(this.__field_knob.style,{marginLeft:100*this.__color.s-7+"px",marginTop:100*(1-this.__color.v)-7+"px",backgroundColor:this.__temp.toHexString(),border:this.__field_knob_border+"rgb("+n+","+n+","+n+")"}),this.__hue_knob.style.marginTop=100*(1-this.__color.h/360)+"px",this.__temp.s=1,this.__temp.v=1,l(this.__saturation_field,"left","#fff",this.__temp.toHexString()),this.__input.value=this.__color.toString(),g["default"].extend(this.__input.style,{backgroundColor:this.__color.toHexString(),color:"rgb("+n+","+n+","+n+")",textShadow:this.__input_textShadow+"rgba("+o+","+o+","+o+",.7)"})},t}(d["default"]),y=["-moz-","-o-","-webkit-","-ms-",""];t["default"]=v},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t,n){var o=document.createElement("li");return t&&o.appendChild(t),n?e.__ul.insertBefore(o,n):e.__ul.appendChild(o),e.onResize(),o}function r(e,t){var n=e.__preset_select[e.__preset_select.selectedIndex];t?n.innerHTML=n.value+"*":n.innerHTML=n.value}function a(e,t,n){if(n.__li=t,n.__gui=e,U["default"].extend(n,{options:function(t){if(arguments.length>1){var o=n.__li.nextElementSibling;return n.remove(),s(e,n.object,n.property,{before:o,factoryArgs:[U["default"].toArray(arguments)]})}if(U["default"].isArray(t)||U["default"].isObject(t)){var i=n.__li.nextElementSibling;return n.remove(),s(e,n.object,n.property,{before:i,factoryArgs:[t]})}},name:function(e){return n.__li.firstElementChild.firstElementChild.innerHTML=e,n},listen:function(){return n.__gui.listen(n),n},remove:function(){
-return n.__gui.remove(n),n}}),n instanceof B["default"])!function(){var e=new N["default"](n.object,n.property,{min:n.__min,max:n.__max,step:n.__step});U["default"].each(["updateDisplay","onChange","onFinishChange","step"],function(t){var o=n[t],i=e[t];n[t]=e[t]=function(){var t=Array.prototype.slice.call(arguments);return i.apply(e,t),o.apply(n,t)}}),z["default"].addClass(t,"has-slider"),n.domElement.insertBefore(e.domElement,n.domElement.firstElementChild)}();else if(n instanceof N["default"]){var o=function(t){if(U["default"].isNumber(n.__min)&&U["default"].isNumber(n.__max)){var o=n.__li.firstElementChild.firstElementChild.innerHTML,i=n.__gui.__listening.indexOf(n)>-1;n.remove();var r=s(e,n.object,n.property,{before:n.__li.nextElementSibling,factoryArgs:[n.__min,n.__max,n.__step]});return r.name(o),i&&r.listen(),r}return t};n.min=U["default"].compose(o,n.min),n.max=U["default"].compose(o,n.max)}else n instanceof O["default"]?(z["default"].bind(t,"click",function(){z["default"].fakeEvent(n.__checkbox,"click")}),z["default"].bind(n.__checkbox,"click",function(e){e.stopPropagation()})):n instanceof R["default"]?(z["default"].bind(t,"click",function(){z["default"].fakeEvent(n.__button,"click")}),z["default"].bind(t,"mouseover",function(){z["default"].addClass(n.__button,"hover")}),z["default"].bind(t,"mouseout",function(){z["default"].removeClass(n.__button,"hover")})):n instanceof j["default"]&&(z["default"].addClass(t,"color"),n.updateDisplay=U["default"].compose(function(e){return t.style.borderLeftColor=n.__color.toString(),e},n.updateDisplay),n.updateDisplay());n.setValue=U["default"].compose(function(t){return e.getRoot().__preset_select&&n.isModified()&&r(e.getRoot(),!0),t},n.setValue)}function l(e,t){var n=e.getRoot(),o=n.__rememberedObjects.indexOf(t.object);if(o!==-1){var i=n.__rememberedObjectIndecesToControllers[o];if(void 0===i&&(i={},n.__rememberedObjectIndecesToControllers[o]=i),i[t.property]=t,n.load&&n.load.remembered){var r=n.load.remembered,a=void 0;if(r[e.preset])a=r[e.preset];else{if(!r[Q])return;a=r[Q]}if(a[o]&&void 0!==a[o][t.property]){var l=a[o][t.property];t.initialValue=l,t.setValue(l)}}}}function s(e,t,n,o){if(void 0===t[n])throw new Error('Object "'+t+'" has no property "'+n+'"');var r=void 0;if(o.color)r=new j["default"](t,n);else{var s=[t,n].concat(o.factoryArgs);r=C["default"].apply(e,s)}o.before instanceof S["default"]&&(o.before=o.before.__li),l(e,r),z["default"].addClass(r.domElement,"c");var u=document.createElement("span");z["default"].addClass(u,"property-name"),u.innerHTML=r.property;var d=document.createElement("div");d.appendChild(u),d.appendChild(r.domElement);var c=i(e,d,o.before);return z["default"].addClass(c,oe.CLASS_CONTROLLER_ROW),r instanceof j["default"]?z["default"].addClass(c,"color"):z["default"].addClass(c,g(r.getValue())),a(e,c,r),e.__controllers.push(r),r}function u(e,t){return document.location.href+"."+t}function d(e,t,n){var o=document.createElement("option");o.innerHTML=t,o.value=t,e.__preset_select.appendChild(o),n&&(e.__preset_select.selectedIndex=e.__preset_select.length-1)}function c(e,t){t.style.display=e.useLocalStorage?"block":"none"}function f(e){var t=e.__save_row=document.createElement("li");z["default"].addClass(e.domElement,"has-save"),e.__ul.insertBefore(t,e.__ul.firstChild),z["default"].addClass(t,"save-row");var n=document.createElement("span");n.innerHTML="&nbsp;",z["default"].addClass(n,"button gears");var o=document.createElement("span");o.innerHTML="Save",z["default"].addClass(o,"button"),z["default"].addClass(o,"save");var i=document.createElement("span");i.innerHTML="New",z["default"].addClass(i,"button"),z["default"].addClass(i,"save-as");var r=document.createElement("span");r.innerHTML="Revert",z["default"].addClass(r,"button"),z["default"].addClass(r,"revert");var a=e.__preset_select=document.createElement("select");e.load&&e.load.remembered?U["default"].each(e.load.remembered,function(t,n){d(e,n,n===e.preset)}):d(e,Q,!1),z["default"].bind(a,"change",function(){for(var t=0;t<e.__preset_select.length;t++)e.__preset_select[t].innerHTML=e.__preset_select[t].value;e.preset=this.value}),t.appendChild(a),t.appendChild(n),t.appendChild(o),t.appendChild(i),t.appendChild(r),q&&!function(){var t=document.getElementById("dg-local-explain"),n=document.getElementById("dg-local-storage"),o=document.getElementById("dg-save-locally");o.style.display="block","true"===localStorage.getItem(u(e,"isLocal"))&&n.setAttribute("checked","checked"),c(e,t),z["default"].bind(n,"change",function(){e.useLocalStorage=!e.useLocalStorage,c(e,t)})}();var l=document.getElementById("dg-new-constructor");z["default"].bind(l,"keydown",function(e){!e.metaKey||67!==e.which&&67!==e.keyCode||Z.hide()}),z["default"].bind(n,"click",function(){l.innerHTML=JSON.stringify(e.getSaveObject(),void 0,2),Z.show(),l.focus(),l.select()}),z["default"].bind(o,"click",function(){e.save()}),z["default"].bind(i,"click",function(){var t=prompt("Enter a new preset name.");t&&e.saveAs(t)}),z["default"].bind(r,"click",function(){e.revert()})}function _(e){function t(t){return t.preventDefault(),e.width+=i-t.clientX,e.onResize(),i=t.clientX,!1}function n(){z["default"].removeClass(e.__closeButton,oe.CLASS_DRAG),z["default"].unbind(window,"mousemove",t),z["default"].unbind(window,"mouseup",n)}function o(o){return o.preventDefault(),i=o.clientX,z["default"].addClass(e.__closeButton,oe.CLASS_DRAG),z["default"].bind(window,"mousemove",t),z["default"].bind(window,"mouseup",n),!1}var i=void 0;e.__resize_handle=document.createElement("div"),U["default"].extend(e.__resize_handle.style,{width:"6px",marginLeft:"-3px",height:"200px",cursor:"ew-resize",position:"absolute"}),z["default"].bind(e.__resize_handle,"mousedown",o),z["default"].bind(e.__closeButton,"mousedown",o),e.domElement.insertBefore(e.__resize_handle,e.domElement.firstElementChild)}function p(e,t){e.domElement.style.width=t+"px",e.__save_row&&e.autoPlace&&(e.__save_row.style.width=t+"px"),e.__closeButton&&(e.__closeButton.style.width=t+"px")}function h(e,t){var n={};return U["default"].each(e.__rememberedObjects,function(o,i){var r={},a=e.__rememberedObjectIndecesToControllers[i];U["default"].each(a,function(e,n){r[n]=t?e.initialValue:e.getValue()}),n[i]=r}),n}function m(e){for(var t=0;t<e.__preset_select.length;t++)e.__preset_select[t].value===e.preset&&(e.__preset_select.selectedIndex=t)}function b(e){0!==e.length&&D["default"].call(window,function(){b(e)}),U["default"].each(e,function(e){e.updateDisplay()})}var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},v=n(18),y=o(v),w=n(19),x=o(w),E=n(20),C=o(E),A=n(7),S=o(A),k=n(8),O=o(k),T=n(15),R=o(T),L=n(13),N=o(L),M=n(14),B=o(M),H=n(16),j=o(H),P=n(21),D=o(P),V=n(22),F=o(V),I=n(9),z=o(I),G=n(5),U=o(G),X=n(23),K=o(X);y["default"].inject(K["default"]);var Y="dg",J=72,W=20,Q="Default",q=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}(),Z=void 0,$=!0,ee=void 0,te=!1,ne=[],oe=function ie(e){function t(){var e=n.getRoot();e.width+=1,U["default"].defer(function(){e.width-=1})}var n=this,o=e||{};this.domElement=document.createElement("div"),this.__ul=document.createElement("ul"),this.domElement.appendChild(this.__ul),z["default"].addClass(this.domElement,Y),this.__folders={},this.__controllers=[],this.__rememberedObjects=[],this.__rememberedObjectIndecesToControllers=[],this.__listening=[],o=U["default"].defaults(o,{autoPlace:!0,width:ie.DEFAULT_WIDTH}),o=U["default"].defaults(o,{resizable:o.autoPlace,hideable:o.autoPlace}),U["default"].isUndefined(o.load)?o.load={preset:Q}:o.preset&&(o.load.preset=o.preset),U["default"].isUndefined(o.parent)&&o.hideable&&ne.push(this),o.resizable=U["default"].isUndefined(o.parent)&&o.resizable,o.autoPlace&&U["default"].isUndefined(o.scrollable)&&(o.scrollable=!0);var r=q&&"true"===localStorage.getItem(u(this,"isLocal")),a=void 0;if(Object.defineProperties(this,{parent:{get:function(){return o.parent}},scrollable:{get:function(){return o.scrollable}},autoPlace:{get:function(){return o.autoPlace}},preset:{get:function(){return n.parent?n.getRoot().preset:o.load.preset},set:function(e){n.parent?n.getRoot().preset=e:o.load.preset=e,m(this),n.revert()}},width:{get:function(){return o.width},set:function(e){o.width=e,p(n,e)}},name:{get:function(){return o.name},set:function(e){o.name=e,titleRowName&&(titleRowName.innerHTML=o.name)}},closed:{get:function(){return o.closed},set:function(e){o.closed=e,o.closed?z["default"].addClass(n.__ul,ie.CLASS_CLOSED):z["default"].removeClass(n.__ul,ie.CLASS_CLOSED),this.onResize(),n.__closeButton&&(n.__closeButton.innerHTML=e?ie.TEXT_OPEN:ie.TEXT_CLOSED)}},load:{get:function(){return o.load}},useLocalStorage:{get:function(){return r},set:function(e){q&&(r=e,e?z["default"].bind(window,"unload",a):z["default"].unbind(window,"unload",a),localStorage.setItem(u(n,"isLocal"),e))}}}),U["default"].isUndefined(o.parent)){if(o.closed=!1,z["default"].addClass(this.domElement,ie.CLASS_MAIN),z["default"].makeSelectable(this.domElement,!1),q&&r){n.useLocalStorage=!0;var l=localStorage.getItem(u(this,"gui"));l&&(o.load=JSON.parse(l))}this.__closeButton=document.createElement("div"),this.__closeButton.innerHTML=ie.TEXT_CLOSED,z["default"].addClass(this.__closeButton,ie.CLASS_CLOSE_BUTTON),this.domElement.appendChild(this.__closeButton),z["default"].bind(this.__closeButton,"click",function(){n.closed=!n.closed})}else{void 0===o.closed&&(o.closed=!0);var s=document.createTextNode(o.name);z["default"].addClass(s,"controller-name");var d=i(n,s),c=function(e){return e.preventDefault(),n.closed=!n.closed,!1};z["default"].addClass(this.__ul,ie.CLASS_CLOSED),z["default"].addClass(d,"title"),z["default"].bind(d,"click",c),o.closed||(this.closed=!1)}o.autoPlace&&(U["default"].isUndefined(o.parent)&&($&&(ee=document.createElement("div"),z["default"].addClass(ee,Y),z["default"].addClass(ee,ie.CLASS_AUTO_PLACE_CONTAINER),document.body.appendChild(ee),$=!1),ee.appendChild(this.domElement),z["default"].addClass(this.domElement,ie.CLASS_AUTO_PLACE)),this.parent||p(n,o.width)),this.__resizeHandler=function(){n.onResizeDebounced()},z["default"].bind(window,"resize",this.__resizeHandler),z["default"].bind(this.__ul,"webkitTransitionEnd",this.__resizeHandler),z["default"].bind(this.__ul,"transitionend",this.__resizeHandler),z["default"].bind(this.__ul,"oTransitionEnd",this.__resizeHandler),this.onResize(),o.resizable&&_(this),a=function(){q&&"true"===localStorage.getItem(u(n,"isLocal"))&&localStorage.setItem(u(n,"gui"),JSON.stringify(n.getSaveObject()))},this.saveToLocalStorageIfPossible=a,o.parent||t()};oe.toggleHide=function(){te=!te,U["default"].each(ne,function(e){e.domElement.style.display=te?"none":""})},oe.CLASS_AUTO_PLACE="a",oe.CLASS_AUTO_PLACE_CONTAINER="ac",oe.CLASS_MAIN="main",oe.CLASS_CONTROLLER_ROW="cr",oe.CLASS_TOO_TALL="taller-than-window",oe.CLASS_CLOSED="closed",oe.CLASS_CLOSE_BUTTON="close-button",oe.CLASS_DRAG="drag",oe.DEFAULT_WIDTH=245,oe.TEXT_CLOSED="Close Controls",oe.TEXT_OPEN="Open Controls",oe._keydownHandler=function(e){"text"===document.activeElement.type||e.which!==J&&e.keyCode!==J||oe.toggleHide()},z["default"].bind(window,"keydown",oe._keydownHandler,!1),U["default"].extend(oe.prototype,{add:function(e,t){return s(this,e,t,{factoryArgs:Array.prototype.slice.call(arguments,2)})},addColor:function(e,t){return s(this,e,t,{color:!0})},remove:function(e){this.__ul.removeChild(e.__li),this.__controllers.splice(this.__controllers.indexOf(e),1);var t=this;U["default"].defer(function(){t.onResize()})},destroy:function(){this.autoPlace&&ee.removeChild(this.domElement),z["default"].unbind(window,"keydown",oe._keydownHandler,!1),z["default"].unbind(window,"resize",this.__resizeHandler),this.saveToLocalStorageIfPossible&&z["default"].unbind(window,"unload",this.saveToLocalStorageIfPossible)},addFolder:function(e){if(void 0!==this.__folders[e])throw new Error('You already have a folder in this GUI by the name "'+e+'"');var t={name:e,parent:this};t.autoPlace=this.autoPlace,this.load&&this.load.folders&&this.load.folders[e]&&(t.closed=this.load.folders[e].closed,t.load=this.load.folders[e]);var n=new oe(t);this.__folders[e]=n;var o=i(this,n.domElement);return z["default"].addClass(o,"folder"),n},open:function(){this.closed=!1},close:function(){this.closed=!0},onResize:function(){var e=this.getRoot();if(e.scrollable){var t=z["default"].getOffset(e.__ul).top,n=0;U["default"].each(e.__ul.childNodes,function(t){e.autoPlace&&t===e.__save_row||(n+=z["default"].getHeight(t))}),window.innerHeight-t-W<n?(z["default"].addClass(e.domElement,oe.CLASS_TOO_TALL),e.__ul.style.height=window.innerHeight-t-W+"px"):(z["default"].removeClass(e.domElement,oe.CLASS_TOO_TALL),e.__ul.style.height="auto")}e.__resize_handle&&U["default"].defer(function(){e.__resize_handle.style.height=e.__ul.offsetHeight+"px"}),e.__closeButton&&(e.__closeButton.style.width=e.width+"px")},onResizeDebounced:U["default"].debounce(function(){this.onResize()},200),remember:function(){if(U["default"].isUndefined(Z)&&(Z=new F["default"],Z.domElement.innerHTML=x["default"]),this.parent)throw new Error("You can only call remember on a top level GUI.");var e=this;U["default"].each(Array.prototype.slice.call(arguments),function(t){0===e.__rememberedObjects.length&&f(e),e.__rememberedObjects.indexOf(t)===-1&&e.__rememberedObjects.push(t)}),this.autoPlace&&p(this,this.width)},getRoot:function(){for(var e=this;e.parent;)e=e.parent;return e},getSaveObject:function(){var e=this.load;return e.closed=this.closed,this.__rememberedObjects.length>0&&(e.preset=this.preset,e.remembered||(e.remembered={}),e.remembered[this.preset]=h(this)),e.folders={},U["default"].each(this.__folders,function(t,n){e.folders[n]=t.getSaveObject()}),e},save:function(){this.load.remembered||(this.load.remembered={}),this.load.remembered[this.preset]=h(this),r(this,!1),this.saveToLocalStorageIfPossible()},saveAs:function(e){this.load.remembered||(this.load.remembered={},this.load.remembered[Q]=h(this,!0)),this.load.remembered[e]=h(this),this.preset=e,d(this,e,!0),this.saveToLocalStorageIfPossible()},revert:function(e){U["default"].each(this.__controllers,function(t){this.getRoot().load.remembered?l(e||this.getRoot(),t):t.setValue(t.initialValue),t.__onFinishChange&&t.__onFinishChange.call(t,t.getValue())},this),U["default"].each(this.__folders,function(e){e.revert(e)}),e||r(this.getRoot(),!1)},listen:function(e){var t=0===this.__listening.length;this.__listening.push(e),t&&b(this.__listening)},updateDisplay:function(){U["default"].each(this.__controllers,function(e){e.updateDisplay()}),U["default"].each(this.__folders,function(e){e.updateDisplay()})}}),e.exports=oe},function(e,t){"use strict";e.exports={load:function(e,t){var n=t||document,o=n.createElement("link");o.type="text/css",o.rel="stylesheet",o.href=e,n.getElementsByTagName("head")[0].appendChild(o)},inject:function(e,t){var n=t||document,o=document.createElement("style");o.type="text/css",o.innerHTML=e;var i=n.getElementsByTagName("head")[0];try{i.appendChild(o)}catch(r){}}}},function(e,t){e.exports="<div id=dg-save class=\"dg dialogue\"> Here's the new load parameter for your <code>GUI</code>'s constructor: <textarea id=dg-new-constructor></textarea> <div id=dg-save-locally> <input id=dg-local-storage type=checkbox /> Automatically save values to <code>localStorage</code> on exit. <div id=dg-local-explain>The values saved to <code>localStorage</code> will override those passed to <code>dat.GUI</code>'s constructor. This makes it easier to work incrementally, but <code>localStorage</code> is fragile, and your friends may not see the same values you do. </div> </div> </div>"},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(10),r=o(i),a=n(13),l=o(a),s=n(14),u=o(s),d=n(11),c=o(d),f=n(15),_=o(f),p=n(8),h=o(p),m=n(5),b=o(m),g=function(e,t){var n=e[t];return b["default"].isArray(arguments[2])||b["default"].isObject(arguments[2])?new r["default"](e,t,arguments[2]):b["default"].isNumber(n)?b["default"].isNumber(arguments[2])&&b["default"].isNumber(arguments[3])?b["default"].isNumber(arguments[4])?new u["default"](e,t,arguments[2],arguments[3],arguments[4]):new u["default"](e,t,arguments[2],arguments[3]):b["default"].isNumber(arguments[4])?new l["default"](e,t,{min:arguments[2],max:arguments[3],step:arguments[4]}):new l["default"](e,t,{min:arguments[2],max:arguments[3]}):b["default"].isString(n)?new c["default"](e,t):b["default"].isFunction(n)?new _["default"](e,t,""):b["default"].isBoolean(n)?new h["default"](e,t):null};t["default"]=g},function(e,t){"use strict";function n(e){setTimeout(e,1e3/60)}t.__esModule=!0,t["default"]=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var r=n(9),a=o(r),l=n(5),s=o(l),u=function(){function e(){i(this,e),this.backgroundElement=document.createElement("div"),s["default"].extend(this.backgroundElement.style,{backgroundColor:"rgba(0,0,0,0.8)",top:0,left:0,display:"none",zIndex:"1000",opacity:0,WebkitTransition:"opacity 0.2s linear",transition:"opacity 0.2s linear"}),a["default"].makeFullscreen(this.backgroundElement),this.backgroundElement.style.position="fixed",this.domElement=document.createElement("div"),s["default"].extend(this.domElement.style,{position:"fixed",display:"none",zIndex:"1001",opacity:0,WebkitTransition:"-webkit-transform 0.2s ease-out, opacity 0.2s linear",transition:"transform 0.2s ease-out, opacity 0.2s linear"}),document.body.appendChild(this.backgroundElement),document.body.appendChild(this.domElement);var t=this;a["default"].bind(this.backgroundElement,"click",function(){t.hide()})}return e.prototype.show=function(){var e=this;this.backgroundElement.style.display="block",this.domElement.style.display="block",this.domElement.style.opacity=0,this.domElement.style.webkitTransform="scale(1.1)",this.layout(),s["default"].defer(function(){e.backgroundElement.style.opacity=1,e.domElement.style.opacity=1,e.domElement.style.webkitTransform="scale(1)"})},e.prototype.hide=function t(){var e=this,t=function n(){e.domElement.style.display="none",e.backgroundElement.style.display="none",a["default"].unbind(e.domElement,"webkitTransitionEnd",n),a["default"].unbind(e.domElement,"transitionend",n),a["default"].unbind(e.domElement,"oTransitionEnd",n)};a["default"].bind(this.domElement,"webkitTransitionEnd",t),a["default"].bind(this.domElement,"transitionend",t),a["default"].bind(this.domElement,"oTransitionEnd",t),this.backgroundElement.style.opacity=0,this.domElement.style.opacity=0,this.domElement.style.webkitTransform="scale(1.1)"},e.prototype.layout=function(){this.domElement.style.left=window.innerWidth/2-a["default"].getWidth(this.domElement)/2+"px",this.domElement.style.top=window.innerHeight/2-a["default"].getHeight(this.domElement)/2+"px"},e}();t["default"]=u},function(e,t,n){t=e.exports=n(24)(),t.push([e.id,".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1!important}.dg.main .close-button.drag,.dg.main:hover .close-button{opacity:1}.dg.main .close-button{-webkit-transition:opacity .1s linear;transition:opacity .1s linear;border:0;position:absolute;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-x:hidden}.dg.a.has-save>ul{margin-top:27px}.dg.a.has-save>ul.closed{margin-top:0}.dg.a .save-row{position:fixed;top:0;z-index:1002}.dg li{-webkit-transition:height .1s ease-out;transition:height .1s ease-out}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;overflow:hidden;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid transparent}.dg li.title{cursor:pointer;margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>*{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:9px}.dg .c select{margin-top:5px}.dg .cr.boolean,.dg .cr.boolean *,.dg .cr.function,.dg .cr.function *,.dg .cr.function .property-name{cursor:pointer}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco,monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px Lucida Grande,sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid hsla(0,0%,100%,.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.color{border-left:3px solid}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2fa1d6}.dg .cr.number input[type=text]{color:#2fa1d6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.boolean:hover,.dg .cr.function:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2fa1d6;max-width:100%}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}}])});
diff --git a/examples/jsm/libs/dat.gui.module.js b/examples/jsm/libs/dat.gui.module.js
deleted file mode 100644
index 8693a3ff92aba4..00000000000000
--- a/examples/jsm/libs/dat.gui.module.js
+++ /dev/null
@@ -1,3575 +0,0 @@
-/**
- * dat-gui JavaScript Controller Library
- * http://code.google.com/p/dat-gui
- *
- * Copyright 2011 Data Arts Team, Google Creative Lab
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-
-function ___$insertStyle( css ) {
-
-	if ( ! css ) {
-
-		return;
-
-	}
-	if ( typeof window === 'undefined' ) {
-
-		return;
-
-	}
-
-	var style = document.createElement( 'style' );
-
-	style.setAttribute( 'type', 'text/css' );
-	style.innerHTML = css;
-	document.head.appendChild( style );
-
-	return css;
-
-}
-
-function colorToString( color, forceCSSHex ) {
-
-	var colorFormat = color.__state.conversionName.toString();
-	var r = Math.round( color.r );
-	var g = Math.round( color.g );
-	var b = Math.round( color.b );
-	var a = color.a;
-	var h = Math.round( color.h );
-	var s = color.s.toFixed( 1 );
-	var v = color.v.toFixed( 1 );
-	if ( forceCSSHex || colorFormat === 'THREE_CHAR_HEX' || colorFormat === 'SIX_CHAR_HEX' ) {
-
-		var str = color.hex.toString( 16 );
-		while ( str.length < 6 ) {
-
-			str = '0' + str;
-
-		}
-		return '#' + str;
-
-	} else if ( colorFormat === 'CSS_RGB' ) {
-
-		return 'rgb(' + r + ',' + g + ',' + b + ')';
-
-	} else if ( colorFormat === 'CSS_RGBA' ) {
-
-		return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
-
-	} else if ( colorFormat === 'HEX' ) {
-
-		return '0x' + color.hex.toString( 16 );
-
-	} else if ( colorFormat === 'RGB_ARRAY' ) {
-
-		return '[' + r + ',' + g + ',' + b + ']';
-
-	} else if ( colorFormat === 'RGBA_ARRAY' ) {
-
-		return '[' + r + ',' + g + ',' + b + ',' + a + ']';
-
-	} else if ( colorFormat === 'RGB_OBJ' ) {
-
-		return '{r:' + r + ',g:' + g + ',b:' + b + '}';
-
-	} else if ( colorFormat === 'RGBA_OBJ' ) {
-
-		return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';
-
-	} else if ( colorFormat === 'HSV_OBJ' ) {
-
-		return '{h:' + h + ',s:' + s + ',v:' + v + '}';
-
-	} else if ( colorFormat === 'HSVA_OBJ' ) {
-
-		return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';
-
-	}
-	return 'unknown format';
-
-}
-
-var ARR_EACH = Array.prototype.forEach;
-var ARR_SLICE = Array.prototype.slice;
-var Common = {
-	BREAK: {},
-	extend: function extend( target ) {
-
-		this.each( ARR_SLICE.call( arguments, 1 ), function ( obj ) {
-
-			var keys = this.isObject( obj ) ? Object.keys( obj ) : [];
-			keys.forEach( function ( key ) {
-
-				if ( ! this.isUndefined( obj[ key ] ) ) {
-
-					target[ key ] = obj[ key ];
-
-				}
-
-			}.bind( this ) );
-
-		}, this );
-		return target;
-
-	},
-	defaults: function defaults( target ) {
-
-		this.each( ARR_SLICE.call( arguments, 1 ), function ( obj ) {
-
-			var keys = this.isObject( obj ) ? Object.keys( obj ) : [];
-			keys.forEach( function ( key ) {
-
-				if ( this.isUndefined( target[ key ] ) ) {
-
-					target[ key ] = obj[ key ];
-
-				}
-
-			}.bind( this ) );
-
-		}, this );
-		return target;
-
-	},
-	compose: function compose() {
-
-		var toCall = ARR_SLICE.call( arguments );
-		return function () {
-
-			var args = ARR_SLICE.call( arguments );
-			for ( var i = toCall.length - 1; i >= 0; i -- ) {
-
-				args = [ toCall[ i ].apply( this, args ) ];
-
-			}
-			return args[ 0 ];
-
-		};
-
-	},
-	each: function each( obj, itr, scope ) {
-
-		if ( ! obj ) {
-
-			return;
-
-		}
-		if ( ARR_EACH && obj.forEach && obj.forEach === ARR_EACH ) {
-
-			obj.forEach( itr, scope );
-
-		} else if ( obj.length === obj.length + 0 ) {
-
-			var key = void 0;
-			var l = void 0;
-			for ( key = 0, l = obj.length; key < l; key ++ ) {
-
-				if ( key in obj && itr.call( scope, obj[ key ], key ) === this.BREAK ) {
-
-					return;
-
-				}
-
-			}
-
-		} else {
-
-			for ( var _key in obj ) {
-
-				if ( itr.call( scope, obj[ _key ], _key ) === this.BREAK ) {
-
-					return;
-
-				}
-
-			}
-
-		}
-
-	},
-	defer: function defer( fnc ) {
-
-		setTimeout( fnc, 0 );
-
-	},
-	debounce: function debounce( func, threshold, callImmediately ) {
-
-		var timeout = void 0;
-		return function () {
-
-			var obj = this;
-			var args = arguments;
-			function delayed() {
-
-				timeout = null;
-				if ( ! callImmediately ) func.apply( obj, args );
-
-			}
-			var callNow = callImmediately || ! timeout;
-			clearTimeout( timeout );
-			timeout = setTimeout( delayed, threshold );
-			if ( callNow ) {
-
-				func.apply( obj, args );
-
-			}
-
-		};
-
-	},
-	toArray: function toArray( obj ) {
-
-		if ( obj.toArray ) return obj.toArray();
-		return ARR_SLICE.call( obj );
-
-	},
-	isUndefined: function isUndefined( obj ) {
-
-		return obj === undefined;
-
-	},
-	isNull: function isNull( obj ) {
-
-		return obj === null;
-
-	},
-	isNaN: function ( _isNaN ) {
-
-		function isNaN() {
-
-			return _isNaN.apply( this, arguments );
-
-		}
-		isNaN.toString = function () {
-
-			return _isNaN.toString();
-
-		};
-		return isNaN;
-
-	}( function ( obj ) {
-
-		return isNaN( obj );
-
-	} ),
-	isArray: Array.isArray || function ( obj ) {
-
-		return obj.constructor === Array;
-
-	},
-	isObject: function isObject( obj ) {
-
-		return obj === Object( obj );
-
-	},
-	isNumber: function isNumber( obj ) {
-
-		return obj === obj + 0;
-
-	},
-	isString: function isString( obj ) {
-
-		return obj === obj + '';
-
-	},
-	isBoolean: function isBoolean( obj ) {
-
-		return obj === false || obj === true;
-
-	},
-	isFunction: function isFunction( obj ) {
-
-		return obj instanceof Function;
-
-	}
-};
-
-var INTERPRETATIONS = [
-	{
-		litmus: Common.isString,
-		conversions: {
-			THREE_CHAR_HEX: {
-				read: function read( original ) {
-
-					var test = original.match( /^#([A-F0-9])([A-F0-9])([A-F0-9])$/i );
-					if ( test === null ) {
-
-						return false;
-
-					}
-					return {
-						space: 'HEX',
-						hex: parseInt( '0x' + test[ 1 ].toString() + test[ 1 ].toString() + test[ 2 ].toString() + test[ 2 ].toString() + test[ 3 ].toString() + test[ 3 ].toString(), 0 )
-					};
-
-				},
-				write: colorToString
-			},
-			SIX_CHAR_HEX: {
-				read: function read( original ) {
-
-					var test = original.match( /^#([A-F0-9]{6})$/i );
-					if ( test === null ) {
-
-						return false;
-
-					}
-					return {
-						space: 'HEX',
-						hex: parseInt( '0x' + test[ 1 ].toString(), 0 )
-					};
-
-				},
-				write: colorToString
-			},
-			CSS_RGB: {
-				read: function read( original ) {
-
-					var test = original.match( /^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/ );
-					if ( test === null ) {
-
-						return false;
-
-					}
-					return {
-						space: 'RGB',
-						r: parseFloat( test[ 1 ] ),
-						g: parseFloat( test[ 2 ] ),
-						b: parseFloat( test[ 3 ] )
-					};
-
-				},
-				write: colorToString
-			},
-			CSS_RGBA: {
-				read: function read( original ) {
-
-					var test = original.match( /^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/ );
-					if ( test === null ) {
-
-						return false;
-
-					}
-					return {
-						space: 'RGB',
-						r: parseFloat( test[ 1 ] ),
-						g: parseFloat( test[ 2 ] ),
-						b: parseFloat( test[ 3 ] ),
-						a: parseFloat( test[ 4 ] )
-					};
-
-				},
-				write: colorToString
-			}
-		}
-	},
-	{
-		litmus: Common.isNumber,
-		conversions: {
-			HEX: {
-				read: function read( original ) {
-
-					return {
-						space: 'HEX',
-						hex: original,
-						conversionName: 'HEX'
-					};
-
-				},
-				write: function write( color ) {
-
-					return color.hex;
-
-				}
-			}
-		}
-	},
-	{
-		litmus: Common.isArray,
-		conversions: {
-			RGB_ARRAY: {
-				read: function read( original ) {
-
-					if ( original.length !== 3 ) {
-
-						return false;
-
-					}
-					return {
-						space: 'RGB',
-						r: original[ 0 ],
-						g: original[ 1 ],
-						b: original[ 2 ]
-					};
-
-				},
-				write: function write( color ) {
-
-					return [ color.r, color.g, color.b ];
-
-				}
-			},
-			RGBA_ARRAY: {
-				read: function read( original ) {
-
-					if ( original.length !== 4 ) return false;
-					return {
-						space: 'RGB',
-						r: original[ 0 ],
-						g: original[ 1 ],
-						b: original[ 2 ],
-						a: original[ 3 ]
-					};
-
-				},
-				write: function write( color ) {
-
-					return [ color.r, color.g, color.b, color.a ];
-
-				}
-			}
-		}
-	},
-	{
-		litmus: Common.isObject,
-		conversions: {
-			RGBA_OBJ: {
-				read: function read( original ) {
-
-					if ( Common.isNumber( original.r ) && Common.isNumber( original.g ) && Common.isNumber( original.b ) && Common.isNumber( original.a ) ) {
-
-						return {
-							space: 'RGB',
-							r: original.r,
-							g: original.g,
-							b: original.b,
-							a: original.a
-						};
-
-					}
-					return false;
-
-				},
-				write: function write( color ) {
-
-					return {
-						r: color.r,
-						g: color.g,
-						b: color.b,
-						a: color.a
-					};
-
-				}
-			},
-			RGB_OBJ: {
-				read: function read( original ) {
-
-					if ( Common.isNumber( original.r ) && Common.isNumber( original.g ) && Common.isNumber( original.b ) ) {
-
-						return {
-							space: 'RGB',
-							r: original.r,
-							g: original.g,
-							b: original.b
-						};
-
-					}
-					return false;
-
-				},
-				write: function write( color ) {
-
-					return {
-						r: color.r,
-						g: color.g,
-						b: color.b
-					};
-
-				}
-			},
-			HSVA_OBJ: {
-				read: function read( original ) {
-
-					if ( Common.isNumber( original.h ) && Common.isNumber( original.s ) && Common.isNumber( original.v ) && Common.isNumber( original.a ) ) {
-
-						return {
-							space: 'HSV',
-							h: original.h,
-							s: original.s,
-							v: original.v,
-							a: original.a
-						};
-
-					}
-					return false;
-
-				},
-				write: function write( color ) {
-
-					return {
-						h: color.h,
-						s: color.s,
-						v: color.v,
-						a: color.a
-					};
-
-				}
-			},
-			HSV_OBJ: {
-				read: function read( original ) {
-
-					if ( Common.isNumber( original.h ) && Common.isNumber( original.s ) && Common.isNumber( original.v ) ) {
-
-						return {
-							space: 'HSV',
-							h: original.h,
-							s: original.s,
-							v: original.v
-						};
-
-					}
-					return false;
-
-				},
-				write: function write( color ) {
-
-					return {
-						h: color.h,
-						s: color.s,
-						v: color.v
-					};
-
-				}
-			}
-		}
-	} ];
-var result = void 0;
-var toReturn = void 0;
-var interpret = function interpret() {
-
-	toReturn = false;
-	var original = arguments.length > 1 ? Common.toArray( arguments ) : arguments[ 0 ];
-	Common.each( INTERPRETATIONS, function ( family ) {
-
-		if ( family.litmus( original ) ) {
-
-			Common.each( family.conversions, function ( conversion, conversionName ) {
-
-				result = conversion.read( original );
-				if ( toReturn === false && result !== false ) {
-
-					toReturn = result;
-					result.conversionName = conversionName;
-					result.conversion = conversion;
-					return Common.BREAK;
-
-				}
-
-			} );
-			return Common.BREAK;
-
-		}
-
-	} );
-	return toReturn;
-
-};
-
-var tmpComponent = void 0;
-var ColorMath = {
-	hsv_to_rgb: function hsv_to_rgb( h, s, v ) {
-
-		var hi = Math.floor( h / 60 ) % 6;
-		var f = h / 60 - Math.floor( h / 60 );
-		var p = v * ( 1.0 - s );
-		var q = v * ( 1.0 - f * s );
-		var t = v * ( 1.0 - ( 1.0 - f ) * s );
-		var c = [[ v, t, p ], [ q, v, p ], [ p, v, t ], [ p, q, v ], [ t, p, v ], [ v, p, q ]][ hi ];
-		return {
-			r: c[ 0 ] * 255,
-			g: c[ 1 ] * 255,
-			b: c[ 2 ] * 255
-		};
-
-	},
-	rgb_to_hsv: function rgb_to_hsv( r, g, b ) {
-
-		var min = Math.min( r, g, b );
-		var max = Math.max( r, g, b );
-		var delta = max - min;
-		var h = void 0;
-		var s = void 0;
-		if ( max !== 0 ) {
-
-			s = delta / max;
-
-		} else {
-
-			return {
-				h: NaN,
-				s: 0,
-				v: 0
-			};
-
-		}
-		if ( r === max ) {
-
-			h = ( g - b ) / delta;
-
-		} else if ( g === max ) {
-
-			h = 2 + ( b - r ) / delta;
-
-		} else {
-
-			h = 4 + ( r - g ) / delta;
-
-		}
-		h /= 6;
-		if ( h < 0 ) {
-
-			h += 1;
-
-		}
-		return {
-			h: h * 360,
-			s: s,
-			v: max / 255
-		};
-
-	},
-	rgb_to_hex: function rgb_to_hex( r, g, b ) {
-
-		var hex = this.hex_with_component( 0, 2, r );
-		hex = this.hex_with_component( hex, 1, g );
-		hex = this.hex_with_component( hex, 0, b );
-		return hex;
-
-	},
-	component_from_hex: function component_from_hex( hex, componentIndex ) {
-
-		return hex >> componentIndex * 8 & 0xFF;
-
-	},
-	hex_with_component: function hex_with_component( hex, componentIndex, value ) {
-
-		return value << ( tmpComponent = componentIndex * 8 ) | hex & ~ ( 0xFF << tmpComponent );
-
-	}
-};
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function ( obj ) {
-
-	return typeof obj;
-
-} : function ( obj ) {
-
-	return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-
-};
-
-
-
-
-
-
-
-
-
-
-
-var classCallCheck = function ( instance, Constructor ) {
-
-	if ( ! ( instance instanceof Constructor ) ) {
-
-		throw new TypeError( "Cannot call a class as a function" );
-
-	}
-
-};
-
-var createClass = function () {
-
-	function defineProperties( target, props ) {
-
-		for ( var i = 0; i < props.length; i ++ ) {
-
-			var descriptor = props[ i ];
-			descriptor.enumerable = descriptor.enumerable || false;
-			descriptor.configurable = true;
-			if ( "value" in descriptor ) descriptor.writable = true;
-			Object.defineProperty( target, descriptor.key, descriptor );
-
-		}
-
-	}
-
-	return function ( Constructor, protoProps, staticProps ) {
-
-		if ( protoProps ) defineProperties( Constructor.prototype, protoProps );
-		if ( staticProps ) defineProperties( Constructor, staticProps );
-		return Constructor;
-
-	};
-
-}();
-
-
-
-
-
-
-
-var get = function get( object, property, receiver ) {
-
-	if ( object === null ) object = Function.prototype;
-	var desc = Object.getOwnPropertyDescriptor( object, property );
-
-	if ( desc === undefined ) {
-
-		var parent = Object.getPrototypeOf( object );
-
-		if ( parent === null ) {
-
-			return undefined;
-
-		} else {
-
-			return get( parent, property, receiver );
-
-		}
-
-	} else if ( "value" in desc ) {
-
-		return desc.value;
-
-	} else {
-
-		var getter = desc.get;
-
-		if ( getter === undefined ) {
-
-			return undefined;
-
-		}
-
-		return getter.call( receiver );
-
-	}
-
-};
-
-var inherits = function ( subClass, superClass ) {
-
-	if ( typeof superClass !== "function" && superClass !== null ) {
-
-		throw new TypeError( "Super expression must either be null or a function, not " + typeof superClass );
-
-	}
-
-	subClass.prototype = Object.create( superClass && superClass.prototype, {
-		constructor: {
-			value: subClass,
-			enumerable: false,
-			writable: true,
-			configurable: true
-		}
-	} );
-	if ( superClass ) Object.setPrototypeOf ? Object.setPrototypeOf( subClass, superClass ) : subClass.__proto__ = superClass;
-
-};
-
-
-
-
-
-
-
-
-
-
-
-var possibleConstructorReturn = function ( self, call ) {
-
-	if ( ! self ) {
-
-		throw new ReferenceError( "this hasn't been initialised - super() hasn't been called" );
-
-	}
-
-	return call && ( typeof call === "object" || typeof call === "function" ) ? call : self;
-
-};
-
-var Color = function () {
-
-	function Color() {
-
-		classCallCheck( this, Color );
-		this.__state = interpret.apply( this, arguments );
-		if ( this.__state === false ) {
-
-			throw new Error( 'Failed to interpret color arguments' );
-
-		}
-		this.__state.a = this.__state.a || 1;
-
-	}
-	createClass( Color, [ {
-		key: 'toString',
-		value: function toString() {
-
-			return colorToString( this );
-
-		}
-	}, {
-		key: 'toHexString',
-		value: function toHexString() {
-
-			return colorToString( this, true );
-
-		}
-	}, {
-		key: 'toOriginal',
-		value: function toOriginal() {
-
-			return this.__state.conversion.write( this );
-
-		}
-	} ] );
-	return Color;
-
-}();
-function defineRGBComponent( target, component, componentHexIndex ) {
-
-	Object.defineProperty( target, component, {
-		get: function get$$1() {
-
-			if ( this.__state.space === 'RGB' ) {
-
-				return this.__state[ component ];
-
-			}
-			Color.recalculateRGB( this, component, componentHexIndex );
-			return this.__state[ component ];
-
-		},
-		set: function set$$1( v ) {
-
-			if ( this.__state.space !== 'RGB' ) {
-
-				Color.recalculateRGB( this, component, componentHexIndex );
-				this.__state.space = 'RGB';
-
-			}
-			this.__state[ component ] = v;
-
-		}
-	} );
-
-}
-function defineHSVComponent( target, component ) {
-
-	Object.defineProperty( target, component, {
-		get: function get$$1() {
-
-			if ( this.__state.space === 'HSV' ) {
-
-				return this.__state[ component ];
-
-			}
-			Color.recalculateHSV( this );
-			return this.__state[ component ];
-
-		},
-		set: function set$$1( v ) {
-
-			if ( this.__state.space !== 'HSV' ) {
-
-				Color.recalculateHSV( this );
-				this.__state.space = 'HSV';
-
-			}
-			this.__state[ component ] = v;
-
-		}
-	} );
-
-}
-Color.recalculateRGB = function ( color, component, componentHexIndex ) {
-
-	if ( color.__state.space === 'HEX' ) {
-
-		color.__state[ component ] = ColorMath.component_from_hex( color.__state.hex, componentHexIndex );
-
-	} else if ( color.__state.space === 'HSV' ) {
-
-		Common.extend( color.__state, ColorMath.hsv_to_rgb( color.__state.h, color.__state.s, color.__state.v ) );
-
-	} else {
-
-		throw new Error( 'Corrupted color state' );
-
-	}
-
-};
-Color.recalculateHSV = function ( color ) {
-
-	var result = ColorMath.rgb_to_hsv( color.r, color.g, color.b );
-	Common.extend( color.__state, {
-		s: result.s,
-		v: result.v
-	} );
-	if ( ! Common.isNaN( result.h ) ) {
-
-		color.__state.h = result.h;
-
-	} else if ( Common.isUndefined( color.__state.h ) ) {
-
-		color.__state.h = 0;
-
-	}
-
-};
-Color.COMPONENTS = [ 'r', 'g', 'b', 'h', 's', 'v', 'hex', 'a' ];
-defineRGBComponent( Color.prototype, 'r', 2 );
-defineRGBComponent( Color.prototype, 'g', 1 );
-defineRGBComponent( Color.prototype, 'b', 0 );
-defineHSVComponent( Color.prototype, 'h' );
-defineHSVComponent( Color.prototype, 's' );
-defineHSVComponent( Color.prototype, 'v' );
-Object.defineProperty( Color.prototype, 'a', {
-	get: function get$$1() {
-
-		return this.__state.a;
-
-	},
-	set: function set$$1( v ) {
-
-		this.__state.a = v;
-
-	}
-} );
-Object.defineProperty( Color.prototype, 'hex', {
-	get: function get$$1() {
-
-		if ( this.__state.space !== 'HEX' ) {
-
-			this.__state.hex = ColorMath.rgb_to_hex( this.r, this.g, this.b );
-			this.__state.space = 'HEX';
-
-		}
-		return this.__state.hex;
-
-	},
-	set: function set$$1( v ) {
-
-		this.__state.space = 'HEX';
-		this.__state.hex = v;
-
-	}
-} );
-
-var Controller = function () {
-
-	function Controller( object, property ) {
-
-		classCallCheck( this, Controller );
-		this.initialValue = object[ property ];
-		this.domElement = document.createElement( 'div' );
-		this.object = object;
-		this.property = property;
-		this.__onChange = undefined;
-		this.__onFinishChange = undefined;
-
-	}
-	createClass( Controller, [ {
-		key: 'onChange',
-		value: function onChange( fnc ) {
-
-			this.__onChange = fnc;
-			return this;
-
-		}
-	}, {
-		key: 'onFinishChange',
-		value: function onFinishChange( fnc ) {
-
-			this.__onFinishChange = fnc;
-			return this;
-
-		}
-	}, {
-		key: 'setValue',
-		value: function setValue( newValue ) {
-
-			this.object[ this.property ] = newValue;
-			if ( this.__onChange ) {
-
-				this.__onChange.call( this, newValue );
-
-			}
-			this.updateDisplay();
-			return this;
-
-		}
-	}, {
-		key: 'getValue',
-		value: function getValue() {
-
-			return this.object[ this.property ];
-
-		}
-	}, {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			return this;
-
-		}
-	}, {
-		key: 'isModified',
-		value: function isModified() {
-
-			return this.initialValue !== this.getValue();
-
-		}
-	} ] );
-	return Controller;
-
-}();
-
-var EVENT_MAP = {
-	HTMLEvents: [ 'change' ],
-	MouseEvents: [ 'click', 'mousemove', 'mousedown', 'mouseup', 'mouseover' ],
-	KeyboardEvents: [ 'keydown' ]
-};
-var EVENT_MAP_INV = {};
-Common.each( EVENT_MAP, function ( v, k ) {
-
-	Common.each( v, function ( e ) {
-
-		EVENT_MAP_INV[ e ] = k;
-
-	} );
-
-} );
-var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
-function cssValueToPixels( val ) {
-
-	if ( val === '0' || Common.isUndefined( val ) ) {
-
-		return 0;
-
-	}
-	var match = val.match( CSS_VALUE_PIXELS );
-	if ( ! Common.isNull( match ) ) {
-
-		return parseFloat( match[ 1 ] );
-
-	}
-	return 0;
-
-}
-var dom = {
-	makeSelectable: function makeSelectable( elem, selectable ) {
-
-		if ( elem === undefined || elem.style === undefined ) return;
-		elem.onselectstart = selectable ? function () {
-
-			return false;
-
-		} : function () {};
-		elem.style.MozUserSelect = selectable ? 'auto' : 'none';
-		elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
-		elem.unselectable = selectable ? 'on' : 'off';
-
-	},
-	makeFullscreen: function makeFullscreen( elem, hor, vert ) {
-
-		var vertical = vert;
-		var horizontal = hor;
-		if ( Common.isUndefined( horizontal ) ) {
-
-			horizontal = true;
-
-		}
-		if ( Common.isUndefined( vertical ) ) {
-
-			vertical = true;
-
-		}
-		elem.style.position = 'absolute';
-		if ( horizontal ) {
-
-			elem.style.left = 0;
-			elem.style.right = 0;
-
-		}
-		if ( vertical ) {
-
-			elem.style.top = 0;
-			elem.style.bottom = 0;
-
-		}
-
-	},
-	fakeEvent: function fakeEvent( elem, eventType, pars, aux ) {
-
-		var params = pars || {};
-		var className = EVENT_MAP_INV[ eventType ];
-		if ( ! className ) {
-
-			throw new Error( 'Event type ' + eventType + ' not supported.' );
-
-		}
-		var evt = document.createEvent( className );
-		switch ( className ) {
-
-			case 'MouseEvents':
-			{
-
-				var clientX = params.x || params.clientX || 0;
-				var clientY = params.y || params.clientY || 0;
-				evt.initMouseEvent( eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0,
-					0,
-					clientX,
-					clientY,
-					false, false, false, false, 0, null );
-				break;
-
-			}
-			case 'KeyboardEvents':
-			{
-
-				var init = evt.initKeyboardEvent || evt.initKeyEvent;
-				Common.defaults( params, {
-					cancelable: true,
-					ctrlKey: false,
-					altKey: false,
-					shiftKey: false,
-					metaKey: false,
-					keyCode: undefined,
-					charCode: undefined
-				} );
-				init( eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode );
-				break;
-
-			}
-			default:
-			{
-
-				evt.initEvent( eventType, params.bubbles || false, params.cancelable || true );
-				break;
-
-			}
-
-		}
-		Common.defaults( evt, aux );
-		elem.dispatchEvent( evt );
-
-	},
-	bind: function bind( elem, event, func, newBool ) {
-
-		var bool = newBool || false;
-		if ( elem.addEventListener ) {
-
-			elem.addEventListener( event, func, bool );
-
-		} else if ( elem.attachEvent ) {
-
-			elem.attachEvent( 'on' + event, func );
-
-		}
-		return dom;
-
-	},
-	unbind: function unbind( elem, event, func, newBool ) {
-
-		var bool = newBool || false;
-		if ( elem.removeEventListener ) {
-
-			elem.removeEventListener( event, func, bool );
-
-		} else if ( elem.detachEvent ) {
-
-			elem.detachEvent( 'on' + event, func );
-
-		}
-		return dom;
-
-	},
-	addClass: function addClass( elem, className ) {
-
-		if ( elem.className === undefined ) {
-
-			elem.className = className;
-
-		} else if ( elem.className !== className ) {
-
-			var classes = elem.className.split( / +/ );
-			if ( classes.indexOf( className ) === - 1 ) {
-
-				classes.push( className );
-				elem.className = classes.join( ' ' ).replace( /^\s+/, '' ).replace( /\s+$/, '' );
-
-			}
-
-		}
-		return dom;
-
-	},
-	removeClass: function removeClass( elem, className ) {
-
-		if ( className ) {
-
-			if ( elem.className === className ) {
-
-				elem.removeAttribute( 'class' );
-
-			} else {
-
-				var classes = elem.className.split( / +/ );
-				var index = classes.indexOf( className );
-				if ( index !== - 1 ) {
-
-					classes.splice( index, 1 );
-					elem.className = classes.join( ' ' );
-
-				}
-
-			}
-
-		} else {
-
-			elem.className = undefined;
-
-		}
-		return dom;
-
-	},
-	hasClass: function hasClass( elem, className ) {
-
-		return new RegExp( '(?:^|\\s+)' + className + '(?:\\s+|$)' ).test( elem.className ) || false;
-
-	},
-	getWidth: function getWidth( elem ) {
-
-		var style = getComputedStyle( elem );
-		return cssValueToPixels( style[ 'border-left-width' ] ) + cssValueToPixels( style[ 'border-right-width' ] ) + cssValueToPixels( style[ 'padding-left' ] ) + cssValueToPixels( style[ 'padding-right' ] ) + cssValueToPixels( style.width );
-
-	},
-	getHeight: function getHeight( elem ) {
-
-		var style = getComputedStyle( elem );
-		return cssValueToPixels( style[ 'border-top-width' ] ) + cssValueToPixels( style[ 'border-bottom-width' ] ) + cssValueToPixels( style[ 'padding-top' ] ) + cssValueToPixels( style[ 'padding-bottom' ] ) + cssValueToPixels( style.height );
-
-	},
-	getOffset: function getOffset( el ) {
-
-		var elem = el;
-		var offset = { left: 0, top: 0 };
-		if ( elem.offsetParent ) {
-
-			do {
-
-				offset.left += elem.offsetLeft;
-				offset.top += elem.offsetTop;
-				elem = elem.offsetParent;
-
-			} while ( elem );
-
-		}
-		return offset;
-
-	},
-	isActive: function isActive( elem ) {
-
-		return elem === document.activeElement && ( elem.type || elem.href );
-
-	}
-};
-
-var BooleanController = function ( _Controller ) {
-
-	inherits( BooleanController, _Controller );
-	function BooleanController( object, property ) {
-
-		classCallCheck( this, BooleanController );
-		var _this2 = possibleConstructorReturn( this, ( BooleanController.__proto__ || Object.getPrototypeOf( BooleanController ) ).call( this, object, property ) );
-		var _this = _this2;
-		_this2.__prev = _this2.getValue();
-		_this2.__checkbox = document.createElement( 'input' );
-		_this2.__checkbox.setAttribute( 'type', 'checkbox' );
-		function onChange() {
-
-			_this.setValue( ! _this.__prev );
-
-		}
-		dom.bind( _this2.__checkbox, 'change', onChange, false );
-		_this2.domElement.appendChild( _this2.__checkbox );
-		_this2.updateDisplay();
-		return _this2;
-
-	}
-	createClass( BooleanController, [ {
-		key: 'setValue',
-		value: function setValue( v ) {
-
-			var toReturn = get( BooleanController.prototype.__proto__ || Object.getPrototypeOf( BooleanController.prototype ), 'setValue', this ).call( this, v );
-			if ( this.__onFinishChange ) {
-
-				this.__onFinishChange.call( this, this.getValue() );
-
-			}
-			this.__prev = this.getValue();
-			return toReturn;
-
-		}
-	}, {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			if ( this.getValue() === true ) {
-
-				this.__checkbox.setAttribute( 'checked', 'checked' );
-				this.__checkbox.checked = true;
-				this.__prev = true;
-
-			} else {
-
-				this.__checkbox.checked = false;
-				this.__prev = false;
-
-			}
-			return get( BooleanController.prototype.__proto__ || Object.getPrototypeOf( BooleanController.prototype ), 'updateDisplay', this ).call( this );
-
-		}
-	} ] );
-	return BooleanController;
-
-}( Controller );
-
-var OptionController = function ( _Controller ) {
-
-	inherits( OptionController, _Controller );
-	function OptionController( object, property, opts ) {
-
-		classCallCheck( this, OptionController );
-		var _this2 = possibleConstructorReturn( this, ( OptionController.__proto__ || Object.getPrototypeOf( OptionController ) ).call( this, object, property ) );
-		var options = opts;
-		var _this = _this2;
-		_this2.__select = document.createElement( 'select' );
-		if ( Common.isArray( options ) ) {
-
-			var map = {};
-			Common.each( options, function ( element ) {
-
-				map[ element ] = element;
-
-			} );
-			options = map;
-
-		}
-		Common.each( options, function ( value, key ) {
-
-			var opt = document.createElement( 'option' );
-			opt.innerHTML = key;
-			opt.setAttribute( 'value', value );
-			_this.__select.appendChild( opt );
-
-		} );
-		_this2.updateDisplay();
-		dom.bind( _this2.__select, 'change', function () {
-
-			var desiredValue = this.options[ this.selectedIndex ].value;
-			_this.setValue( desiredValue );
-
-		} );
-		_this2.domElement.appendChild( _this2.__select );
-		return _this2;
-
-	}
-	createClass( OptionController, [ {
-		key: 'setValue',
-		value: function setValue( v ) {
-
-			var toReturn = get( OptionController.prototype.__proto__ || Object.getPrototypeOf( OptionController.prototype ), 'setValue', this ).call( this, v );
-			if ( this.__onFinishChange ) {
-
-				this.__onFinishChange.call( this, this.getValue() );
-
-			}
-			return toReturn;
-
-		}
-	}, {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			if ( dom.isActive( this.__select ) ) return this;
-			this.__select.value = this.getValue();
-			return get( OptionController.prototype.__proto__ || Object.getPrototypeOf( OptionController.prototype ), 'updateDisplay', this ).call( this );
-
-		}
-	} ] );
-	return OptionController;
-
-}( Controller );
-
-var StringController = function ( _Controller ) {
-
-	inherits( StringController, _Controller );
-	function StringController( object, property ) {
-
-		classCallCheck( this, StringController );
-		var _this2 = possibleConstructorReturn( this, ( StringController.__proto__ || Object.getPrototypeOf( StringController ) ).call( this, object, property ) );
-		var _this = _this2;
-		function onChange() {
-
-			_this.setValue( _this.__input.value );
-
-		}
-		function onBlur() {
-
-			if ( _this.__onFinishChange ) {
-
-				_this.__onFinishChange.call( _this, _this.getValue() );
-
-			}
-
-		}
-		_this2.__input = document.createElement( 'input' );
-		_this2.__input.setAttribute( 'type', 'text' );
-		dom.bind( _this2.__input, 'keyup', onChange );
-		dom.bind( _this2.__input, 'change', onChange );
-		dom.bind( _this2.__input, 'blur', onBlur );
-		dom.bind( _this2.__input, 'keydown', function ( e ) {
-
-			if ( e.keyCode === 13 ) {
-
-				this.blur();
-
-			}
-
-		} );
-		_this2.updateDisplay();
-		_this2.domElement.appendChild( _this2.__input );
-		return _this2;
-
-	}
-	createClass( StringController, [ {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			if ( ! dom.isActive( this.__input ) ) {
-
-				this.__input.value = this.getValue();
-
-			}
-			return get( StringController.prototype.__proto__ || Object.getPrototypeOf( StringController.prototype ), 'updateDisplay', this ).call( this );
-
-		}
-	} ] );
-	return StringController;
-
-}( Controller );
-
-function numDecimals( x ) {
-
-	var _x = x.toString();
-	if ( _x.indexOf( '.' ) > - 1 ) {
-
-		return _x.length - _x.indexOf( '.' ) - 1;
-
-	}
-	return 0;
-
-}
-var NumberController = function ( _Controller ) {
-
-	inherits( NumberController, _Controller );
-	function NumberController( object, property, params ) {
-
-		classCallCheck( this, NumberController );
-		var _this = possibleConstructorReturn( this, ( NumberController.__proto__ || Object.getPrototypeOf( NumberController ) ).call( this, object, property ) );
-		var _params = params || {};
-		_this.__min = _params.min;
-		_this.__max = _params.max;
-		_this.__step = _params.step;
-		if ( Common.isUndefined( _this.__step ) ) {
-
-			if ( _this.initialValue === 0 ) {
-
-				_this.__impliedStep = 1;
-
-			} else {
-
-				_this.__impliedStep = Math.pow( 10, Math.floor( Math.log( Math.abs( _this.initialValue ) ) / Math.LN10 ) ) / 10;
-
-			}
-
-		} else {
-
-			_this.__impliedStep = _this.__step;
-
-		}
-		_this.__precision = numDecimals( _this.__impliedStep );
-		return _this;
-
-	}
-	createClass( NumberController, [ {
-		key: 'setValue',
-		value: function setValue( v ) {
-
-			var _v = v;
-			if ( this.__min !== undefined && _v < this.__min ) {
-
-				_v = this.__min;
-
-			} else if ( this.__max !== undefined && _v > this.__max ) {
-
-				_v = this.__max;
-
-			}
-			if ( this.__step !== undefined && _v % this.__step !== 0 ) {
-
-				_v = Math.round( _v / this.__step ) * this.__step;
-
-			}
-			return get( NumberController.prototype.__proto__ || Object.getPrototypeOf( NumberController.prototype ), 'setValue', this ).call( this, _v );
-
-		}
-	}, {
-		key: 'min',
-		value: function min( minValue ) {
-
-			this.__min = minValue;
-			return this;
-
-		}
-	}, {
-		key: 'max',
-		value: function max( maxValue ) {
-
-			this.__max = maxValue;
-			return this;
-
-		}
-	}, {
-		key: 'step',
-		value: function step( stepValue ) {
-
-			this.__step = stepValue;
-			this.__impliedStep = stepValue;
-			this.__precision = numDecimals( stepValue );
-			return this;
-
-		}
-	} ] );
-	return NumberController;
-
-}( Controller );
-
-function roundToDecimal( value, decimals ) {
-
-	var tenTo = Math.pow( 10, decimals );
-	return Math.round( value * tenTo ) / tenTo;
-
-}
-var NumberControllerBox = function ( _NumberController ) {
-
-	inherits( NumberControllerBox, _NumberController );
-	function NumberControllerBox( object, property, params ) {
-
-		classCallCheck( this, NumberControllerBox );
-		var _this2 = possibleConstructorReturn( this, ( NumberControllerBox.__proto__ || Object.getPrototypeOf( NumberControllerBox ) ).call( this, object, property, params ) );
-		_this2.__truncationSuspended = false;
-		var _this = _this2;
-		var prevY = void 0;
-		function onChange() {
-
-			var attempted = parseFloat( _this.__input.value );
-			if ( ! Common.isNaN( attempted ) ) {
-
-				_this.setValue( attempted );
-
-			}
-
-		}
-		function onFinish() {
-
-			if ( _this.__onFinishChange ) {
-
-				_this.__onFinishChange.call( _this, _this.getValue() );
-
-			}
-
-		}
-		function onBlur() {
-
-			onFinish();
-
-		}
-		function onMouseDrag( e ) {
-
-			var diff = prevY - e.clientY;
-			_this.setValue( _this.getValue() + diff * _this.__impliedStep );
-			prevY = e.clientY;
-
-		}
-		function onMouseUp() {
-
-			dom.unbind( window, 'mousemove', onMouseDrag );
-			dom.unbind( window, 'mouseup', onMouseUp );
-			onFinish();
-
-		}
-		function onMouseDown( e ) {
-
-			dom.bind( window, 'mousemove', onMouseDrag );
-			dom.bind( window, 'mouseup', onMouseUp );
-			prevY = e.clientY;
-
-		}
-		_this2.__input = document.createElement( 'input' );
-		_this2.__input.setAttribute( 'type', 'text' );
-		dom.bind( _this2.__input, 'change', onChange );
-		dom.bind( _this2.__input, 'blur', onBlur );
-		dom.bind( _this2.__input, 'mousedown', onMouseDown );
-		dom.bind( _this2.__input, 'keydown', function ( e ) {
-
-			if ( e.keyCode === 13 ) {
-
-				_this.__truncationSuspended = true;
-				this.blur();
-				_this.__truncationSuspended = false;
-				onFinish();
-
-			}
-
-		} );
-		_this2.updateDisplay();
-		_this2.domElement.appendChild( _this2.__input );
-		return _this2;
-
-	}
-	createClass( NumberControllerBox, [ {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal( this.getValue(), this.__precision );
-			return get( NumberControllerBox.prototype.__proto__ || Object.getPrototypeOf( NumberControllerBox.prototype ), 'updateDisplay', this ).call( this );
-
-		}
-	} ] );
-	return NumberControllerBox;
-
-}( NumberController );
-
-function map( v, i1, i2, o1, o2 ) {
-
-	return o1 + ( o2 - o1 ) * ( ( v - i1 ) / ( i2 - i1 ) );
-
-}
-var NumberControllerSlider = function ( _NumberController ) {
-
-	inherits( NumberControllerSlider, _NumberController );
-	function NumberControllerSlider( object, property, min, max, step ) {
-
-		classCallCheck( this, NumberControllerSlider );
-		var _this2 = possibleConstructorReturn( this, ( NumberControllerSlider.__proto__ || Object.getPrototypeOf( NumberControllerSlider ) ).call( this, object, property, { min: min, max: max, step: step } ) );
-		var _this = _this2;
-		_this2.__background = document.createElement( 'div' );
-		_this2.__foreground = document.createElement( 'div' );
-		dom.bind( _this2.__background, 'mousedown', onMouseDown );
-		dom.bind( _this2.__background, 'touchstart', onTouchStart );
-		dom.addClass( _this2.__background, 'slider' );
-		dom.addClass( _this2.__foreground, 'slider-fg' );
-		function onMouseDown( e ) {
-
-			document.activeElement.blur();
-			dom.bind( window, 'mousemove', onMouseDrag );
-			dom.bind( window, 'mouseup', onMouseUp );
-			onMouseDrag( e );
-
-		}
-		function onMouseDrag( e ) {
-
-			e.preventDefault();
-			var bgRect = _this.__background.getBoundingClientRect();
-			_this.setValue( map( e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max ) );
-			return false;
-
-		}
-		function onMouseUp() {
-
-			dom.unbind( window, 'mousemove', onMouseDrag );
-			dom.unbind( window, 'mouseup', onMouseUp );
-			if ( _this.__onFinishChange ) {
-
-				_this.__onFinishChange.call( _this, _this.getValue() );
-
-			}
-
-		}
-		function onTouchStart( e ) {
-
-			if ( e.touches.length !== 1 ) {
-
-				return;
-
-			}
-			dom.bind( window, 'touchmove', onTouchMove );
-			dom.bind( window, 'touchend', onTouchEnd );
-			onTouchMove( e );
-
-		}
-		function onTouchMove( e ) {
-
-			var clientX = e.touches[ 0 ].clientX;
-			var bgRect = _this.__background.getBoundingClientRect();
-			_this.setValue( map( clientX, bgRect.left, bgRect.right, _this.__min, _this.__max ) );
-
-		}
-		function onTouchEnd() {
-
-			dom.unbind( window, 'touchmove', onTouchMove );
-			dom.unbind( window, 'touchend', onTouchEnd );
-			if ( _this.__onFinishChange ) {
-
-				_this.__onFinishChange.call( _this, _this.getValue() );
-
-			}
-
-		}
-		_this2.updateDisplay();
-		_this2.__background.appendChild( _this2.__foreground );
-		_this2.domElement.appendChild( _this2.__background );
-		return _this2;
-
-	}
-	createClass( NumberControllerSlider, [ {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			var pct = ( this.getValue() - this.__min ) / ( this.__max - this.__min );
-			this.__foreground.style.width = pct * 100 + '%';
-			return get( NumberControllerSlider.prototype.__proto__ || Object.getPrototypeOf( NumberControllerSlider.prototype ), 'updateDisplay', this ).call( this );
-
-		}
-	} ] );
-	return NumberControllerSlider;
-
-}( NumberController );
-
-var FunctionController = function ( _Controller ) {
-
-	inherits( FunctionController, _Controller );
-	function FunctionController( object, property, text ) {
-
-		classCallCheck( this, FunctionController );
-		var _this2 = possibleConstructorReturn( this, ( FunctionController.__proto__ || Object.getPrototypeOf( FunctionController ) ).call( this, object, property ) );
-		var _this = _this2;
-		_this2.__button = document.createElement( 'div' );
-		_this2.__button.innerHTML = text === undefined ? 'Fire' : text;
-		dom.bind( _this2.__button, 'click', function ( e ) {
-
-			e.preventDefault();
-			_this.fire();
-			return false;
-
-		} );
-		dom.addClass( _this2.__button, 'button' );
-		_this2.domElement.appendChild( _this2.__button );
-		return _this2;
-
-	}
-	createClass( FunctionController, [ {
-		key: 'fire',
-		value: function fire() {
-
-			if ( this.__onChange ) {
-
-				this.__onChange.call( this );
-
-			}
-			this.getValue().call( this.object );
-			if ( this.__onFinishChange ) {
-
-				this.__onFinishChange.call( this, this.getValue() );
-
-			}
-
-		}
-	} ] );
-	return FunctionController;
-
-}( Controller );
-
-var ColorController = function ( _Controller ) {
-
-	inherits( ColorController, _Controller );
-	function ColorController( object, property ) {
-
-		classCallCheck( this, ColorController );
-		var _this2 = possibleConstructorReturn( this, ( ColorController.__proto__ || Object.getPrototypeOf( ColorController ) ).call( this, object, property ) );
-		_this2.__color = new Color( _this2.getValue() );
-		_this2.__temp = new Color( 0 );
-		var _this = _this2;
-		_this2.domElement = document.createElement( 'div' );
-		dom.makeSelectable( _this2.domElement, false );
-		_this2.__selector = document.createElement( 'div' );
-		_this2.__selector.className = 'selector';
-		_this2.__saturation_field = document.createElement( 'div' );
-		_this2.__saturation_field.className = 'saturation-field';
-		_this2.__field_knob = document.createElement( 'div' );
-		_this2.__field_knob.className = 'field-knob';
-		_this2.__field_knob_border = '2px solid ';
-		_this2.__hue_knob = document.createElement( 'div' );
-		_this2.__hue_knob.className = 'hue-knob';
-		_this2.__hue_field = document.createElement( 'div' );
-		_this2.__hue_field.className = 'hue-field';
-		_this2.__input = document.createElement( 'input' );
-		_this2.__input.type = 'text';
-		_this2.__input_textShadow = '0 1px 1px ';
-		dom.bind( _this2.__input, 'keydown', function ( e ) {
-
-			if ( e.keyCode === 13 ) {
-
-				onBlur.call( this );
-
-			}
-
-		} );
-		dom.bind( _this2.__input, 'blur', onBlur );
-		dom.bind( _this2.__selector, 'mousedown', function () {
-
-			dom.addClass( this, 'drag' ).bind( window, 'mouseup', function () {
-
-				dom.removeClass( _this.__selector, 'drag' );
-
-			} );
-
-		} );
-		dom.bind( _this2.__selector, 'touchstart', function () {
-
-			dom.addClass( this, 'drag' ).bind( window, 'touchend', function () {
-
-				dom.removeClass( _this.__selector, 'drag' );
-
-			} );
-
-		} );
-		var valueField = document.createElement( 'div' );
-		Common.extend( _this2.__selector.style, {
-			width: '122px',
-			height: '102px',
-			padding: '3px',
-			backgroundColor: '#222',
-			boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
-		} );
-		Common.extend( _this2.__field_knob.style, {
-			position: 'absolute',
-			width: '12px',
-			height: '12px',
-			border: _this2.__field_knob_border + ( _this2.__color.v < 0.5 ? '#fff' : '#000' ),
-			boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
-			borderRadius: '12px',
-			zIndex: 1
-		} );
-		Common.extend( _this2.__hue_knob.style, {
-			position: 'absolute',
-			width: '15px',
-			height: '2px',
-			borderRight: '4px solid #fff',
-			zIndex: 1
-		} );
-		Common.extend( _this2.__saturation_field.style, {
-			width: '100px',
-			height: '100px',
-			border: '1px solid #555',
-			marginRight: '3px',
-			display: 'inline-block',
-			cursor: 'pointer'
-		} );
-		Common.extend( valueField.style, {
-			width: '100%',
-			height: '100%',
-			background: 'none'
-		} );
-		linearGradient( valueField, 'top', 'rgba(0,0,0,0)', '#000' );
-		Common.extend( _this2.__hue_field.style, {
-			width: '15px',
-			height: '100px',
-			border: '1px solid #555',
-			cursor: 'ns-resize',
-			position: 'absolute',
-			top: '3px',
-			right: '3px'
-		} );
-		hueGradient( _this2.__hue_field );
-		Common.extend( _this2.__input.style, {
-			outline: 'none',
-			textAlign: 'center',
-			color: '#fff',
-			border: 0,
-			fontWeight: 'bold',
-			textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)'
-		} );
-		dom.bind( _this2.__saturation_field, 'mousedown', fieldDown );
-		dom.bind( _this2.__saturation_field, 'touchstart', fieldDown );
-		dom.bind( _this2.__field_knob, 'mousedown', fieldDown );
-		dom.bind( _this2.__field_knob, 'touchstart', fieldDown );
-		dom.bind( _this2.__hue_field, 'mousedown', fieldDownH );
-		dom.bind( _this2.__hue_field, 'touchstart', fieldDownH );
-		function fieldDown( e ) {
-
-			setSV( e );
-			dom.bind( window, 'mousemove', setSV );
-			dom.bind( window, 'touchmove', setSV );
-			dom.bind( window, 'mouseup', fieldUpSV );
-			dom.bind( window, 'touchend', fieldUpSV );
-
-		}
-		function fieldDownH( e ) {
-
-			setH( e );
-			dom.bind( window, 'mousemove', setH );
-			dom.bind( window, 'touchmove', setH );
-			dom.bind( window, 'mouseup', fieldUpH );
-			dom.bind( window, 'touchend', fieldUpH );
-
-		}
-		function fieldUpSV() {
-
-			dom.unbind( window, 'mousemove', setSV );
-			dom.unbind( window, 'touchmove', setSV );
-			dom.unbind( window, 'mouseup', fieldUpSV );
-			dom.unbind( window, 'touchend', fieldUpSV );
-			onFinish();
-
-		}
-		function fieldUpH() {
-
-			dom.unbind( window, 'mousemove', setH );
-			dom.unbind( window, 'touchmove', setH );
-			dom.unbind( window, 'mouseup', fieldUpH );
-			dom.unbind( window, 'touchend', fieldUpH );
-			onFinish();
-
-		}
-		function onBlur() {
-
-			var i = interpret( this.value );
-			if ( i !== false ) {
-
-				_this.__color.__state = i;
-				_this.setValue( _this.__color.toOriginal() );
-
-			} else {
-
-				this.value = _this.__color.toString();
-
-			}
-
-		}
-		function onFinish() {
-
-			if ( _this.__onFinishChange ) {
-
-				_this.__onFinishChange.call( _this, _this.__color.toOriginal() );
-
-			}
-
-		}
-		_this2.__saturation_field.appendChild( valueField );
-		_this2.__selector.appendChild( _this2.__field_knob );
-		_this2.__selector.appendChild( _this2.__saturation_field );
-		_this2.__selector.appendChild( _this2.__hue_field );
-		_this2.__hue_field.appendChild( _this2.__hue_knob );
-		_this2.domElement.appendChild( _this2.__input );
-		_this2.domElement.appendChild( _this2.__selector );
-		_this2.updateDisplay();
-		function setSV( e ) {
-
-			if ( e.type.indexOf( 'touch' ) === - 1 ) {
-
-				e.preventDefault();
-
-			}
-			var fieldRect = _this.__saturation_field.getBoundingClientRect();
-			var _ref = e.touches && e.touches[ 0 ] || e,
-				clientX = _ref.clientX,
-				clientY = _ref.clientY;
-			var s = ( clientX - fieldRect.left ) / ( fieldRect.right - fieldRect.left );
-			var v = 1 - ( clientY - fieldRect.top ) / ( fieldRect.bottom - fieldRect.top );
-			if ( v > 1 ) {
-
-				v = 1;
-
-			} else if ( v < 0 ) {
-
-				v = 0;
-
-			}
-			if ( s > 1 ) {
-
-				s = 1;
-
-			} else if ( s < 0 ) {
-
-				s = 0;
-
-			}
-			_this.__color.v = v;
-			_this.__color.s = s;
-			_this.setValue( _this.__color.toOriginal() );
-			return false;
-
-		}
-		function setH( e ) {
-
-			if ( e.type.indexOf( 'touch' ) === - 1 ) {
-
-				e.preventDefault();
-
-			}
-			var fieldRect = _this.__hue_field.getBoundingClientRect();
-			var _ref2 = e.touches && e.touches[ 0 ] || e,
-				clientY = _ref2.clientY;
-			var h = 1 - ( clientY - fieldRect.top ) / ( fieldRect.bottom - fieldRect.top );
-			if ( h > 1 ) {
-
-				h = 1;
-
-			} else if ( h < 0 ) {
-
-				h = 0;
-
-			}
-			_this.__color.h = h * 360;
-			_this.setValue( _this.__color.toOriginal() );
-			return false;
-
-		}
-		return _this2;
-
-	}
-	createClass( ColorController, [ {
-		key: 'updateDisplay',
-		value: function updateDisplay() {
-
-			var i = interpret( this.getValue() );
-			if ( i !== false ) {
-
-				var mismatch = false;
-				Common.each( Color.COMPONENTS, function ( component ) {
-
-					if ( ! Common.isUndefined( i[ component ] ) && ! Common.isUndefined( this.__color.__state[ component ] ) && i[ component ] !== this.__color.__state[ component ] ) {
-
-						mismatch = true;
-						return {};
-
-					}
-
-				}, this );
-				if ( mismatch ) {
-
-					Common.extend( this.__color.__state, i );
-
-				}
-
-			}
-			Common.extend( this.__temp.__state, this.__color.__state );
-			this.__temp.a = 1;
-			var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
-			var _flip = 255 - flip;
-			Common.extend( this.__field_knob.style, {
-				marginLeft: 100 * this.__color.s - 7 + 'px',
-				marginTop: 100 * ( 1 - this.__color.v ) - 7 + 'px',
-				backgroundColor: this.__temp.toHexString(),
-				border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
-			} );
-			this.__hue_knob.style.marginTop = ( 1 - this.__color.h / 360 ) * 100 + 'px';
-			this.__temp.s = 1;
-			this.__temp.v = 1;
-			linearGradient( this.__saturation_field, 'left', '#fff', this.__temp.toHexString() );
-			this.__input.value = this.__color.toString();
-			Common.extend( this.__input.style, {
-				backgroundColor: this.__color.toHexString(),
-				color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
-				textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
-			} );
-
-		}
-	} ] );
-	return ColorController;
-
-}( Controller );
-var vendors = [ '-moz-', '-o-', '-webkit-', '-ms-', '' ];
-function linearGradient( elem, x, a, b ) {
-
-	elem.style.background = '';
-	Common.each( vendors, function ( vendor ) {
-
-		elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
-
-	} );
-
-}
-function hueGradient( elem ) {
-
-	elem.style.background = '';
-	elem.style.cssText += 'background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
-	elem.style.cssText += 'background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
-	elem.style.cssText += 'background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
-	elem.style.cssText += 'background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
-	elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
-
-}
-
-var css = {
-	load: function load( url, indoc ) {
-
-		var doc = indoc || document;
-		var link = doc.createElement( 'link' );
-		link.type = 'text/css';
-		link.rel = 'stylesheet';
-		link.href = url;
-		doc.getElementsByTagName( 'head' )[ 0 ].appendChild( link );
-
-	},
-	inject: function inject( cssContent, indoc ) {
-
-		var doc = indoc || document;
-		var injected = document.createElement( 'style' );
-		injected.type = 'text/css';
-		injected.innerHTML = cssContent;
-		var head = doc.getElementsByTagName( 'head' )[ 0 ];
-		try {
-
-			head.appendChild( injected );
-
-		} catch ( e ) {
-		}
-
-	}
-};
-
-var saveDialogContents = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n  Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n  <textarea id=\"dg-new-constructor\"></textarea>\n\n  <div id=\"dg-save-locally\">\n\n    <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n    values to <code>localStorage</code> on exit.\n\n    <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n      override those passed to <code>dat.GUI</code>'s constructor. This makes it\n      easier to work incrementally, but <code>localStorage</code> is fragile,\n      and your friends may not see the same values you do.\n\n    </div>\n\n  </div>\n\n</div>";
-
-var ControllerFactory = function ControllerFactory( object, property ) {
-
-	var initialValue = object[ property ];
-	if ( Common.isArray( arguments[ 2 ] ) || Common.isObject( arguments[ 2 ] ) ) {
-
-		return new OptionController( object, property, arguments[ 2 ] );
-
-	}
-	if ( Common.isNumber( initialValue ) ) {
-
-		if ( Common.isNumber( arguments[ 2 ] ) && Common.isNumber( arguments[ 3 ] ) ) {
-
-			if ( Common.isNumber( arguments[ 4 ] ) ) {
-
-				return new NumberControllerSlider( object, property, arguments[ 2 ], arguments[ 3 ], arguments[ 4 ] );
-
-			}
-			return new NumberControllerSlider( object, property, arguments[ 2 ], arguments[ 3 ] );
-
-		}
-		if ( Common.isNumber( arguments[ 4 ] ) ) {
-
-			return new NumberControllerBox( object, property, { min: arguments[ 2 ], max: arguments[ 3 ], step: arguments[ 4 ] } );
-
-		}
-		return new NumberControllerBox( object, property, { min: arguments[ 2 ], max: arguments[ 3 ] } );
-
-	}
-	if ( Common.isString( initialValue ) ) {
-
-		return new StringController( object, property );
-
-	}
-	if ( Common.isFunction( initialValue ) ) {
-
-		return new FunctionController( object, property, '' );
-
-	}
-	if ( Common.isBoolean( initialValue ) ) {
-
-		return new BooleanController( object, property );
-
-	}
-	return null;
-
-};
-
-function requestAnimationFrame( callback ) {
-
-	setTimeout( callback, 1000 / 60 );
-
-}
-var requestAnimationFrame$1 = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame;
-
-var CenteredDiv = function () {
-
-	function CenteredDiv() {
-
-		classCallCheck( this, CenteredDiv );
-		this.backgroundElement = document.createElement( 'div' );
-		Common.extend( this.backgroundElement.style, {
-			backgroundColor: 'rgba(0,0,0,0.8)',
-			top: 0,
-			left: 0,
-			display: 'none',
-			zIndex: '1000',
-			opacity: 0,
-			WebkitTransition: 'opacity 0.2s linear',
-			transition: 'opacity 0.2s linear'
-		} );
-		dom.makeFullscreen( this.backgroundElement );
-		this.backgroundElement.style.position = 'fixed';
-		this.domElement = document.createElement( 'div' );
-		Common.extend( this.domElement.style, {
-			position: 'fixed',
-			display: 'none',
-			zIndex: '1001',
-			opacity: 0,
-			WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
-			transition: 'transform 0.2s ease-out, opacity 0.2s linear'
-		} );
-		document.body.appendChild( this.backgroundElement );
-		document.body.appendChild( this.domElement );
-		var _this = this;
-		dom.bind( this.backgroundElement, 'click', function () {
-
-			_this.hide();
-
-		} );
-
-	}
-	createClass( CenteredDiv, [ {
-		key: 'show',
-		value: function show() {
-
-			var _this = this;
-			this.backgroundElement.style.display = 'block';
-			this.domElement.style.display = 'block';
-			this.domElement.style.opacity = 0;
-			this.domElement.style.webkitTransform = 'scale(1.1)';
-			this.layout();
-			Common.defer( function () {
-
-				_this.backgroundElement.style.opacity = 1;
-				_this.domElement.style.opacity = 1;
-				_this.domElement.style.webkitTransform = 'scale(1)';
-
-			} );
-
-		}
-	}, {
-		key: 'hide',
-		value: function hide() {
-
-			var _this = this;
-			var hide = function hide() {
-
-				_this.domElement.style.display = 'none';
-				_this.backgroundElement.style.display = 'none';
-				dom.unbind( _this.domElement, 'webkitTransitionEnd', hide );
-				dom.unbind( _this.domElement, 'transitionend', hide );
-				dom.unbind( _this.domElement, 'oTransitionEnd', hide );
-
-			};
-			dom.bind( this.domElement, 'webkitTransitionEnd', hide );
-			dom.bind( this.domElement, 'transitionend', hide );
-			dom.bind( this.domElement, 'oTransitionEnd', hide );
-			this.backgroundElement.style.opacity = 0;
-			this.domElement.style.opacity = 0;
-			this.domElement.style.webkitTransform = 'scale(1.1)';
-
-		}
-	}, {
-		key: 'layout',
-		value: function layout() {
-
-			this.domElement.style.left = window.innerWidth / 2 - dom.getWidth( this.domElement ) / 2 + 'px';
-			this.domElement.style.top = window.innerHeight / 2 - dom.getHeight( this.domElement ) / 2 + 'px';
-
-		}
-	} ] );
-	return CenteredDiv;
-
-}();
-
-var styleSheet = ___$insertStyle( ".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity .1s linear;-o-transition:opacity .1s linear;-moz-transition:opacity .1s linear;transition:opacity .1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1 !important}.dg.main:hover .close-button,.dg.main .close-button.drag{opacity:1}.dg.main .close-button{-webkit-transition:opacity .1s linear;-o-transition:opacity .1s linear;-moz-transition:opacity .1s linear;transition:opacity .1s linear;border:0;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button.close-top{position:relative}.dg.main .close-button.close-bottom{position:absolute}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-y:visible}.dg.a.has-save>ul.close-top{margin-top:0}.dg.a.has-save>ul.close-bottom{margin-top:27px}.dg.a.has-save>ul.closed{margin-top:0}.dg.a .save-row{top:0;z-index:1002}.dg.a .save-row.close-top{position:relative}.dg.a .save-row.close-bottom{position:fixed}.dg li{-webkit-transition:height .1s ease-out;-o-transition:height .1s ease-out;-moz-transition:height .1s ease-out;transition:height .1s ease-out;-webkit-transition:overflow .1s linear;-o-transition:overflow .1s linear;-moz-transition:overflow .1s linear;transition:overflow .1s linear}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid rgba(0,0,0,0)}.dg li.title{cursor:pointer;margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>*{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px;overflow:hidden}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%;position:relative}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:7px}.dg .c select{margin-top:5px}.dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean *{cursor:pointer}.dg .cr.color{overflow:visible}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0px 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco, monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px 'Lucida Grande', sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px 4px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.color{border-left:3px solid}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2FA1D6}.dg .cr.number input[type=text]{color:#2FA1D6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.function:hover,.dg .cr.boolean:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2FA1D6;max-width:100%}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}\n" );
-
-css.inject( styleSheet );
-var CSS_NAMESPACE = 'dg';
-var HIDE_KEY_CODE = 72;
-var CLOSE_BUTTON_HEIGHT = 20;
-var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
-var SUPPORTS_LOCAL_STORAGE = function () {
-
-	try {
-
-		return !! window.localStorage;
-
-	} catch ( e ) {
-
-		return false;
-
-	}
-
-}();
-var SAVE_DIALOGUE = void 0;
-var autoPlaceVirgin = true;
-var autoPlaceContainer = void 0;
-var hide = false;
-var hideableGuis = [];
-var GUI = function GUI( pars ) {
-
-	var _this = this;
-	var params = pars || {};
-	this.domElement = document.createElement( 'div' );
-	this.__ul = document.createElement( 'ul' );
-	this.domElement.appendChild( this.__ul );
-	dom.addClass( this.domElement, CSS_NAMESPACE );
-	this.__folders = {};
-	this.__controllers = [];
-	this.__rememberedObjects = [];
-	this.__rememberedObjectIndecesToControllers = [];
-	this.__listening = [];
-	params = Common.defaults( params, {
-		closeOnTop: false,
-		autoPlace: true,
-		width: GUI.DEFAULT_WIDTH
-	} );
-	params = Common.defaults( params, {
-		resizable: params.autoPlace,
-		hideable: params.autoPlace
-	} );
-	if ( ! Common.isUndefined( params.load ) ) {
-
-		if ( params.preset ) {
-
-			params.load.preset = params.preset;
-
-		}
-
-	} else {
-
-		params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME };
-
-	}
-	if ( Common.isUndefined( params.parent ) && params.hideable ) {
-
-		hideableGuis.push( this );
-
-	}
-	params.resizable = Common.isUndefined( params.parent ) && params.resizable;
-	if ( params.autoPlace && Common.isUndefined( params.scrollable ) ) {
-
-		params.scrollable = true;
-
-	}
-	var useLocalStorage = SUPPORTS_LOCAL_STORAGE && localStorage.getItem( getLocalStorageHash( this, 'isLocal' ) ) === 'true';
-	var saveToLocalStorage = void 0;
-	var titleRow = void 0;
-	Object.defineProperties( this,
-		{
-			parent: {
-				get: function get$$1() {
-
-					return params.parent;
-
-				}
-			},
-			scrollable: {
-				get: function get$$1() {
-
-					return params.scrollable;
-
-				}
-			},
-			autoPlace: {
-				get: function get$$1() {
-
-					return params.autoPlace;
-
-				}
-			},
-			closeOnTop: {
-				get: function get$$1() {
-
-					return params.closeOnTop;
-
-				}
-			},
-			preset: {
-				get: function get$$1() {
-
-					if ( _this.parent ) {
-
-						return _this.getRoot().preset;
-
-					}
-					return params.load.preset;
-
-				},
-				set: function set$$1( v ) {
-
-					if ( _this.parent ) {
-
-						_this.getRoot().preset = v;
-
-					} else {
-
-						params.load.preset = v;
-
-					}
-					setPresetSelectIndex( this );
-					_this.revert();
-
-				}
-			},
-			width: {
-				get: function get$$1() {
-
-					return params.width;
-
-				},
-				set: function set$$1( v ) {
-
-					params.width = v;
-					setWidth( _this, v );
-
-				}
-			},
-			name: {
-				get: function get$$1() {
-
-					return params.name;
-
-				},
-				set: function set$$1( v ) {
-
-					params.name = v;
-					if ( titleRow ) {
-
-						titleRow.innerHTML = params.name;
-
-					}
-
-				}
-			},
-			closed: {
-				get: function get$$1() {
-
-					return params.closed;
-
-				},
-				set: function set$$1( v ) {
-
-					params.closed = v;
-					if ( params.closed ) {
-
-						dom.addClass( _this.__ul, GUI.CLASS_CLOSED );
-
-					} else {
-
-						dom.removeClass( _this.__ul, GUI.CLASS_CLOSED );
-
-					}
-					this.onResize();
-					if ( _this.__closeButton ) {
-
-						_this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;
-
-					}
-
-				}
-			},
-			load: {
-				get: function get$$1() {
-
-					return params.load;
-
-				}
-			},
-			useLocalStorage: {
-				get: function get$$1() {
-
-					return useLocalStorage;
-
-				},
-				set: function set$$1( bool ) {
-
-					if ( SUPPORTS_LOCAL_STORAGE ) {
-
-						useLocalStorage = bool;
-						if ( bool ) {
-
-							dom.bind( window, 'unload', saveToLocalStorage );
-
-						} else {
-
-							dom.unbind( window, 'unload', saveToLocalStorage );
-
-						}
-						localStorage.setItem( getLocalStorageHash( _this, 'isLocal' ), bool );
-
-					}
-
-				}
-			}
-		} );
-	if ( Common.isUndefined( params.parent ) ) {
-
-		this.closed = params.closed || false;
-		dom.addClass( this.domElement, GUI.CLASS_MAIN );
-		dom.makeSelectable( this.domElement, false );
-		if ( SUPPORTS_LOCAL_STORAGE ) {
-
-			if ( useLocalStorage ) {
-
-				_this.useLocalStorage = true;
-				var savedGui = localStorage.getItem( getLocalStorageHash( this, 'gui' ) );
-				if ( savedGui ) {
-
-					params.load = JSON.parse( savedGui );
-
-				}
-
-			}
-
-		}
-		this.__closeButton = document.createElement( 'div' );
-		this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
-		dom.addClass( this.__closeButton, GUI.CLASS_CLOSE_BUTTON );
-		if ( params.closeOnTop ) {
-
-			dom.addClass( this.__closeButton, GUI.CLASS_CLOSE_TOP );
-			this.domElement.insertBefore( this.__closeButton, this.domElement.childNodes[ 0 ] );
-
-		} else {
-
-			dom.addClass( this.__closeButton, GUI.CLASS_CLOSE_BOTTOM );
-			this.domElement.appendChild( this.__closeButton );
-
-		}
-		dom.bind( this.__closeButton, 'click', function () {
-
-			_this.closed = ! _this.closed;
-
-		} );
-
-	} else {
-
-		if ( params.closed === undefined ) {
-
-			params.closed = true;
-
-		}
-		var titleRowName = document.createTextNode( params.name );
-		dom.addClass( titleRowName, 'controller-name' );
-		titleRow = addRow( _this, titleRowName );
-		var onClickTitle = function onClickTitle( e ) {
-
-			e.preventDefault();
-			_this.closed = ! _this.closed;
-			return false;
-
-		};
-		dom.addClass( this.__ul, GUI.CLASS_CLOSED );
-		dom.addClass( titleRow, 'title' );
-		dom.bind( titleRow, 'click', onClickTitle );
-		if ( ! params.closed ) {
-
-			this.closed = false;
-
-		}
-
-	}
-	if ( params.autoPlace ) {
-
-		if ( Common.isUndefined( params.parent ) ) {
-
-			if ( autoPlaceVirgin ) {
-
-				autoPlaceContainer = document.createElement( 'div' );
-				dom.addClass( autoPlaceContainer, CSS_NAMESPACE );
-				dom.addClass( autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER );
-				document.body.appendChild( autoPlaceContainer );
-				autoPlaceVirgin = false;
-
-			}
-			autoPlaceContainer.appendChild( this.domElement );
-			dom.addClass( this.domElement, GUI.CLASS_AUTO_PLACE );
-
-		}
-		if ( ! this.parent ) {
-
-			setWidth( _this, params.width );
-
-		}
-
-	}
-	this.__resizeHandler = function () {
-
-		_this.onResizeDebounced();
-
-	};
-	dom.bind( window, 'resize', this.__resizeHandler );
-	dom.bind( this.__ul, 'webkitTransitionEnd', this.__resizeHandler );
-	dom.bind( this.__ul, 'transitionend', this.__resizeHandler );
-	dom.bind( this.__ul, 'oTransitionEnd', this.__resizeHandler );
-	this.onResize();
-	if ( params.resizable ) {
-
-		addResizeHandle( this );
-
-	}
-	saveToLocalStorage = function saveToLocalStorage() {
-
-		if ( SUPPORTS_LOCAL_STORAGE && localStorage.getItem( getLocalStorageHash( _this, 'isLocal' ) ) === 'true' ) {
-
-			localStorage.setItem( getLocalStorageHash( _this, 'gui' ), JSON.stringify( _this.getSaveObject() ) );
-
-		}
-
-	};
-	this.saveToLocalStorageIfPossible = saveToLocalStorage;
-	function resetWidth() {
-
-		var root = _this.getRoot();
-		root.width += 1;
-		Common.defer( function () {
-
-			root.width -= 1;
-
-		} );
-
-	}
-	if ( ! params.parent ) {
-
-		resetWidth();
-
-	}
-
-};
-GUI.toggleHide = function () {
-
-	hide = ! hide;
-	Common.each( hideableGuis, function ( gui ) {
-
-		gui.domElement.style.display = hide ? 'none' : '';
-
-	} );
-
-};
-GUI.CLASS_AUTO_PLACE = 'a';
-GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
-GUI.CLASS_MAIN = 'main';
-GUI.CLASS_CONTROLLER_ROW = 'cr';
-GUI.CLASS_TOO_TALL = 'taller-than-window';
-GUI.CLASS_CLOSED = 'closed';
-GUI.CLASS_CLOSE_BUTTON = 'close-button';
-GUI.CLASS_CLOSE_TOP = 'close-top';
-GUI.CLASS_CLOSE_BOTTOM = 'close-bottom';
-GUI.CLASS_DRAG = 'drag';
-GUI.DEFAULT_WIDTH = 245;
-GUI.TEXT_CLOSED = 'Close Controls';
-GUI.TEXT_OPEN = 'Open Controls';
-GUI._keydownHandler = function ( e ) {
-
-	if ( document.activeElement.type !== 'text' && ( e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE ) ) {
-
-		GUI.toggleHide();
-
-	}
-
-};
-dom.bind( window, 'keydown', GUI._keydownHandler, false );
-Common.extend( GUI.prototype,
-	{
-		add: function add( object, property ) {
-
-			return _add( this, object, property, {
-				factoryArgs: Array.prototype.slice.call( arguments, 2 )
-			} );
-
-		},
-		addColor: function addColor( object, property ) {
-
-			return _add( this, object, property, {
-				color: true
-			} );
-
-		},
-		remove: function remove( controller ) {
-
-			this.__ul.removeChild( controller.__li );
-			this.__controllers.splice( this.__controllers.indexOf( controller ), 1 );
-			var _this = this;
-			Common.defer( function () {
-
-				_this.onResize();
-
-			} );
-
-		},
-		destroy: function destroy() {
-
-			if ( this.parent ) {
-
-				throw new Error( 'Only the root GUI should be removed with .destroy(). ' + 'For subfolders, use gui.removeFolder(folder) instead.' );
-
-			}
-			if ( this.autoPlace ) {
-
-				autoPlaceContainer.removeChild( this.domElement );
-
-			}
-			var _this = this;
-			Common.each( this.__folders, function ( subfolder ) {
-
-				_this.removeFolder( subfolder );
-
-			} );
-			dom.unbind( window, 'keydown', GUI._keydownHandler, false );
-			removeListeners( this );
-
-		},
-		addFolder: function addFolder( name ) {
-
-			if ( this.__folders[ name ] !== undefined ) {
-
-				throw new Error( 'You already have a folder in this GUI by the' + ' name "' + name + '"' );
-
-			}
-			var newGuiParams = { name: name, parent: this };
-			newGuiParams.autoPlace = this.autoPlace;
-			if ( this.load &&
-    this.load.folders &&
-    this.load.folders[ name ] ) {
-
-				newGuiParams.closed = this.load.folders[ name ].closed;
-				newGuiParams.load = this.load.folders[ name ];
-
-			}
-			var gui = new GUI( newGuiParams );
-			this.__folders[ name ] = gui;
-			var li = addRow( this, gui.domElement );
-			dom.addClass( li, 'folder' );
-			return gui;
-
-		},
-		removeFolder: function removeFolder( folder ) {
-
-			this.__ul.removeChild( folder.domElement.parentElement );
-			delete this.__folders[ folder.name ];
-			if ( this.load &&
-    this.load.folders &&
-    this.load.folders[ folder.name ] ) {
-
-				delete this.load.folders[ folder.name ];
-
-			}
-			removeListeners( folder );
-			var _this = this;
-			Common.each( folder.__folders, function ( subfolder ) {
-
-				folder.removeFolder( subfolder );
-
-			} );
-			Common.defer( function () {
-
-				_this.onResize();
-
-			} );
-
-		},
-		open: function open() {
-
-			this.closed = false;
-
-		},
-		close: function close() {
-
-			this.closed = true;
-
-		},
-		hide: function hide() {
-
-			this.domElement.style.display = 'none';
-
-		},
-		show: function show() {
-
-			this.domElement.style.display = '';
-
-		},
-		onResize: function onResize() {
-
-			var root = this.getRoot();
-			if ( root.scrollable ) {
-
-				var top = dom.getOffset( root.__ul ).top;
-				var h = 0;
-				Common.each( root.__ul.childNodes, function ( node ) {
-
-					if ( ! ( root.autoPlace && node === root.__save_row ) ) {
-
-						h += dom.getHeight( node );
-
-					}
-
-				} );
-				if ( window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h ) {
-
-					dom.addClass( root.domElement, GUI.CLASS_TOO_TALL );
-					root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px';
-
-				} else {
-
-					dom.removeClass( root.domElement, GUI.CLASS_TOO_TALL );
-					root.__ul.style.height = 'auto';
-
-				}
-
-			}
-			if ( root.__resize_handle ) {
-
-				Common.defer( function () {
-
-					root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
-
-				} );
-
-			}
-			if ( root.__closeButton ) {
-
-				root.__closeButton.style.width = root.width + 'px';
-
-			}
-
-		},
-		onResizeDebounced: Common.debounce( function () {
-
-			this.onResize();
-
-		}, 50 ),
-		remember: function remember() {
-
-			if ( Common.isUndefined( SAVE_DIALOGUE ) ) {
-
-				SAVE_DIALOGUE = new CenteredDiv();
-				SAVE_DIALOGUE.domElement.innerHTML = saveDialogContents;
-
-			}
-			if ( this.parent ) {
-
-				throw new Error( 'You can only call remember on a top level GUI.' );
-
-			}
-			var _this = this;
-			Common.each( Array.prototype.slice.call( arguments ), function ( object ) {
-
-				if ( _this.__rememberedObjects.length === 0 ) {
-
-					addSaveMenu( _this );
-
-				}
-				if ( _this.__rememberedObjects.indexOf( object ) === - 1 ) {
-
-					_this.__rememberedObjects.push( object );
-
-				}
-
-			} );
-			if ( this.autoPlace ) {
-
-				setWidth( this, this.width );
-
-			}
-
-		},
-		getRoot: function getRoot() {
-
-			var gui = this;
-			while ( gui.parent ) {
-
-				gui = gui.parent;
-
-			}
-			return gui;
-
-		},
-		getSaveObject: function getSaveObject() {
-
-			var toReturn = this.load;
-			toReturn.closed = this.closed;
-			if ( this.__rememberedObjects.length > 0 ) {
-
-				toReturn.preset = this.preset;
-				if ( ! toReturn.remembered ) {
-
-					toReturn.remembered = {};
-
-				}
-				toReturn.remembered[ this.preset ] = getCurrentPreset( this );
-
-			}
-			toReturn.folders = {};
-			Common.each( this.__folders, function ( element, key ) {
-
-				toReturn.folders[ key ] = element.getSaveObject();
-
-			} );
-			return toReturn;
-
-		},
-		save: function save() {
-
-			if ( ! this.load.remembered ) {
-
-				this.load.remembered = {};
-
-			}
-			this.load.remembered[ this.preset ] = getCurrentPreset( this );
-			markPresetModified( this, false );
-			this.saveToLocalStorageIfPossible();
-
-		},
-		saveAs: function saveAs( presetName ) {
-
-			if ( ! this.load.remembered ) {
-
-				this.load.remembered = {};
-				this.load.remembered[ DEFAULT_DEFAULT_PRESET_NAME ] = getCurrentPreset( this, true );
-
-			}
-			this.load.remembered[ presetName ] = getCurrentPreset( this );
-			this.preset = presetName;
-			addPresetOption( this, presetName, true );
-			this.saveToLocalStorageIfPossible();
-
-		},
-		revert: function revert( gui ) {
-
-			Common.each( this.__controllers, function ( controller ) {
-
-				if ( ! this.getRoot().load.remembered ) {
-
-					controller.setValue( controller.initialValue );
-
-				} else {
-
-					recallSavedValue( gui || this.getRoot(), controller );
-
-				}
-				if ( controller.__onFinishChange ) {
-
-					controller.__onFinishChange.call( controller, controller.getValue() );
-
-				}
-
-			}, this );
-			Common.each( this.__folders, function ( folder ) {
-
-				folder.revert( folder );
-
-			} );
-			if ( ! gui ) {
-
-				markPresetModified( this.getRoot(), false );
-
-			}
-
-		},
-		listen: function listen( controller ) {
-
-			var init = this.__listening.length === 0;
-			this.__listening.push( controller );
-			if ( init ) {
-
-				updateDisplays( this.__listening );
-
-			}
-
-		},
-		updateDisplay: function updateDisplay() {
-
-			Common.each( this.__controllers, function ( controller ) {
-
-				controller.updateDisplay();
-
-			} );
-			Common.each( this.__folders, function ( folder ) {
-
-				folder.updateDisplay();
-
-			} );
-
-		}
-	} );
-function addRow( gui, newDom, liBefore ) {
-
-	var li = document.createElement( 'li' );
-	if ( newDom ) {
-
-		li.appendChild( newDom );
-
-	}
-	if ( liBefore ) {
-
-		gui.__ul.insertBefore( li, liBefore );
-
-	} else {
-
-		gui.__ul.appendChild( li );
-
-	}
-	gui.onResize();
-	return li;
-
-}
-function removeListeners( gui ) {
-
-	dom.unbind( window, 'resize', gui.__resizeHandler );
-	if ( gui.saveToLocalStorageIfPossible ) {
-
-		dom.unbind( window, 'unload', gui.saveToLocalStorageIfPossible );
-
-	}
-
-}
-function markPresetModified( gui, modified ) {
-
-	var opt = gui.__preset_select[ gui.__preset_select.selectedIndex ];
-	if ( modified ) {
-
-		opt.innerHTML = opt.value + '*';
-
-	} else {
-
-		opt.innerHTML = opt.value;
-
-	}
-
-}
-function augmentController( gui, li, controller ) {
-
-	controller.__li = li;
-	controller.__gui = gui;
-	Common.extend( controller, {
-		options: function options( _options ) {
-
-			if ( arguments.length > 1 ) {
-
-				var nextSibling = controller.__li.nextElementSibling;
-				controller.remove();
-				return _add( gui, controller.object, controller.property, {
-					before: nextSibling,
-					factoryArgs: [ Common.toArray( arguments ) ]
-				} );
-
-			}
-			if ( Common.isArray( _options ) || Common.isObject( _options ) ) {
-
-				var _nextSibling = controller.__li.nextElementSibling;
-				controller.remove();
-				return _add( gui, controller.object, controller.property, {
-					before: _nextSibling,
-					factoryArgs: [ _options ]
-				} );
-
-			}
-
-		},
-		name: function name( _name ) {
-
-			controller.__li.firstElementChild.firstElementChild.innerHTML = _name;
-			return controller;
-
-		},
-		listen: function listen() {
-
-			controller.__gui.listen( controller );
-			return controller;
-
-		},
-		remove: function remove() {
-
-			controller.__gui.remove( controller );
-			return controller;
-
-		}
-	} );
-	if ( controller instanceof NumberControllerSlider ) {
-
-		var box = new NumberControllerBox( controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step } );
-		Common.each( [ 'updateDisplay', 'onChange', 'onFinishChange', 'step', 'min', 'max' ], function ( method ) {
-
-			var pc = controller[ method ];
-			var pb = box[ method ];
-			controller[ method ] = box[ method ] = function () {
-
-				var args = Array.prototype.slice.call( arguments );
-				pb.apply( box, args );
-				return pc.apply( controller, args );
-
-			};
-
-		} );
-		dom.addClass( li, 'has-slider' );
-		controller.domElement.insertBefore( box.domElement, controller.domElement.firstElementChild );
-
-	} else if ( controller instanceof NumberControllerBox ) {
-
-		var r = function r( returned ) {
-
-			if ( Common.isNumber( controller.__min ) && Common.isNumber( controller.__max ) ) {
-
-				var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;
-				var wasListening = controller.__gui.__listening.indexOf( controller ) > - 1;
-				controller.remove();
-				var newController = _add( gui, controller.object, controller.property, {
-					before: controller.__li.nextElementSibling,
-					factoryArgs: [ controller.__min, controller.__max, controller.__step ]
-				} );
-				newController.name( oldName );
-				if ( wasListening ) newController.listen();
-				return newController;
-
-			}
-			return returned;
-
-		};
-		controller.min = Common.compose( r, controller.min );
-		controller.max = Common.compose( r, controller.max );
-
-	} else if ( controller instanceof BooleanController ) {
-
-		dom.bind( li, 'click', function () {
-
-			dom.fakeEvent( controller.__checkbox, 'click' );
-
-		} );
-		dom.bind( controller.__checkbox, 'click', function ( e ) {
-
-			e.stopPropagation();
-
-		} );
-
-	} else if ( controller instanceof FunctionController ) {
-
-		dom.bind( li, 'click', function () {
-
-			dom.fakeEvent( controller.__button, 'click' );
-
-		} );
-		dom.bind( li, 'mouseover', function () {
-
-			dom.addClass( controller.__button, 'hover' );
-
-		} );
-		dom.bind( li, 'mouseout', function () {
-
-			dom.removeClass( controller.__button, 'hover' );
-
-		} );
-
-	} else if ( controller instanceof ColorController ) {
-
-		dom.addClass( li, 'color' );
-		controller.updateDisplay = Common.compose( function ( val ) {
-
-			li.style.borderLeftColor = controller.__color.toString();
-			return val;
-
-		}, controller.updateDisplay );
-		controller.updateDisplay();
-
-	}
-	controller.setValue = Common.compose( function ( val ) {
-
-		if ( gui.getRoot().__preset_select && controller.isModified() ) {
-
-			markPresetModified( gui.getRoot(), true );
-
-		}
-		return val;
-
-	}, controller.setValue );
-
-}
-function recallSavedValue( gui, controller ) {
-
-	var root = gui.getRoot();
-	var matchedIndex = root.__rememberedObjects.indexOf( controller.object );
-	if ( matchedIndex !== - 1 ) {
-
-		var controllerMap = root.__rememberedObjectIndecesToControllers[ matchedIndex ];
-		if ( controllerMap === undefined ) {
-
-			controllerMap = {};
-			root.__rememberedObjectIndecesToControllers[ matchedIndex ] = controllerMap;
-
-		}
-		controllerMap[ controller.property ] = controller;
-		if ( root.load && root.load.remembered ) {
-
-			var presetMap = root.load.remembered;
-			var preset = void 0;
-			if ( presetMap[ gui.preset ] ) {
-
-				preset = presetMap[ gui.preset ];
-
-			} else if ( presetMap[ DEFAULT_DEFAULT_PRESET_NAME ] ) {
-
-				preset = presetMap[ DEFAULT_DEFAULT_PRESET_NAME ];
-
-			} else {
-
-				return;
-
-			}
-			if ( preset[ matchedIndex ] && preset[ matchedIndex ][ controller.property ] !== undefined ) {
-
-				var value = preset[ matchedIndex ][ controller.property ];
-				controller.initialValue = value;
-				controller.setValue( value );
-
-			}
-
-		}
-
-	}
-
-}
-function _add( gui, object, property, params ) {
-
-	if ( object[ property ] === undefined ) {
-
-		throw new Error( 'Object "' + object + '" has no property "' + property + '"' );
-
-	}
-	var controller = void 0;
-	if ( params.color ) {
-
-		controller = new ColorController( object, property );
-
-	} else {
-
-		var factoryArgs = [ object, property ].concat( params.factoryArgs );
-		controller = ControllerFactory.apply( gui, factoryArgs );
-
-	}
-	if ( params.before instanceof Controller ) {
-
-		params.before = params.before.__li;
-
-	}
-	recallSavedValue( gui, controller );
-	dom.addClass( controller.domElement, 'c' );
-	var name = document.createElement( 'span' );
-	dom.addClass( name, 'property-name' );
-	name.innerHTML = controller.property;
-	var container = document.createElement( 'div' );
-	container.appendChild( name );
-	container.appendChild( controller.domElement );
-	var li = addRow( gui, container, params.before );
-	dom.addClass( li, GUI.CLASS_CONTROLLER_ROW );
-	if ( controller instanceof ColorController ) {
-
-		dom.addClass( li, 'color' );
-
-	} else {
-
-		dom.addClass( li, _typeof( controller.getValue() ) );
-
-	}
-	augmentController( gui, li, controller );
-	gui.__controllers.push( controller );
-	return controller;
-
-}
-function getLocalStorageHash( gui, key ) {
-
-	return document.location.href + '.' + key;
-
-}
-function addPresetOption( gui, name, setSelected ) {
-
-	var opt = document.createElement( 'option' );
-	opt.innerHTML = name;
-	opt.value = name;
-	gui.__preset_select.appendChild( opt );
-	if ( setSelected ) {
-
-		gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;
-
-	}
-
-}
-function showHideExplain( gui, explain ) {
-
-	explain.style.display = gui.useLocalStorage ? 'block' : 'none';
-
-}
-function addSaveMenu( gui ) {
-
-	var div = gui.__save_row = document.createElement( 'li' );
-	dom.addClass( gui.domElement, 'has-save' );
-	gui.__ul.insertBefore( div, gui.__ul.firstChild );
-	dom.addClass( div, 'save-row' );
-	var gears = document.createElement( 'span' );
-	gears.innerHTML = '&nbsp;';
-	dom.addClass( gears, 'button gears' );
-	var button = document.createElement( 'span' );
-	button.innerHTML = 'Save';
-	dom.addClass( button, 'button' );
-	dom.addClass( button, 'save' );
-	var button2 = document.createElement( 'span' );
-	button2.innerHTML = 'New';
-	dom.addClass( button2, 'button' );
-	dom.addClass( button2, 'save-as' );
-	var button3 = document.createElement( 'span' );
-	button3.innerHTML = 'Revert';
-	dom.addClass( button3, 'button' );
-	dom.addClass( button3, 'revert' );
-	var select = gui.__preset_select = document.createElement( 'select' );
-	if ( gui.load && gui.load.remembered ) {
-
-		Common.each( gui.load.remembered, function ( value, key ) {
-
-			addPresetOption( gui, key, key === gui.preset );
-
-		} );
-
-	} else {
-
-		addPresetOption( gui, DEFAULT_DEFAULT_PRESET_NAME, false );
-
-	}
-	dom.bind( select, 'change', function () {
-
-		for ( var index = 0; index < gui.__preset_select.length; index ++ ) {
-
-			gui.__preset_select[ index ].innerHTML = gui.__preset_select[ index ].value;
-
-		}
-		gui.preset = this.value;
-
-	} );
-	div.appendChild( select );
-	div.appendChild( gears );
-	div.appendChild( button );
-	div.appendChild( button2 );
-	div.appendChild( button3 );
-	if ( SUPPORTS_LOCAL_STORAGE ) {
-
-		var explain = document.getElementById( 'dg-local-explain' );
-		var localStorageCheckBox = document.getElementById( 'dg-local-storage' );
-		var saveLocally = document.getElementById( 'dg-save-locally' );
-		saveLocally.style.display = 'block';
-		if ( localStorage.getItem( getLocalStorageHash( gui, 'isLocal' ) ) === 'true' ) {
-
-			localStorageCheckBox.setAttribute( 'checked', 'checked' );
-
-		}
-		showHideExplain( gui, explain );
-		dom.bind( localStorageCheckBox, 'change', function () {
-
-			gui.useLocalStorage = ! gui.useLocalStorage;
-			showHideExplain( gui, explain );
-
-		} );
-
-	}
-	var newConstructorTextArea = document.getElementById( 'dg-new-constructor' );
-	dom.bind( newConstructorTextArea, 'keydown', function ( e ) {
-
-		if ( e.metaKey && ( e.which === 67 || e.keyCode === 67 ) ) {
-
-			SAVE_DIALOGUE.hide();
-
-		}
-
-	} );
-	dom.bind( gears, 'click', function () {
-
-		newConstructorTextArea.innerHTML = JSON.stringify( gui.getSaveObject(), undefined, 2 );
-		SAVE_DIALOGUE.show();
-		newConstructorTextArea.focus();
-		newConstructorTextArea.select();
-
-	} );
-	dom.bind( button, 'click', function () {
-
-		gui.save();
-
-	} );
-	dom.bind( button2, 'click', function () {
-
-		var presetName = prompt( 'Enter a new preset name.' );
-		if ( presetName ) {
-
-			gui.saveAs( presetName );
-
-		}
-
-	} );
-	dom.bind( button3, 'click', function () {
-
-		gui.revert();
-
-	} );
-
-}
-function addResizeHandle( gui ) {
-
-	var pmouseX = void 0;
-	gui.__resize_handle = document.createElement( 'div' );
-	Common.extend( gui.__resize_handle.style, {
-		width: '6px',
-		marginLeft: '-3px',
-		height: '200px',
-		cursor: 'ew-resize',
-		position: 'absolute'
-	} );
-	function drag( e ) {
-
-		e.preventDefault();
-		gui.width += pmouseX - e.clientX;
-		gui.onResize();
-		pmouseX = e.clientX;
-		return false;
-
-	}
-	function dragStop() {
-
-		dom.removeClass( gui.__closeButton, GUI.CLASS_DRAG );
-		dom.unbind( window, 'mousemove', drag );
-		dom.unbind( window, 'mouseup', dragStop );
-
-	}
-	function dragStart( e ) {
-
-		e.preventDefault();
-		pmouseX = e.clientX;
-		dom.addClass( gui.__closeButton, GUI.CLASS_DRAG );
-		dom.bind( window, 'mousemove', drag );
-		dom.bind( window, 'mouseup', dragStop );
-		return false;
-
-	}
-	dom.bind( gui.__resize_handle, 'mousedown', dragStart );
-	dom.bind( gui.__closeButton, 'mousedown', dragStart );
-	gui.domElement.insertBefore( gui.__resize_handle, gui.domElement.firstElementChild );
-
-}
-function setWidth( gui, w ) {
-
-	gui.domElement.style.width = w + 'px';
-	if ( gui.__save_row && gui.autoPlace ) {
-
-		gui.__save_row.style.width = w + 'px';
-
-	}
-	if ( gui.__closeButton ) {
-
-		gui.__closeButton.style.width = w + 'px';
-
-	}
-
-}
-function getCurrentPreset( gui, useInitialValues ) {
-
-	var toReturn = {};
-	Common.each( gui.__rememberedObjects, function ( val, index ) {
-
-		var savedValues = {};
-		var controllerMap = gui.__rememberedObjectIndecesToControllers[ index ];
-		Common.each( controllerMap, function ( controller, property ) {
-
-			savedValues[ property ] = useInitialValues ? controller.initialValue : controller.getValue();
-
-		} );
-		toReturn[ index ] = savedValues;
-
-	} );
-	return toReturn;
-
-}
-function setPresetSelectIndex( gui ) {
-
-	for ( var index = 0; index < gui.__preset_select.length; index ++ ) {
-
-		if ( gui.__preset_select[ index ].value === gui.preset ) {
-
-			gui.__preset_select.selectedIndex = index;
-
-		}
-
-	}
-
-}
-function updateDisplays( controllerArray ) {
-
-	if ( controllerArray.length !== 0 ) {
-
-		requestAnimationFrame$1.call( window, function () {
-
-			updateDisplays( controllerArray );
-
-		} );
-
-	}
-	Common.each( controllerArray, function ( c ) {
-
-		c.updateDisplay();
-
-	} );
-
-}
-
-var color = {
-	Color: Color,
-	math: ColorMath,
-	interpret: interpret
-};
-var controllers = {
-	Controller: Controller,
-	BooleanController: BooleanController,
-	OptionController: OptionController,
-	StringController: StringController,
-	NumberController: NumberController,
-	NumberControllerBox: NumberControllerBox,
-	NumberControllerSlider: NumberControllerSlider,
-	FunctionController: FunctionController,
-	ColorController: ColorController
-};
-var dom$1 = { dom: dom };
-var gui = { GUI: GUI };
-var GUI$1 = GUI;
-var index = {
-	color: color,
-	controllers: controllers,
-	dom: dom$1,
-	gui: gui,
-	GUI: GUI$1
-};
-
-export { color, controllers, dom$1 as dom, gui, GUI$1 as GUI };
-export default index;
diff --git a/examples/jsm/libs/lil-gui.module.min.js b/examples/jsm/libs/lil-gui.module.min.js
new file mode 100644
index 00000000000000..f27672682266ba
--- /dev/null
+++ b/examples/jsm/libs/lil-gui.module.min.js
@@ -0,0 +1,8 @@
+/**
+ * lil-gui
+ * https://lil-gui.georgealways.com
+ * @version 0.11.0
+ * @author George Michael Brower
+ * @license MIT
+ */
+class t{constructor(e,i,s,r,n="div"){this.parent=e,this.object=i,this.property=s,this._disabled=!1,this.initialValue=this.getValue(),this.domElement=document.createElement("div"),this.domElement.classList.add("controller"),this.domElement.classList.add(r),this.$name=document.createElement("div"),this.$name.classList.add("name"),t.nextNameID=t.nextNameID||0,this.$name.id="lil-gui-name-"+ ++t.nextNameID,this.$widget=document.createElement(n),this.$widget.classList.add("widget"),this.$disable=this.$widget,this.domElement.appendChild(this.$name),this.domElement.appendChild(this.$widget),this.parent.children.push(this),this.parent.controllers.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(s)}name(t){return this._name=t,this.$name.innerHTML=t,this}onChange(t){return this._onChange=t,this}_callOnChange(){this.parent._callOnChange(this),void 0!==this._onChange&&this._onChange.call(this,this.getValue())}onFinishChange(t){return this.onChange(t)}reset(){return this.setValue(this.initialValue),this}enable(t=!0){return this.disable(!t)}disable(t=!0){return t===this._disabled||(this._disabled=t,this.domElement.classList.toggle("disabled",t),t?this.$disable.setAttribute("disabled","disabled"):this.$disable.removeAttribute("disabled")),this}options(t){const e=this.parent.add(this.object,this.property,t);return e.name(this._name),this.destroy(),e}min(t){return this}max(t){return this}step(t){return this}listen(t=!0){return this._listening=t,void 0!==this._listenCallbackID&&(cancelAnimationFrame(this._listenCallbackID),this._listenCallbackID=void 0),this._listening&&this._listenCallback(),this}_listenCallback(){this._listenCallbackID=requestAnimationFrame(this._listenCallback);const t=this.getValue();t===this._listenValuePrev&&Object(t)!==t||this.updateDisplay(),this._listenValuePrev=t}getValue(){return this.object[this.property]}setValue(t){return this.object[this.property]=t,this._callOnChange(),this.updateDisplay(),this}updateDisplay(){return this}load(t){this.setValue(t)}save(){return this.getValue()}destroy(){this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.controllers.splice(this.parent.controllers.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}}class e extends t{constructor(t,e,i){super(t,e,i,"boolean","label"),this.$input=document.createElement("input"),this.$input.setAttribute("type","checkbox"),this.$widget.appendChild(this.$input),this.$input.addEventListener("change",()=>{this.setValue(this.$input.checked)}),this.$disable=this.$input,this.updateDisplay()}updateDisplay(){return this.$input.checked=this.getValue(),this}}function i(t){let e,i;return(e=t.match(/(#|0x)?([a-f0-9]{6})/i))?i=e[2]:(e=t.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/))?i=parseInt(e[1]).toString(16).padStart(2,0)+parseInt(e[2]).toString(16).padStart(2,0)+parseInt(e[3]).toString(16).padStart(2,0):(e=t.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i))&&(i=e[1]+e[1]+e[2]+e[2]+e[3]+e[3]),!!i&&"#"+i}const s={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:i,toHexString:i},r={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,0)},n={isPrimitive:!1,match:Array.isArray,fromHexString(t,e,i=1){const s=r.fromHexString(t);e[0]=(s>>16&255)/255*i,e[1]=(s>>8&255)/255*i,e[2]=(255&s)/255*i},toHexString:([t,e,i],s=1)=>r.toHexString(t*(s=255/s)<<16^e*s<<8^i*s<<0)},l={isPrimitive:!1,match:t=>Object(t)===t,fromHexString(t,e,i=1){const s=r.fromHexString(t);e.r=(s>>16&255)/255*i,e.g=(s>>8&255)/255*i,e.b=(255&s)/255*i},toHexString:({r:t,g:e,b:i},s=1)=>r.toHexString(t*(s=255/s)<<16^e*s<<8^i*s<<0)},o=[s,r,n,l];class a extends t{constructor(t,e,s,r){var n;super(t,e,s,"color"),this.$input=document.createElement("input"),this.$input.setAttribute("type","color"),this.$input.setAttribute("tabindex",-1),this.$input.setAttribute("aria-labelledby",this.$name.id),this.$text=document.createElement("input"),this.$text.setAttribute("type","text"),this.$text.setAttribute("spellcheck","false"),this.$text.setAttribute("aria-labelledby",this.$name.id),this.$display=document.createElement("div"),this.$display.classList.add("display"),this.$display.appendChild(this.$input),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=(n=this.initialValue,o.find(t=>t.match(n))),this._rgbScale=r,this._initialValueHexString=this.save(),this._textFocused=!1;const l=()=>{this._setValueFromHexString(this.$input.value)};this.$input.addEventListener("change",l),this.$input.addEventListener("input",l),this.$input.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$input.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$text.addEventListener("input",()=>{const t=i(this.$text.value);t&&this._setValueFromHexString(t)}),this.$text.addEventListener("focus",()=>{this._textFocused=!0,this.$text.select()}),this.$text.addEventListener("blur",()=>{this._textFocused=!1,this.updateDisplay()}),this.$disable=this.$text,this.updateDisplay()}reset(){return this._setValueFromHexString(this._initialValueHexString),this}_setValueFromHexString(t){if(this._format.isPrimitive){const e=this._format.fromHexString(t);this.setValue(e)}else this._format.fromHexString(t,this.getValue(),this._rgbScale),this._callOnChange(),this.updateDisplay()}save(){return this._format.toHexString(this.getValue(),this._rgbScale)}load(t){this._setValueFromHexString(t)}updateDisplay(){return this.$input.value=this._format.toHexString(this.getValue(),this._rgbScale),this._textFocused||(this.$text.value=this.$input.value.substring(1)),this.$display.style.backgroundColor=this.$input.value,this}}class h extends t{constructor(t,e,i){super(t,e,i,"function"),this.$button=document.createElement("button"),this.$button.appendChild(this.$name),this.$widget.appendChild(this.$button),this.$button.addEventListener("click",t=>{t.preventDefault(),this.getValue().call(this.object)}),this.$button.addEventListener("touchstart",()=>{}),this.$disable=this.$button}}class d extends t{constructor(t,e,i,s,r,n){super(t,e,i,"number"),this._initInput(),this.min(s),this.max(r);const l=void 0!==n;this.step(l?n:this._getImplicitStep(),l),this.updateDisplay()}min(t){return this._min=t,this._onUpdateMinMax(),this}max(t){return this._max=t,this._onUpdateMinMax(),this}step(t,e=!0){return this._step=t,this._stepExplicit=e,this}updateDisplay(){const t=this.getValue();if(this._hasSlider){const e=(t-this._min)/(this._max-this._min);this.$fill.style.setProperty("width",100*e+"%")}return this._inputFocused||(this.$input.value=t),this}_initInput(){this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("inputmode","numeric"),this.$input.setAttribute("aria-labelledby",this.$name.id),this.$widget.appendChild(this.$input),this.$disable=this.$input;const t=t=>{const e=parseFloat(this.$input.value);isNaN(e)||(this._snapClampSetValue(e+t),this.$input.value=this.getValue())};this.$input.addEventListener("focus",()=>{this._inputFocused=!0}),this.$input.addEventListener("input",()=>{const t=parseFloat(this.$input.value);isNaN(t)||this.setValue(this._clamp(t))}),this.$input.addEventListener("blur",()=>{this._inputFocused=!1,this.updateDisplay()}),this.$input.addEventListener("keydown",e=>{"Enter"===e.code&&this.$input.blur(),"ArrowUp"===e.code&&(e.preventDefault(),t(this._step*this._arrowKeyMultiplier(e))),"ArrowDown"===e.code&&(e.preventDefault(),t(-1*this._step*this._arrowKeyMultiplier(e)))}),this.$input.addEventListener("wheel",e=>{this._inputFocused&&(e.preventDefault(),t(this._normalizeMouseWheel(e)*this._step))},{passive:!1})}_initSlider(){this._hasSlider=!0,this.$slider=document.createElement("div"),this.$slider.classList.add("slider"),this.$fill=document.createElement("div"),this.$fill.classList.add("fill"),this.$slider.appendChild(this.$fill),this.$widget.insertBefore(this.$slider,this.$input),this.domElement.classList.add("hasSlider");const t=t=>{const e=this.$slider.getBoundingClientRect();let i=(s=t,r=e.left,n=e.right,l=this._min,o=this._max,(s-r)/(n-r)*(o-l)+l);var s,r,n,l,o;this._snapClampSetValue(i)},e=e=>{t(e.clientX)},i=()=>{this._setActiveStyle(!1),window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",i)};this.$slider.addEventListener("mousedown",s=>{t(s.clientX),this._setActiveStyle(!0),window.addEventListener("mousemove",e),window.addEventListener("mouseup",i)});let s,r,n=!1;const l=e=>{if(n){const i=e.touches[0].clientX-s,a=e.touches[0].clientY-r;Math.abs(i)>Math.abs(a)?(e.preventDefault(),t(e.touches[0].clientX),this._setActiveStyle(!0),n=!1):(window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o))}else e.preventDefault(),t(e.touches[0].clientX)},o=()=>{this._setActiveStyle(!1),window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o)};this.$slider.addEventListener("touchstart",e=>{e.touches.length>1||(this._hasScrollBar?(s=e.touches[0].clientX,r=e.touches[0].clientY,n=!0):(e.preventDefault(),t(e.touches[0].clientX),this._setActiveStyle(!0),n=!1),window.addEventListener("touchmove",l,{passive:!1}),window.addEventListener("touchend",o))});this.$slider.addEventListener("wheel",t=>{if(Math.abs(t.deltaX)<Math.abs(t.deltaY)&&this._hasScrollBar)return;t.preventDefault();const e=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+e)},{passive:!1})}_setActiveStyle(t){this.$slider.classList.toggle("active",t),document.body.classList.toggle("lil-gui-slider-active",t)}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.step(this._getImplicitStep(),!1),this._initSlider(),this.updateDisplay())}_normalizeMouseWheel(t){let{deltaX:e,deltaY:i}=t;Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(e=0,i=-t.wheelDelta/120);return e+-i}_arrowKeyMultiplier(t){return this._stepExplicit?t.shiftKey?10:1:t.shiftKey?100:t.altKey?1:10}_snap(t){const e=Math.round(t/this._step)*this._step;return parseFloat(e.toPrecision(15))}_clamp(t){const e=this._hasMin?this._min:-1/0,i=this._hasMax?this._max:1/0;return Math.max(e,Math.min(i,t))}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}get _hasScrollBar(){const t=this.parent.root.$children;return t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}}class c extends t{constructor(t,e,i,s){super(t,e,i,"option"),this.$select=document.createElement("select"),this.$select.setAttribute("aria-labelledby",this.$name.id),this.$display=document.createElement("div"),this.$display.classList.add("display"),this._values=Array.isArray(s)?s:Object.values(s),this._names=Array.isArray(s)?s:Object.keys(s),this._names.forEach(t=>{const e=document.createElement("option");e.innerHTML=t,this.$select.appendChild(e)}),this.$select.addEventListener("change",()=>{this.setValue(this._values[this.$select.selectedIndex])}),this.$select.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$select.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$widget.appendChild(this.$select),this.$widget.appendChild(this.$display),this.$disable=this.$select,this.updateDisplay()}updateDisplay(){const t=this.getValue(),e=this._values.indexOf(t);return this.$select.selectedIndex=e,this.$display.innerHTML=-1===e?t:this._names[e],this}}class u extends t{constructor(t,e,i){super(t,e,i,"string"),this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("aria-labelledby",this.$name.id),this.$input.addEventListener("input",()=>{this.setValue(this.$input.value)}),this.$input.addEventListener("keydown",t=>{"Enter"===t.code&&this.$input.blur()}),this.$widget.appendChild(this.$input),this.$disable=this.$input,this.updateDisplay()}updateDisplay(){return this.$input.value=this.getValue(),this}}let p=!1;class g{constructor({parent:t,autoPlace:e=void 0===t,touchStyles:i=!0,container:s,injectStyles:r=!0,title:n="Controls",width:l}={}){if(this.parent=t,this.root=t?t.root:this,this.children=[],this.controllers=[],this.folders=[],this._closed=!1,this.domElement=document.createElement("div"),this.domElement.classList.add("lil-gui"),this.$title=document.createElement("div"),this.$title.classList.add("title"),this.$title.setAttribute("role","button"),this.$title.setAttribute("aria-expanded",!0),this.$title.setAttribute("tabindex",0),this.$title.addEventListener("click",()=>this.openAnimated(this._closed)),this.$title.addEventListener("keydown",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.$title.click())}),this.$title.addEventListener("touchstart",()=>{}),this.$children=document.createElement("div"),this.$children.classList.add("children"),this.domElement.appendChild(this.$title),this.domElement.appendChild(this.$children),this.title(n),this.parent)return this.parent.children.push(this),this.parent.folders.push(this),void this.parent.$children.appendChild(this.domElement);this.domElement.classList.add("root"),!p&&r&&(!function(t){const e=document.createElement("style");e.innerHTML=t;const i=document.querySelector("head link[rel=stylesheet], head style");i?document.head.insertBefore(e,i):document.head.appendChild(e)}('.lil-gui{font-family:var(--font-family);font-size:var(--font-size);line-height:1;font-weight:normal;font-style:normal;text-align:left;background-color:var(--background-color);color:var(--text-color);user-select:none;-webkit-user-select:none;touch-action:manipulation;--background-color:#1f1f1f;--text-color:#ebebeb;--title-background-color:#111;--title-text-color:#ebebeb;--widget-color:#424242;--hover-color:#4f4f4f;--focus-color:#595959;--number-color:#2cc9ff;--string-color:#a2db3c;--font-size:11px;--input-font-size:11px;--font-family:-apple-system,BlinkMacSystemFont,"Lucida Grande","Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-mono:Menlo,Monaco,Consolas,"Droid Sans Mono",monospace,"Droid Sans Fallback";--padding:4px;--spacing:4px;--widget-height:20px;--name-width:45%;--slider-knob-width:2px;--slider-input-width:27%;--color-input-width:27%;--slider-input-min-width:45px;--color-input-min-width:45px;--folder-indent:7px;--widget-padding:0 0 0 3px;--widget-border-radius:2px;--checkbox-size:calc(.75*var(--widget-height));--scrollbar-width: 5px}.lil-gui,.lil-gui *{box-sizing:border-box;margin:0}.lil-gui.root{width:var(--width, 245px);display:flex;flex-direction:column}.lil-gui.root>.title{background:var(--title-background-color);color:var(--title-text-color)}.lil-gui.root>.children{overflow:auto}.lil-gui.root>.children::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);background:var(--background-color)}.lil-gui.root>.children::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-width);background:var(--focus-color)}.lil-gui .lil-gui{--background-color:inherit;--text-color:inherit;--title-background-color:inherit;--title-text-color:inherit;--widget-color:inherit;--hover-color:inherit;--focus-color:inherit;--number-color:inherit;--string-color:inherit;--font-size:inherit;--input-font-size:inherit;--font-family:inherit;--font-family-mono:inherit;--padding:inherit;--spacing:inherit;--widget-height:inherit;--name-width:inherit;--slider-knob-width:inherit;--slider-input-width:inherit;--color-input-width:inherit;--slider-input-min-width:inherit;--color-input-min-width:inherit;--folder-indent:inherit;--widget-padding:inherit;--widget-border-radius:inherit;--checkbox-size:inherit}@media(pointer: coarse){.lil-gui.allow-touch-styles{--widget-height: 28px;--padding: 6px;--spacing: 6px;--font-size: 13px;--input-font-size: 16px;--folder-indent: 10px;--widget-padding: 0 0 0 3px;--scrollbar-width: 7px;--slider-input-min-width: 50px;--color-input-min-width: 65px}}.lil-gui.force-touch-styles{--widget-height: 28px;--padding: 6px;--spacing: 6px;--font-size: 13px;--input-font-size: 16px;--folder-indent: 10px;--widget-padding: 0 0 0 3px;--scrollbar-width: 7px;--slider-input-min-width: 50px;--color-input-min-width: 65px}.lil-gui.autoPlace{max-height:100%;position:fixed;top:0;right:15px;z-index:1001}.lil-gui .controller{display:flex;align-items:center;padding:0 var(--padding);margin:var(--spacing) 0}.lil-gui .controller.disabled{opacity:.5}.lil-gui .controller.disabled,.lil-gui .controller.disabled *{pointer-events:none !important}.lil-gui .controller .name{min-width:var(--name-width);flex-shrink:0;white-space:pre;padding-right:var(--spacing);line-height:var(--widget-height)}.lil-gui .controller .widget{position:relative;display:flex;align-items:center;width:100%;min-height:var(--widget-height)}.lil-gui .controller.function .name{line-height:unset;padding:0}.lil-gui .controller.string input{color:var(--string-color)}.lil-gui .controller.boolean .widget{cursor:pointer}.lil-gui .controller.color .display{width:100%;height:var(--widget-height);border-radius:var(--widget-border-radius);position:relative}@media(hover: hover){.lil-gui .controller.color .display:hover:before{content:" ";display:block;position:absolute;border-radius:var(--widget-border-radius);border:1px solid #fff9;left:0;right:0;top:0;bottom:0}}.lil-gui .controller.color input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer}.lil-gui .controller.color input[type=text]{margin-left:var(--spacing);font-family:var(--font-family-mono);min-width:var(--color-input-min-width);width:var(--color-input-width);flex-shrink:0}.lil-gui .controller.option select{opacity:0;position:absolute;width:100%;max-width:100%}.lil-gui .controller.option .display{position:relative;pointer-events:none;border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height);max-width:100%;overflow:hidden;word-break:break-all;padding-left:.55em;padding-right:1.75em;background:var(--widget-color)}@media(hover: hover){.lil-gui .controller.option .display.focus{background:var(--focus-color)}}.lil-gui .controller.option .display.active{background:var(--focus-color)}.lil-gui .controller.option .display:after{font-family:"lil-gui";content:"↕";position:absolute;top:0;right:0;bottom:0;padding-right:.375em}.lil-gui .controller.option .widget,.lil-gui .controller.option select{cursor:pointer}@media(hover: hover){.lil-gui .controller.option .widget:hover .display{background:var(--hover-color)}}.lil-gui .controller.number input{color:var(--number-color)}.lil-gui .controller.number.hasSlider input{margin-left:var(--spacing);width:var(--slider-input-width);min-width:var(--slider-input-min-width);flex-shrink:0}.lil-gui .controller.number .slider{width:100%;height:var(--widget-height);background-color:var(--widget-color);border-radius:var(--widget-border-radius);padding-right:var(--slider-knob-width);overflow:hidden;cursor:ew-resize;touch-action:pan-y}@media(hover: hover){.lil-gui .controller.number .slider:hover{background-color:var(--hover-color)}}.lil-gui .controller.number .slider.active{background-color:var(--focus-color)}.lil-gui .controller.number .slider.active .fill{opacity:.95}.lil-gui .controller.number .fill{height:100%;border-right:var(--slider-knob-width) solid var(--number-color);box-sizing:content-box}.lil-gui-slider-active .lil-gui{--hover-color: var(--widget-color)}.lil-gui-slider-active *{cursor:ew-resize !important}.lil-gui .title{--title-height: calc(var(--widget-height) + var(--spacing) * 1.25);height:var(--title-height);line-height:calc(var(--title-height) - 4px);font-weight:600;padding:0 var(--padding);-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none;text-decoration-skip:objects}.lil-gui .title:before{font-family:"lil-gui";content:"▾";padding-right:2px;display:inline-block}.lil-gui .title:active{background:var(--title-background-color);opacity:.75}@media(hover: hover){.lil-gui .title:hover{background:var(--title-background-color);opacity:.85}.lil-gui .title:focus{text-decoration:underline var(--focus-color)}}.lil-gui.root>.title:focus{text-decoration:none !important}.lil-gui.closed>.title:before{content:"▸"}.lil-gui.closed>.children{transform:translateY(-7px);opacity:0}.lil-gui.closed:not(.transition)>.children{display:none}.lil-gui.transition>.children{transition-duration:300ms;transition-property:height,opacity,transform;transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;pointer-events:none}.lil-gui .children:empty:before{content:"Empty";padding:0 var(--padding);margin:var(--spacing) 0;display:block;height:var(--widget-height);font-style:italic;line-height:var(--widget-height);opacity:.5}.lil-gui.root>.children>.lil-gui>.title{border:0 solid var(--widget-color);border-width:1px 0;transition:border-color 300ms}.lil-gui.root>.children>.lil-gui.closed>.title{border-bottom-color:transparent}.lil-gui+.controller{border-top:1px solid var(--widget-color);margin-top:0;padding-top:var(--spacing)}.lil-gui .lil-gui .lil-gui>.title{border:none}.lil-gui .lil-gui .lil-gui>.children{border:none;margin-left:var(--folder-indent);border-left:2px solid var(--widget-color)}.lil-gui .lil-gui .controller{border:none}.lil-gui input{-webkit-tap-highlight-color:transparent;border:0;outline:none;font-family:var(--font-family);font-size:var(--input-font-size);border-radius:var(--widget-border-radius);height:var(--widget-height);background:var(--widget-color);color:var(--text-color);width:100%}@media(hover: hover){.lil-gui input:hover{background:var(--hover-color)}.lil-gui input:active{background:var(--focus-color)}}.lil-gui input[type=text]{padding:var(--widget-padding)}.lil-gui input[type=text]:focus{background:var(--focus-color)}.lil-gui input[type=checkbox]{appearance:none;-webkit-appearance:none;height:var(--checkbox-size);width:var(--checkbox-size);border-radius:var(--widget-border-radius);text-align:center}.lil-gui input[type=checkbox]:checked:before{font-family:"lil-gui";content:"✓";font-size:var(--checkbox-size);line-height:var(--checkbox-size)}@media(hover: hover){.lil-gui input[type=checkbox]:focus{box-shadow:inset 0 0 0 1px var(--focus-color)}}.lil-gui button{-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;font-family:var(--font-family);font-size:var(--font-size);color:var(--text-color);width:100%;height:var(--widget-height);text-transform:none;background:var(--widget-color);border-radius:var(--widget-border-radius);border:1px solid var(--widget-color);text-align:center;line-height:calc(var(--widget-height)*.725)}@media(hover: hover){.lil-gui button:hover{background:var(--hover-color);border-color:var(--hover-color)}.lil-gui button:focus{border-color:var(--focus-color)}}.lil-gui button:active{background:var(--focus-color)}@font-face{font-family:"lil-gui";src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUsAAsAAAAACJwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAH4AAADAImwmYE9TLzIAAAGIAAAAPwAAAGBKqH5SY21hcAAAAcgAAAD0AAACrukyyJBnbHlmAAACvAAAAF8AAACEIZ5WI2hlYWQAAAMcAAAAJwAAADZfcj23aGhlYQAAA0QAAAAYAAAAJAC5AHhobXR4AAADXAAAABAAAABMAZAAAGxvY2EAAANsAAAAFAAAACgCEgIybWF4cAAAA4AAAAAeAAAAIAEfABJuYW1lAAADoAAAASIAAAIK9SUU/XBvc3QAAATEAAAAZgAAAJCTcMc2eJxVjbEOgjAURU+hFRBK1dGRL+ALnAiToyMLEzFpnPz/eAshwSa97517c/MwwJmeB9kwPl+0cf5+uGPZXsqPu4nvZabcSZldZ6kfyWnomFY/eScKqZNWupKJO6kXN3K9uCVoL7iInPr1X5baXs3tjuMqCtzEuagm/AAlzQgPAAB4nGNgYRBlnMDAysDAYM/gBiT5oLQBAwuDJAMDEwMrMwNWEJDmmsJwgCFeXZghBcjlZMgFCzOiKOIFAB71Bb8AeJy1kjFuwkAQRZ+DwRAwBtNQRUGKQ8OdKCAWUhAgKLhIuAsVSpWz5Bbkj3dEgYiUIszqWdpZe+Z7/wB1oCYmIoboiwiLT2WjKl/jscrHfGg/pKdMkyklC5Zs2LEfHYpjcRoPzme9MWWmk3dWbK9ObkWkikOetJ554fWyoEsmdSlt+uR0pCJR34b6t/TVg1SY3sYvdf8vuiKrpyaDXDISiegp17p7579Gp3p++y7HPAiY9pmTibljrr85qSidtlg4+l25GLCaS8e6rRxNBmsnERunKbaOObRz7N72ju5vdAjYpBXHgJylOAVsMseDAPEP8LYoUHicY2BiAAEfhjAGJgZWBgZ7RnFRdnVJELCRlBSRlATJMoLV2DK4glSYs6ubq5vbKrJLSbGrgEmovDuDJVhe3VzcXFwNLCOILB/C4IuQ1xTn5FPilBTj5FPmBAB76woyAHicY2BkYGAA4sklsQ/j+W2+MnAzpDBgAyEMYUCSg4EJxAEAvVwFCgB4nGNgZGBgSGFggJMhDIwMqEAYAByHATJ4nGNgAIIUNEwmAABl3AGReJxjYAACIQYlBiMGJ3wQAEcQBEV4nGNgZGBgEGZgY2BiAAEQyQWEDAz/wXwGAAsPATIAAHicXdBNSsNAHAXwl35iA0UQXYnMShfS9GPZA7T7LgIu03SSpkwzYTIt1BN4Ak/gKTyAeCxfw39jZkjymzcvAwmAW/wgwHUEGDb36+jQQ3GXGot79L24jxCP4gHzF/EIr4jEIe7wxhOC3g2TMYy4Q7+Lu/SHuEd/ivt4wJd4wPxbPEKMX3GI5+DJFGaSn4qNzk8mcbKSR6xdXdhSzaOZJGtdapd4vVPbi6rP+cL7TGXOHtXKll4bY1Xl7EGnPtp7Xy2n00zyKLVHfkHBa4IcJ2oD3cgggWvt/V/FbDrUlEUJhTn/0azVWbNTNr0Ens8de1tceK9xZmfB1CPjOmPH4kitmvOubcNpmVTN3oFJyjzCvnmrwhJTzqzVj9jiSX911FjeAAB4nG3HMRKCMBBA0f0giiKi4DU8k0V2GWbIZDOh4PoWWvq6J5V8If9NVNQcaDhyouXMhY4rPTcG7jwYmXhKq8Wz+p762aNaeYXom2n3m2dLTVgsrCgFJ7OTmIkYbwIbC6vIB7WmFfAAAA==") format("woff")}'),p=!0),s?s.appendChild(this.domElement):e&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement)),i&&this.domElement.classList.add("allow-touch-styles"),l&&this.domElement.style.setProperty("--width",l+"px")}add(t,i,s,r,n){if(Object(s)===s)return new c(this,t,i,s);const l=t[i];switch(typeof l){case"number":return new d(this,t,i,s,r,n);case"boolean":return new e(this,t,i);case"string":return new u(this,t,i);case"function":return new h(this,t,i)}console.error(`Failed to add controller for "${i}"`,l,t)}addColor(t,e,i=1){return new a(this,t,e,i)}addFolder(t){return new g({parent:this,title:t})}load(t,e=!0){if(!("controllers"in t))throw new Error('Invalid load object. Should contain a "controllers" key.');return this.controllers.forEach(e=>{e instanceof h||e._name in t.controllers&&e.load(t.controllers[e._name])}),e&&t.folders&&this.folders.forEach(e=>{e._title in t.folders&&e.load(t.folders[e._title])}),this}save(t=!0){const e={controllers:{},folders:{}};return this.controllers.forEach(t=>{if(!(t instanceof h)){if(t._name in e.controllers)throw new Error(`Cannot save GUI with duplicate property "${t._name}"`);e.controllers[t._name]=t.save()}}),t&&this.folders.forEach(t=>{if(t._title in e.folders)throw new Error(`Cannot save GUI with duplicate folder "${t._title}"`);e.folders[t._title]=t.save()}),e}open(t=!0){return this._closed=!t,this.$title.setAttribute("aria-expanded",!this._closed),this.domElement.classList.toggle("closed",this._closed),this}close(){return this.open(!1)}openAnimated(t=!0){return this._closed=!t,this.$title.setAttribute("aria-expanded",!this._closed),requestAnimationFrame(()=>{const e=this.$children.clientHeight;this.$children.style.height=e+"px",this.domElement.classList.add("transition");const i=t=>{t.target===this.$children&&(this.$children.style.height="",this.domElement.classList.remove("transition"),this.$children.removeEventListener("transitionend",i))};this.$children.addEventListener("transitionend",i);const s=t?this.$children.scrollHeight:0;this.domElement.classList.toggle("closed",!t),requestAnimationFrame(()=>{this.$children.style.height=s+"px"})}),this}title(t){return this._title=t,this.$title.innerHTML=t,this}reset(t=!0){return(t?this.controllersRecursive():this.controllers).forEach(t=>t.reset()),this}onChange(t){return this._onChange=t,this}_callOnChange(t){this.parent&&this.parent._callOnChange(t),void 0!==this._onChange&&this._onChange.call(this,{object:t.object,property:t.property,value:t.getValue(),controller:t})}destroy(){this.parent&&(this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.folders.splice(this.parent.folders.indexOf(this),1)),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach(t=>t.destroy()),this._onResize&&window.removeEventListener("resize",this._onResize)}controllersRecursive(){let t=Array.from(this.controllers);return this.folders.forEach(e=>{t=t.concat(e.controllersRecursive())}),t}foldersRecursive(){let t=Array.from(this.folders);return this.folders.forEach(e=>{t=t.concat(e.foldersRecursive())}),t}}export default g;export{e as BooleanController,a as ColorController,t as Controller,h as FunctionController,g as GUI,d as NumberController,c as OptionController,u as StringController};
diff --git a/examples/main.css b/examples/main.css
index b69f69a1d7419b..d496122b4cfb54 100644
--- a/examples/main.css
+++ b/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;
diff --git a/examples/misc_controls_arcball.html b/examples/misc_controls_arcball.html
index d5af54927991d7..96c3caa28e5942 100644
--- a/examples/misc_controls_arcball.html
+++ b/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';
 
diff --git a/examples/misc_controls_map.html b/examples/misc_controls_map.html
index d6b90184276f17..7dc5573125049f 100644
--- a/examples/misc_controls_map.html
+++ b/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';
 
diff --git a/examples/misc_controls_trackball.html b/examples/misc_controls_trackball.html
index bdff530c4f459c..20a26f6a1b8a5a 100644
--- a/examples/misc_controls_trackball.html
+++ b/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';
 
diff --git a/examples/misc_exporter_collada.html b/examples/misc_exporter_collada.html
index 5b741138aee88f..add9b6de118767 100644
--- a/examples/misc_exporter_collada.html
+++ b/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';
diff --git a/examples/webaudio_sandbox.html b/examples/webaudio_sandbox.html
index 3404287fa9036d..ca4f868d8397d0 100644
--- a/examples/webaudio_sandbox.html
+++ b/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';
 
diff --git a/examples/webgl2_materials_texture3d.html b/examples/webgl2_materials_texture3d.html
index 6398b54ab2b443..ffc51f1845f79f 100644
--- a/examples/webgl2_materials_texture3d.html
+++ b/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';
diff --git a/examples/webgl2_materials_texture3d_partialupdate.html b/examples/webgl2_materials_texture3d_partialupdate.html
index db841419f16290..00d9a8c80c0f6d 100644
--- a/examples/webgl2_materials_texture3d_partialupdate.html
+++ b/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 ) {
diff --git a/examples/webgl2_rendertarget_texture2darray.html b/examples/webgl2_rendertarget_texture2darray.html
index f2675a3c6b4a67..5f9e1ed8092484 100644
--- a/examples/webgl2_rendertarget_texture2darray.html
+++ b/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';
 
diff --git a/examples/webgl2_volume_cloud.html b/examples/webgl2_volume_cloud.html
index c01c9b29567866..1ed7b26b4f1e46 100644
--- a/examples/webgl2_volume_cloud.html
+++ b/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 ) {
diff --git a/examples/webgl2_volume_perlin.html b/examples/webgl2_volume_perlin.html
index 1f3f0b7b1414a5..2b8d2193271851 100644
--- a/examples/webgl2_volume_perlin.html
+++ b/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 ) {
diff --git a/examples/webgl_animation_skinning_additive_blending.html b/examples/webgl_animation_skinning_additive_blending.html
index b6633c297a2408..4348e474b9e3e2 100644
--- a/examples/webgl_animation_skinning_additive_blending.html
+++ b/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' );
 
 					};
 
diff --git a/examples/webgl_animation_skinning_blending.html b/examples/webgl_animation_skinning_blending.html
index 383a0a2095cbe3..130d425635a2cd 100644
--- a/examples/webgl_animation_skinning_blending.html
+++ b/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();
 
 				}
 
diff --git a/examples/webgl_animation_skinning_morph.html b/examples/webgl_animation_skinning_morph.html
index 7a6b5bc7c8fb8a..ec1e8f9685c697 100644
--- a/examples/webgl_animation_skinning_morph.html
+++ b/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';
 
diff --git a/examples/webgl_buffergeometry_compression.html b/examples/webgl_buffergeometry_compression.html
index 94cf4c9bee9ec9..9e389dba56beaa 100644
--- a/examples/webgl_buffergeometry_compression.html
+++ b/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;
 
diff --git a/examples/webgl_buffergeometry_drawrange.html b/examples/webgl_buffergeometry_drawrange.html
index 0d1f4bd092cdf7..99f1e5368a6f23 100644
--- a/examples/webgl_buffergeometry_drawrange.html
+++ b/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';
 
diff --git a/examples/webgl_buffergeometry_indexed.html b/examples/webgl_buffergeometry_indexed.html
index fae8c6aeaec200..576887cd1369da 100644
--- a/examples/webgl_buffergeometry_indexed.html
+++ b/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;
 
diff --git a/examples/webgl_buffergeometry_instancing.html b/examples/webgl_buffergeometry_instancing.html
index ab810a0fe886e0..f7a4f945d20974 100644
--- a/examples/webgl_buffergeometry_instancing.html
+++ b/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;
 
diff --git a/examples/webgl_camera_cinematic.html b/examples/webgl_camera_cinematic.html
index b5914f9b7919fd..89e40e626324f7 100644
--- a/examples/webgl_camera_cinematic.html
+++ b/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';
 
diff --git a/examples/webgl_clipping.html b/examples/webgl_clipping.html
index 61608a3727873c..08dd98bec1e6aa 100644
--- a/examples/webgl_clipping.html
+++ b/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';
 
diff --git a/examples/webgl_clipping_advanced.html b/examples/webgl_clipping_advanced.html
index 1e8413c5731f5c..c3ea5b98fdfa68 100644
--- a/examples/webgl_clipping_advanced.html
+++ b/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';
 
diff --git a/examples/webgl_clipping_intersection.html b/examples/webgl_clipping_intersection.html
index 4c3e49a083fd19..7a8e45aa05f48c 100644
--- a/examples/webgl_clipping_intersection.html
+++ b/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';
 
diff --git a/examples/webgl_clipping_stencil.html b/examples/webgl_clipping_stencil.html
index 17aad958fdecf1..4462f0f3ef0a98 100644
--- a/examples/webgl_clipping_stencil.html
+++ b/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;
diff --git a/examples/webgl_decals.html b/examples/webgl_decals.html
index 59e8d72483d3ee..78eda6c80abcc7 100644
--- a/examples/webgl_decals.html
+++ b/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';
diff --git a/examples/webgl_depth_texture.html b/examples/webgl_depth_texture.html
index 52905fbc83c16a..f682fbcec96470 100644
--- a/examples/webgl_depth_texture.html
+++ b/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;
diff --git a/examples/webgl_geometry_colors_lookuptable.html b/examples/webgl_geometry_colors_lookuptable.html
index 73590d39ac945d..6a2f92c464ffec 100644
--- a/examples/webgl_geometry_colors_lookuptable.html
+++ b/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';
diff --git a/examples/webgl_geometry_extrude_splines.html b/examples/webgl_geometry_extrude_splines.html
index 93025d4bdc9ff4..372562ddd88f76 100644
--- a/examples/webgl_geometry_extrude_splines.html
+++ b/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 () {
diff --git a/examples/webgl_geometry_spline_editor.html b/examples/webgl_geometry_spline_editor.html
index 266fe6aa26fce4..8621a141f0c135 100644
--- a/examples/webgl_geometry_spline_editor.html
+++ b/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';
diff --git a/examples/webgl_geometry_teapot.html b/examples/webgl_geometry_teapot.html
index d28375cd9ecf4a..4013f90bc9b883 100644
--- a/examples/webgl_geometry_teapot.html
+++ b/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';
diff --git a/examples/webgl_gpgpu_birds.html b/examples/webgl_gpgpu_birds.html
index 7ef2a1f5b34e80..4e50e09175f91e 100644
--- a/examples/webgl_gpgpu_birds.html
+++ b/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';
 
diff --git a/examples/webgl_gpgpu_birds_gltf.html b/examples/webgl_gpgpu_birds_gltf.html
index f242c2d79cb719..4062293e0d3e84 100644
--- a/examples/webgl_gpgpu_birds_gltf.html
+++ b/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';
 
diff --git a/examples/webgl_gpgpu_protoplanet.html b/examples/webgl_gpgpu_protoplanet.html
index 633df5dfdb4106..d6ffea765a7c66 100644
--- a/examples/webgl_gpgpu_protoplanet.html
+++ b/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' );
 
diff --git a/examples/webgl_gpgpu_water.html b/examples/webgl_gpgpu_water.html
index b0ab1ce2b611f9..e1b80fca3d2ed5 100644
--- a/examples/webgl_gpgpu_water.html
+++ b/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';
diff --git a/examples/webgl_instancing_dynamic.html b/examples/webgl_instancing_dynamic.html
index e2c22e20dc4fff..d6865cd172a5d6 100644
--- a/examples/webgl_instancing_dynamic.html
+++ b/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;
 
diff --git a/examples/webgl_instancing_performance.html b/examples/webgl_instancing_performance.html
index f921a405f664a9..a4e10ead552b86 100644
--- a/examples/webgl_instancing_performance.html
+++ b/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
diff --git a/examples/webgl_instancing_raycast.html b/examples/webgl_instancing_raycast.html
index 13a3d87f9b906a..fc07f972c0cac2 100644
--- a/examples/webgl_instancing_raycast.html
+++ b/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;
diff --git a/examples/webgl_instancing_scatter.html b/examples/webgl_instancing_scatter.html
index 2d2724b81126c7..c51b8b5222cea1 100644
--- a/examples/webgl_instancing_scatter.html
+++ b/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;
 
diff --git a/examples/webgl_layers.html b/examples/webgl_layers.html
index 1ba189a4950b27..3c1bd8e668063e 100644
--- a/examples/webgl_layers.html
+++ b/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;
diff --git a/examples/webgl_lightningstrike.html b/examples/webgl_lightningstrike.html
index ea866a0b1c37de..4691078fe47757 100644
--- a/examples/webgl_lightningstrike.html
+++ b/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" );
 
diff --git a/examples/webgl_lightprobe.html b/examples/webgl_lightprobe.html
index 723fea4d23b188..68baf8e18ccbdd 100644
--- a/examples/webgl_lightprobe.html
+++ b/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 );
 
diff --git a/examples/webgl_lights_physical.html b/examples/webgl_lights_physical.html
index 132b8919f9c0ec..f3f918a71efa98 100644
--- a/examples/webgl_lights_physical.html
+++ b/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';
 
diff --git a/examples/webgl_lights_spotlight.html b/examples/webgl_lights_spotlight.html
index bd4ec58ae97e21..65f6e5e4f7ea7e 100644
--- a/examples/webgl_lights_spotlight.html
+++ b/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';
 
diff --git a/examples/webgl_lines_fat.html b/examples/webgl_lines_fat.html
index acc4bd48bcba8a..ed84a795e51836 100644
--- a/examples/webgl_lines_fat.html
+++ b/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';
diff --git a/examples/webgl_lines_fat_wireframe.html b/examples/webgl_lines_fat_wireframe.html
index e7b149ecb45cb2..2775ef4832e3bc 100644
--- a/examples/webgl_lines_fat_wireframe.html
+++ b/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';
diff --git a/examples/webgl_loader_3dm.html b/examples/webgl_loader_3dm.html
index c069973e8c228b..6d7406a89f6664 100644
--- a/examples/webgl_loader_3dm.html
+++ b/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;
 
diff --git a/examples/webgl_loader_3mf.html b/examples/webgl_loader_3mf.html
index 056ebc2dc38155..394d764f514285 100644
--- a/examples/webgl_loader_3mf.html
+++ b/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 );
diff --git a/examples/webgl_loader_gltf_sheen.html b/examples/webgl_loader_gltf_sheen.html
index 27d807d7a19ecd..a799697bda6594 100644
--- a/examples/webgl_loader_gltf_sheen.html
+++ b/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;
 
diff --git a/examples/webgl_loader_gltf_variants.html b/examples/webgl_loader_gltf_variants.html
index d2ce798dda403b..9e06a9de7f08f9 100644
--- a/examples/webgl_loader_gltf_variants.html
+++ b/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';
diff --git a/examples/webgl_loader_ldraw.html b/examples/webgl_loader_ldraw.html
index df70516bc87c02..0d1645ababe201 100644
--- a/examples/webgl_loader_ldraw.html
+++ b/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';
diff --git a/examples/webgl_loader_md2.html b/examples/webgl_loader_md2.html
index 4192b751a815eb..26d38c3d462666 100644
--- a/examples/webgl_loader_md2.html
+++ b/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';
diff --git a/examples/webgl_loader_mmd.html b/examples/webgl_loader_mmd.html
index 39f7ce9fcfc073..1a22b11330fd36 100644
--- a/examples/webgl_loader_mmd.html
+++ b/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';
diff --git a/examples/webgl_loader_mmd_pose.html b/examples/webgl_loader_mmd_pose.html
index de6ad160f6a634..0c76eb011be09a 100644
--- a/examples/webgl_loader_mmd_pose.html
+++ b/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';
diff --git a/examples/webgl_loader_nodes.html b/examples/webgl_loader_nodes.html
index f246bb32ef5c07..d2b0f4858e1698 100644
--- a/examples/webgl_loader_nodes.html
+++ b/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';
diff --git a/examples/webgl_loader_nrrd.html b/examples/webgl_loader_nrrd.html
index 69d4f163386b62..09f4e0692a35ff 100644
--- a/examples/webgl_loader_nrrd.html
+++ b/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';
diff --git a/examples/webgl_loader_svg.html b/examples/webgl_loader_svg.html
index 5905309bc6966d..9a637b89e06261 100644
--- a/examples/webgl_loader_svg.html
+++ b/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', {
 
diff --git a/examples/webgl_loader_texture_exr.html b/examples/webgl_loader_texture_exr.html
index 2373cabb807fe5..b06c9362e59408 100644
--- a/examples/webgl_loader_texture_exr.html
+++ b/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';
 
diff --git a/examples/webgl_loader_texture_hdr.html b/examples/webgl_loader_texture_hdr.html
index cf23da0faab1cb..914336ddf50a91 100644
--- a/examples/webgl_loader_texture_hdr.html
+++ b/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';
 
diff --git a/examples/webgl_loader_texture_rgbm.html b/examples/webgl_loader_texture_rgbm.html
index 27e3f7df896413..95bc961c8caef0 100644
--- a/examples/webgl_loader_texture_rgbm.html
+++ b/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';
 
diff --git a/examples/webgl_loader_vrml.html b/examples/webgl_loader_vrml.html
index 29867117f6115a..af78a01edb98a3 100644
--- a/examples/webgl_loader_vrml.html
+++ b/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 ) {
diff --git a/examples/webgl_marchingcubes.html b/examples/webgl_marchingcubes.html
index 50224451551ed4..e14b3a46c85a5b 100644
--- a/examples/webgl_marchingcubes.html
+++ b/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';
diff --git a/examples/webgl_materials_channels.html b/examples/webgl_materials_channels.html
index 1924740dc98f55..cd19db826c21ea 100644
--- a/examples/webgl_materials_channels.html
+++ b/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';
 
diff --git a/examples/webgl_materials_curvature.html b/examples/webgl_materials_curvature.html
index 6c1de85e6abbea..6e031ef7bf97d2 100644
--- a/examples/webgl_materials_curvature.html
+++ b/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();
 
diff --git a/examples/webgl_materials_displacementmap.html b/examples/webgl_materials_displacementmap.html
index 9041435b33ae1c..830ec2a8eddf14 100644
--- a/examples/webgl_materials_displacementmap.html
+++ b/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;
diff --git a/examples/webgl_materials_envmaps.html b/examples/webgl_materials_envmaps.html
index d26296b6398841..5e1d29416f963d 100644
--- a/examples/webgl_materials_envmaps.html
+++ b/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;
diff --git a/examples/webgl_materials_envmaps_exr.html b/examples/webgl_materials_envmaps_exr.html
index 7a20ac05bff8fe..175d703511ad02 100644
--- a/examples/webgl_materials_envmaps_exr.html
+++ b/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';
 
diff --git a/examples/webgl_materials_envmaps_hdr.html b/examples/webgl_materials_envmaps_hdr.html
index 28e5fdc97e17a9..4755065cfe46c5 100644
--- a/examples/webgl_materials_envmaps_hdr.html
+++ b/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';
diff --git a/examples/webgl_materials_envmaps_hdr_nodes.html b/examples/webgl_materials_envmaps_hdr_nodes.html
index 94417932f245f5..ca55914b4f9c3f 100644
--- a/examples/webgl_materials_envmaps_hdr_nodes.html
+++ b/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';
diff --git a/examples/webgl_materials_envmaps_pmrem_nodes.html b/examples/webgl_materials_envmaps_pmrem_nodes.html
index 3d21098e53d4e7..7c65cb70844cde 100644
--- a/examples/webgl_materials_envmaps_pmrem_nodes.html
+++ b/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';
 
diff --git a/examples/webgl_materials_matcap.html b/examples/webgl_materials_matcap.html
index a27b81595dcb27..82302660b5f2da 100644
--- a/examples/webgl_materials_matcap.html
+++ b/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';
diff --git a/examples/webgl_materials_nodes.html b/examples/webgl_materials_nodes.html
index acb5497ecf8ac8..880b9c5a36c65b 100644
--- a/examples/webgl_materials_nodes.html
+++ b/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';
diff --git a/examples/webgl_materials_physical_reflectivity.html b/examples/webgl_materials_physical_reflectivity.html
index 1aeaaa79140b3b..e14f3c28e9c617 100644
--- a/examples/webgl_materials_physical_reflectivity.html
+++ b/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';
diff --git a/examples/webgl_materials_physical_transmission.html b/examples/webgl_materials_physical_transmission.html
index 9d0ef5b2bc0b28..45099ad65e1f55 100644
--- a/examples/webgl_materials_physical_transmission.html
+++ b/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';
 
diff --git a/examples/webgl_materials_standard.html b/examples/webgl_materials_standard.html
index b3e059e4477753..4e4992b5e538fa 100644
--- a/examples/webgl_materials_standard.html
+++ b/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';
diff --git a/examples/webgl_materials_standard_nodes.html b/examples/webgl_materials_standard_nodes.html
index 5473252ee67830..05cd90694fdef4 100644
--- a/examples/webgl_materials_standard_nodes.html
+++ b/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';
diff --git a/examples/webgl_materials_subsurface_scattering.html b/examples/webgl_materials_subsurface_scattering.html
index 665ef5588e7560..46d0396334f816 100644
--- a/examples/webgl_materials_subsurface_scattering.html
+++ b/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() {
diff --git a/examples/webgl_materials_texture_rotation.html b/examples/webgl_materials_texture_rotation.html
index 303e0717a5d358..5d776b2dc66e5f 100644
--- a/examples/webgl_materials_texture_rotation.html
+++ b/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;
diff --git a/examples/webgl_materials_wireframe.html b/examples/webgl_materials_wireframe.html
index ddfa5a5f6988e4..cd8a78ffc694d8 100644
--- a/examples/webgl_materials_wireframe.html
+++ b/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
diff --git a/examples/webgl_mirror_nodes.html b/examples/webgl_mirror_nodes.html
index 6d714a5b8c9326..288af18aeff499 100644
--- a/examples/webgl_mirror_nodes.html
+++ b/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';
 
diff --git a/examples/webgl_modifier_edgesplit.html b/examples/webgl_modifier_edgesplit.html
index c2d163ac019b3e..3ee7bb4e66a355 100644
--- a/examples/webgl_modifier_edgesplit.html
+++ b/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;
diff --git a/examples/webgl_morphtargets.html b/examples/webgl_morphtargets.html
index 0a5132d19fb3fb..1fa350c1760a4e 100644
--- a/examples/webgl_morphtargets.html
+++ b/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() {
diff --git a/examples/webgl_morphtargets_face.html b/examples/webgl_morphtargets_face.html
index 0825489cb91bd0..80cac7413bc7d7 100644
--- a/examples/webgl_morphtargets_face.html
+++ b/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();
 
diff --git a/examples/webgl_points_billboards.html b/examples/webgl_points_billboards.html
index 5411228d9db4f3..79509ff9a6d490 100644
--- a/examples/webgl_points_billboards.html
+++ b/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;
diff --git a/examples/webgl_points_nodes.html b/examples/webgl_points_nodes.html
index d2a00cf39815ff..0e933b3e74d7b4 100644
--- a/examples/webgl_points_nodes.html
+++ b/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';
 
diff --git a/examples/webgl_points_sprites.html b/examples/webgl_points_sprites.html
index 5e35eb0af45a37..b8234f01e4d41d 100644
--- a/examples/webgl_points_sprites.html
+++ b/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;
diff --git a/examples/webgl_postprocessing_3dlut.html b/examples/webgl_postprocessing_3dlut.html
index fa2c54266cb90b..64fb22f20639ff 100644
--- a/examples/webgl_postprocessing_3dlut.html
+++ b/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,
diff --git a/examples/webgl_postprocessing_afterimage.html b/examples/webgl_postprocessing_afterimage.html
index 8cee74d8ba5711..22d1ddda05d5f3 100644
--- a/examples/webgl_postprocessing_afterimage.html
+++ b/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';
diff --git a/examples/webgl_postprocessing_backgrounds.html b/examples/webgl_postprocessing_backgrounds.html
index 905454a376fab0..7d2fdfec468a52 100644
--- a/examples/webgl_postprocessing_backgrounds.html
+++ b/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';
diff --git a/examples/webgl_postprocessing_crossfade.html b/examples/webgl_postprocessing_crossfade.html
index de1bf2f4cc43cb..c808b252d0f75e 100644
--- a/examples/webgl_postprocessing_crossfade.html
+++ b/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;
diff --git a/examples/webgl_postprocessing_dof.html b/examples/webgl_postprocessing_dof.html
index 0839c57c2a2167..f82fb68e0d021b 100644
--- a/examples/webgl_postprocessing_dof.html
+++ b/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';
diff --git a/examples/webgl_postprocessing_dof2.html b/examples/webgl_postprocessing_dof2.html
index 4cf666406ed0fb..e46c38ffed2615 100644
--- a/examples/webgl_postprocessing_dof2.html
+++ b/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';
 
diff --git a/examples/webgl_postprocessing_nodes.html b/examples/webgl_postprocessing_nodes.html
index da53c25096ff99..9d0a59a3b85932 100644
--- a/examples/webgl_postprocessing_nodes.html
+++ b/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;
diff --git a/examples/webgl_postprocessing_nodes_pass.html b/examples/webgl_postprocessing_nodes_pass.html
index e777a52628c131..6a5ba91ec5419c 100644
--- a/examples/webgl_postprocessing_nodes_pass.html
+++ b/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';
diff --git a/examples/webgl_postprocessing_outline.html b/examples/webgl_postprocessing_outline.html
index 3b0234af012f72..ec1cb25cc2610b 100644
--- a/examples/webgl_postprocessing_outline.html
+++ b/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 ) {
 
diff --git a/examples/webgl_postprocessing_pixel.html b/examples/webgl_postprocessing_pixel.html
index f4bb39aea7bd71..e970f4ebb8b766 100644
--- a/examples/webgl_postprocessing_pixel.html
+++ b/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';
diff --git a/examples/webgl_postprocessing_procedural.html b/examples/webgl_postprocessing_procedural.html
index 11fb1c059a5cdd..6d9b531bc6934a 100644
--- a/examples/webgl_postprocessing_procedural.html
+++ b/examples/webgl_postprocessing_procedural.html
@@ -59,7 +59,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 postCamera, postScene, renderer;
 			let postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
diff --git a/examples/webgl_postprocessing_rgb_halftone.html b/examples/webgl_postprocessing_rgb_halftone.html
index 00753d59952e2e..468cfaca7e6efd 100644
--- a/examples/webgl_postprocessing_rgb_halftone.html
+++ b/examples/webgl_postprocessing_rgb_halftone.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 { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
diff --git a/examples/webgl_postprocessing_sao.html b/examples/webgl_postprocessing_sao.html
index a5ccebb8180046..9637656eeb53e3 100644
--- a/examples/webgl_postprocessing_sao.html
+++ b/examples/webgl_postprocessing_sao.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 { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
diff --git a/examples/webgl_postprocessing_sobel.html b/examples/webgl_postprocessing_sobel.html
index 9982ce18c6dddf..906386d83c8758 100644
--- a/examples/webgl_postprocessing_sobel.html
+++ b/examples/webgl_postprocessing_sobel.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';
 
diff --git a/examples/webgl_postprocessing_ssaa.html b/examples/webgl_postprocessing_ssaa.html
index 3bb445ed4dfd6b..3f1f86009a6107 100644
--- a/examples/webgl_postprocessing_ssaa.html
+++ b/examples/webgl_postprocessing_ssaa.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 { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
diff --git a/examples/webgl_postprocessing_ssao.html b/examples/webgl_postprocessing_ssao.html
index afa3b33954c45f..c0ebf62c2b99eb 100644
--- a/examples/webgl_postprocessing_ssao.html
+++ b/examples/webgl_postprocessing_ssao.html
@@ -21,7 +21,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 { SSAOPass } from './jsm/postprocessing/SSAOPass.js';
diff --git a/examples/webgl_postprocessing_ssr.html b/examples/webgl_postprocessing_ssr.html
index f27bf2e36fbe66..b87717ebb8889c 100644
--- a/examples/webgl_postprocessing_ssr.html
+++ b/examples/webgl_postprocessing_ssr.html
@@ -24,7 +24,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';
 		import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 		import { SSRPass } from './jsm/postprocessing/SSRPass.js';
 		import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
diff --git a/examples/webgl_postprocessing_ssrr.html b/examples/webgl_postprocessing_ssrr.html
index 7425073ecd993e..2cd1eaabf7546a 100644
--- a/examples/webgl_postprocessing_ssrr.html
+++ b/examples/webgl_postprocessing_ssrr.html
@@ -25,7 +25,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';
 		import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 		import { SSRrPass } from './jsm/postprocessing/SSRrPass.js';
 		import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
diff --git a/examples/webgl_postprocessing_taa.html b/examples/webgl_postprocessing_taa.html
index edf5bf784f397a..dc88a5139dd786 100644
--- a/examples/webgl_postprocessing_taa.html
+++ b/examples/webgl_postprocessing_taa.html
@@ -21,7 +21,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';
diff --git a/examples/webgl_postprocessing_unreal_bloom.html b/examples/webgl_postprocessing_unreal_bloom.html
index 44abb5437773de..da3d8d1a4de8ff 100644
--- a/examples/webgl_postprocessing_unreal_bloom.html
+++ b/examples/webgl_postprocessing_unreal_bloom.html
@@ -29,7 +29,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';
diff --git a/examples/webgl_postprocessing_unreal_bloom_selective.html b/examples/webgl_postprocessing_unreal_bloom_selective.html
index 385eb90caedb8a..bb26c3e175ada1 100644
--- a/examples/webgl_postprocessing_unreal_bloom_selective.html
+++ b/examples/webgl_postprocessing_unreal_bloom_selective.html
@@ -45,7 +45,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 { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
diff --git a/examples/webgl_raymarching_reflect.html b/examples/webgl_raymarching_reflect.html
index 185533446c4c42..678b4c6ef185b3 100644
--- a/examples/webgl_raymarching_reflect.html
+++ b/examples/webgl_raymarching_reflect.html
@@ -241,7 +241,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';
 
diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html
index deaa30a40953cc..175e5ebcb55699 100644
--- a/examples/webgl_shaders_ocean.html
+++ b/examples/webgl_shaders_ocean.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 { Water } from './jsm/objects/Water.js';
 			import { Sky } from './jsm/objects/Sky.js';
diff --git a/examples/webgl_shaders_sky.html b/examples/webgl_shaders_sky.html
index 70ad5a311ef09d..a035ca98aa3a5e 100644
--- a/examples/webgl_shaders_sky.html
+++ b/examples/webgl_shaders_sky.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 { Sky } from './jsm/objects/Sky.js';
 
diff --git a/examples/webgl_shaders_tonemapping.html b/examples/webgl_shaders_tonemapping.html
index c1091be7254370..6deca53424fe82 100644
--- a/examples/webgl_shaders_tonemapping.html
+++ b/examples/webgl_shaders_tonemapping.html
@@ -49,7 +49,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 { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
diff --git a/examples/webgl_shadow_contact.html b/examples/webgl_shadow_contact.html
index 6b96bc5dd03c3b..5886f662f4334b 100644
--- a/examples/webgl_shadow_contact.html
+++ b/examples/webgl_shadow_contact.html
@@ -24,7 +24,7 @@
 			import * as THREE from '../build/three.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.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 { HorizontalBlurShader } from './jsm/shaders/HorizontalBlurShader.js';
 			import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';
 
diff --git a/examples/webgl_shadowmap_csm.html b/examples/webgl_shadowmap_csm.html
index f85418191e46d7..fb33de74f1432c 100644
--- a/examples/webgl_shadowmap_csm.html
+++ b/examples/webgl_shadowmap_csm.html
@@ -19,7 +19,7 @@
 			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 { CSM } from './jsm/csm/CSM.js';
 			import { CSMHelper } from './jsm/csm/CSMHelper.js';
 
diff --git a/examples/webgl_shadowmap_progressive.html b/examples/webgl_shadowmap_progressive.html
index 4e2fb81c491887..b4b2f69e7f5589 100644
--- a/examples/webgl_shadowmap_progressive.html
+++ b/examples/webgl_shadowmap_progressive.html
@@ -15,7 +15,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 { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TransformControls } from './jsm/controls/TransformControls.js';
diff --git a/examples/webgl_shadowmap_vsm.html b/examples/webgl_shadowmap_vsm.html
index 8cde05ef0c4c71..497a5764a7d692 100644
--- a/examples/webgl_shadowmap_vsm.html
+++ b/examples/webgl_shadowmap_vsm.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';
 
diff --git a/examples/webgl_tonemapping.html b/examples/webgl_tonemapping.html
index 819f2f2513b529..aefbc04da8ce7c 100644
--- a/examples/webgl_tonemapping.html
+++ b/examples/webgl_tonemapping.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';
@@ -142,7 +142,7 @@
 
 				if ( guiExposure !== null ) {
 
-					gui.remove( guiExposure );
+					guiExposure.destroy();
 					guiExposure = null;
 
 				}
diff --git a/examples/webgl_video_kinect.html b/examples/webgl_video_kinect.html
index 73e804ca8d9414..f57f5e89ce7faf 100644
--- a/examples/webgl_video_kinect.html
+++ b/examples/webgl_video_kinect.html
@@ -72,7 +72,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';
 
 			let scene, camera, renderer;
 			let geometry, mesh, material;
diff --git a/examples/webgl_water.html b/examples/webgl_water.html
index 14f07cd5fd1340..ee556d7e034401 100644
--- a/examples/webgl_water.html
+++ b/examples/webgl_water.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 { Water } from './jsm/objects/Water2.js';
 
@@ -126,7 +126,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				document.body.appendChild( renderer.domElement );
 
-				// dat.gui
+				// gui
 
 				const gui = new GUI();
 
diff --git a/examples/webgl_water_flowmap.html b/examples/webgl_water_flowmap.html
index 090c68494493aa..469e9edb47f836 100644
--- a/examples/webgl_water_flowmap.html
+++ b/examples/webgl_water_flowmap.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 { Water } from './jsm/objects/Water2.js';
 
diff --git a/examples/webgpu_compute.html b/examples/webgpu_compute.html
index 8523a7d9c1eb13..45686d69217989 100644
--- a/examples/webgpu_compute.html
+++ b/examples/webgpu_compute.html
@@ -23,7 +23,7 @@
 
 			import * as THREE from 'three';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
 			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';
diff --git a/examples/webgpu_lights_selective.html b/examples/webgpu_lights_selective.html
index b41cb2bfe77dec..f9c0cde6dde3b6 100644
--- a/examples/webgpu_lights_selective.html
+++ b/examples/webgpu_lights_selective.html
@@ -29,7 +29,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 { TeapotGeometry } from './jsm/geometries/TeapotGeometry.js';
diff --git a/examples/webxr_vr_layers.html b/examples/webxr_vr_layers.html
index 6860a9c644cf81..cde168fab00646 100644
--- a/examples/webxr_vr_layers.html
+++ b/examples/webxr_vr_layers.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 { HTMLMesh } from './jsm/interactive/HTMLMesh.js';
 			import { InteractiveGroup } from './jsm/interactive/InteractiveGroup.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
diff --git a/examples/webxr_vr_sandbox.html b/examples/webxr_vr_sandbox.html
index ec974478b4d386..da4e63176f8b49 100644
--- a/examples/webxr_vr_sandbox.html
+++ b/examples/webxr_vr_sandbox.html
@@ -20,7 +20,7 @@
 			import { InteractiveGroup } from './jsm/interactive/InteractiveGroup.js';
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.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 reflector;
diff --git a/test/e2e/clean-page.js b/test/e2e/clean-page.js
index 8afd6a38ca9214..c82fff07d3d3bc 100644
--- a/test/e2e/clean-page.js
+++ b/test/e2e/clean-page.js
@@ -13,12 +13,12 @@
 	}
 
 
-	/* Remove dat.gui and fonts */
+	/* Remove gui and fonts */
 
 	const style = document.createElement( 'style' );
 	style.type = 'text/css';
 	style.innerHTML = `body { font size: 0 !important; }
-      #info, button, input, body > div.dg.ac, body > div.lbl { display: none !important; }`;
+      #info, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }`;
 
 	const head = document.getElementsByTagName( 'head' );