%!s(int64=5) %!d(string=hai) anos · f176ca30a6
--- a/editor/index.html
+++ b/editor/index.html
@@ -11,40 +11,7 @@
 
															 	<body ontouchstart="">
														
 
															 		<link rel="stylesheet" href="css/main.css">
														
 
															-		<script src="../build/three.js"></script>
														
 
															-
														
 
															-		<script src="../examples/js/controls/TransformControls.js"></script>
														
 
															-
														
 
															-		<script src="../examples/js/libs/chevrotain.min.js"></script> <!-- VRML -->
														
 
															 		<script src="../examples/js/libs/jszip.min.js"></script>
														
 
															-		<script src="../examples/js/libs/inflate.min.js"></script> <!-- FBX -->
														
 
															-
														
 
															-		<script src="../examples/js/loaders/AMFLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/ColladaLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/DRACOLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/FBXLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/GLTFLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/KMZLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/MD2Loader.js"></script>
														
 
															-		<script src="../examples/js/loaders/OBJLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/MTLLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/PLYLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/STLLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/SVGLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/TGALoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/TDSLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/VRMLLoader.js"></script>
														
 
															-		<script src="../examples/js/loaders/VTKLoader.js"></script>
														
 
															-
														
 
															-		<script src="../examples/js/exporters/ColladaExporter.js"></script>
														
 
															-		<script src="../examples/js/exporters/GLTFExporter.js"></script>
														
 
															-		<script src="../examples/js/exporters/OBJExporter.js"></script>
														
 
															-		<script src="../examples/js/exporters/PLYExporter.js"></script>
														
 
															-		<script src="../examples/js/exporters/STLExporter.js"></script>
														
 
															-
														
 
															-		<script src="../examples/js/renderers/Projector.js"></script>
														
 
															-		<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
														
 
															-		<script src="../examples/js/renderers/SVGRenderer.js"></script>
														
 
															 		<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
														
 
															 		<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
														
@@ -60,6 +27,7 @@
 
															 		<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
														
 
															 		<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
														
 
															 		<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">
														
 
															+
														
 
															 		<script src="js/libs/codemirror/addon/dialog.js"></script>
														
 
															 		<script src="js/libs/codemirror/addon/show-hint.js"></script>
														
 
															 		<script src="js/libs/codemirror/addon/tern.js"></script>
														
@@ -74,104 +42,27 @@
 
															 		<script src="js/libs/ternjs/infer.js"></script>
														
 
															 		<script src="js/libs/ternjs/doc_comment.js"></script>
														
 
															 		<script src="js/libs/tern-threejs/threejs.js"></script>
														
 
															-
														
 
															 		<script src="js/libs/signals.min.js"></script>
														
 
															-		<script src="js/libs/ui.js"></script>
														
 
															-		<script src="js/libs/ui.three.js"></script>
														
 
															-
														
 
															-		<script src="js/libs/html2canvas.js"></script>
														
 
															-		<script src="js/libs/three.html.js"></script>
														
 
															-
														
 
															-		<script src="js/libs/app.js"></script>
														
 
															-		<script src="js/Player.js"></script>
														
 
															-		<script src="js/Script.js"></script>
														
 
															-
														
 
															-		<script src="js/EditorControls.js"></script>
														
 
															-		<script src="js/Storage.js"></script>
														
 
															-
														
 
															-		<script src="js/Editor.js"></script>
														
 
															-		<script src="js/Config.js"></script>
														
 
															-		<script src="js/History.js"></script>
														
 
															-		<script src="js/Loader.js"></script>
														
 
															-		<script src="js/Menubar.js"></script>
														
 
															-		<script src="js/Menubar.File.js"></script>
														
 
															-		<script src="js/Menubar.Edit.js"></script>
														
 
															-		<script src="js/Menubar.Add.js"></script>
														
 
															-		<script src="js/Menubar.Play.js"></script>
														
 
															-		<!-- <script src="js/Menubar.View.js"></script> -->
														
 
															-		<script src="js/Menubar.Examples.js"></script>
														
 
															-		<script src="js/Menubar.Help.js"></script>
														
 
															-		<script src="js/Menubar.Status.js"></script>
														
 
															-		<script src="js/Sidebar.js"></script>
														
 
															-		<script src="js/Sidebar.Scene.js"></script>
														
 
															-		<script src="js/Sidebar.Project.js"></script>
														
 
															-		<script src="js/Sidebar.Settings.js"></script>
														
 
															-		<script src="js/Sidebar.Settings.Shortcuts.js"></script>
														
 
															-		<script src="js/Sidebar.Settings.Viewport.js"></script>
														
 
															-		<script src="js/Sidebar.Properties.js"></script>
														
 
															-		<script src="js/Sidebar.Object.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.Geometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.Modifiers.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.DodecahedronGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.ExtrudeGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.ShapeGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.TubeGeometry.js"></script>
														
 
															-		<script src="../examples/js/geometries/TeapotBufferGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.TeapotBufferGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Geometry.LatheGeometry.js"></script>
														
 
															-		<script src="js/Sidebar.Material.js"></script>
														
 
															-		<script src="js/Sidebar.Animation.js"></script>
														
 
															-		<script src="js/Sidebar.Script.js"></script>
														
 
															-		<script src="js/Sidebar.History.js"></script>
														
 
															-		<script src="js/Strings.js"></script>
														
 
															-		<script src="js/Toolbar.js"></script>
														
 
															-		<script src="js/Viewport.js"></script>
														
 
															-		<script src="js/Viewport.Camera.js"></script>
														
 
															-		<script src="js/Viewport.Info.js"></script>
														
 
															-
														
 
															-		<script src="js/Command.js"></script>
														
 
															-		<script src="js/commands/AddObjectCommand.js"></script>
														
 
															-		<script src="js/commands/RemoveObjectCommand.js"></script>
														
 
															-		<script src="js/commands/MoveObjectCommand.js"></script>
														
 
															-		<script src="js/commands/SetPositionCommand.js"></script>
														
 
															-		<script src="js/commands/SetRotationCommand.js"></script>
														
 
															-		<script src="js/commands/SetScaleCommand.js"></script>
														
 
															-		<script src="js/commands/SetValueCommand.js"></script>
														
 
															-		<script src="js/commands/SetUuidCommand.js"></script>
														
 
															-		<script src="js/commands/SetColorCommand.js"></script>
														
 
															-		<script src="js/commands/SetGeometryCommand.js"></script>
														
 
															-		<script src="js/commands/SetGeometryValueCommand.js"></script>
														
 
															-		<script src="js/commands/MultiCmdsCommand.js"></script>
														
 
															-		<script src="js/commands/AddScriptCommand.js"></script>
														
 
															-		<script src="js/commands/RemoveScriptCommand.js"></script>
														
 
															-		<script src="js/commands/SetScriptValueCommand.js"></script>
														
 
															-		<script src="js/commands/SetMaterialCommand.js"></script>
														
 
															-		<script src="js/commands/SetMaterialColorCommand.js"></script>
														
 
															-		<script src="js/commands/SetMaterialMapCommand.js"></script>
														
 
															-		<script src="js/commands/SetMaterialValueCommand.js"></script>
														
 
															-		<script src="js/commands/SetMaterialVectorCommand.js"></script>
														
 
															-		<script src="js/commands/SetSceneCommand.js"></script>
														
 
															-
														
 
															-		<script>
														
 
															+
														
 
															+		<script type="module">
														
 
															+
														
 
															+			import { FileLoader } from '../build/three.module.js';
														
 
															+
														
 
															+			import { Editor } from './js/Editor.js';
														
 
															+			import { Viewport } from './js/Viewport.js';
														
 
															+			import { Toolbar } from './js/Toolbar.js';
														
 
															+			import { Script } from './js/Script.js';
														
 
															+			import { Player } from './js/Player.js';
														
 
															+			import { Sidebar } from './js/Sidebar.js';
														
 
															+			import { Menubar } from './js/Menubar.js';
														
 
															 			window.URL = window.URL || window.webkitURL;
														
 
															 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
														
 
															-			Number.prototype.format = function (){
														
 
															-				return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
														
 
															+			Number.prototype.format = function () {
														
 
															+
														
 
															+				return this.toString().replace( /(\d)(?=(\d{3})+(?!\d))/g, "$1," );
														
 
															+
														
 
															 			};
														
 
															 			//
														
@@ -224,7 +115,7 @@
 
															 				var timeout;
														
 
															-				function saveState( scene ) {
														
 
															+				function saveState() {
														
 
															 					if ( editor.config.getKey( 'autosave' ) === false ) {
														
@@ -248,7 +139,7 @@
 
															 					}, 1000 );
														
 
															-				};
														
 
															+				}
														
 
															 				var signals = editor.signals;
														
@@ -282,7 +173,7 @@
 
															 			}, false );
														
 
															-			function onWindowResize( event ) {
														
 
															+			function onWindowResize() {
														
 
															 				editor.signals.windowResize.dispatch();
														
@@ -303,7 +194,7 @@
 
															 				if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
														
 
															-					var loader = new THREE.FileLoader();
														
 
															+					var loader = new FileLoader();
														
 
															 					loader.crossOrigin = '';
														
 
															 					loader.load( file, function ( text ) {
														
--- a/editor/js/Command.js
+++ b/editor/js/Command.js
@@ -38,3 +38,5 @@ Command.prototype.fromJSON = function ( json ) {
 
															 	this.name = json.name;
														
 
															 };
														
 
															+
														
 
															+export { Command };
														
--- a/editor/js/Config.js
+++ b/editor/js/Config.js
@@ -76,3 +76,5 @@ var Config = function () {
 
															 	};
														
 
															 };
														
 
															+
														
 
															+export { Config };
														
--- a/editor/js/Editor.js
+++ b/editor/js/Editor.js
@@ -2,12 +2,36 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import {
														
 
															+	AnimationMixer,
														
 
															+	CameraHelper,
														
 
															+	Color,
														
 
															+	DirectionalLightHelper,
														
 
															+	HemisphereLightHelper,
														
 
															+	Mesh,
														
 
															+	MeshBasicMaterial,
														
 
															+	ObjectLoader,
														
 
															+	PerspectiveCamera,
														
 
															+	PointLightHelper,
														
 
															+	Scene,
														
 
															+	SkeletonHelper,
														
 
															+	SphereBufferGeometry,
														
 
															+	SpotLightHelper,
														
 
															+	Vector3
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { Config } from './Config.js';
														
 
															+import { Loader } from './Loader.js';
														
 
															+import { History as _History } from './History.js';
														
 
															+import { Strings } from './Strings.js';
														
 
															+import { Storage as _Storage } from './Storage.js';
														
 
															+
														
 
															 var Editor = function () {
														
 
															-	this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
														
 
															+	this.DEFAULT_CAMERA = new PerspectiveCamera( 50, 1, 0.01, 1000 );
														
 
															 	this.DEFAULT_CAMERA.name = 'Camera';
														
 
															 	this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
														
 
															-	this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
														
 
															+	this.DEFAULT_CAMERA.lookAt( new Vector3() );
														
 
															 	var Signal = signals.Signal;
														
@@ -74,19 +98,19 @@ var Editor = function () {
 
															 	};
														
 
															 	this.config = new Config();
														
 
															-	this.history = new History( this );
														
 
															-	this.storage = new Storage();
														
 
															+	this.history = new _History( this );
														
 
															+	this.storage = new _Storage();
														
 
															 	this.strings = new Strings( this.config );
														
 
															 	this.loader = new Loader( this );
														
 
															 	this.camera = this.DEFAULT_CAMERA.clone();
														
 
															-	this.scene = new THREE.Scene();
														
 
															+	this.scene = new Scene();
														
 
															 	this.scene.name = 'Scene';
														
 
															-	this.scene.background = new THREE.Color( 0xaaaaaa );
														
 
															+	this.scene.background = new Color( 0xaaaaaa );
														
 
															-	this.sceneHelpers = new THREE.Scene();
														
 
															+	this.sceneHelpers = new Scene();
														
 
															 	this.object = {};
														
 
															 	this.geometries = {};
														
@@ -95,7 +119,7 @@ var Editor = function () {
 
															 	this.scripts = {};
														
 
															 	this.animations = {};
														
 
															-	this.mixer = new THREE.AnimationMixer( this.scene );
														
 
															+	this.mixer = new AnimationMixer( this.scene );
														
 
															 	this.selected = null;
														
 
															 	this.helpers = {};
														
@@ -308,8 +332,8 @@ Editor.prototype = {
 
															 	addHelper: function () {
														
 
															-		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
														
 
															-		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
														
 
															+		var geometry = new SphereBufferGeometry( 2, 4, 2 );
														
 
															+		var material = new MeshBasicMaterial( { color: 0xff0000, visible: false } );
														
 
															 		return function ( object ) {
														
@@ -317,27 +341,27 @@ Editor.prototype = {
 
															 			if ( object.isCamera ) {
														
 
															-				helper = new THREE.CameraHelper( object, 1 );
														
 
															+				helper = new CameraHelper( object, 1 );
														
 
															 			} else if ( object.isPointLight ) {
														
 
															-				helper = new THREE.PointLightHelper( object, 1 );
														
 
															+				helper = new PointLightHelper( object, 1 );
														
 
															 			} else if ( object.isDirectionalLight ) {
														
 
															-				helper = new THREE.DirectionalLightHelper( object, 1 );
														
 
															+				helper = new DirectionalLightHelper( object, 1 );
														
 
															 			} else if ( object.isSpotLight ) {
														
 
															-				helper = new THREE.SpotLightHelper( object, 1 );
														
 
															+				helper = new SpotLightHelper( object, 1 );
														
 
															 			} else if ( object.isHemisphereLight ) {
														
 
															-				helper = new THREE.HemisphereLightHelper( object, 1 );
														
 
															+				helper = new HemisphereLightHelper( object, 1 );
														
 
															 			} else if ( object.isSkinnedMesh ) {
														
 
															-				helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
														
 
															+				helper = new SkeletonHelper( object.skeleton.bones[ 0 ] );
														
 
															 			} else {
														
@@ -346,7 +370,7 @@ Editor.prototype = {
 
															 			}
														
 
															-			var picker = new THREE.Mesh( geometry, material );
														
 
															+			var picker = new Mesh( geometry, material );
														
 
															 			picker.name = 'picker';
														
 
															 			picker.userData.object = object;
														
 
															 			helper.add( picker );
														
@@ -551,7 +575,7 @@ Editor.prototype = {
 
															 	fromJSON: function ( json ) {
														
 
															-		var loader = new THREE.ObjectLoader();
														
 
															+		var loader = new ObjectLoader();
														
 
															 		// backwards
														
@@ -637,3 +661,5 @@ Editor.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { Editor };
														
--- a/editor/js/EditorControls.js
+++ b/editor/js/EditorControls.js
@@ -5,12 +5,22 @@
 
															  * @author WestLangley / http://github.com/WestLangley
														
 
															  */
														
 
															-THREE.EditorControls = function ( object, domElement ) {
														
 
															+import {
														
 
															+	Box3,
														
 
															+	EventDispatcher,
														
 
															+	Matrix3,
														
 
															+	Sphere,
														
 
															+	Spherical,
														
 
															+	Vector2,
														
 
															+	Vector3
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+var EditorControls = function ( object, domElement ) {
														
 
															 	// API
														
 
															 	this.enabled = true;
														
 
															-	this.center = new THREE.Vector3();
														
 
															+	this.center = new Vector3();
														
 
															 	this.panSpeed = 0.002;
														
 
															 	this.zoomSpeed = 0.1;
														
 
															 	this.rotationSpeed = 0.005;
														
@@ -18,19 +28,19 @@ THREE.EditorControls = function ( object, domElement ) {
 
															 	// internals
														
 
															 	var scope = this;
														
 
															-	var vector = new THREE.Vector3();
														
 
															-	var delta = new THREE.Vector3();
														
 
															-	var box = new THREE.Box3();
														
 
															+	var vector = new Vector3();
														
 
															+	var delta = new Vector3();
														
 
															+	var box = new Box3();
														
 
															 	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
														
 
															 	var state = STATE.NONE;
														
 
															 	var center = this.center;
														
 
															-	var normalMatrix = new THREE.Matrix3();
														
 
															-	var pointer = new THREE.Vector2();
														
 
															-	var pointerOld = new THREE.Vector2();
														
 
															-	var spherical = new THREE.Spherical();
														
 
															-	var sphere = new THREE.Sphere();
														
 
															+	var normalMatrix = new Matrix3();
														
 
															+	var pointer = new Vector2();
														
 
															+	var pointerOld = new Vector2();
														
 
															+	var spherical = new Spherical();
														
 
															+	var sphere = new Sphere();
														
 
															 	// events
														
@@ -221,8 +231,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
															 	// touch
														
 
															-	var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
														
 
															-	var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
														
 
															+	var touches = [ new Vector3(), new Vector3(), new Vector3() ];
														
 
															+	var prevTouches = [ new Vector3(), new Vector3(), new Vector3() ];
														
 
															 	var prevDistance = null;
														
@@ -309,5 +319,7 @@ THREE.EditorControls = function ( object, domElement ) {
 
															 };
														
 
															-THREE.EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
														
 
															-THREE.EditorControls.prototype.constructor = THREE.EditorControls;
														
 
															+EditorControls.prototype = Object.create( EventDispatcher.prototype );
														
 
															+EditorControls.prototype.constructor = EditorControls;
														
 
															+
														
 
															+export { EditorControls };
														
--- a/editor/js/History.js
+++ b/editor/js/History.js
@@ -3,7 +3,7 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															-History = function ( editor ) {
														
 
															+var History = function ( editor ) {
														
 
															 	this.editor = editor;
														
 
															 	this.undos = [];
														
@@ -317,3 +317,5 @@ History.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { History };
														
--- a/editor/js/Loader.js
+++ b/editor/js/Loader.js
@@ -2,6 +2,38 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import {
														
 
															+	AnimationMixer,
														
 
															+	BufferGeometryLoader,
														
 
															+	Group,
														
 
															+	LoadingManager,
														
 
															+	LoaderUtils,
														
 
															+	Mesh,
														
 
															+	MeshBasicMaterial,
														
 
															+	MeshStandardMaterial,
														
 
															+	ObjectLoader,
														
 
															+	ShapeBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { AMFLoader } from '../../examples/jsm/loaders/AMFLoader.js';
														
 
															+import { ColladaLoader } from '../../examples/jsm/loaders/ColladaLoader.js';
														
 
															+import { DRACOLoader } from '../../examples/jsm/loaders/DRACOLoader.js';
														
 
															+import { FBXLoader } from '../../examples/jsm/loaders/FBXLoader.js';
														
 
															+import { GLTFLoader } from '../../examples/jsm/loaders/GLTFLoader.js';
														
 
															+import { KMZLoader } from '../../examples/jsm/loaders/KMZLoader.js';
														
 
															+import { MD2Loader } from '../../examples/jsm/loaders/MD2Loader.js';
														
 
															+import { MTLLoader } from '../../examples/jsm/loaders/MTLLoader.js';
														
 
															+import { OBJLoader } from '../../examples/jsm/loaders/OBJLoader.js';
														
 
															+import { PLYLoader } from '../../examples/jsm/loaders/PLYLoader.js';
														
 
															+import { STLLoader } from '../../examples/jsm/loaders/STLLoader.js';
														
 
															+import { SVGLoader } from '../../examples/jsm/loaders/SVGLoader.js';
														
 
															+import { TDSLoader } from '../../examples/jsm/loaders/TDSLoader.js';
														
 
															+import { VTKLoader } from '../../examples/jsm/loaders/VTKLoader.js';
														
 
															+import { VRMLLoader } from '../../examples/jsm/loaders/VRMLLoader.js';
														
 
															+
														
 
															+import { AddObjectCommand } from './commands/AddObjectCommand.js';
														
 
															+import { SetSceneCommand } from './commands/SetSceneCommand.js';
														
 
															+
														
 
															 var Loader = function ( editor ) {
														
 
															 	var scope = this;
														
@@ -14,7 +46,7 @@ var Loader = function ( editor ) {
 
															 			var filesMap = createFileMap( files );
														
 
															-			var manager = new THREE.LoadingManager();
														
 
															+			var manager = new LoadingManager();
														
 
															 			manager.setURLModifier( function ( url ) {
														
 
															 				var file = filesMap[ url ];
														
@@ -62,7 +94,7 @@ var Loader = function ( editor ) {
 
															 				reader.addEventListener( 'load', function ( event ) {
														
 
															-					var loader = new THREE.TDSLoader();
														
 
															+					var loader = new TDSLoader();
														
 
															 					var object = loader.parse( event.target.result );
														
 
															 					editor.execute( new AddObjectCommand( editor, object ) );
														
@@ -76,7 +108,7 @@ var Loader = function ( editor ) {
 
															 				reader.addEventListener( 'load', function ( event ) {
														
 
															-					var loader = new THREE.AMFLoader();
														
 
															+					var loader = new AMFLoader();
														
 
															 					var amfobject = loader.parse( event.target.result );
														
 
															 					editor.execute( new AddObjectCommand( editor, amfobject ) );
														
@@ -92,7 +124,7 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var loader = new THREE.ColladaLoader( manager );
														
 
															+					var loader = new ColladaLoader( manager );
														
 
															 					var collada = loader.parse( contents );
														
 
															 					collada.scene.name = filename;
														
@@ -111,13 +143,13 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var loader = new THREE.DRACOLoader();
														
 
															+					var loader = new DRACOLoader();
														
 
															 					loader.setDecoderPath( '../examples/js/libs/draco/' );
														
 
															 					loader.decodeDracoFile( contents, function ( geometry ) {
														
 
															-						var material = new THREE.MeshStandardMaterial();
														
 
															+						var material = new MeshStandardMaterial();
														
 
															-						var mesh = new THREE.Mesh( geometry, material );
														
 
															+						var mesh = new Mesh( geometry, material );
														
 
															 						mesh.name = filename;
														
 
															 						editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -135,7 +167,7 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var loader = new THREE.FBXLoader( manager );
														
 
															+					var loader = new FBXLoader( manager );
														
 
															 					var object = loader.parse( contents );
														
 
															 					editor.addAnimation( object, object.animations );
														
@@ -152,10 +184,10 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var dracoLoader = new THREE.DRACOLoader();
														
 
															+					var dracoLoader = new DRACOLoader();
														
 
															 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
														
 
															-					var loader = new THREE.GLTFLoader();
														
 
															+					var loader = new GLTFLoader();
														
 
															 					loader.setDRACOLoader( dracoLoader );
														
 
															 					loader.parse( contents, '', function ( result ) {
														
@@ -186,7 +218,7 @@ var Loader = function ( editor ) {
 
															 					} else {
														
 
															-						loader = new THREE.GLTFLoader( manager );
														
 
															+						loader = new GLTFLoader( manager );
														
 
															 					}
														
@@ -229,7 +261,7 @@ var Loader = function ( editor ) {
 
															 						worker.onmessage = function ( event ) {
														
 
															 							event.data.metadata = { version: 2 };
														
 
															-							handleJSON( event.data, file, filename );
														
 
															+							handleJSON( event.data );
														
 
															 						};
														
@@ -254,7 +286,7 @@ var Loader = function ( editor ) {
 
															 					}
														
 
															-					handleJSON( data, file, filename );
														
 
															+					handleJSON( data );
														
 
															 				}, false );
														
 
															 				reader.readAsText( file );
														
@@ -266,7 +298,7 @@ var Loader = function ( editor ) {
 
															 				reader.addEventListener( 'load', function ( event ) {
														
 
															-					var loader = new THREE.KMZLoader();
														
 
															+					var loader = new KMZLoader();
														
 
															 					var collada = loader.parse( event.target.result );
														
 
															 					collada.scene.name = filename;
														
@@ -284,14 +316,14 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var geometry = new THREE.MD2Loader().parse( contents );
														
 
															-					var material = new THREE.MeshStandardMaterial( {
														
 
															+					var geometry = new MD2Loader().parse( contents );
														
 
															+					var material = new MeshStandardMaterial( {
														
 
															 						morphTargets: true,
														
 
															 						morphNormals: true
														
 
															 					} );
														
 
															-					var mesh = new THREE.Mesh( geometry, material );
														
 
															-					mesh.mixer = new THREE.AnimationMixer( mesh );
														
 
															+					var mesh = new Mesh( geometry, material );
														
 
															+					mesh.mixer = new AnimationMixer( mesh );
														
 
															 					mesh.name = filename;
														
 
															 					editor.addAnimation( mesh, geometry.animations );
														
@@ -308,7 +340,7 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var object = new THREE.OBJLoader().parse( contents );
														
 
															+					var object = new OBJLoader().parse( contents );
														
 
															 					object.name = filename;
														
 
															 					editor.execute( new AddObjectCommand( editor, object ) );
														
@@ -324,13 +356,13 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var geometry = new THREE.PLYLoader().parse( contents );
														
 
															+					var geometry = new PLYLoader().parse( contents );
														
 
															 					geometry.sourceType = "ply";
														
 
															 					geometry.sourceFile = file.name;
														
 
															-					var material = new THREE.MeshStandardMaterial();
														
 
															+					var material = new MeshStandardMaterial();
														
 
															-					var mesh = new THREE.Mesh( geometry, material );
														
 
															+					var mesh = new Mesh( geometry, material );
														
 
															 					mesh.name = filename;
														
 
															 					editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -346,13 +378,13 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var geometry = new THREE.STLLoader().parse( contents );
														
 
															+					var geometry = new STLLoader().parse( contents );
														
 
															 					geometry.sourceType = "stl";
														
 
															 					geometry.sourceFile = file.name;
														
 
															-					var material = new THREE.MeshStandardMaterial();
														
 
															+					var material = new MeshStandardMaterial();
														
 
															-					var mesh = new THREE.Mesh( geometry, material );
														
 
															+					var mesh = new Mesh( geometry, material );
														
 
															 					mesh.name = filename;
														
 
															 					editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -377,12 +409,12 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var loader = new THREE.SVGLoader();
														
 
															+					var loader = new SVGLoader();
														
 
															 					var paths = loader.parse( contents ).paths;
														
 
															 					//
														
 
															-					var group = new THREE.Group();
														
 
															+					var group = new Group();
														
 
															 					group.scale.multiplyScalar( 0.1 );
														
 
															 					group.scale.y *= - 1;
														
@@ -390,7 +422,7 @@ var Loader = function ( editor ) {
 
															 						var path = paths[ i ];
														
 
															-						var material = new THREE.MeshBasicMaterial( {
														
 
															+						var material = new MeshBasicMaterial( {
														
 
															 							color: path.color,
														
 
															 							depthWrite: false
														
 
															 						} );
														
@@ -401,8 +433,8 @@ var Loader = function ( editor ) {
 
															 							var shape = shapes[ j ];
														
 
															-							var geometry = new THREE.ShapeBufferGeometry( shape );
														
 
															-							var mesh = new THREE.Mesh( geometry, material );
														
 
															+							var geometry = new ShapeBufferGeometry( shape );
														
 
															+							var mesh = new Mesh( geometry, material );
														
 
															 							group.add( mesh );
														
@@ -423,13 +455,13 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var geometry = new THREE.VTKLoader().parse( contents );
														
 
															+					var geometry = new VTKLoader().parse( contents );
														
 
															 					geometry.sourceType = "vtk";
														
 
															 					geometry.sourceFile = file.name;
														
 
															-					var material = new THREE.MeshStandardMaterial();
														
 
															+					var material = new MeshStandardMaterial();
														
 
															-					var mesh = new THREE.Mesh( geometry, material );
														
 
															+					var mesh = new Mesh( geometry, material );
														
 
															 					mesh.name = filename;
														
 
															 					editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -445,7 +477,7 @@ var Loader = function ( editor ) {
 
															 					var contents = event.target.result;
														
 
															-					var result = new THREE.VRMLLoader().parse( contents );
														
 
															+					var result = new VRMLLoader().parse( contents );
														
 
															 					editor.execute( new SetSceneCommand( editor, result ) );
														
@@ -475,7 +507,7 @@ var Loader = function ( editor ) {
 
															 	};
														
 
															-	function handleJSON( data, file, filename ) {
														
 
															+	function handleJSON( data ) {
														
 
															 		if ( data.metadata === undefined ) { // 2.0
														
@@ -499,10 +531,10 @@ var Loader = function ( editor ) {
 
															 			case 'buffergeometry':
														
 
															-				var loader = new THREE.BufferGeometryLoader();
														
 
															+				var loader = new BufferGeometryLoader();
														
 
															 				var result = loader.parse( data );
														
 
															-				var mesh = new THREE.Mesh( result );
														
 
															+				var mesh = new Mesh( result );
														
 
															 				editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -516,7 +548,7 @@ var Loader = function ( editor ) {
 
															 			case 'object':
														
 
															-				var loader = new THREE.ObjectLoader();
														
 
															+				var loader = new ObjectLoader();
														
 
															 				loader.setResourcePath( scope.texturePath );
														
 
															 				var result = loader.parse( data );
														
@@ -566,8 +598,8 @@ var Loader = function ( editor ) {
 
															 		if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {
														
 
															-			var materials = new THREE.MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
														
 
															-			var object = new THREE.OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
														
 
															+			var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
														
 
															+			var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
														
 
															 			editor.execute( new AddObjectCommand( editor, object ) );
														
 
															 		}
														
@@ -576,7 +608,7 @@ var Loader = function ( editor ) {
 
															 		zip.filter( function ( path, file ) {
														
 
															-			var manager = new THREE.LoadingManager();
														
 
															+			var manager = new LoadingManager();
														
 
															 			manager.setURLModifier( function ( url ) {
														
 
															 				var file = zip.files[ url ];
														
@@ -600,7 +632,7 @@ var Loader = function ( editor ) {
 
															 				case 'fbx':
														
 
															-					var loader = new THREE.FBXLoader( manager );
														
 
															+					var loader = new FBXLoader( manager );
														
 
															 					var object = loader.parse( file.asArrayBuffer() );
														
 
															 					editor.execute( new AddObjectCommand( editor, object ) );
														
@@ -609,7 +641,7 @@ var Loader = function ( editor ) {
 
															 				case 'glb':
														
 
															-					var loader = new THREE.GLTFLoader();
														
 
															+					var loader = new GLTFLoader();
														
 
															 					loader.parse( file.asArrayBuffer(), '', function ( result ) {
														
 
															 						var scene = result.scene;
														
@@ -623,7 +655,7 @@ var Loader = function ( editor ) {
 
															 				case 'gltf':
														
 
															-					var loader = new THREE.GLTFLoader( manager );
														
 
															+					var loader = new GLTFLoader( manager );
														
 
															 					loader.parse( file.asText(), '', function ( result ) {
														
 
															 						var scene = result.scene;
														
@@ -652,7 +684,7 @@ var Loader = function ( editor ) {
 
															 		} else {
														
 
															-			var magic = THREE.LoaderUtils.decodeText( new Uint8Array( contents, 0, 4 ) );
														
 
															+			var magic = LoaderUtils.decodeText( new Uint8Array( contents, 0, 4 ) );
														
 
															 			if ( magic === 'glTF' ) {
														
@@ -664,7 +696,7 @@ var Loader = function ( editor ) {
 
															 			} else {
														
 
															 				// contents is a .gltf file
														
 
															-				resultContent = THREE.LoaderUtils.decodeText( new Uint8Array( contents ) );
														
 
															+				resultContent = LoaderUtils.decodeText( new Uint8Array( contents ) );
														
 
															 			}
														
@@ -677,3 +709,5 @@ var Loader = function ( editor ) {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { Loader };
														
--- a/editor/js/Menubar.Add.js
+++ b/editor/js/Menubar.Add.js
@@ -2,25 +2,61 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Add = function ( editor ) {
														
 
															+import {
														
 
															+	AmbientLight,
														
 
															+	BoxBufferGeometry,
														
 
															+	CatmullRomCurve3,
														
 
															+	CircleBufferGeometry,
														
 
															+	CylinderBufferGeometry,
														
 
															+	DirectionalLight,
														
 
															+	DodecahedronBufferGeometry,
														
 
															+	DoubleSide,
														
 
															+	HemisphereLight,
														
 
															+	IcosahedronBufferGeometry,
														
 
															+	LatheBufferGeometry,
														
 
															+	Mesh,
														
 
															+	MeshStandardMaterial,
														
 
															+	OctahedronBufferGeometry,
														
 
															+	OrthographicCamera,
														
 
															+	PerspectiveCamera,
														
 
															+	PlaneBufferGeometry,
														
 
															+	PointLight,
														
 
															+	RingBufferGeometry,
														
 
															+	SphereBufferGeometry,
														
 
															+	Sprite,
														
 
															+	SpriteMaterial,
														
 
															+	SpotLight,
														
 
															+	TetrahedronBufferGeometry,
														
 
															+	TorusBufferGeometry,
														
 
															+	TorusKnotBufferGeometry,
														
 
															+	TubeBufferGeometry,
														
 
															+	Vector2,
														
 
															+	Vector3
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
														
 
															+
														
 
															+import { AddObjectCommand } from './commands/AddObjectCommand.js';
														
 
															+
														
 
															+var MenubarAdd = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/add' ) );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
 
															 	// Group
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/group' ) );
														
 
															 	option.onClick( function () {
														
@@ -35,17 +71,17 @@ Menubar.Add = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Box
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/box' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Box';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -55,13 +91,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Circle
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Circle';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -71,13 +107,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Cylinder
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Cylinder';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -87,13 +123,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Dodecahedron
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/dodecahedron' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.DodecahedronBufferGeometry( 1, 0 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new DodecahedronBufferGeometry( 1, 0 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Dodecahedron';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -103,13 +139,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Icosahedron
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new IcosahedronBufferGeometry( 1, 0 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Icosahedron';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -119,27 +155,27 @@ Menubar.Add = function ( editor ) {
 
															 	// Lathe
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
														
 
															 	option.onClick( function () {
														
 
															 		var points = [
														
 
															-			new THREE.Vector2( 0, 0 ),
														
 
															-			new THREE.Vector2( 0.4, 0 ),
														
 
															-			new THREE.Vector2( 0.35, 0.05 ),
														
 
															-			new THREE.Vector2( 0.1, 0.075 ),
														
 
															-			new THREE.Vector2( 0.08, 0.1 ),
														
 
															-			new THREE.Vector2( 0.08, 0.4 ),
														
 
															-			new THREE.Vector2( 0.1, 0.42 ),
														
 
															-			new THREE.Vector2( 0.14, 0.48 ),
														
 
															-			new THREE.Vector2( 0.2, 0.5 ),
														
 
															-			new THREE.Vector2( 0.25, 0.54 ),
														
 
															-			new THREE.Vector2( 0.3, 1.2 )
														
 
															+			new Vector2( 0, 0 ),
														
 
															+			new Vector2( 0.4, 0 ),
														
 
															+			new Vector2( 0.35, 0.05 ),
														
 
															+			new Vector2( 0.1, 0.075 ),
														
 
															+			new Vector2( 0.08, 0.1 ),
														
 
															+			new Vector2( 0.08, 0.4 ),
														
 
															+			new Vector2( 0.1, 0.42 ),
														
 
															+			new Vector2( 0.14, 0.48 ),
														
 
															+			new Vector2( 0.2, 0.5 ),
														
 
															+			new Vector2( 0.25, 0.54 ),
														
 
															+			new Vector2( 0.3, 1.2 )
														
 
															 		];
														
 
															-		var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
														
 
															+		var geometry = new LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial( { side: DoubleSide } ) );
														
 
															 		mesh.name = 'Lathe';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -149,13 +185,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Octahedron
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new OctahedronBufferGeometry( 1, 0 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Octahedron';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -165,14 +201,14 @@ Menubar.Add = function ( editor ) {
 
															 	// Plane
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
														
 
															-		var material = new THREE.MeshStandardMaterial();
														
 
															-		var mesh = new THREE.Mesh( geometry, material );
														
 
															+		var geometry = new PlaneBufferGeometry( 1, 1, 1, 1 );
														
 
															+		var material = new MeshStandardMaterial();
														
 
															+		var mesh = new Mesh( geometry, material );
														
 
															 		mesh.name = 'Plane';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -182,13 +218,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Ring
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Ring';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -198,13 +234,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Sphere
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Sphere';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -214,12 +250,12 @@ Menubar.Add = function ( editor ) {
 
															 	// Sprite
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
														
 
															+		var sprite = new Sprite( new SpriteMaterial() );
														
 
															 		sprite.name = 'Sprite';
														
 
															 		editor.execute( new AddObjectCommand( editor, sprite ) );
														
@@ -229,13 +265,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Tetrahedron
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.TetrahedronBufferGeometry( 1, 0 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new TetrahedronBufferGeometry( 1, 0 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Tetrahedron';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -245,13 +281,13 @@ Menubar.Add = function ( editor ) {
 
															 	// Torus
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Torus';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -261,13 +297,13 @@ Menubar.Add = function ( editor ) {
 
															 	// TorusKnot
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'TorusKnot';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -277,20 +313,20 @@ Menubar.Add = function ( editor ) {
 
															 	// Tube
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var path = new THREE.CatmullRomCurve3( [
														
 
															-			new THREE.Vector3( 2, 2, - 2 ),
														
 
															-			new THREE.Vector3( 2, - 2, - 0.6666666666666667 ),
														
 
															-			new THREE.Vector3( - 2, - 2, 0.6666666666666667 ),
														
 
															-			new THREE.Vector3( - 2, 2, 2 )
														
 
															+		var path = new CatmullRomCurve3( [
														
 
															+			new Vector3( 2, 2, - 2 ),
														
 
															+			new Vector3( 2, - 2, - 0.6666666666666667 ),
														
 
															+			new Vector3( - 2, - 2, 0.6666666666666667 ),
														
 
															+			new Vector3( - 2, 2, 2 )
														
 
															 		] );
														
 
															-		var geometry = new THREE.TubeBufferGeometry( path, 64, 1, 8, false );
														
 
															-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
														
 
															+		var geometry = new TubeBufferGeometry( path, 64, 1, 8, false );
														
 
															+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
														
 
															 		mesh.name = 'Tube';
														
 
															 		editor.execute( new AddObjectCommand( editor, mesh ) );
														
@@ -301,7 +337,7 @@ Menubar.Add = function ( editor ) {
 
															 	/*
														
 
															 	// Teapot
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( 'Teapot' );
														
 
															 	option.onClick( function () {
														
@@ -314,10 +350,10 @@ Menubar.Add = function ( editor ) {
 
															 		var fitLid = false;
														
 
															 		var blinnScale = true;
														
 
															-		var material = new THREE.MeshStandardMaterial();
														
 
															+		var material = new MeshStandardMaterial();
														
 
															-		var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
														
 
															-		var mesh = new THREE.Mesh( geometry, material );
														
 
															+		var geometry = new TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
														
 
															+		var mesh = new Mesh( geometry, material );
														
 
															 		mesh.name = 'Teapot';
														
 
															 		editor.addObject( mesh );
														
@@ -329,18 +365,18 @@ Menubar.Add = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// AmbientLight
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
														
 
															 	option.onClick( function () {
														
 
															 		var color = 0x222222;
														
 
															-		var light = new THREE.AmbientLight( color );
														
 
															+		var light = new AmbientLight( color );
														
 
															 		light.name = 'AmbientLight';
														
 
															 		editor.execute( new AddObjectCommand( editor, light ) );
														
@@ -350,7 +386,7 @@ Menubar.Add = function ( editor ) {
 
															 	// DirectionalLight
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
														
 
															 	option.onClick( function () {
														
@@ -358,7 +394,7 @@ Menubar.Add = function ( editor ) {
 
															 		var color = 0xffffff;
														
 
															 		var intensity = 1;
														
 
															-		var light = new THREE.DirectionalLight( color, intensity );
														
 
															+		var light = new DirectionalLight( color, intensity );
														
 
															 		light.name = 'DirectionalLight';
														
 
															 		light.target.name = 'DirectionalLight Target';
														
@@ -371,7 +407,7 @@ Menubar.Add = function ( editor ) {
 
															 	// HemisphereLight
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
														
 
															 	option.onClick( function () {
														
@@ -380,7 +416,7 @@ Menubar.Add = function ( editor ) {
 
															 		var groundColor = 0xffaa00;
														
 
															 		var intensity = 1;
														
 
															-		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
														
 
															+		var light = new HemisphereLight( skyColor, groundColor, intensity );
														
 
															 		light.name = 'HemisphereLight';
														
 
															 		light.position.set( 0, 10, 0 );
														
@@ -392,7 +428,7 @@ Menubar.Add = function ( editor ) {
 
															 	// PointLight
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
														
 
															 	option.onClick( function () {
														
@@ -401,7 +437,7 @@ Menubar.Add = function ( editor ) {
 
															 		var intensity = 1;
														
 
															 		var distance = 0;
														
 
															-		var light = new THREE.PointLight( color, intensity, distance );
														
 
															+		var light = new PointLight( color, intensity, distance );
														
 
															 		light.name = 'PointLight';
														
 
															 		editor.execute( new AddObjectCommand( editor, light ) );
														
@@ -411,7 +447,7 @@ Menubar.Add = function ( editor ) {
 
															 	// SpotLight
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
														
 
															 	option.onClick( function () {
														
@@ -422,7 +458,7 @@ Menubar.Add = function ( editor ) {
 
															 		var angle = Math.PI * 0.1;
														
 
															 		var penumbra = 0;
														
 
															-		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
														
 
															+		var light = new SpotLight( color, intensity, distance, angle, penumbra );
														
 
															 		light.name = 'SpotLight';
														
 
															 		light.target.name = 'SpotLight Target';
														
@@ -435,16 +471,16 @@ Menubar.Add = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// OrthographicCamera
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var camera = new THREE.OrthographicCamera();
														
 
															+		var camera = new OrthographicCamera();
														
 
															 		camera.name = 'OrthographicCamera';
														
 
															 		editor.execute( new AddObjectCommand( editor, camera ) );
														
@@ -454,12 +490,12 @@ Menubar.Add = function ( editor ) {
 
															 	// PerspectiveCamera
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var camera = new THREE.PerspectiveCamera();
														
 
															+		var camera = new PerspectiveCamera();
														
 
															 		camera.name = 'PerspectiveCamera';
														
 
															 		editor.execute( new AddObjectCommand( editor, camera ) );
														
@@ -470,3 +506,5 @@ Menubar.Add = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarAdd };
														
--- a/editor/js/Menubar.Edit.js
+++ b/editor/js/Menubar.Edit.js
@@ -2,25 +2,32 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Edit = function ( editor ) {
														
 
															+import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
														
 
															+
														
 
															+import { AddObjectCommand } from './commands/AddObjectCommand.js';
														
 
															+import { RemoveObjectCommand } from './commands/RemoveObjectCommand.js';
														
 
															+import { MultiCmdsCommand } from './commands/MultiCmdsCommand.js';
														
 
															+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
														
 
															+
														
 
															+var MenubarEdit = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/edit' ) );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
 
															 	// Undo
														
 
															-	var undo = new UI.Row();
														
 
															+	var undo = new UIRow();
														
 
															 	undo.setClass( 'option' );
														
 
															 	undo.setTextContent( strings.getKey( 'menubar/edit/undo' ) );
														
 
															 	undo.onClick( function () {
														
@@ -32,7 +39,7 @@ Menubar.Edit = function ( editor ) {
 
															 	// Redo
														
 
															-	var redo = new UI.Row();
														
 
															+	var redo = new UIRow();
														
 
															 	redo.setClass( 'option' );
														
 
															 	redo.setTextContent( strings.getKey( 'menubar/edit/redo' ) );
														
 
															 	redo.onClick( function () {
														
@@ -44,7 +51,7 @@ Menubar.Edit = function ( editor ) {
 
															 	// Clear History
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/edit/clear_history' ) );
														
 
															 	option.onClick( function () {
														
@@ -82,11 +89,11 @@ Menubar.Edit = function ( editor ) {
 
															 	// ---
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Clone
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/edit/clone' ) );
														
 
															 	option.onClick( function () {
														
@@ -104,7 +111,7 @@ Menubar.Edit = function ( editor ) {
 
															 	// Delete
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/edit/delete' ) );
														
 
															 	option.onClick( function () {
														
@@ -121,10 +128,10 @@ Menubar.Edit = function ( editor ) {
 
															 	// Minify shaders
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/edit/minify_shaders' ) );
														
 
															-	option.onClick( function() {
														
 
															+	option.onClick( function () {
														
 
															 		var root = editor.selected || editor.scene;
														
@@ -133,7 +140,7 @@ Menubar.Edit = function ( editor ) {
 
															 		var path = [];
														
 
															-		function getPath ( object ) {
														
 
															+		function getPath( object ) {
														
 
															 			path.length = 0;
														
@@ -156,12 +163,12 @@ Menubar.Edit = function ( editor ) {
 
															 				try {
														
 
															 					var shader = glslprep.minifyGlsl( [
														
 
															-							material.vertexShader, material.fragmentShader ] );
														
 
															+						material.vertexShader, material.fragmentShader ] );
														
 
															 					cmds.push( new SetMaterialValueCommand( editor, object, 'vertexShader', shader[ 0 ] ) );
														
 
															 					cmds.push( new SetMaterialValueCommand( editor, object, 'fragmentShader', shader[ 1 ] ) );
														
 
															-					++nMaterialsChanged;
														
 
															+					++ nMaterialsChanged;
														
 
															 				} catch ( e ) {
														
@@ -199,11 +206,11 @@ Menubar.Edit = function ( editor ) {
 
															 	} );
														
 
															 	options.add( option );
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Set textures to sRGB. See #15903
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/edit/fixcolormaps' ) );
														
 
															 	option.onClick( function () {
														
@@ -265,3 +272,5 @@ Menubar.Edit = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarEdit };
														
--- a/editor/js/Menubar.Examples.js
+++ b/editor/js/Menubar.Examples.js
@@ -2,19 +2,25 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Examples = function ( editor ) {
														
 
															+import {
														
 
															+	FileLoader
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIRow } from './libs/ui.js';
														
 
															+
														
 
															+var MenubarExamples = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/examples' ) );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
@@ -28,7 +34,7 @@ Menubar.Examples = function ( editor ) {
 
															 		{ title: 'menubar/examples/Shaders', file: 'shaders.app.json' }
														
 
															 	];
														
 
															-	var loader = new THREE.FileLoader();
														
 
															+	var loader = new FileLoader();
														
 
															 	for ( var i = 0; i < items.length; i ++ ) {
														
@@ -36,7 +42,7 @@ Menubar.Examples = function ( editor ) {
 
															 			var item = items[ i ];
														
 
															-			var option = new UI.Row();
														
 
															+			var option = new UIRow();
														
 
															 			option.setClass( 'option' );
														
 
															 			option.setTextContent( strings.getKey( item.title ) );
														
 
															 			option.onClick( function () {
														
@@ -62,3 +68,5 @@ Menubar.Examples = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarExamples };
														
--- a/editor/js/Menubar.File.js
+++ b/editor/js/Menubar.File.js
@@ -2,7 +2,20 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.File = function ( editor ) {
														
 
															+import {
														
 
															+	FileLoader,
														
 
															+	LoadingManager
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { ColladaExporter } from '../../examples/jsm/exporters/ColladaExporter.js';
														
 
															+import { GLTFExporter } from '../../examples/jsm/exporters/GLTFExporter.js';
														
 
															+import { OBJExporter } from '../../examples/jsm/exporters/OBJExporter.js';
														
 
															+import { PLYExporter } from '../../examples/jsm/exporters/PLYExporter.js';
														
 
															+import { STLExporter } from '../../examples/jsm/exporters/STLExporter.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
														
 
															+
														
 
															+var MenubarFile = function ( editor ) {
														
 
															 	var NUMBER_PRECISION = 6;
														
@@ -17,21 +30,21 @@ Menubar.File = function ( editor ) {
 
															 	var config = editor.config;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/file' ) );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
 
															 	// New
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/new' ) );
														
 
															 	option.onClick( function () {
														
@@ -47,7 +60,7 @@ Menubar.File = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Import
														
@@ -58,7 +71,7 @@ Menubar.File = function ( editor ) {
 
															 	var fileInput = document.createElement( 'input' );
														
 
															 	fileInput.multiple = true;
														
 
															 	fileInput.type = 'file';
														
 
															-	fileInput.addEventListener( 'change', function ( event ) {
														
 
															+	fileInput.addEventListener( 'change', function () {
														
 
															 		editor.loader.loadFiles( fileInput.files );
														
 
															 		form.reset();
														
@@ -66,7 +79,7 @@ Menubar.File = function ( editor ) {
 
															 	} );
														
 
															 	form.appendChild( fileInput );
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/import' ) );
														
 
															 	option.onClick( function () {
														
@@ -78,11 +91,11 @@ Menubar.File = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Export Geometry
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/geometry' ) );
														
 
															 	option.onClick( function () {
														
@@ -125,7 +138,7 @@ Menubar.File = function ( editor ) {
 
															 	// Export Object
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/object' ) );
														
 
															 	option.onClick( function () {
														
@@ -159,7 +172,7 @@ Menubar.File = function ( editor ) {
 
															 	// Export Scene
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/scene' ) );
														
 
															 	option.onClick( function () {
														
@@ -184,16 +197,16 @@ Menubar.File = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Export DAE
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/dae' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.ColladaExporter();
														
 
															+		var exporter = new ColladaExporter();
														
 
															 		exporter.parse( editor.scene, function ( result ) {
														
@@ -206,12 +219,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export GLB
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/glb' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.GLTFExporter();
														
 
															+		var exporter = new GLTFExporter();
														
 
															 		exporter.parse( editor.scene, function ( result ) {
														
@@ -219,6 +232,7 @@ Menubar.File = function ( editor ) {
 
															 			// forceIndices: true, forcePowerOfTwoTextures: true
														
 
															 			// to allow compatibility with facebook
														
 
															+
														
 
															 		}, { binary: true, forceIndices: true, forcePowerOfTwoTextures: true } );
														
 
															 	} );
														
@@ -226,12 +240,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export GLTF
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/gltf' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.GLTFExporter();
														
 
															+		var exporter = new GLTFExporter();
														
 
															 		exporter.parse( editor.scene, function ( result ) {
														
@@ -245,7 +259,7 @@ Menubar.File = function ( editor ) {
 
															 	// Export OBJ
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/obj' ) );
														
 
															 	option.onClick( function () {
														
@@ -259,7 +273,7 @@ Menubar.File = function ( editor ) {
 
															 		}
														
 
															-		var exporter = new THREE.OBJExporter();
														
 
															+		var exporter = new OBJExporter();
														
 
															 		saveString( exporter.parse( object ), 'model.obj' );
														
@@ -268,12 +282,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export PLY (ASCII)
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/ply' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.PLYExporter();
														
 
															+		var exporter = new PLYExporter();
														
 
															 		exporter.parse( editor.scene, function ( result ) {
														
@@ -286,12 +300,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export PLY (Binary)
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/ply_binary' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.PLYExporter();
														
 
															+		var exporter = new PLYExporter();
														
 
															 		exporter.parse( editor.scene, function ( result ) {
														
@@ -304,12 +318,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export STL (ASCII)
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/stl' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.STLExporter();
														
 
															+		var exporter = new STLExporter();
														
 
															 		saveString( exporter.parse( editor.scene ), 'model.stl' );
														
@@ -318,12 +332,12 @@ Menubar.File = function ( editor ) {
 
															 	// Export STL (Binary)
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/export/stl_binary' ) );
														
 
															 	option.onClick( function () {
														
 
															-		var exporter = new THREE.STLExporter();
														
 
															+		var exporter = new STLExporter();
														
 
															 		saveArrayBuffer( exporter.parse( editor.scene, { binary: true } ), 'model-binary.stl' );
														
@@ -332,11 +346,11 @@ Menubar.File = function ( editor ) {
 
															 	//
														
 
															-	options.add( new UI.HorizontalRule() );
														
 
															+	options.add( new UIHorizontalRule() );
														
 
															 	// Publish
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/file/publish' ) );
														
 
															 	option.onClick( function () {
														
@@ -358,13 +372,13 @@ Menubar.File = function ( editor ) {
 
															 		var title = config.getKey( 'project/title' );
														
 
															-		var manager = new THREE.LoadingManager( function () {
														
 
															+		var manager = new LoadingManager( function () {
														
 
															 			save( zip.generate( { type: 'blob' } ), ( title !== '' ? title : 'untitled' ) + '.zip' );
														
 
															 		} );
														
 
															-		var loader = new THREE.FileLoader( manager );
														
 
															+		var loader = new FileLoader( manager );
														
 
															 		loader.load( 'js/libs/app/index.html', function ( content ) {
														
 
															 			content = content.replace( '<!-- title -->', title );
														
@@ -400,9 +414,9 @@ Menubar.File = function ( editor ) {
 
															 			zip.file( 'js/app.js', content );
														
 
															 		} );
														
 
															-		loader.load( '../build/three.min.js', function ( content ) {
														
 
															+		loader.load( '../build/three.module.js', function ( content ) {
														
 
															-			zip.file( 'js/three.min.js', content );
														
 
															+			zip.file( 'js/three.module.js', content );
														
 
															 		} );
														
@@ -437,3 +451,5 @@ Menubar.File = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarFile };
														
--- a/editor/js/Menubar.Help.js
+++ b/editor/js/Menubar.Help.js
@@ -2,25 +2,27 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Help = function ( editor ) {
														
 
															+import { UIPanel, UIRow } from './libs/ui.js';
														
 
															+
														
 
															+var MenubarHelp = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/help' ) );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
 
															 	// Source code
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/help/source_code' ) );
														
 
															 	option.onClick( function () {
														
@@ -32,7 +34,7 @@ Menubar.Help = function ( editor ) {
 
															 	// About
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( strings.getKey( 'menubar/help/about' ) );
														
 
															 	option.onClick( function () {
														
@@ -45,3 +47,5 @@ Menubar.Help = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarHelp };
														
--- a/editor/js/Menubar.Play.js
+++ b/editor/js/Menubar.Play.js
@@ -2,17 +2,19 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Play = function ( editor ) {
														
 
															+import { UIPanel } from './libs/ui.js';
														
 
															+
														
 
															+var MenubarPlay = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															 	var isPlaying = false;
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( strings.getKey( 'menubar/play' ) );
														
 
															 	title.onClick( function () {
														
@@ -37,3 +39,5 @@ Menubar.Play = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarPlay };
														
--- a/editor/js/Menubar.Status.js
+++ b/editor/js/Menubar.Status.js
@@ -2,14 +2,21 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.Status = function ( editor ) {
														
 
															+import {
														
 
															+	REVISION
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIText } from './libs/ui.js';
														
 
															+import { UIBoolean } from './libs/ui.three.js';
														
 
															+
														
 
															+var MenubarStatus = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu right' );
														
 
															-	var autosave = new UI.THREE.Boolean( editor.config.getKey( 'autosave' ), strings.getKey( 'menubar/status/autosave' ) );
														
 
															+	var autosave = new UIBoolean( editor.config.getKey( 'autosave' ), strings.getKey( 'menubar/status/autosave' ) );
														
 
															 	autosave.text.setColor( '#888' );
														
 
															 	autosave.onChange( function () {
														
@@ -38,7 +45,7 @@ Menubar.Status = function ( editor ) {
 
															 	} );
														
 
															-	var version = new UI.Text( 'r' + THREE.REVISION );
														
 
															+	var version = new UIText( 'r' + REVISION );
														
 
															 	version.setClass( 'title' );
														
 
															 	version.setOpacity( 0.5 );
														
 
															 	container.add( version );
														
@@ -46,3 +53,5 @@ Menubar.Status = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarStatus };
														
--- a/editor/js/Menubar.View.js
+++ b/editor/js/Menubar.View.js
@@ -2,23 +2,25 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Menubar.View = function ( editor ) {
														
 
															+import { UIPanel, UIRow } from './libs/ui.js';
														
 
															-	var container = new UI.Panel();
														
 
															+var MenubarView = function ( editor ) {
														
 
															+
														
 
															+	var container = new UIPanel();
														
 
															 	container.setClass( 'menu' );
														
 
															-	var title = new UI.Panel();
														
 
															+	var title = new UIPanel();
														
 
															 	title.setClass( 'title' );
														
 
															 	title.setTextContent( 'View' );
														
 
															 	container.add( title );
														
 
															-	var options = new UI.Panel();
														
 
															+	var options = new UIPanel();
														
 
															 	options.setClass( 'options' );
														
 
															 	container.add( options );
														
 
															 	// VR mode
														
 
															-	var option = new UI.Row();
														
 
															+	var option = new UIRow();
														
 
															 	option.setClass( 'option' );
														
 
															 	option.setTextContent( 'VR mode' );
														
 
															 	option.onClick( function () {
														
@@ -31,3 +33,5 @@ Menubar.View = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { MenubarView };
														
--- a/editor/js/Menubar.js
+++ b/editor/js/Menubar.js
@@ -2,21 +2,32 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import { UIPanel } from './libs/ui.js';
														
 
															+
														
 
															+import { MenubarAdd } from './Menubar.Add.js';
														
 
															+import { MenubarEdit } from './Menubar.Edit.js';
														
 
															+import { MenubarFile } from './Menubar.File.js';
														
 
															+import { MenubarExamples } from './Menubar.Examples.js';
														
 
															+import { MenubarHelp } from './Menubar.Help.js';
														
 
															+import { MenubarPlay } from './Menubar.Play.js';
														
 
															+import { MenubarStatus } from './Menubar.Status.js';
														
 
															+
														
 
															 var Menubar = function ( editor ) {
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'menubar' );
														
 
															-	container.add( new Menubar.File( editor ) );
														
 
															-	container.add( new Menubar.Edit( editor ) );
														
 
															-	container.add( new Menubar.Add( editor ) );
														
 
															-	container.add( new Menubar.Play( editor ) );
														
 
															-	// container.add( new Menubar.View( editor ) );
														
 
															-	container.add( new Menubar.Examples( editor ) );
														
 
															-	container.add( new Menubar.Help( editor ) );
														
 
															+	container.add( new MenubarFile( editor ) );
														
 
															+	container.add( new MenubarEdit( editor ) );
														
 
															+	container.add( new MenubarAdd( editor ) );
														
 
															+	container.add( new MenubarPlay( editor ) );
														
 
															+	container.add( new MenubarExamples( editor ) );
														
 
															+	container.add( new MenubarHelp( editor ) );
														
 
															-	container.add( new Menubar.Status( editor ) );
														
 
															+	container.add( new MenubarStatus( editor ) );
														
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Menubar };
														
--- a/editor/js/Player.js
+++ b/editor/js/Player.js
@@ -2,18 +2,23 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import * as THREE from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel } from './libs/ui.js';
														
 
															+import { APP } from './libs/app.js';
														
 
															+
														
 
															 var Player = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'player' );
														
 
															 	container.setPosition( 'absolute' );
														
 
															 	container.setDisplay( 'none' );
														
 
															 	//
														
 
															-	var player = new APP.Player();
														
 
															+	var player = new APP.Player( THREE );
														
 
															 	container.dom.appendChild( player.dom );
														
 
															 	window.addEventListener( 'resize', function () {
														
@@ -44,3 +49,5 @@ var Player = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Player };
														
--- a/editor/js/Script.js
+++ b/editor/js/Script.js
@@ -2,21 +2,26 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import { UIElement, UIPanel, UIText } from './libs/ui.js';
														
 
															+
														
 
															+import { SetScriptValueCommand } from './commands/SetScriptValueCommand.js';
														
 
															+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
														
 
															+
														
 
															 var Script = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'script' );
														
 
															 	container.setPosition( 'absolute' );
														
 
															 	container.setBackgroundColor( '#272822' );
														
 
															 	container.setDisplay( 'none' );
														
 
															-	var header = new UI.Panel();
														
 
															+	var header = new UIPanel();
														
 
															 	header.setPadding( '10px' );
														
 
															 	container.add( header );
														
 
															-	var title = new UI.Text().setColor( '#fff' );
														
 
															+	var title = new UIText().setColor( '#fff' );
														
 
															 	header.add( title );
														
 
															 	var buttonSVG = ( function () {
														
@@ -32,7 +37,7 @@ var Script = function ( editor ) {
 
															 	} )();
														
 
															-	var close = new UI.Element( buttonSVG );
														
 
															+	var close = new UIElement( buttonSVG );
														
 
															 	close.setPosition( 'absolute' );
														
 
															 	close.setTop( '3px' );
														
 
															 	close.setRight( '1px' );
														
@@ -320,13 +325,41 @@ var Script = function ( editor ) {
 
															 	} );
														
 
															 	codemirror.setOption( 'extraKeys', {
														
 
															-		'Ctrl-Space': function ( cm ) { server.complete( cm ); },
														
 
															-		'Ctrl-I': function ( cm ) { server.showType( cm ); },
														
 
															-		'Ctrl-O': function ( cm ) { server.showDocs( cm ); },
														
 
															-		'Alt-.': function ( cm ) { server.jumpToDef( cm ); },
														
 
															-		'Alt-,': function ( cm ) { server.jumpBack( cm ); },
														
 
															-		'Ctrl-Q': function ( cm ) { server.rename( cm ); },
														
 
															-		'Ctrl-.': function ( cm ) { server.selectName( cm ); }
														
 
															+		'Ctrl-Space': function ( cm ) {
														
 
															+
														
 
															+			server.complete( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Ctrl-I': function ( cm ) {
														
 
															+
														
 
															+			server.showType( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Ctrl-O': function ( cm ) {
														
 
															+
														
 
															+			server.showDocs( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Alt-.': function ( cm ) {
														
 
															+
														
 
															+			server.jumpToDef( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Alt-,': function ( cm ) {
														
 
															+
														
 
															+			server.jumpBack( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Ctrl-Q': function ( cm ) {
														
 
															+
														
 
															+			server.rename( cm );
														
 
															+
														
 
															+		},
														
 
															+		'Ctrl-.': function ( cm ) {
														
 
															+
														
 
															+			server.selectName( cm );
														
 
															+
														
 
															+		}
														
 
															 	} );
														
 
															 	codemirror.on( 'cursorActivity', function ( cm ) {
														
@@ -429,3 +462,5 @@ var Script = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Script };
														
--- a/editor/js/Sidebar.Animation.js
+++ b/editor/js/Sidebar.Animation.js
@@ -2,7 +2,9 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Animation = function ( editor ) {
														
 
															+import { UIPanel, UIDiv, UIBreak, UISelect, UIButton, UIText } from './libs/ui.js';
														
 
															+
														
 
															+var SidebarAnimation = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var mixer = editor.mixer;
														
@@ -64,21 +66,23 @@ Sidebar.Animation = function ( editor ) {
 
															 	}
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setDisplay( 'none' );
														
 
															-	container.add( new UI.Text( 'Animations' ).setTextTransform( 'uppercase' ) );
														
 
															-	container.add( new UI.Break() );
														
 
															-	container.add( new UI.Break() );
														
 
															+	container.add( new UIText( 'Animations' ).setTextTransform( 'uppercase' ) );
														
 
															+	container.add( new UIBreak() );
														
 
															+	container.add( new UIBreak() );
														
 
															-	var div = new UI.Div();
														
 
															+	var div = new UIDiv();
														
 
															 	container.add( div );
														
 
															-	var animationsSelect = new UI.Select().setFontSize( '12px' );
														
 
															+	var animationsSelect = new UISelect().setFontSize( '12px' );
														
 
															 	div.add( animationsSelect );
														
 
															-	div.add( new UI.Button( 'Play' ).setMarginLeft( '4px' ).onClick( playAction ) );
														
 
															-	div.add( new UI.Button( 'Stop' ).setMarginLeft( '4px' ).onClick( stopAction ) );
														
 
															+	div.add( new UIButton( 'Play' ).setMarginLeft( '4px' ).onClick( playAction ) );
														
 
															+	div.add( new UIButton( 'Stop' ).setMarginLeft( '4px' ).onClick( stopAction ) );
														
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarAnimation };
														
--- a/editor/js/Sidebar.Geometry.BoxGeometry.js
+++ b/editor/js/Sidebar.Geometry.BoxGeometry.js
@@ -2,71 +2,77 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
														
 
															+import { BoxBufferGeometry } from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UINumber, UIInteger } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryBoxGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// width
														
 
															-	var widthRow = new UI.Row();
														
 
															-	var width = new UI.Number( parameters.width ).onChange( update );
														
 
															+	var widthRow = new UIRow();
														
 
															+	var width = new UINumber( parameters.width ).onChange( update );
														
 
															-	widthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setWidth( '90px' ) );
														
 
															+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setWidth( '90px' ) );
														
 
															 	widthRow.add( width );
														
 
															 	container.add( widthRow );
														
 
															 	// height
														
 
															-	var heightRow = new UI.Row();
														
 
															-	var height = new UI.Number( parameters.height ).onChange( update );
														
 
															+	var heightRow = new UIRow();
														
 
															+	var height = new UINumber( parameters.height ).onChange( update );
														
 
															-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setWidth( '90px' ) );
														
 
															+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setWidth( '90px' ) );
														
 
															 	heightRow.add( height );
														
 
															 	container.add( heightRow );
														
 
															 	// depth
														
 
															-	var depthRow = new UI.Row();
														
 
															-	var depth = new UI.Number( parameters.depth ).onChange( update );
														
 
															+	var depthRow = new UIRow();
														
 
															+	var depth = new UINumber( parameters.depth ).onChange( update );
														
 
															-	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setWidth( '90px' ) );
														
 
															+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setWidth( '90px' ) );
														
 
															 	depthRow.add( depth );
														
 
															 	container.add( depthRow );
														
 
															 	// widthSegments
														
 
															-	var widthSegmentsRow = new UI.Row();
														
 
															-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var widthSegmentsRow = new UIRow();
														
 
															+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setWidth( '90px' ) );
														
 
															+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setWidth( '90px' ) );
														
 
															 	widthSegmentsRow.add( widthSegments );
														
 
															 	container.add( widthSegmentsRow );
														
 
															 	// heightSegments
														
 
															-	var heightSegmentsRow = new UI.Row();
														
 
															-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var heightSegmentsRow = new UIRow();
														
 
															+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setWidth( '90px' ) );
														
 
															+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setWidth( '90px' ) );
														
 
															 	heightSegmentsRow.add( heightSegments );
														
 
															 	container.add( heightSegmentsRow );
														
 
															 	// depthSegments
														
 
															-	var depthSegmentsRow = new UI.Row();
														
 
															-	var depthSegments = new UI.Integer( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var depthSegmentsRow = new UIRow();
														
 
															+	var depthSegments = new UIInteger( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	depthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setWidth( '90px' ) );
														
 
															+	depthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setWidth( '90px' ) );
														
 
															 	depthSegmentsRow.add( depthSegments );
														
 
															 	container.add( depthSegmentsRow );
														
@@ -75,7 +81,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new BoxBufferGeometry(
														
 
															 			width.getValue(),
														
 
															 			height.getValue(),
														
 
															 			depth.getValue(),
														
@@ -90,4 +96,4 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.BoxBufferGeometry = Sidebar.Geometry.BoxGeometry;
														
 
															+export { SidebarGeometryBoxGeometry };
														
--- a/editor/js/Sidebar.Geometry.BufferGeometry.js
+++ b/editor/js/Sidebar.Geometry.BufferGeometry.js
@@ -2,13 +2,15 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.BufferGeometry = function ( editor ) {
														
 
															+import { UIRow, UIText, UISpan, UIBreak } from './libs/ui.js';
														
 
															+
														
 
															+var SidebarGeometryBufferGeometry = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	function update( object ) {
														
@@ -22,19 +24,19 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
															 			container.clear();
														
 
															 			container.setDisplay( 'block' );
														
 
															-			var text = new UI.Text( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
														
 
															+			var text = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
														
 
															 			container.add( text );
														
 
															-			var container2 = new UI.Span().setDisplay( 'inline-block' ).setWidth( '160px' );
														
 
															+			var container2 = new UISpan().setDisplay( 'inline-block' ).setWidth( '160px' );
														
 
															 			container.add( container2 );
														
 
															 			var index = geometry.index;
														
 
															 			if ( index !== null ) {
														
 
															-				container2.add( new UI.Text( strings.getKey( 'sidebar/geometry/buffer_geometry/index' ) ).setWidth( '80px' ) );
														
 
															-				container2.add( new UI.Text( ( index.count ).format() ).setFontSize( '12px' ) );
														
 
															-				container2.add( new UI.Break() );
														
 
															+				container2.add( new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/index' ) ).setWidth( '80px' ) );
														
 
															+				container2.add( new UIText( ( index.count ).format() ).setFontSize( '12px' ) );
														
 
															+				container2.add( new UIBreak() );
														
 
															 			}
														
@@ -44,9 +46,9 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
															 				var attribute = attributes[ name ];
														
 
															-				container2.add( new UI.Text( name ).setWidth( '80px' ) );
														
 
															-				container2.add( new UI.Text( ( attribute.count ).format() + ' (' + attribute.itemSize + ')' ).setFontSize( '12px' ) );
														
 
															-				container2.add( new UI.Break() );
														
 
															+				container2.add( new UIText( name ).setWidth( '80px' ) );
														
 
															+				container2.add( new UIText( ( attribute.count ).format() + ' (' + attribute.itemSize + ')' ).setFontSize( '12px' ) );
														
 
															+				container2.add( new UIBreak() );
														
 
															 			}
														
@@ -64,3 +66,5 @@ Sidebar.Geometry.BufferGeometry = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarGeometryBufferGeometry };
														
--- a/editor/js/Sidebar.Geometry.CircleGeometry.js
+++ b/editor/js/Sidebar.Geometry.CircleGeometry.js
@@ -2,51 +2,60 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	CircleBufferGeometry,
														
 
															+	Math as _Math
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryCircleGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// segments
														
 
															-	var segmentsRow = new UI.Row();
														
 
															-	var segments = new UI.Integer( parameters.segments ).setRange( 3, Infinity ).onChange( update );
														
 
															+	var segmentsRow = new UIRow();
														
 
															+	var segments = new UIInteger( parameters.segments ).setRange( 3, Infinity ).onChange( update );
														
 
															-	segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setWidth( '90px' ) );
														
 
															+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setWidth( '90px' ) );
														
 
															 	segmentsRow.add( segments );
														
 
															 	container.add( segmentsRow );
														
 
															 	// thetaStart
														
 
															-	var thetaStartRow = new UI.Row();
														
 
															-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaStartRow = new UIRow();
														
 
															+	var thetaStart = new UINumber( parameters.thetaStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															 	thetaStartRow.add( thetaStart );
														
 
															 	container.add( thetaStartRow );
														
 
															 	// thetaLength
														
 
															-	var thetaLengthRow = new UI.Row();
														
 
															-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaLengthRow = new UIRow();
														
 
															+	var thetaLength = new UINumber( parameters.thetaLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															 	thetaLengthRow.add( thetaLength );
														
 
															 	container.add( thetaLengthRow );
														
@@ -55,11 +64,11 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new CircleBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			segments.getValue(),
														
 
															-			thetaStart.getValue() * THREE.Math.DEG2RAD,
														
 
															-			thetaLength.getValue() * THREE.Math.DEG2RAD
														
 
															+			thetaStart.getValue() * _Math.DEG2RAD,
														
 
															+			thetaLength.getValue() * _Math.DEG2RAD
														
 
															 		) ) );
														
 
															 	}
														
@@ -68,4 +77,4 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.CircleBufferGeometry = Sidebar.Geometry.CircleGeometry;
														
 
															+export { SidebarGeometryCircleGeometry };
														
--- a/editor/js/Sidebar.Geometry.CylinderGeometry.js
+++ b/editor/js/Sidebar.Geometry.CylinderGeometry.js
@@ -2,71 +2,79 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	CylinderBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryCylinderGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radiusTop
														
 
															-	var radiusTopRow = new UI.Row();
														
 
															-	var radiusTop = new UI.Number( parameters.radiusTop ).onChange( update );
														
 
															+	var radiusTopRow = new UIRow();
														
 
															+	var radiusTop = new UINumber( parameters.radiusTop ).onChange( update );
														
 
															-	radiusTopRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setWidth( '90px' ) );
														
 
															+	radiusTopRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setWidth( '90px' ) );
														
 
															 	radiusTopRow.add( radiusTop );
														
 
															 	container.add( radiusTopRow );
														
 
															 	// radiusBottom
														
 
															-	var radiusBottomRow = new UI.Row();
														
 
															-	var radiusBottom = new UI.Number( parameters.radiusBottom ).onChange( update );
														
 
															+	var radiusBottomRow = new UIRow();
														
 
															+	var radiusBottom = new UINumber( parameters.radiusBottom ).onChange( update );
														
 
															-	radiusBottomRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setWidth( '90px' ) );
														
 
															+	radiusBottomRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setWidth( '90px' ) );
														
 
															 	radiusBottomRow.add( radiusBottom );
														
 
															 	container.add( radiusBottomRow );
														
 
															 	// height
														
 
															-	var heightRow = new UI.Row();
														
 
															-	var height = new UI.Number( parameters.height ).onChange( update );
														
 
															+	var heightRow = new UIRow();
														
 
															+	var height = new UINumber( parameters.height ).onChange( update );
														
 
															-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setWidth( '90px' ) );
														
 
															+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setWidth( '90px' ) );
														
 
															 	heightRow.add( height );
														
 
															 	container.add( heightRow );
														
 
															 	// radialSegments
														
 
															-	var radialSegmentsRow = new UI.Row();
														
 
															-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var radialSegmentsRow = new UIRow();
														
 
															+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															 	radialSegmentsRow.add( radialSegments );
														
 
															 	container.add( radialSegmentsRow );
														
 
															 	// heightSegments
														
 
															-	var heightSegmentsRow = new UI.Row();
														
 
															-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var heightSegmentsRow = new UIRow();
														
 
															+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															 	heightSegmentsRow.add( heightSegments );
														
 
															 	container.add( heightSegmentsRow );
														
 
															 	// openEnded
														
 
															-	var openEndedRow = new UI.Row();
														
 
															-	var openEnded = new UI.Checkbox( parameters.openEnded ).onChange( update );
														
 
															+	var openEndedRow = new UIRow();
														
 
															+	var openEnded = new UICheckbox( parameters.openEnded ).onChange( update );
														
 
															-	openEndedRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setWidth( '90px' ) );
														
 
															+	openEndedRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setWidth( '90px' ) );
														
 
															 	openEndedRow.add( openEnded );
														
 
															 	container.add( openEndedRow );
														
@@ -75,7 +83,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new CylinderBufferGeometry(
														
 
															 			radiusTop.getValue(),
														
 
															 			radiusBottom.getValue(),
														
 
															 			height.getValue(),
														
@@ -90,4 +98,4 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.CylinderBufferGeometry = Sidebar.Geometry.CylinderGeometry;
														
 
															+export { SidebarGeometryCylinderGeometry };
														
--- a/editor/js/Sidebar.Geometry.DodecahedronGeometry.js
+++ b/editor/js/Sidebar.Geometry.DodecahedronGeometry.js
@@ -2,31 +2,39 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	DodecahedronBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryDodecahedronGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// detail
														
 
															-	var detailRow = new UI.Row();
														
 
															-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															+	var detailRow = new UIRow();
														
 
															+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															 	detailRow.add( detail );
														
 
															 	container.add( detailRow );
														
@@ -35,7 +43,7 @@ Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new DodecahedronBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			detail.getValue()
														
 
															 		) ) );
														
@@ -46,4 +54,4 @@ Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.DodecahedronBufferGeometry = Sidebar.Geometry.DodecahedronGeometry;
														
 
															+export { SidebarGeometryDodecahedronGeometry };
														
--- a/editor/js/Sidebar.Geometry.ExtrudeGeometry.js
+++ b/editor/js/Sidebar.Geometry.ExtrudeGeometry.js
@@ -2,11 +2,20 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															-Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	ExtrudeBufferGeometry,
														
 
															+	ShapeBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UICheckbox, UIButton, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryExtrudeGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
@@ -22,40 +31,40 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
															 	// curveSegments
														
 
															-	var curveSegmentsRow = new UI.Row();
														
 
															-	var curveSegments = new UI.Integer( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
														
 
															+	var curveSegmentsRow = new UIRow();
														
 
															+	var curveSegments = new UIInteger( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
														
 
															-	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
														
 
															+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
														
 
															 	curveSegmentsRow.add( curveSegments );
														
 
															 	container.add( curveSegmentsRow );
														
 
															 	// steps
														
 
															-	var stepsRow = new UI.Row();
														
 
															-	var steps = new UI.Integer( options.steps ).onChange( update ).setRange( 1, Infinity );
														
 
															+	var stepsRow = new UIRow();
														
 
															+	var steps = new UIInteger( options.steps ).onChange( update ).setRange( 1, Infinity );
														
 
															-	stepsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
														
 
															+	stepsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
														
 
															 	stepsRow.add( steps );
														
 
															 	container.add( stepsRow );
														
 
															 	// depth
														
 
															-	var depthRow = new UI.Row();
														
 
															-	var depth = new UI.Number( options.depth ).onChange( update ).setRange( 1, Infinity );
														
 
															+	var depthRow = new UIRow();
														
 
															+	var depth = new UINumber( options.depth ).onChange( update ).setRange( 1, Infinity );
														
 
															-	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
														
 
															+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
														
 
															 	depthRow.add( depth );
														
 
															 	container.add( depthRow );
														
 
															 	// enabled
														
 
															-	var enabledRow = new UI.Row();
														
 
															-	var enabled = new UI.Checkbox( options.bevelEnabled ).onChange( update );
														
 
															+	var enabledRow = new UIRow();
														
 
															+	var enabled = new UICheckbox( options.bevelEnabled ).onChange( update );
														
 
															-	enabledRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
														
 
															+	enabledRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
														
 
															 	enabledRow.add( enabled );
														
 
															 	container.add( enabledRow );
														
@@ -64,54 +73,54 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
															 		// thickness
														
 
															-		var thicknessRow = new UI.Row();
														
 
															-		var thickness = new UI.Number( options.bevelThickness ).onChange( update );
														
 
															+		var thicknessRow = new UIRow();
														
 
															+		var thickness = new UINumber( options.bevelThickness ).onChange( update );
														
 
															-		thicknessRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
														
 
															+		thicknessRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
														
 
															 		thicknessRow.add( thickness );
														
 
															 		container.add( thicknessRow );
														
 
															 		// size
														
 
															-		var sizeRow = new UI.Row();
														
 
															-		var size = new UI.Number( options.bevelSize ).onChange( update );
														
 
															+		var sizeRow = new UIRow();
														
 
															+		var size = new UINumber( options.bevelSize ).onChange( update );
														
 
															-		sizeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
														
 
															+		sizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
														
 
															 		sizeRow.add( size );
														
 
															 		container.add( sizeRow );
														
 
															 		// offset
														
 
															-		var offsetRow = new UI.Row();
														
 
															-		var offset = new UI.Number( options.bevelOffset ).onChange( update );
														
 
															+		var offsetRow = new UIRow();
														
 
															+		var offset = new UINumber( options.bevelOffset ).onChange( update );
														
 
															-		offsetRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
														
 
															+		offsetRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
														
 
															 		offsetRow.add( offset );
														
 
															 		container.add( offsetRow );
														
 
															 		// segments
														
 
															-		var segmentsRow = new UI.Row();
														
 
															-		var segments = new UI.Integer( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
														
 
															+		var segmentsRow = new UIRow();
														
 
															+		var segments = new UIInteger( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
														
 
															-		segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
														
 
															+		segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
														
 
															 		segmentsRow.add( segments );
														
 
															 		container.add( segmentsRow );
														
 
															 	}
														
 
															-	var button = new UI.Button( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
														
 
															+	var button = new UIButton( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
														
 
															 	container.add( button );
														
 
															 	//
														
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new ExtrudeBufferGeometry(
														
 
															 			parameters.shapes,
														
 
															 			{
														
 
															 				curveSegments: curveSegments.getValue(),
														
@@ -129,7 +138,7 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
															 	function toShape() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeBufferGeometry(
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new ShapeBufferGeometry(
														
 
															 			parameters.shapes,
														
 
															 			options.curveSegments
														
 
															 		) ) );
														
@@ -140,4 +149,4 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.ExtrudeBufferGeometry = Sidebar.Geometry.ExtrudeGeometry;
														
 
															+export { SidebarGeometryExtrudeGeometry };
														
--- a/editor/js/Sidebar.Geometry.Geometry.js
+++ b/editor/js/Sidebar.Geometry.Geometry.js
@@ -2,30 +2,32 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.Geometry = function ( editor ) {
														
 
															+import { UIRow, UIText } from './libs/ui.js';
														
 
															+
														
 
															+var SidebarGeometryGeometry = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	// vertices
														
 
															-	var verticesRow = new UI.Row();
														
 
															-	var vertices = new UI.Text();
														
 
															+	var verticesRow = new UIRow();
														
 
															+	var vertices = new UIText();
														
 
															-	verticesRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/geometry/vertices' ) ).setWidth( '90px' ) );
														
 
															+	verticesRow.add( new UIText( strings.getKey( 'sidebar/geometry/geometry/vertices' ) ).setWidth( '90px' ) );
														
 
															 	verticesRow.add( vertices );
														
 
															 	container.add( verticesRow );
														
 
															 	// faces
														
 
															-	var facesRow = new UI.Row();
														
 
															-	var faces = new UI.Text();
														
 
															+	var facesRow = new UIRow();
														
 
															+	var faces = new UIText();
														
 
															-	facesRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/geometry/faces' ) ).setWidth( '90px' ) );
														
 
															+	facesRow.add( new UIText( strings.getKey( 'sidebar/geometry/geometry/faces' ) ).setWidth( '90px' ) );
														
 
															 	facesRow.add( faces );
														
 
															 	container.add( facesRow );
														
@@ -60,3 +62,5 @@ Sidebar.Geometry.Geometry = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarGeometryGeometry };
														
--- a/editor/js/Sidebar.Geometry.IcosahedronGeometry.js
+++ b/editor/js/Sidebar.Geometry.IcosahedronGeometry.js
@@ -2,31 +2,41 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	IcosahedronBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryIcosahedronGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var signals = editor.signals;
														
 
															+
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/icosahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// detail
														
 
															-	var detailRow = new UI.Row();
														
 
															-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															+	var detailRow = new UIRow();
														
 
															+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/icosahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															 	detailRow.add( detail );
														
 
															 	container.add( detailRow );
														
@@ -35,15 +45,17 @@ Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new IcosahedronBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			detail.getValue()
														
 
															 		) ) );
														
 
															+		signals.objectChanged.dispatch( object );
														
 
															+
														
 
															 	}
														
 
															 	return container;
														
 
															 };
														
 
															-Sidebar.Geometry.IcosahedronBufferGeometry = Sidebar.Geometry.IcosahedronGeometry;
														
 
															+export { SidebarGeometryIcosahedronGeometry };
														
--- a/editor/js/Sidebar.Geometry.LatheGeometry.js
+++ b/editor/js/Sidebar.Geometry.LatheGeometry.js
@@ -2,58 +2,67 @@
 
															  * @author rfm1201
														
 
															  */
														
 
															-Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	LatheBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+import { UIPoints2 } from './libs/ui.three.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryLatheGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// segments
														
 
															-	var segmentsRow = new UI.Row();
														
 
															-	var segments = new UI.Integer( parameters.segments ).onChange( update );
														
 
															+	var segmentsRow = new UIRow();
														
 
															+	var segments = new UIInteger( parameters.segments ).onChange( update );
														
 
															-	segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/segments' ) ).setWidth( '90px' ) );
														
 
															+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/segments' ) ).setWidth( '90px' ) );
														
 
															 	segmentsRow.add( segments );
														
 
															 	container.add( segmentsRow );
														
 
															 	// phiStart
														
 
															-	var phiStartRow = new UI.Row();
														
 
															-	var phiStart = new UI.Number( parameters.phiStart * 180 / Math.PI ).onChange( update );
														
 
															+	var phiStartRow = new UIRow();
														
 
															+	var phiStart = new UINumber( parameters.phiStart * 180 / Math.PI ).onChange( update );
														
 
															-	phiStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setWidth( '90px' ) );
														
 
															+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setWidth( '90px' ) );
														
 
															 	phiStartRow.add( phiStart );
														
 
															 	container.add( phiStartRow );
														
 
															 	// phiLength
														
 
															-	var phiLengthRow = new UI.Row();
														
 
															-	var phiLength = new UI.Number( parameters.phiLength * 180 / Math.PI ).onChange( update );
														
 
															+	var phiLengthRow = new UIRow();
														
 
															+	var phiLength = new UINumber( parameters.phiLength * 180 / Math.PI ).onChange( update );
														
 
															-	phiLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setWidth( '90px' ) );
														
 
															+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setWidth( '90px' ) );
														
 
															 	phiLengthRow.add( phiLength );
														
 
															 	container.add( phiLengthRow );
														
 
															 	// points
														
 
															-	var pointsRow = new UI.Row();
														
 
															-	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
														
 
															+	var pointsRow = new UIRow();
														
 
															+	pointsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
														
 
															-	var points = new UI.Points2().setValue( parameters.points ).onChange( update );
														
 
															+	var points = new UIPoints2().setValue( parameters.points ).onChange( update );
														
 
															 	pointsRow.add( points );
														
 
															 	container.add( pointsRow );
														
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new LatheBufferGeometry(
														
 
															 			points.getValue(),
														
 
															 			segments.getValue(),
														
 
															 			phiStart.getValue() / 180 * Math.PI,
														
@@ -66,4 +75,4 @@ Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.LatheBufferGeometry = Sidebar.Geometry.LatheGeometry;
														
 
															+export { SidebarGeometryLatheGeometry };
														
--- a/editor/js/Sidebar.Geometry.Modifiers.js
+++ b/editor/js/Sidebar.Geometry.Modifiers.js
@@ -2,17 +2,19 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.Modifiers = function ( editor, object ) {
														
 
															+import { UIRow, UIButton } from './libs/ui.js';
														
 
															+
														
 
															+var SidebarGeometryModifiers = function ( editor, object ) {
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Row().setPaddingLeft( '90px' );
														
 
															+	var container = new UIRow().setPaddingLeft( '90px' );
														
 
															 	var geometry = object.geometry;
														
 
															 	// Compute Vertex Normals
														
 
															-	var button = new UI.Button( 'Compute Vertex Normals' );
														
 
															+	var button = new UIButton( 'Compute Vertex Normals' );
														
 
															 	button.onClick( function () {
														
 
															 		geometry.computeVertexNormals();
														
@@ -38,3 +40,5 @@ Sidebar.Geometry.Modifiers = function ( editor, object ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarGeometryModifiers };
														
--- a/editor/js/Sidebar.Geometry.OctahedronGeometry.js
+++ b/editor/js/Sidebar.Geometry.OctahedronGeometry.js
@@ -2,31 +2,41 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															-Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	OctahedronBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryOctahedronGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var signals = editor.signals;
														
 
															+
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// detail
														
 
															-	var detailRow = new UI.Row();
														
 
															-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															+	var detailRow = new UIRow();
														
 
															+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															 	detailRow.add( detail );
														
 
															 	container.add( detailRow );
														
@@ -36,15 +46,17 @@ Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new OctahedronBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			detail.getValue()
														
 
															 		) ) );
														
 
															+		signals.objectChanged.dispatch( object );
														
 
															+
														
 
															 	}
														
 
															 	return container;
														
 
															 };
														
 
															-Sidebar.Geometry.OctahedronBufferGeometry = Sidebar.Geometry.OctahedronGeometry;
														
 
															+export { SidebarGeometryOctahedronGeometry };
														
--- a/editor/js/Sidebar.Geometry.PlaneGeometry.js
+++ b/editor/js/Sidebar.Geometry.PlaneGeometry.js
@@ -2,51 +2,59 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	PlaneBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryPlaneGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// width
														
 
															-	var widthRow = new UI.Row();
														
 
															-	var width = new UI.Number( parameters.width ).onChange( update );
														
 
															+	var widthRow = new UIRow();
														
 
															+	var width = new UINumber( parameters.width ).onChange( update );
														
 
															-	widthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/width' ) ).setWidth( '90px' ) );
														
 
															+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/width' ) ).setWidth( '90px' ) );
														
 
															 	widthRow.add( width );
														
 
															 	container.add( widthRow );
														
 
															 	// height
														
 
															-	var heightRow = new UI.Row();
														
 
															-	var height = new UI.Number( parameters.height ).onChange( update );
														
 
															+	var heightRow = new UIRow();
														
 
															+	var height = new UINumber( parameters.height ).onChange( update );
														
 
															-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/height' ) ).setWidth( '90px' ) );
														
 
															+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/height' ) ).setWidth( '90px' ) );
														
 
															 	heightRow.add( height );
														
 
															 	container.add( heightRow );
														
 
															 	// widthSegments
														
 
															-	var widthSegmentsRow = new UI.Row();
														
 
															-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var widthSegmentsRow = new UIRow();
														
 
															+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/widthsegments' ) ).setWidth( '90px' ) );
														
 
															+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/widthsegments' ) ).setWidth( '90px' ) );
														
 
															 	widthSegmentsRow.add( widthSegments );
														
 
															 	container.add( widthSegmentsRow );
														
 
															 	// heightSegments
														
 
															-	var heightSegmentsRow = new UI.Row();
														
 
															-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var heightSegmentsRow = new UIRow();
														
 
															+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															 	heightSegmentsRow.add( heightSegments );
														
 
															 	container.add( heightSegmentsRow );
														
@@ -56,7 +64,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new PlaneBufferGeometry(
														
 
															 			width.getValue(),
														
 
															 			height.getValue(),
														
 
															 			widthSegments.getValue(),
														
@@ -69,4 +77,4 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.PlaneBufferGeometry = Sidebar.Geometry.PlaneGeometry;
														
 
															+export { SidebarGeometryPlaneGeometry };
														
--- a/editor/js/Sidebar.Geometry.RingGeometry.js
+++ b/editor/js/Sidebar.Geometry.RingGeometry.js
@@ -2,71 +2,79 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															-Sidebar.Geometry.RingGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	RingBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryRingGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// innerRadius
														
 
															-	var innerRadiusRow = new UI.Row();
														
 
															-	var innerRadius = new UI.Number( parameters.innerRadius ).onChange( update );
														
 
															+	var innerRadiusRow = new UIRow();
														
 
															+	var innerRadius = new UINumber( parameters.innerRadius ).onChange( update );
														
 
															-	innerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setWidth( '90px' ) );
														
 
															+	innerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setWidth( '90px' ) );
														
 
															 	innerRadiusRow.add( innerRadius );
														
 
															 	container.add( innerRadiusRow );
														
 
															 	// outerRadius
														
 
															-	var outerRadiusRow = new UI.Row();
														
 
															-	var outerRadius = new UI.Number( parameters.outerRadius ).onChange( update );
														
 
															+	var outerRadiusRow = new UIRow();
														
 
															+	var outerRadius = new UINumber( parameters.outerRadius ).onChange( update );
														
 
															-	outerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setWidth( '90px' ) );
														
 
															+	outerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setWidth( '90px' ) );
														
 
															 	outerRadiusRow.add( outerRadius );
														
 
															 	container.add( outerRadiusRow );
														
 
															 	// thetaSegments
														
 
															-	var thetaSegmentsRow = new UI.Row();
														
 
															-	var thetaSegments = new UI.Integer( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
														
 
															+	var thetaSegmentsRow = new UIRow();
														
 
															+	var thetaSegments = new UIInteger( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
														
 
															-	thetaSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setWidth( '90px' ) );
														
 
															+	thetaSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setWidth( '90px' ) );
														
 
															 	thetaSegmentsRow.add( thetaSegments );
														
 
															 	container.add( thetaSegmentsRow );
														
 
															 	// phiSegments
														
 
															-	var phiSegmentsRow = new UI.Row();
														
 
															-	var phiSegments = new UI.Integer( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
														
 
															+	var phiSegmentsRow = new UIRow();
														
 
															+	var phiSegments = new UIInteger( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
														
 
															-	phiSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setWidth( '90px' ) );
														
 
															+	phiSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setWidth( '90px' ) );
														
 
															 	phiSegmentsRow.add( phiSegments );
														
 
															 	container.add( phiSegmentsRow );
														
 
															 	// thetaStart
														
 
															-	var thetaStartRow = new UI.Row();
														
 
															-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaStartRow = new UIRow();
														
 
															+	var thetaStart = new UINumber( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															 	thetaStartRow.add( thetaStart );
														
 
															 	container.add( thetaStartRow );
														
 
															 	// thetaLength
														
 
															-	var thetaLengthRow = new UI.Row();
														
 
															-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaLengthRow = new UIRow();
														
 
															+	var thetaLength = new UINumber( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															 	thetaLengthRow.add( thetaLength );
														
 
															 	container.add( thetaLengthRow );
														
@@ -75,7 +83,7 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new RingBufferGeometry(
														
 
															 			innerRadius.getValue(),
														
 
															 			outerRadius.getValue(),
														
 
															 			thetaSegments.getValue(),
														
@@ -90,4 +98,4 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.RingBufferGeometry = Sidebar.Geometry.RingGeometry;
														
 
															+export { SidebarGeometryRingGeometry };
														
--- a/editor/js/Sidebar.Geometry.ShapeGeometry.js
+++ b/editor/js/Sidebar.Geometry.ShapeGeometry.js
@@ -2,34 +2,43 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															-Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	ExtrudeBufferGeometry,
														
 
															+	ShapeBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UIButton } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryShapeGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// curveSegments
														
 
															-	var curveSegmentsRow = new UI.Row();
														
 
															-	var curveSegments = new UI.Integer( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
														
 
															+	var curveSegmentsRow = new UIRow();
														
 
															+	var curveSegments = new UIInteger( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
														
 
															-	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
														
 
															+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
														
 
															 	curveSegmentsRow.add( curveSegments );
														
 
															 	container.add( curveSegmentsRow );
														
 
															 	// to extrude
														
 
															-	var button = new UI.Button( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
														
 
															+	var button = new UIButton( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
														
 
															 	container.add( button );
														
 
															 	//
														
 
															 	function changeShape() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new ShapeBufferGeometry(
														
 
															 			parameters.shapes,
														
 
															 			curveSegments.getValue()
														
 
															 		) ) );
														
@@ -38,7 +47,7 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
															 	function toExtrude() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeBufferGeometry(
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new ExtrudeBufferGeometry(
														
 
															 			parameters.shapes, {
														
 
															 				curveSegments: curveSegments.getValue()
														
 
															 			}
														
@@ -50,4 +59,4 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.ShapeBufferGeometry = Sidebar.Geometry.ShapeGeometry;
														
 
															+export { SidebarGeometryShapeGeometry };
														
--- a/editor/js/Sidebar.Geometry.SphereGeometry.js
+++ b/editor/js/Sidebar.Geometry.SphereGeometry.js
@@ -2,81 +2,90 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	Math as _Math,
														
 
															+	SphereBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometrySphereGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// widthSegments
														
 
															-	var widthSegmentsRow = new UI.Row();
														
 
															-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var widthSegmentsRow = new UIRow();
														
 
															+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/widthsegments' ) ).setWidth( '90px' ) );
														
 
															+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/widthsegments' ) ).setWidth( '90px' ) );
														
 
															 	widthSegmentsRow.add( widthSegments );
														
 
															 	container.add( widthSegmentsRow );
														
 
															 	// heightSegments
														
 
															-	var heightSegmentsRow = new UI.Row();
														
 
															-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var heightSegmentsRow = new UIRow();
														
 
															+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/heightsegments' ) ).setWidth( '90px' ) );
														
 
															 	heightSegmentsRow.add( heightSegments );
														
 
															 	container.add( heightSegmentsRow );
														
 
															 	// phiStart
														
 
															-	var phiStartRow = new UI.Row();
														
 
															-	var phiStart = new UI.Number( parameters.phiStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var phiStartRow = new UIRow();
														
 
															+	var phiStart = new UINumber( parameters.phiStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	phiStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/phistart' ) ).setWidth( '90px' ) );
														
 
															+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/phistart' ) ).setWidth( '90px' ) );
														
 
															 	phiStartRow.add( phiStart );
														
 
															 	container.add( phiStartRow );
														
 
															 	// phiLength
														
 
															-	var phiLengthRow = new UI.Row();
														
 
															-	var phiLength = new UI.Number( parameters.phiLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var phiLengthRow = new UIRow();
														
 
															+	var phiLength = new UINumber( parameters.phiLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	phiLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/philength' ) ).setWidth( '90px' ) );
														
 
															+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/philength' ) ).setWidth( '90px' ) );
														
 
															 	phiLengthRow.add( phiLength );
														
 
															 	container.add( phiLengthRow );
														
 
															 	// thetaStart
														
 
															-	var thetaStartRow = new UI.Row();
														
 
															-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaStartRow = new UIRow();
														
 
															+	var thetaStart = new UINumber( parameters.thetaStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetastart' ) ).setWidth( '90px' ) );
														
 
															 	thetaStartRow.add( thetaStart );
														
 
															 	container.add( thetaStartRow );
														
 
															 	// thetaLength
														
 
															-	var thetaLengthRow = new UI.Row();
														
 
															-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var thetaLengthRow = new UIRow();
														
 
															+	var thetaLength = new UINumber( parameters.thetaLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetalength' ) ).setWidth( '90px' ) );
														
 
															 	thetaLengthRow.add( thetaLength );
														
 
															 	container.add( thetaLengthRow );
														
@@ -86,14 +95,14 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new SphereBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			widthSegments.getValue(),
														
 
															 			heightSegments.getValue(),
														
 
															-			phiStart.getValue() * THREE.Math.DEG2RAD,
														
 
															-			phiLength.getValue() * THREE.Math.DEG2RAD,
														
 
															-			thetaStart.getValue() * THREE.Math.DEG2RAD,
														
 
															-			thetaLength.getValue() * THREE.Math.DEG2RAD
														
 
															+			phiStart.getValue() * _Math.DEG2RAD,
														
 
															+			phiLength.getValue() * _Math.DEG2RAD,
														
 
															+			thetaStart.getValue() * _Math.DEG2RAD,
														
 
															+			thetaLength.getValue() * _Math.DEG2RAD
														
 
															 		) ) );
														
 
															 	}
														
@@ -102,4 +111,4 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.SphereBufferGeometry = Sidebar.Geometry.SphereGeometry;
														
 
															+export { SidebarGeometrySphereGeometry };
														
--- a/editor/js/Sidebar.Geometry.TeapotBufferGeometry.js
+++ b/editor/js/Sidebar.Geometry.TeapotBufferGeometry.js
@@ -2,78 +2,82 @@
 
															  * @author tschw
														
 
															  */
														
 
															-Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
														
 
															+import { UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
														
 
															-	var container = new UI.Row();
														
 
															+import { TeapotBufferGeometry } from '../../examples/jsm/geometries/TeapotBufferGeometry.js';
														
 
															+
														
 
															+var SidebarGeometryTeapotBufferGeometry = function ( signals, object ) {
														
 
															+
														
 
															+	var container = new UIRow();
														
 
															 	var parameters = object.geometry.parameters;
														
 
															 	// size
														
 
															-	var sizeRow = new UI.Row();
														
 
															-	var size = new UI.Number( parameters.size ).onChange( update );
														
 
															+	var sizeRow = new UIRow();
														
 
															+	var size = new UINumber( parameters.size ).onChange( update );
														
 
															-	sizeRow.add( new UI.Text( 'Size' ).setWidth( '90px' ) );
														
 
															+	sizeRow.add( new UIText( 'Size' ).setWidth( '90px' ) );
														
 
															 	sizeRow.add( size );
														
 
															 	container.add( sizeRow );
														
 
															 	// segments
														
 
															-	var segmentsRow = new UI.Row();
														
 
															-	var segments = new UI.Integer( parameters.segments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var segmentsRow = new UIRow();
														
 
															+	var segments = new UIInteger( parameters.segments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
														
 
															+	segmentsRow.add( new UIText( 'Segments' ).setWidth( '90px' ) );
														
 
															 	segmentsRow.add( segments );
														
 
															 	container.add( segmentsRow );
														
 
															 	// bottom
														
 
															-	var bottomRow = new UI.Row();
														
 
															-	var bottom = new UI.Checkbox( parameters.bottom ).onChange( update );
														
 
															+	var bottomRow = new UIRow();
														
 
															+	var bottom = new UICheckbox( parameters.bottom ).onChange( update );
														
 
															-	bottomRow.add( new UI.Text( 'Bottom' ).setWidth( '90px' ) );
														
 
															+	bottomRow.add( new UIText( 'Bottom' ).setWidth( '90px' ) );
														
 
															 	bottomRow.add( bottom );
														
 
															 	container.add( bottomRow );
														
 
															 	// lid
														
 
															-	var lidRow = new UI.Row();
														
 
															-	var lid = new UI.Checkbox( parameters.lid ).onChange( update );
														
 
															+	var lidRow = new UIRow();
														
 
															+	var lid = new UICheckbox( parameters.lid ).onChange( update );
														
 
															-	lidRow.add( new UI.Text( 'Lid' ).setWidth( '90px' ) );
														
 
															+	lidRow.add( new UIText( 'Lid' ).setWidth( '90px' ) );
														
 
															 	lidRow.add( lid );
														
 
															 	container.add( lidRow );
														
 
															 	// body
														
 
															-	var bodyRow = new UI.Row();
														
 
															-	var body = new UI.Checkbox( parameters.body ).onChange( update );
														
 
															+	var bodyRow = new UIRow();
														
 
															+	var body = new UICheckbox( parameters.body ).onChange( update );
														
 
															-	bodyRow.add( new UI.Text( 'Body' ).setWidth( '90px' ) );
														
 
															+	bodyRow.add( new UIText( 'Body' ).setWidth( '90px' ) );
														
 
															 	bodyRow.add( body );
														
 
															 	container.add( bodyRow );
														
 
															 	// fitted lid
														
 
															-	var fitLidRow = new UI.Row();
														
 
															-	var fitLid = new UI.Checkbox( parameters.fitLid ).onChange( update );
														
 
															+	var fitLidRow = new UIRow();
														
 
															+	var fitLid = new UICheckbox( parameters.fitLid ).onChange( update );
														
 
															-	fitLidRow.add( new UI.Text( 'Fitted Lid' ).setWidth( '90px' ) );
														
 
															+	fitLidRow.add( new UIText( 'Fitted Lid' ).setWidth( '90px' ) );
														
 
															 	fitLidRow.add( fitLid );
														
 
															 	container.add( fitLidRow );
														
 
															 	// blinn-sized
														
 
															-	var blinnRow = new UI.Row();
														
 
															-	var blinn = new UI.Checkbox( parameters.blinn ).onChange( update );
														
 
															+	var blinnRow = new UIRow();
														
 
															+	var blinn = new UICheckbox( parameters.blinn ).onChange( update );
														
 
															-	blinnRow.add( new UI.Text( 'Blinn-scaled' ).setWidth( '90px' ) );
														
 
															+	blinnRow.add( new UIText( 'Blinn-scaled' ).setWidth( '90px' ) );
														
 
															 	blinnRow.add( blinn );
														
 
															 	container.add( blinnRow );
														
@@ -82,7 +86,7 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
															 		object.geometry.dispose();
														
 
															-		object.geometry = new THREE.TeapotBufferGeometry(
														
 
															+		object.geometry = new TeapotBufferGeometry(
														
 
															 			size.getValue(),
														
 
															 			segments.getValue(),
														
 
															 			bottom.getValue(),
														
@@ -101,3 +105,5 @@ Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarGeometryTeapotBufferGeometry };
														
--- a/editor/js/Sidebar.Geometry.TetrahedronGeometry.js
+++ b/editor/js/Sidebar.Geometry.TetrahedronGeometry.js
@@ -2,32 +2,41 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															+import {
														
 
															+	TetrahedronBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															-Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryTetrahedronGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var signals = editor.signals;
														
 
															+
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// detail
														
 
															-	var detailRow = new UI.Row();
														
 
															-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															+	var detailRow = new UIRow();
														
 
															+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
														
 
															-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/detail' ) ).setWidth( '90px' ) );
														
 
															 	detailRow.add( detail );
														
 
															 	container.add( detailRow );
														
@@ -37,15 +46,17 @@ Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new TetrahedronBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			detail.getValue()
														
 
															 		) ) );
														
 
															+		signals.objectChanged.dispatch( object );
														
 
															+
														
 
															 	}
														
 
															 	return container;
														
 
															 };
														
 
															-Sidebar.Geometry.TetrahedronBufferGeometry = Sidebar.Geometry.TetrahedronGeometry;
														
 
															+export { SidebarGeometryTetrahedronGeometry };
														
--- a/editor/js/Sidebar.Geometry.TorusGeometry.js
+++ b/editor/js/Sidebar.Geometry.TorusGeometry.js
@@ -2,61 +2,70 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	Math as _Math,
														
 
															+	TorusBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryTorusGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// tube
														
 
															-	var tubeRow = new UI.Row();
														
 
															-	var tube = new UI.Number( parameters.tube ).onChange( update );
														
 
															+	var tubeRow = new UIRow();
														
 
															+	var tube = new UINumber( parameters.tube ).onChange( update );
														
 
															-	tubeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/tube' ) ).setWidth( '90px' ) );
														
 
															+	tubeRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tube' ) ).setWidth( '90px' ) );
														
 
															 	tubeRow.add( tube );
														
 
															 	container.add( tubeRow );
														
 
															 	// radialSegments
														
 
															-	var radialSegmentsRow = new UI.Row();
														
 
															-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var radialSegmentsRow = new UIRow();
														
 
															+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															 	radialSegmentsRow.add( radialSegments );
														
 
															 	container.add( radialSegmentsRow );
														
 
															 	// tubularSegments
														
 
															-	var tubularSegmentsRow = new UI.Row();
														
 
															-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var tubularSegmentsRow = new UIRow();
														
 
															+	var tubularSegments = new UIInteger( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															 	tubularSegmentsRow.add( tubularSegments );
														
 
															 	container.add( tubularSegmentsRow );
														
 
															 	// arc
														
 
															-	var arcRow = new UI.Row();
														
 
															-	var arc = new UI.Number( parameters.arc * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															+	var arcRow = new UIRow();
														
 
															+	var arc = new UINumber( parameters.arc * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
														
 
															-	arcRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/arc' ) ).setWidth( '90px' ) );
														
 
															+	arcRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/arc' ) ).setWidth( '90px' ) );
														
 
															 	arcRow.add( arc );
														
 
															 	container.add( arcRow );
														
@@ -66,12 +75,12 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new TorusBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			tube.getValue(),
														
 
															 			radialSegments.getValue(),
														
 
															 			tubularSegments.getValue(),
														
 
															-			arc.getValue() * THREE.Math.DEG2RAD
														
 
															+			arc.getValue() * _Math.DEG2RAD
														
 
															 		) ) );
														
 
															 	}
														
@@ -80,4 +89,4 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.TorusBufferGeometry = Sidebar.Geometry.TorusGeometry;
														
 
															+export { SidebarGeometryTorusGeometry };
														
--- a/editor/js/Sidebar.Geometry.TorusKnotGeometry.js
+++ b/editor/js/Sidebar.Geometry.TorusKnotGeometry.js
@@ -2,71 +2,79 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	TorusKnotBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryTorusKnotGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// tube
														
 
															-	var tubeRow = new UI.Row();
														
 
															-	var tube = new UI.Number( parameters.tube ).onChange( update );
														
 
															+	var tubeRow = new UIRow();
														
 
															+	var tube = new UINumber( parameters.tube ).onChange( update );
														
 
															-	tubeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tube' ) ).setWidth( '90px' ) );
														
 
															+	tubeRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tube' ) ).setWidth( '90px' ) );
														
 
															 	tubeRow.add( tube );
														
 
															 	container.add( tubeRow );
														
 
															 	// tubularSegments
														
 
															-	var tubularSegmentsRow = new UI.Row();
														
 
															-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var tubularSegmentsRow = new UIRow();
														
 
															+	var tubularSegments = new UIInteger( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															 	tubularSegmentsRow.add( tubularSegments );
														
 
															 	container.add( tubularSegmentsRow );
														
 
															 	// radialSegments
														
 
															-	var radialSegmentsRow = new UI.Row();
														
 
															-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															+	var radialSegmentsRow = new UIRow();
														
 
															+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
														
 
															-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															 	radialSegmentsRow.add( radialSegments );
														
 
															 	container.add( radialSegmentsRow );
														
 
															 	// p
														
 
															-	var pRow = new UI.Row();
														
 
															-	var p = new UI.Number( parameters.p ).onChange( update );
														
 
															+	var pRow = new UIRow();
														
 
															+	var p = new UINumber( parameters.p ).onChange( update );
														
 
															-	pRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/p' ) ).setWidth( '90px' ) );
														
 
															+	pRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/p' ) ).setWidth( '90px' ) );
														
 
															 	pRow.add( p );
														
 
															 	container.add( pRow );
														
 
															 	// q
														
 
															-	var qRow = new UI.Row();
														
 
															-	var q = new UI.Number( parameters.q ).onChange( update );
														
 
															+	var qRow = new UIRow();
														
 
															+	var q = new UINumber( parameters.q ).onChange( update );
														
 
															-	qRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/q' ) ).setWidth( '90px' ) );
														
 
															+	qRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/q' ) ).setWidth( '90px' ) );
														
 
															 	qRow.add( q );
														
 
															 	container.add( qRow );
														
@@ -76,7 +84,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
															 	function update() {
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new TorusKnotBufferGeometry(
														
 
															 			radius.getValue(),
														
 
															 			tube.getValue(),
														
 
															 			tubularSegments.getValue(),
														
@@ -91,4 +99,4 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.TorusKnotBufferGeometry = Sidebar.Geometry.TorusKnotGeometry;
														
 
															+export { SidebarGeometryTorusKnotGeometry };
														
--- a/editor/js/Sidebar.Geometry.TubeGeometry.js
+++ b/editor/js/Sidebar.Geometry.TubeGeometry.js
@@ -2,80 +2,90 @@
 
															  * @author Temdog007 / http://github.com/Temdog007
														
 
															  */
														
 
															-Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
														
 
															+import {
														
 
															+	CatmullRomCurve3,
														
 
															+	TubeBufferGeometry
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIRow, UIText, UIInteger, UISelect, UICheckbox, UINumber } from './libs/ui.js';
														
 
															+import { UIPoints3 } from './libs/ui.three.js';
														
 
															+
														
 
															+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
														
 
															+
														
 
															+var SidebarGeometryTubeGeometry = function ( editor, object ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Row();
														
 
															+	var container = new UIRow();
														
 
															 	var geometry = object.geometry;
														
 
															 	var parameters = geometry.parameters;
														
 
															 	// points
														
 
															-	var pointsRow = new UI.Row();
														
 
															-	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
														
 
															+	var pointsRow = new UIRow();
														
 
															+	pointsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
														
 
															-	var points = new UI.Points3().setValue( parameters.path.points ).onChange( update );
														
 
															+	var points = new UIPoints3().setValue( parameters.path.points ).onChange( update );
														
 
															 	pointsRow.add( points );
														
 
															 	container.add( pointsRow );
														
 
															 	// radius
														
 
															-	var radiusRow = new UI.Row();
														
 
															-	var radius = new UI.Number( parameters.radius ).onChange( update );
														
 
															+	var radiusRow = new UIRow();
														
 
															+	var radius = new UINumber( parameters.radius ).onChange( update );
														
 
															-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/radius' ) ).setWidth( '90px' ) );
														
 
															 	radiusRow.add( radius );
														
 
															 	container.add( radiusRow );
														
 
															 	// tubularSegments
														
 
															-	var tubularSegmentsRow = new UI.Row();
														
 
															-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).onChange( update );
														
 
															+	var tubularSegmentsRow = new UIRow();
														
 
															+	var tubularSegments = new UIInteger( parameters.tubularSegments ).onChange( update );
														
 
															-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/tubularsegments' ) ).setWidth( '90px' ) );
														
 
															 	tubularSegmentsRow.add( tubularSegments );
														
 
															 	container.add( tubularSegmentsRow );
														
 
															 	// radialSegments
														
 
															-	var radialSegmentsRow = new UI.Row();
														
 
															-	var radialSegments = new UI.Integer( parameters.radialSegments ).onChange( update );
														
 
															+	var radialSegmentsRow = new UIRow();
														
 
															+	var radialSegments = new UIInteger( parameters.radialSegments ).onChange( update );
														
 
															-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/radialsegments' ) ).setWidth( '90px' ) );
														
 
															 	radialSegmentsRow.add( radialSegments );
														
 
															 	container.add( radialSegmentsRow );
														
 
															 	// closed
														
 
															-	var closedRow = new UI.Row();
														
 
															-	var closed = new UI.Checkbox( parameters.closed ).onChange( update );
														
 
															+	var closedRow = new UIRow();
														
 
															+	var closed = new UICheckbox( parameters.closed ).onChange( update );
														
 
															-	closedRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/closed' ) ).setWidth( '90px' ) );
														
 
															+	closedRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/closed' ) ).setWidth( '90px' ) );
														
 
															 	closedRow.add( closed );
														
 
															 	container.add( closedRow );
														
 
															 	// curveType
														
 
															-	var curveTypeRow = new UI.Row();
														
 
															-	var curveType = new UI.Select().setOptions( { centripetal: 'centripetal', chordal: 'chordal', catmullrom: 'catmullrom' } ).setValue( parameters.path.curveType ).onChange( update );
														
 
															+	var curveTypeRow = new UIRow();
														
 
															+	var curveType = new UISelect().setOptions( { centripetal: 'centripetal', chordal: 'chordal', catmullrom: 'catmullrom' } ).setValue( parameters.path.curveType ).onChange( update );
														
 
															-	curveTypeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/curvetype' ) ).setWidth( '90px' ), curveType );
														
 
															+	curveTypeRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/curvetype' ) ).setWidth( '90px' ), curveType );
														
 
															 	container.add( curveTypeRow );
														
 
															 	// tension
														
 
															-	var tensionRow = new UI.Row().setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
														
 
															-	var tension = new UI.Number( parameters.path.tension ).setStep( 0.01 ).onChange( update );
														
 
															+	var tensionRow = new UIRow().setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
														
 
															+	var tension = new UINumber( parameters.path.tension ).setStep( 0.01 ).onChange( update );
														
 
															-	tensionRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/tension' ) ).setWidth( '90px' ), tension );
														
 
															+	tensionRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/tension' ) ).setWidth( '90px' ), tension );
														
 
															 	container.add( tensionRow );
														
@@ -85,8 +95,8 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
															 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
														
 
															-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
														
 
															-			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
														
 
															+		editor.execute( new SetGeometryCommand( editor, object, new TubeBufferGeometry(
														
 
															+			new CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
														
 
															 			tubularSegments.getValue(),
														
 
															 			radius.getValue(),
														
 
															 			radialSegments.getValue(),
														
@@ -99,4 +109,4 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
															 };
														
 
															-Sidebar.Geometry.TubeBufferGeometry = Sidebar.Geometry.TubeGeometry;
														
 
															+export { SidebarGeometryTubeGeometry };
														
--- a/editor/js/Sidebar.Geometry.js
+++ b/editor/js/Sidebar.Geometry.js
@@ -2,13 +2,61 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Geometry = function ( editor ) {
														
 
															+import { Math as _Math } from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIText, UIInput, UIButton, UISpan } from './libs/ui.js';
														
 
															+
														
 
															+import { SetGeometryValueCommand } from './commands/SetGeometryValueCommand.js';
														
 
															+
														
 
															+import { SidebarGeometryGeometry } from './Sidebar.Geometry.Geometry.js';
														
 
															+import { SidebarGeometryBufferGeometry } from './Sidebar.Geometry.BufferGeometry.js';
														
 
															+import { SidebarGeometryModifiers } from './Sidebar.Geometry.Modifiers.js';
														
 
															+
														
 
															+import { SidebarGeometryBoxGeometry } from './Sidebar.Geometry.BoxGeometry.js';
														
 
															+import { SidebarGeometryCircleGeometry } from './Sidebar.Geometry.CircleGeometry.js';
														
 
															+import { SidebarGeometryCylinderGeometry } from './Sidebar.Geometry.CylinderGeometry.js';
														
 
															+import { SidebarGeometryDodecahedronGeometry } from './Sidebar.Geometry.DodecahedronGeometry.js';
														
 
															+import { SidebarGeometryExtrudeGeometry } from './Sidebar.Geometry.ExtrudeGeometry.js';
														
 
															+import { SidebarGeometryIcosahedronGeometry } from './Sidebar.Geometry.IcosahedronGeometry.js';
														
 
															+import { SidebarGeometryLatheGeometry } from './Sidebar.Geometry.LatheGeometry.js';
														
 
															+import { SidebarGeometryOctahedronGeometry } from './Sidebar.Geometry.OctahedronGeometry.js';
														
 
															+import { SidebarGeometryPlaneGeometry } from './Sidebar.Geometry.PlaneGeometry.js';
														
 
															+import { SidebarGeometryRingGeometry } from './Sidebar.Geometry.RingGeometry.js';
														
 
															+import { SidebarGeometryShapeGeometry } from './Sidebar.Geometry.ShapeGeometry.js';
														
 
															+import { SidebarGeometrySphereGeometry } from './Sidebar.Geometry.SphereGeometry.js';
														
 
															+import { SidebarGeometryTeapotBufferGeometry } from './Sidebar.Geometry.TeapotBufferGeometry.js';
														
 
															+import { SidebarGeometryTetrahedronGeometry } from './Sidebar.Geometry.TetrahedronGeometry.js';
														
 
															+import { SidebarGeometryTorusGeometry } from './Sidebar.Geometry.TorusGeometry.js';
														
 
															+import { SidebarGeometryTorusKnotGeometry } from './Sidebar.Geometry.TorusKnotGeometry.js';
														
 
															+import { SidebarGeometryTubeGeometry } from './Sidebar.Geometry.TubeGeometry.js';
														
 
															+
														
 
															+var geometryUIClasses = {
														
 
															+	'BoxGeometry': SidebarGeometryBoxGeometry,
														
 
															+	'CircleGeometry': SidebarGeometryCircleGeometry,
														
 
															+	'CylinderGeometry': SidebarGeometryCylinderGeometry,
														
 
															+	'DodecahedronGeometry': SidebarGeometryDodecahedronGeometry,
														
 
															+	'ExtrudeGeometry': SidebarGeometryExtrudeGeometry,
														
 
															+	'IcosahedronGeometry': SidebarGeometryIcosahedronGeometry,
														
 
															+	'LatheGeometry': SidebarGeometryLatheGeometry,
														
 
															+	'OctahedronGeometry': SidebarGeometryOctahedronGeometry,
														
 
															+	'PlaneGeometry': SidebarGeometryPlaneGeometry,
														
 
															+	'RingGeometry': SidebarGeometryRingGeometry,
														
 
															+	'ShapeGeometry': SidebarGeometryShapeGeometry,
														
 
															+	'SphereGeometry': SidebarGeometrySphereGeometry,
														
 
															+	'TeapotBufferGeometry': SidebarGeometryTeapotBufferGeometry,
														
 
															+	'TetrahedronGeometry': SidebarGeometryTetrahedronGeometry,
														
 
															+	'TorusGeometry': SidebarGeometryTorusGeometry,
														
 
															+	'TorusKnotGeometry': SidebarGeometryTorusKnotGeometry,
														
 
															+	'TubeGeometry': SidebarGeometryTubeGeometry
														
 
															+};
														
 
															+
														
 
															+var SidebarGeometry = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setBorderTop( '0' );
														
 
															 	container.setDisplay( 'none' );
														
 
															 	container.setPaddingTop( '20px' );
														
@@ -16,7 +64,7 @@ Sidebar.Geometry = function ( editor ) {
 
															 	// Actions
														
 
															 	/*
														
 
															-	var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
														
 
															+	var objectActions = new UISelect().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
														
 
															 	objectActions.setOptions( {
														
 
															 		'Actions': 'Actions',
														
@@ -88,27 +136,27 @@ Sidebar.Geometry = function ( editor ) {
 
															 	// type
														
 
															-	var geometryTypeRow = new UI.Row();
														
 
															-	var geometryType = new UI.Text();
														
 
															+	var geometryTypeRow = new UIRow();
														
 
															+	var geometryType = new UIText();
														
 
															-	geometryTypeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/type' ) ).setWidth( '90px' ) );
														
 
															+	geometryTypeRow.add( new UIText( strings.getKey( 'sidebar/geometry/type' ) ).setWidth( '90px' ) );
														
 
															 	geometryTypeRow.add( geometryType );
														
 
															 	container.add( geometryTypeRow );
														
 
															 	// uuid
														
 
															-	var geometryUUIDRow = new UI.Row();
														
 
															-	var geometryUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															-	var geometryUUIDRenew = new UI.Button( strings.getKey( 'sidebar/geometry/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															+	var geometryUUIDRow = new UIRow();
														
 
															+	var geometryUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															+	var geometryUUIDRenew = new UIButton( strings.getKey( 'sidebar/geometry/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															-		geometryUUID.setValue( THREE.Math.generateUUID() );
														
 
															+		geometryUUID.setValue( _Math.generateUUID() );
														
 
															 		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'uuid', geometryUUID.getValue() ) );
														
 
															 	} );
														
 
															-	geometryUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/uuid' ) ).setWidth( '90px' ) );
														
 
															+	geometryUUIDRow.add( new UIText( strings.getKey( 'sidebar/geometry/uuid' ) ).setWidth( '90px' ) );
														
 
															 	geometryUUIDRow.add( geometryUUID );
														
 
															 	geometryUUIDRow.add( geometryUUIDRenew );
														
@@ -116,36 +164,36 @@ Sidebar.Geometry = function ( editor ) {
 
															 	// name
														
 
															-	var geometryNameRow = new UI.Row();
														
 
															-	var geometryName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															+	var geometryNameRow = new UIRow();
														
 
															+	var geometryName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															 		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'name', geometryName.getValue() ) );
														
 
															 	} );
														
 
															-	geometryNameRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/name' ) ).setWidth( '90px' ) );
														
 
															+	geometryNameRow.add( new UIText( strings.getKey( 'sidebar/geometry/name' ) ).setWidth( '90px' ) );
														
 
															 	geometryNameRow.add( geometryName );
														
 
															 	container.add( geometryNameRow );
														
 
															 	// parameters
														
 
															-	var parameters = new UI.Span();
														
 
															+	var parameters = new UISpan();
														
 
															 	container.add( parameters );
														
 
															 	// geometry
														
 
															-	container.add( new Sidebar.Geometry.Geometry( editor ) );
														
 
															+	container.add( new SidebarGeometryGeometry( editor ) );
														
 
															 	// buffergeometry
														
 
															-	container.add( new Sidebar.Geometry.BufferGeometry( editor ) );
														
 
															+	container.add( new SidebarGeometryBufferGeometry( editor ) );
														
 
															 	// size
														
 
															-	var geometryBoundingSphere = new UI.Text();
														
 
															+	var geometryBoundingSphere = new UIText();
														
 
															-	container.add( new UI.Text( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
														
 
															+	container.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
														
 
															 	container.add( geometryBoundingSphere );
														
 
															 	//
														
@@ -171,11 +219,11 @@ Sidebar.Geometry = function ( editor ) {
 
															 			if ( geometry.type === 'BufferGeometry' || geometry.type === 'Geometry' ) {
														
 
															-				parameters.add( new Sidebar.Geometry.Modifiers( editor, object ) );
														
 
															+				parameters.add( new SidebarGeometryModifiers( editor, object ) );
														
 
															-			} else if ( Sidebar.Geometry[ geometry.type ] !== undefined ) {
														
 
															+			} else if ( geometryUIClasses[ geometry.type ] !== undefined ) {
														
 
															-				parameters.add( new Sidebar.Geometry[ geometry.type ]( editor, object ) );
														
 
															+				parameters.add( new geometryUIClasses[ geometry.type ]( editor, object ) );
														
 
															 			}
														
@@ -197,3 +245,5 @@ Sidebar.Geometry = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarGeometry };
														
--- a/editor/js/Sidebar.History.js
+++ b/editor/js/Sidebar.History.js
@@ -3,7 +3,10 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															-Sidebar.History = function ( editor ) {
														
 
															+import { UIPanel, UIBreak, UIText } from './libs/ui.js';
														
 
															+import { UIBoolean, UIOutliner } from './libs/ui.three.js';
														
 
															+
														
 
															+var SidebarHistory = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
@@ -13,13 +16,13 @@ Sidebar.History = function ( editor ) {
 
															 	var history = editor.history;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															-	container.add( new UI.Text( strings.getKey( 'sidebar/history' ).toUpperCase() ) );
														
 
															+	container.add( new UIText( strings.getKey( 'sidebar/history' ).toUpperCase() ) );
														
 
															 	//
														
 
															-	var persistent = new UI.THREE.Boolean( config.getKey( 'settings/history' ), strings.getKey( 'sidebar/history/persistent' ) );
														
 
															+	var persistent = new UIBoolean( config.getKey( 'settings/history' ), strings.getKey( 'sidebar/history/persistent' ) );
														
 
															 	persistent.setPosition( 'absolute' ).setRight( '8px' );
														
 
															 	persistent.onChange( function () {
														
@@ -44,11 +47,11 @@ Sidebar.History = function ( editor ) {
 
															 	} );
														
 
															 	container.add( persistent );
														
 
															-	container.add( new UI.Break(), new UI.Break() );
														
 
															+	container.add( new UIBreak(), new UIBreak() );
														
 
															 	var ignoreObjectSelectedSignal = false;
														
 
															-	var outliner = new UI.Outliner( editor );
														
 
															+	var outliner = new UIOutliner( editor );
														
 
															 	outliner.onChange( function () {
														
 
															 		ignoreObjectSelectedSignal = true;
														
@@ -65,7 +68,6 @@ Sidebar.History = function ( editor ) {
 
															 	var refreshUI = function () {
														
 
															 		var options = [];
														
 
															-		var enumerator = 1;
														
 
															 		function buildOption( object ) {
														
@@ -92,7 +94,7 @@ Sidebar.History = function ( editor ) {
 
															 		} )( history.undos );
														
 
															-		( function addObjects( objects, pad ) {
														
 
															+		( function addObjects( objects ) {
														
 
															 			for ( var i = objects.length - 1; i >= 0; i -- ) {
														
@@ -121,6 +123,8 @@ Sidebar.History = function ( editor ) {
 
															 	signals.historyChanged.add( refreshUI );
														
 
															 	signals.historyChanged.add( function ( cmd ) {
														
 
															+		if ( ignoreObjectSelectedSignal === true ) return;
														
 
															+
														
 
															 		outliner.setValue( cmd !== undefined ? cmd.id : null );
														
 
															 	} );
														
@@ -129,3 +133,5 @@ Sidebar.History = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarHistory };
														
--- a/editor/js/Sidebar.Material.js
+++ b/editor/js/Sidebar.Material.js
@@ -2,7 +2,57 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Material = function ( editor ) {
														
 
															+import {
														
 
															+	BasicDepthPacking,
														
 
															+	LineBasicMaterial,
														
 
															+	LineDashedMaterial,
														
 
															+	Math as _Math,
														
 
															+	MeshBasicMaterial,
														
 
															+	MeshDepthMaterial,
														
 
															+	MeshNormalMaterial,
														
 
															+	MeshLambertMaterial,
														
 
															+	MeshToonMaterial,
														
 
															+	MeshPhongMaterial,
														
 
															+	MeshMatcapMaterial,
														
 
															+	ShaderMaterial,
														
 
															+	RawShaderMaterial,
														
 
															+	SpriteMaterial,
														
 
															+	MeshPhysicalMaterial,
														
 
															+	ShadowMaterial,
														
 
															+	MeshStandardMaterial,
														
 
															+	RGBADepthPacking,
														
 
															+	SphericalReflectionMapping,
														
 
															+	sRGBEncoding
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIInput, UIButton, UIColor, UICheckbox, UISelect, UIText, UINumber } from './libs/ui.js';
														
 
															+import { UITexture } from './libs/ui.three.js';
														
 
															+
														
 
															+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
														
 
															+import { SetMaterialColorCommand } from './commands/SetMaterialColorCommand.js';
														
 
															+import { SetMaterialMapCommand } from './commands/SetMaterialMapCommand.js';
														
 
															+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
														
 
															+import { SetMaterialVectorCommand } from './commands/SetMaterialVectorCommand.js';
														
 
															+
														
 
															+var materialClasses = {
														
 
															+	'LineBasicMaterial': LineBasicMaterial,
														
 
															+	'LineDashedMaterial': LineDashedMaterial,
														
 
															+	'MeshBasicMaterial': MeshBasicMaterial,
														
 
															+	'MeshDepthMaterial': MeshDepthMaterial,
														
 
															+	'MeshNormalMaterial': MeshNormalMaterial,
														
 
															+	'MeshLambertMaterial': MeshLambertMaterial,
														
 
															+	'MeshMatcapMaterial': MeshMatcapMaterial,
														
 
															+	'MeshPhongMaterial': MeshPhongMaterial,
														
 
															+	'MeshToonMaterial': MeshToonMaterial,
														
 
															+	'MeshStandardMaterial': MeshStandardMaterial,
														
 
															+	'MeshPhysicalMaterial': MeshPhysicalMaterial,
														
 
															+	'RawShaderMaterial': RawShaderMaterial,
														
 
															+	'ShaderMaterial': ShaderMaterial,
														
 
															+	'ShadowMaterial': ShadowMaterial,
														
 
															+	'SpriteMaterial': SpriteMaterial
														
 
															+};
														
 
															+
														
 
															+var SidebarMaterial = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
@@ -12,18 +62,18 @@ Sidebar.Material = function ( editor ) {
 
															 	var currentMaterialSlot = 0;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setBorderTop( '0' );
														
 
															 	container.setDisplay( 'none' );
														
 
															 	container.setPaddingTop( '20px' );
														
 
															 	// Current material slot
														
 
															-	var materialSlotRow = new UI.Row();
														
 
															+	var materialSlotRow = new UIRow();
														
 
															-	materialSlotRow.add( new UI.Text( 'Slot' ).setWidth( '90px' ) );
														
 
															+	materialSlotRow.add( new UIText( 'Slot' ).setWidth( '90px' ) );
														
 
															-	var materialSlotSelect = new UI.Select().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
														
 
															+	var materialSlotSelect = new UISelect().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
														
 
															 	materialSlotSelect.setOptions( { 0: '' } ).setValue( 0 );
														
 
															 	materialSlotRow.add( materialSlotSelect );
														
@@ -31,8 +81,8 @@ Sidebar.Material = function ( editor ) {
 
															 	// type
														
 
															-	var materialClassRow = new UI.Row();
														
 
															-	var materialClass = new UI.Select().setOptions( {
														
 
															+	var materialClassRow = new UIRow();
														
 
															+	var materialClass = new UISelect().setOptions( {
														
 
															 		'LineBasicMaterial': 'LineBasicMaterial',
														
 
															 		'LineDashedMaterial': 'LineDashedMaterial',
														
@@ -52,23 +102,23 @@ Sidebar.Material = function ( editor ) {
 
															 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
														
 
															-	materialClassRow.add( new UI.Text( strings.getKey( 'sidebar/material/type' ) ).setWidth( '90px' ) );
														
 
															+	materialClassRow.add( new UIText( strings.getKey( 'sidebar/material/type' ) ).setWidth( '90px' ) );
														
 
															 	materialClassRow.add( materialClass );
														
 
															 	container.add( materialClassRow );
														
 
															 	// uuid
														
 
															-	var materialUUIDRow = new UI.Row();
														
 
															-	var materialUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															-	var materialUUIDRenew = new UI.Button( strings.getKey( 'sidebar/material/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															+	var materialUUIDRow = new UIRow();
														
 
															+	var materialUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															+	var materialUUIDRenew = new UIButton( strings.getKey( 'sidebar/material/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															-		materialUUID.setValue( THREE.Math.generateUUID() );
														
 
															+		materialUUID.setValue( _Math.generateUUID() );
														
 
															 		update();
														
 
															 	} );
														
 
															-	materialUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/material/uuid' ) ).setWidth( '90px' ) );
														
 
															+	materialUUIDRow.add( new UIText( strings.getKey( 'sidebar/material/uuid' ) ).setWidth( '90px' ) );
														
 
															 	materialUUIDRow.add( materialUUID );
														
 
															 	materialUUIDRow.add( materialUUIDRenew );
														
@@ -76,24 +126,24 @@ Sidebar.Material = function ( editor ) {
 
															 	// name
														
 
															-	var materialNameRow = new UI.Row();
														
 
															-	var materialName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															+	var materialNameRow = new UIRow();
														
 
															+	var materialName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															 		editor.execute( new SetMaterialValueCommand( editor, editor.selected, 'name', materialName.getValue(), currentMaterialSlot ) );
														
 
															 	} );
														
 
															-	materialNameRow.add( new UI.Text( strings.getKey( 'sidebar/material/name' ) ).setWidth( '90px' ) );
														
 
															+	materialNameRow.add( new UIText( strings.getKey( 'sidebar/material/name' ) ).setWidth( '90px' ) );
														
 
															 	materialNameRow.add( materialName );
														
 
															 	container.add( materialNameRow );
														
 
															 	// program
														
 
															-	var materialProgramRow = new UI.Row();
														
 
															-	materialProgramRow.add( new UI.Text( strings.getKey( 'sidebar/material/program' ) ).setWidth( '90px' ) );
														
 
															+	var materialProgramRow = new UIRow();
														
 
															+	materialProgramRow.add( new UIText( strings.getKey( 'sidebar/material/program' ) ).setWidth( '90px' ) );
														
 
															-	var materialProgramInfo = new UI.Button( strings.getKey( 'sidebar/material/info' ) );
														
 
															+	var materialProgramInfo = new UIButton( strings.getKey( 'sidebar/material/info' ) );
														
 
															 	materialProgramInfo.setMarginLeft( '4px' );
														
 
															 	materialProgramInfo.onClick( function () {
														
@@ -102,7 +152,7 @@ Sidebar.Material = function ( editor ) {
 
															 	} );
														
 
															 	materialProgramRow.add( materialProgramInfo );
														
 
															-	var materialProgramVertex = new UI.Button( strings.getKey( 'sidebar/material/vertex' ) );
														
 
															+	var materialProgramVertex = new UIButton( strings.getKey( 'sidebar/material/vertex' ) );
														
 
															 	materialProgramVertex.setMarginLeft( '4px' );
														
 
															 	materialProgramVertex.onClick( function () {
														
@@ -111,7 +161,7 @@ Sidebar.Material = function ( editor ) {
 
															 	} );
														
 
															 	materialProgramRow.add( materialProgramVertex );
														
 
															-	var materialProgramFragment = new UI.Button( strings.getKey( 'sidebar/material/fragment' ) );
														
 
															+	var materialProgramFragment = new UIButton( strings.getKey( 'sidebar/material/fragment' ) );
														
 
															 	materialProgramFragment.setMarginLeft( '4px' );
														
 
															 	materialProgramFragment.onClick( function () {
														
@@ -124,30 +174,30 @@ Sidebar.Material = function ( editor ) {
 
															 	// color
														
 
															-	var materialColorRow = new UI.Row();
														
 
															-	var materialColor = new UI.Color().onChange( update );
														
 
															+	var materialColorRow = new UIRow();
														
 
															+	var materialColor = new UIColor().onChange( update );
														
 
															-	materialColorRow.add( new UI.Text( strings.getKey( 'sidebar/material/color' ) ).setWidth( '90px' ) );
														
 
															+	materialColorRow.add( new UIText( strings.getKey( 'sidebar/material/color' ) ).setWidth( '90px' ) );
														
 
															 	materialColorRow.add( materialColor );
														
 
															 	container.add( materialColorRow );
														
 
															 	// roughness
														
 
															-	var materialRoughnessRow = new UI.Row();
														
 
															-	var materialRoughness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialRoughnessRow = new UIRow();
														
 
															+	var materialRoughness = new UINumber( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialRoughnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/roughness' ) ).setWidth( '90px' ) );
														
 
															+	materialRoughnessRow.add( new UIText( strings.getKey( 'sidebar/material/roughness' ) ).setWidth( '90px' ) );
														
 
															 	materialRoughnessRow.add( materialRoughness );
														
 
															 	container.add( materialRoughnessRow );
														
 
															 	// metalness
														
 
															-	var materialMetalnessRow = new UI.Row();
														
 
															-	var materialMetalness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialMetalnessRow = new UIRow();
														
 
															+	var materialMetalness = new UINumber( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialMetalnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/metalness' ) ).setWidth( '90px' ) );
														
 
															+	materialMetalnessRow.add( new UIText( strings.getKey( 'sidebar/material/metalness' ) ).setWidth( '90px' ) );
														
 
															 	materialMetalnessRow.add( materialMetalness );
														
 
															 	container.add( materialMetalnessRow );
														
@@ -155,11 +205,11 @@ Sidebar.Material = function ( editor ) {
 
															 	/*
														
 
															 	// sheen
														
 
															-	var materialSheenRow = new UI.Row();
														
 
															-	var materialSheenEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialSheen = new UI.Color().setHexValue( 0x000000 ).onChange( update );
														
 
															+	var materialSheenRow = new UIRow();
														
 
															+	var materialSheenEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialSheen = new UIColor().setHexValue( 0x000000 ).onChange( update );
														
 
															-	materialSheenRow.add( new UI.Text( strings.getKey( 'sidebar/material/sheen' ) ).setWidth( '90px' ) )
														
 
															+	materialSheenRow.add( new UIText( strings.getKey( 'sidebar/material/sheen' ) ).setWidth( '90px' ) )
														
 
															 	materialSheenRow.add( materialSheenEnabled );
														
 
															 	materialSheenRow.add( materialSheen );
														
@@ -168,58 +218,58 @@ Sidebar.Material = function ( editor ) {
 
															 	// emissive
														
 
															-	var materialEmissiveRow = new UI.Row();
														
 
															-	var materialEmissive = new UI.Color().setHexValue( 0x000000 ).onChange( update );
														
 
															+	var materialEmissiveRow = new UIRow();
														
 
															+	var materialEmissive = new UIColor().setHexValue( 0x000000 ).onChange( update );
														
 
															-	materialEmissiveRow.add( new UI.Text( strings.getKey( 'sidebar/material/emissive' ) ).setWidth( '90px' ) );
														
 
															+	materialEmissiveRow.add( new UIText( strings.getKey( 'sidebar/material/emissive' ) ).setWidth( '90px' ) );
														
 
															 	materialEmissiveRow.add( materialEmissive );
														
 
															 	container.add( materialEmissiveRow );
														
 
															 	// specular
														
 
															-	var materialSpecularRow = new UI.Row();
														
 
															-	var materialSpecular = new UI.Color().setHexValue( 0x111111 ).onChange( update );
														
 
															+	var materialSpecularRow = new UIRow();
														
 
															+	var materialSpecular = new UIColor().setHexValue( 0x111111 ).onChange( update );
														
 
															-	materialSpecularRow.add( new UI.Text( strings.getKey( 'sidebar/material/specular' ) ).setWidth( '90px' ) );
														
 
															+	materialSpecularRow.add( new UIText( strings.getKey( 'sidebar/material/specular' ) ).setWidth( '90px' ) );
														
 
															 	materialSpecularRow.add( materialSpecular );
														
 
															 	container.add( materialSpecularRow );
														
 
															 	// shininess
														
 
															-	var materialShininessRow = new UI.Row();
														
 
															-	var materialShininess = new UI.Number( 30 ).onChange( update );
														
 
															+	var materialShininessRow = new UIRow();
														
 
															+	var materialShininess = new UINumber( 30 ).onChange( update );
														
 
															-	materialShininessRow.add( new UI.Text( strings.getKey( 'sidebar/material/shininess' ) ).setWidth( '90px' ) );
														
 
															+	materialShininessRow.add( new UIText( strings.getKey( 'sidebar/material/shininess' ) ).setWidth( '90px' ) );
														
 
															 	materialShininessRow.add( materialShininess );
														
 
															 	container.add( materialShininessRow );
														
 
															 	// clearcoat
														
 
															-	var materialClearcoatRow = new UI.Row();
														
 
															-	var materialClearcoat = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialClearcoatRow = new UIRow();
														
 
															+	var materialClearcoat = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialClearcoatRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoat' ) ).setWidth( '90px' ) );
														
 
															+	materialClearcoatRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoat' ) ).setWidth( '90px' ) );
														
 
															 	materialClearcoatRow.add( materialClearcoat );
														
 
															 	container.add( materialClearcoatRow );
														
 
															 	// clearcoatRoughness
														
 
															-	var materialClearcoatRoughnessRow = new UI.Row();
														
 
															-	var materialClearcoatRoughness = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialClearcoatRoughnessRow = new UIRow();
														
 
															+	var materialClearcoatRoughness = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialClearcoatRoughnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoatroughness' ) ).setWidth( '90px' ) );
														
 
															+	materialClearcoatRoughnessRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoatroughness' ) ).setWidth( '90px' ) );
														
 
															 	materialClearcoatRoughnessRow.add( materialClearcoatRoughness );
														
 
															 	container.add( materialClearcoatRoughnessRow );
														
 
															 	// vertex colors
														
 
															-	var materialVertexColorsRow = new UI.Row();
														
 
															-	var materialVertexColors = new UI.Select().setOptions( {
														
 
															+	var materialVertexColorsRow = new UIRow();
														
 
															+	var materialVertexColors = new UISelect().setOptions( {
														
 
															 		0: strings.getKey( 'sidebar/material/vertexcolors/no' ),
														
 
															 		1: strings.getKey( 'sidebar/material/vertexcolors/face' ),
														
@@ -227,42 +277,42 @@ Sidebar.Material = function ( editor ) {
 
															 	} ).onChange( update );
														
 
															-	materialVertexColorsRow.add( new UI.Text( strings.getKey( 'sidebar/material/vertexcolors' ) ).setWidth( '90px' ) );
														
 
															+	materialVertexColorsRow.add( new UIText( strings.getKey( 'sidebar/material/vertexcolors' ) ).setWidth( '90px' ) );
														
 
															 	materialVertexColorsRow.add( materialVertexColors );
														
 
															 	container.add( materialVertexColorsRow );
														
 
															 	// depth packing
														
 
															-	var materialDepthPackingRow = new UI.Row();
														
 
															-	var materialDepthPacking = new UI.Select().setOptions( {
														
 
															-		[ THREE.BasicDepthPacking ]: 'BasicDepthPacking',
														
 
															-		[ THREE.RGBADepthPacking ]: 'RGBADepthPacking'
														
 
															+	var materialDepthPackingRow = new UIRow();
														
 
															+	var materialDepthPacking = new UISelect().setOptions( {
														
 
															+		[ BasicDepthPacking ]: 'BasicDepthPacking',
														
 
															+		[ RGBADepthPacking ]: 'RGBADepthPacking'
														
 
															 	} );
														
 
															 	materialDepthPacking.onChange( update );
														
 
															-	materialDepthPackingRow.add( new UI.Text( strings.getKey( 'sidebar/material/depthPacking' ) ).setWidth( '90px' ) );
														
 
															+	materialDepthPackingRow.add( new UIText( strings.getKey( 'sidebar/material/depthPacking' ) ).setWidth( '90px' ) );
														
 
															 	materialDepthPackingRow.add( materialDepthPacking );
														
 
															 	container.add( materialDepthPackingRow );
														
 
															 	// skinning
														
 
															-	var materialSkinningRow = new UI.Row();
														
 
															-	var materialSkinning = new UI.Checkbox( false ).onChange( update );
														
 
															+	var materialSkinningRow = new UIRow();
														
 
															+	var materialSkinning = new UICheckbox( false ).onChange( update );
														
 
															-	materialSkinningRow.add( new UI.Text( strings.getKey( 'sidebar/material/skinning' ) ).setWidth( '90px' ) );
														
 
															+	materialSkinningRow.add( new UIText( strings.getKey( 'sidebar/material/skinning' ) ).setWidth( '90px' ) );
														
 
															 	materialSkinningRow.add( materialSkinning );
														
 
															 	container.add( materialSkinningRow );
														
 
															 	// map
														
 
															-	var materialMapRow = new UI.Row();
														
 
															-	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialMap = new UI.Texture().onChange( updateMaterial );
														
 
															+	var materialMapRow = new UIRow();
														
 
															+	var materialMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialMap = new UITexture().onChange( updateMaterial );
														
 
															-	materialMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/map' ) ).setWidth( '90px' ) );
														
 
															+	materialMapRow.add( new UIText( strings.getKey( 'sidebar/material/map' ) ).setWidth( '90px' ) );
														
 
															 	materialMapRow.add( materialMapEnabled );
														
 
															 	materialMapRow.add( materialMap );
														
@@ -270,11 +320,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// matcap map
														
 
															-	var materialMatcapMapRow = new UI.Row();
														
 
															-	var materialMatcapMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialMatcapMap = new UI.Texture().onChange( update );
														
 
															+	var materialMatcapMapRow = new UIRow();
														
 
															+	var materialMatcapMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialMatcapMap = new UITexture().onChange( update );
														
 
															-	materialMatcapMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/matcap' ) ).setWidth( '90px' ) );
														
 
															+	materialMatcapMapRow.add( new UIText( strings.getKey( 'sidebar/material/matcap' ) ).setWidth( '90px' ) );
														
 
															 	materialMatcapMapRow.add( materialMatcapMapEnabled );
														
 
															 	materialMatcapMapRow.add( materialMatcapMap );
														
@@ -282,11 +332,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// alpha map
														
 
															-	var materialAlphaMapRow = new UI.Row();
														
 
															-	var materialAlphaMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialAlphaMap = new UI.Texture().onChange( update );
														
 
															+	var materialAlphaMapRow = new UIRow();
														
 
															+	var materialAlphaMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialAlphaMap = new UITexture().onChange( update );
														
 
															-	materialAlphaMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/alphamap' ) ).setWidth( '90px' ) );
														
 
															+	materialAlphaMapRow.add( new UIText( strings.getKey( 'sidebar/material/alphamap' ) ).setWidth( '90px' ) );
														
 
															 	materialAlphaMapRow.add( materialAlphaMapEnabled );
														
 
															 	materialAlphaMapRow.add( materialAlphaMap );
														
@@ -294,12 +344,12 @@ Sidebar.Material = function ( editor ) {
 
															 	// bump map
														
 
															-	var materialBumpMapRow = new UI.Row();
														
 
															-	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialBumpMap = new UI.Texture().onChange( update );
														
 
															-	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialBumpMapRow = new UIRow();
														
 
															+	var materialBumpMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialBumpMap = new UITexture().onChange( update );
														
 
															+	var materialBumpScale = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialBumpMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/bumpmap' ) ).setWidth( '90px' ) );
														
 
															+	materialBumpMapRow.add( new UIText( strings.getKey( 'sidebar/material/bumpmap' ) ).setWidth( '90px' ) );
														
 
															 	materialBumpMapRow.add( materialBumpMapEnabled );
														
 
															 	materialBumpMapRow.add( materialBumpMap );
														
 
															 	materialBumpMapRow.add( materialBumpScale );
														
@@ -308,13 +358,13 @@ Sidebar.Material = function ( editor ) {
 
															 	// normal map
														
 
															-	var materialNormalMapRow = new UI.Row();
														
 
															-	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialNormalMap = new UI.Texture().onChange( update );
														
 
															-	var materialNormalScaleX = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	var materialNormalScaleY = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialNormalMapRow = new UIRow();
														
 
															+	var materialNormalMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialNormalMap = new UITexture().onChange( update );
														
 
															+	var materialNormalScaleX = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialNormalScaleY = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialNormalMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/normalmap' ) ).setWidth( '90px' ) );
														
 
															+	materialNormalMapRow.add( new UIText( strings.getKey( 'sidebar/material/normalmap' ) ).setWidth( '90px' ) );
														
 
															 	materialNormalMapRow.add( materialNormalMapEnabled );
														
 
															 	materialNormalMapRow.add( materialNormalMap );
														
 
															 	materialNormalMapRow.add( materialNormalScaleX );
														
@@ -324,13 +374,13 @@ Sidebar.Material = function ( editor ) {
 
															 	// clearcoat normal map
														
 
															-	var materialClearcoatNormalMapRow = new UI.Row();
														
 
															-	var materialClearcoatNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialClearcoatNormalMap = new UI.Texture().onChange( update );
														
 
															-	var materialClearcoatNormalScaleX = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	var materialClearcoatNormalScaleY = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialClearcoatNormalMapRow = new UIRow();
														
 
															+	var materialClearcoatNormalMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialClearcoatNormalMap = new UITexture().onChange( update );
														
 
															+	var materialClearcoatNormalScaleX = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialClearcoatNormalScaleY = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialClearcoatNormalMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoatnormalmap' ) ).setWidth( '90px' ) );
														
 
															+	materialClearcoatNormalMapRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoatnormalmap' ) ).setWidth( '90px' ) );
														
 
															 	materialClearcoatNormalMapRow.add( materialClearcoatNormalMapEnabled );
														
 
															 	materialClearcoatNormalMapRow.add( materialClearcoatNormalMap );
														
 
															 	materialClearcoatNormalMapRow.add( materialClearcoatNormalScaleX );
														
@@ -340,12 +390,12 @@ Sidebar.Material = function ( editor ) {
 
															 	// displacement map
														
 
															-	var materialDisplacementMapRow = new UI.Row();
														
 
															-	var materialDisplacementMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialDisplacementMap = new UI.Texture().onChange( update );
														
 
															-	var materialDisplacementScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialDisplacementMapRow = new UIRow();
														
 
															+	var materialDisplacementMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialDisplacementMap = new UITexture().onChange( update );
														
 
															+	var materialDisplacementScale = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialDisplacementMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/displacemap' ) ).setWidth( '90px' ) );
														
 
															+	materialDisplacementMapRow.add( new UIText( strings.getKey( 'sidebar/material/displacemap' ) ).setWidth( '90px' ) );
														
 
															 	materialDisplacementMapRow.add( materialDisplacementMapEnabled );
														
 
															 	materialDisplacementMapRow.add( materialDisplacementMap );
														
 
															 	materialDisplacementMapRow.add( materialDisplacementScale );
														
@@ -354,11 +404,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// roughness map
														
 
															-	var materialRoughnessMapRow = new UI.Row();
														
 
															-	var materialRoughnessMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialRoughnessMap = new UI.Texture().onChange( update );
														
 
															+	var materialRoughnessMapRow = new UIRow();
														
 
															+	var materialRoughnessMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialRoughnessMap = new UITexture().onChange( update );
														
 
															-	materialRoughnessMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/roughmap' ) ).setWidth( '90px' ) );
														
 
															+	materialRoughnessMapRow.add( new UIText( strings.getKey( 'sidebar/material/roughmap' ) ).setWidth( '90px' ) );
														
 
															 	materialRoughnessMapRow.add( materialRoughnessMapEnabled );
														
 
															 	materialRoughnessMapRow.add( materialRoughnessMap );
														
@@ -366,11 +416,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// metalness map
														
 
															-	var materialMetalnessMapRow = new UI.Row();
														
 
															-	var materialMetalnessMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialMetalnessMap = new UI.Texture().onChange( update );
														
 
															+	var materialMetalnessMapRow = new UIRow();
														
 
															+	var materialMetalnessMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialMetalnessMap = new UITexture().onChange( update );
														
 
															-	materialMetalnessMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/metalmap' ) ).setWidth( '90px' ) );
														
 
															+	materialMetalnessMapRow.add( new UIText( strings.getKey( 'sidebar/material/metalmap' ) ).setWidth( '90px' ) );
														
 
															 	materialMetalnessMapRow.add( materialMetalnessMapEnabled );
														
 
															 	materialMetalnessMapRow.add( materialMetalnessMap );
														
@@ -378,11 +428,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// specular map
														
 
															-	var materialSpecularMapRow = new UI.Row();
														
 
															-	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialSpecularMap = new UI.Texture().onChange( update );
														
 
															+	var materialSpecularMapRow = new UIRow();
														
 
															+	var materialSpecularMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialSpecularMap = new UITexture().onChange( update );
														
 
															-	materialSpecularMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/specularmap' ) ).setWidth( '90px' ) );
														
 
															+	materialSpecularMapRow.add( new UIText( strings.getKey( 'sidebar/material/specularmap' ) ).setWidth( '90px' ) );
														
 
															 	materialSpecularMapRow.add( materialSpecularMapEnabled );
														
 
															 	materialSpecularMapRow.add( materialSpecularMap );
														
@@ -390,12 +440,12 @@ Sidebar.Material = function ( editor ) {
 
															 	// env map
														
 
															-	var materialEnvMapRow = new UI.Row();
														
 
															-	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( updateMaterial );
														
 
															-	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialEnvMapRow = new UIRow();
														
 
															+	var materialEnvMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialEnvMap = new UITexture( SphericalReflectionMapping ).onChange( updateMaterial );
														
 
															+	var materialReflectivity = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialEnvMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/envmap' ) ).setWidth( '90px' ) );
														
 
															+	materialEnvMapRow.add( new UIText( strings.getKey( 'sidebar/material/envmap' ) ).setWidth( '90px' ) );
														
 
															 	materialEnvMapRow.add( materialEnvMapEnabled );
														
 
															 	materialEnvMapRow.add( materialEnvMap );
														
 
															 	materialEnvMapRow.add( materialReflectivity );
														
@@ -404,11 +454,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// light map
														
 
															-	var materialLightMapRow = new UI.Row();
														
 
															-	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialLightMap = new UI.Texture().onChange( update );
														
 
															+	var materialLightMapRow = new UIRow();
														
 
															+	var materialLightMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialLightMap = new UITexture().onChange( update );
														
 
															-	materialLightMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/lightmap' ) ).setWidth( '90px' ) );
														
 
															+	materialLightMapRow.add( new UIText( strings.getKey( 'sidebar/material/lightmap' ) ).setWidth( '90px' ) );
														
 
															 	materialLightMapRow.add( materialLightMapEnabled );
														
 
															 	materialLightMapRow.add( materialLightMap );
														
@@ -416,12 +466,12 @@ Sidebar.Material = function ( editor ) {
 
															 	// ambient occlusion map
														
 
															-	var materialAOMapRow = new UI.Row();
														
 
															-	var materialAOMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialAOMap = new UI.Texture().onChange( update );
														
 
															-	var materialAOScale = new UI.Number( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );
														
 
															+	var materialAOMapRow = new UIRow();
														
 
															+	var materialAOMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialAOMap = new UITexture().onChange( update );
														
 
															+	var materialAOScale = new UINumber( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );
														
 
															-	materialAOMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/aomap' ) ).setWidth( '90px' ) );
														
 
															+	materialAOMapRow.add( new UIText( strings.getKey( 'sidebar/material/aomap' ) ).setWidth( '90px' ) );
														
 
															 	materialAOMapRow.add( materialAOMapEnabled );
														
 
															 	materialAOMapRow.add( materialAOMap );
														
 
															 	materialAOMapRow.add( materialAOScale );
														
@@ -430,11 +480,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// emissive map
														
 
															-	var materialEmissiveMapRow = new UI.Row();
														
 
															-	var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialEmissiveMap = new UI.Texture().onChange( updateMaterial );
														
 
															+	var materialEmissiveMapRow = new UIRow();
														
 
															+	var materialEmissiveMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialEmissiveMap = new UITexture().onChange( updateMaterial );
														
 
															-	materialEmissiveMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/emissivemap' ) ).setWidth( '90px' ) );
														
 
															+	materialEmissiveMapRow.add( new UIText( strings.getKey( 'sidebar/material/emissivemap' ) ).setWidth( '90px' ) );
														
 
															 	materialEmissiveMapRow.add( materialEmissiveMapEnabled );
														
 
															 	materialEmissiveMapRow.add( materialEmissiveMap );
														
@@ -442,11 +492,11 @@ Sidebar.Material = function ( editor ) {
 
															 	// gradient map
														
 
															-	var materialGradientMapRow = new UI.Row();
														
 
															-	var materialGradientMapEnabled = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialGradientMap = new UI.Texture().onChange( update );
														
 
															+	var materialGradientMapRow = new UIRow();
														
 
															+	var materialGradientMapEnabled = new UICheckbox( false ).onChange( update );
														
 
															+	var materialGradientMap = new UITexture().onChange( update );
														
 
															-	materialGradientMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/gradientmap' ) ).setWidth( '90px' ) );
														
 
															+	materialGradientMapRow.add( new UIText( strings.getKey( 'sidebar/material/gradientmap' ) ).setWidth( '90px' ) );
														
 
															 	materialGradientMapRow.add( materialGradientMapEnabled );
														
 
															 	materialGradientMapRow.add( materialGradientMap );
														
@@ -454,8 +504,8 @@ Sidebar.Material = function ( editor ) {
 
															 	// side
														
 
															-	var materialSideRow = new UI.Row();
														
 
															-	var materialSide = new UI.Select().setOptions( {
														
 
															+	var materialSideRow = new UIRow();
														
 
															+	var materialSide = new UISelect().setOptions( {
														
 
															 		0: strings.getKey( 'sidebar/material/side/front' ),
														
 
															 		1: strings.getKey( 'sidebar/material/side/back' ),
														
@@ -463,25 +513,25 @@ Sidebar.Material = function ( editor ) {
 
															 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
														
 
															-	materialSideRow.add( new UI.Text( strings.getKey( 'sidebar/material/side' ) ).setWidth( '90px' ) );
														
 
															+	materialSideRow.add( new UIText( strings.getKey( 'sidebar/material/side' ) ).setWidth( '90px' ) );
														
 
															 	materialSideRow.add( materialSide );
														
 
															 	container.add( materialSideRow );
														
 
															 	// shading
														
 
															-	var materialShadingRow = new UI.Row();
														
 
															-	var materialShading = new UI.Checkbox( false ).setLeft( '100px' ).onChange( update );
														
 
															+	var materialShadingRow = new UIRow();
														
 
															+	var materialShading = new UICheckbox( false ).setLeft( '100px' ).onChange( update );
														
 
															-	materialShadingRow.add( new UI.Text( strings.getKey( 'sidebar/material/flatshaded' ) ).setWidth( '90px' ) );
														
 
															+	materialShadingRow.add( new UIText( strings.getKey( 'sidebar/material/flatshaded' ) ).setWidth( '90px' ) );
														
 
															 	materialShadingRow.add( materialShading );
														
 
															 	container.add( materialShadingRow );
														
 
															 	// blending
														
 
															-	var materialBlendingRow = new UI.Row();
														
 
															-	var materialBlending = new UI.Select().setOptions( {
														
 
															+	var materialBlendingRow = new UIRow();
														
 
															+	var materialBlending = new UISelect().setOptions( {
														
 
															 		0: strings.getKey( 'sidebar/material/blending/no' ),
														
 
															 		1: strings.getKey( 'sidebar/material/blending/normal' ),
														
@@ -492,48 +542,48 @@ Sidebar.Material = function ( editor ) {
 
															 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
														
 
															-	materialBlendingRow.add( new UI.Text( strings.getKey( 'sidebar/material/blending' ) ).setWidth( '90px' ) );
														
 
															+	materialBlendingRow.add( new UIText( strings.getKey( 'sidebar/material/blending' ) ).setWidth( '90px' ) );
														
 
															 	materialBlendingRow.add( materialBlending );
														
 
															 	container.add( materialBlendingRow );
														
 
															 	// opacity
														
 
															-	var materialOpacityRow = new UI.Row();
														
 
															-	var materialOpacity = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialOpacityRow = new UIRow();
														
 
															+	var materialOpacity = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialOpacityRow.add( new UI.Text( strings.getKey( 'sidebar/material/opacity' ) ).setWidth( '90px' ) );
														
 
															+	materialOpacityRow.add( new UIText( strings.getKey( 'sidebar/material/opacity' ) ).setWidth( '90px' ) );
														
 
															 	materialOpacityRow.add( materialOpacity );
														
 
															 	container.add( materialOpacityRow );
														
 
															 	// transparent
														
 
															-	var materialTransparentRow = new UI.Row();
														
 
															-	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
														
 
															+	var materialTransparentRow = new UIRow();
														
 
															+	var materialTransparent = new UICheckbox().setLeft( '100px' ).onChange( update );
														
 
															-	materialTransparentRow.add( new UI.Text( strings.getKey( 'sidebar/material/transparent' ) ).setWidth( '90px' ) );
														
 
															+	materialTransparentRow.add( new UIText( strings.getKey( 'sidebar/material/transparent' ) ).setWidth( '90px' ) );
														
 
															 	materialTransparentRow.add( materialTransparent );
														
 
															 	container.add( materialTransparentRow );
														
 
															 	// alpha test
														
 
															-	var materialAlphaTestRow = new UI.Row();
														
 
															-	var materialAlphaTest = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															+	var materialAlphaTestRow = new UIRow();
														
 
															+	var materialAlphaTest = new UINumber().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
														
 
															-	materialAlphaTestRow.add( new UI.Text( strings.getKey( 'sidebar/material/alphatest' ) ).setWidth( '90px' ) );
														
 
															+	materialAlphaTestRow.add( new UIText( strings.getKey( 'sidebar/material/alphatest' ) ).setWidth( '90px' ) );
														
 
															 	materialAlphaTestRow.add( materialAlphaTest );
														
 
															 	container.add( materialAlphaTestRow );
														
 
															 	// wireframe
														
 
															-	var materialWireframeRow = new UI.Row();
														
 
															-	var materialWireframe = new UI.Checkbox( false ).onChange( update );
														
 
															-	var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
														
 
															+	var materialWireframeRow = new UIRow();
														
 
															+	var materialWireframe = new UICheckbox( false ).onChange( update );
														
 
															+	var materialWireframeLinewidth = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
														
 
															-	materialWireframeRow.add( new UI.Text( strings.getKey( 'sidebar/material/wireframe' ) ).setWidth( '90px' ) );
														
 
															+	materialWireframeRow.add( new UIText( strings.getKey( 'sidebar/material/wireframe' ) ).setWidth( '90px' ) );
														
 
															 	materialWireframeRow.add( materialWireframe );
														
 
															 	materialWireframeRow.add( materialWireframeLinewidth );
														
@@ -572,7 +622,7 @@ Sidebar.Material = function ( editor ) {
 
															 			if ( material.type !== materialClass.getValue() ) {
														
 
															-				material = new THREE[ materialClass.getValue() ]();
														
 
															+				material = new materialClasses[ materialClass.getValue() ]();
														
 
															 				if ( material.type == "RawShaderMaterial" ) {
														
@@ -612,7 +662,7 @@ Sidebar.Material = function ( editor ) {
 
															 				var sheenEnabled = materialSheenEnabled.getValue() === true;
														
 
															-				var sheen = sheenEnabled ? new THREE.Color(materialSheen.getHexValue()) : null;
														
 
															+				var sheen = sheenEnabled ? new Color(materialSheen.getHexValue()) : null;
														
 
															 				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'sheen', sheen, currentMaterialSlot ) );
														
@@ -1118,9 +1168,9 @@ Sidebar.Material = function ( editor ) {
 
															 		if ( texture !== null ) {
														
 
															-			if ( texture.encoding !== THREE.sRGBEncoding ) {
														
 
															+			if ( texture.encoding !== sRGBEncoding ) {
														
 
															-				texture.encoding = THREE.sRGBEncoding;
														
 
															+				texture.encoding = sRGBEncoding;
														
 
															 				var object = currentObject;
														
 
															 				if ( object !== null ) {
														
@@ -1617,3 +1667,5 @@ Sidebar.Material = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarMaterial };
														
--- a/editor/js/Sidebar.Object.js
+++ b/editor/js/Sidebar.Object.js
@@ -2,13 +2,29 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Object = function ( editor ) {
														
 
															+import {
														
 
															+	Euler,
														
 
															+	Math as _Math,
														
 
															+	Vector3
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIInput, UIButton, UIColor, UICheckbox, UIInteger, UITextArea, UIText, UINumber } from './libs/ui.js';
														
 
															+import { UIBoolean } from './libs/ui.three.js';
														
 
															+
														
 
															+import { SetUuidCommand } from './commands/SetUuidCommand.js';
														
 
															+import { SetValueCommand } from './commands/SetValueCommand.js';
														
 
															+import { SetPositionCommand } from './commands/SetPositionCommand.js';
														
 
															+import { SetRotationCommand } from './commands/SetRotationCommand.js';
														
 
															+import { SetScaleCommand } from './commands/SetScaleCommand.js';
														
 
															+import { SetColorCommand } from './commands/SetColorCommand.js';
														
 
															+
														
 
															+var SidebarObject = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setBorderTop( '0' );
														
 
															 	container.setPaddingTop( '20px' );
														
 
															 	container.setDisplay( 'none' );
														
@@ -37,15 +53,15 @@ Sidebar.Object = function ( editor ) {
 
															 		switch ( this.getValue() ) {
														
 
															 			case 'Reset Position':
														
 
															-				editor.execute( new SetPositionCommand( editor, object, new THREE.Vector3( 0, 0, 0 ) ) );
														
 
															+				editor.execute( new SetPositionCommand( editor, object, new Vector3( 0, 0, 0 ) ) );
														
 
															 				break;
														
 
															 			case 'Reset Rotation':
														
 
															-				editor.execute( new SetRotationCommand( editor, object, new THREE.Euler( 0, 0, 0 ) ) );
														
 
															+				editor.execute( new SetRotationCommand( editor, object, new Euler( 0, 0, 0 ) ) );
														
 
															 				break;
														
 
															 			case 'Reset Scale':
														
 
															-				editor.execute( new SetScaleCommand( editor, object, new THREE.Vector3( 1, 1, 1 ) ) );
														
 
															+				editor.execute( new SetScaleCommand( editor, object, new Vector3( 1, 1, 1 ) ) );
														
 
															 				break;
														
 
															 		}
														
@@ -58,27 +74,27 @@ Sidebar.Object = function ( editor ) {
 
															 	// type
														
 
															-	var objectTypeRow = new UI.Row();
														
 
															-	var objectType = new UI.Text();
														
 
															+	var objectTypeRow = new UIRow();
														
 
															+	var objectType = new UIText();
														
 
															-	objectTypeRow.add( new UI.Text( strings.getKey( 'sidebar/object/type' ) ).setWidth( '90px' ) );
														
 
															+	objectTypeRow.add( new UIText( strings.getKey( 'sidebar/object/type' ) ).setWidth( '90px' ) );
														
 
															 	objectTypeRow.add( objectType );
														
 
															 	container.add( objectTypeRow );
														
 
															 	// uuid
														
 
															-	var objectUUIDRow = new UI.Row();
														
 
															-	var objectUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															-	var objectUUIDRenew = new UI.Button( strings.getKey( 'sidebar/object/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															+	var objectUUIDRow = new UIRow();
														
 
															+	var objectUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
														
 
															+	var objectUUIDRenew = new UIButton( strings.getKey( 'sidebar/object/new' ) ).setMarginLeft( '7px' ).onClick( function () {
														
 
															-		objectUUID.setValue( THREE.Math.generateUUID() );
														
 
															+		objectUUID.setValue( _Math.generateUUID() );
														
 
															 		editor.execute( new SetUuidCommand( editor, editor.selected, objectUUID.getValue() ) );
														
 
															 	} );
														
 
															-	objectUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/object/uuid' ) ).setWidth( '90px' ) );
														
 
															+	objectUUIDRow.add( new UIText( strings.getKey( 'sidebar/object/uuid' ) ).setWidth( '90px' ) );
														
 
															 	objectUUIDRow.add( objectUUID );
														
 
															 	objectUUIDRow.add( objectUUIDRenew );
														
@@ -86,51 +102,51 @@ Sidebar.Object = function ( editor ) {
 
															 	// name
														
 
															-	var objectNameRow = new UI.Row();
														
 
															-	var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															+	var objectNameRow = new UIRow();
														
 
															+	var objectName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
														
 
															 		editor.execute( new SetValueCommand( editor, editor.selected, 'name', objectName.getValue() ) );
														
 
															 	} );
														
 
															-	objectNameRow.add( new UI.Text( strings.getKey( 'sidebar/object/name' ) ).setWidth( '90px' ) );
														
 
															+	objectNameRow.add( new UIText( strings.getKey( 'sidebar/object/name' ) ).setWidth( '90px' ) );
														
 
															 	objectNameRow.add( objectName );
														
 
															 	container.add( objectNameRow );
														
 
															 	// position
														
 
															-	var objectPositionRow = new UI.Row();
														
 
															-	var objectPositionX = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															-	var objectPositionY = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															-	var objectPositionZ = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectPositionRow = new UIRow();
														
 
															+	var objectPositionX = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectPositionY = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectPositionZ = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
														
 
															-	objectPositionRow.add( new UI.Text( strings.getKey( 'sidebar/object/position' ) ).setWidth( '90px' ) );
														
 
															+	objectPositionRow.add( new UIText( strings.getKey( 'sidebar/object/position' ) ).setWidth( '90px' ) );
														
 
															 	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
														
 
															 	container.add( objectPositionRow );
														
 
															 	// rotation
														
 
															-	var objectRotationRow = new UI.Row();
														
 
															-	var objectRotationX = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															-	var objectRotationY = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															-	var objectRotationZ = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectRotationRow = new UIRow();
														
 
															+	var objectRotationX = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectRotationY = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															+	var objectRotationZ = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
														
 
															-	objectRotationRow.add( new UI.Text( strings.getKey( 'sidebar/object/rotation' ) ).setWidth( '90px' ) );
														
 
															+	objectRotationRow.add( new UIText( strings.getKey( 'sidebar/object/rotation' ) ).setWidth( '90px' ) );
														
 
															 	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
														
 
															 	container.add( objectRotationRow );
														
 
															 	// scale
														
 
															-	var objectScaleRow = new UI.Row();
														
 
															-	var objectScaleLock = new UI.Checkbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
														
 
															-	var objectScaleX = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
														
 
															-	var objectScaleY = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
														
 
															-	var objectScaleZ = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );
														
 
															+	var objectScaleRow = new UIRow();
														
 
															+	var objectScaleLock = new UICheckbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
														
 
															+	var objectScaleX = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
														
 
															+	var objectScaleY = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
														
 
															+	var objectScaleZ = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );
														
 
															-	objectScaleRow.add( new UI.Text( strings.getKey( 'sidebar/object/scale' ) ).setWidth( '90px' ) );
														
 
															+	objectScaleRow.add( new UIText( strings.getKey( 'sidebar/object/scale' ) ).setWidth( '90px' ) );
														
 
															 	objectScaleRow.add( objectScaleLock );
														
 
															 	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
														
@@ -138,197 +154,195 @@ Sidebar.Object = function ( editor ) {
 
															 	// fov
														
 
															-	var objectFovRow = new UI.Row();
														
 
															-	var objectFov = new UI.Number().onChange( update );
														
 
															+	var objectFovRow = new UIRow();
														
 
															+	var objectFov = new UINumber().onChange( update );
														
 
															-	objectFovRow.add( new UI.Text( strings.getKey( 'sidebar/object/fov' ) ).setWidth( '90px' ) );
														
 
															+	objectFovRow.add( new UIText( strings.getKey( 'sidebar/object/fov' ) ).setWidth( '90px' ) );
														
 
															 	objectFovRow.add( objectFov );
														
 
															 	container.add( objectFovRow );
														
 
															 	// left
														
 
															-	var objectLeftRow = new UI.Row();
														
 
															-	var objectLeft = new UI.Number().onChange( update );
														
 
															+	var objectLeftRow = new UIRow();
														
 
															+	var objectLeft = new UINumber().onChange( update );
														
 
															-	objectLeftRow.add( new UI.Text( strings.getKey( 'sidebar/object/left' ) ).setWidth( '90px' ) );
														
 
															+	objectLeftRow.add( new UIText( strings.getKey( 'sidebar/object/left' ) ).setWidth( '90px' ) );
														
 
															 	objectLeftRow.add( objectLeft );
														
 
															 	container.add( objectLeftRow );
														
 
															 	// right
														
 
															-	var objectRightRow = new UI.Row();
														
 
															-	var objectRight = new UI.Number().onChange( update );
														
 
															+	var objectRightRow = new UIRow();
														
 
															+	var objectRight = new UINumber().onChange( update );
														
 
															-	objectRightRow.add( new UI.Text( strings.getKey( 'sidebar/object/right' ) ).setWidth( '90px' ) );
														
 
															+	objectRightRow.add( new UIText( strings.getKey( 'sidebar/object/right' ) ).setWidth( '90px' ) );
														
 
															 	objectRightRow.add( objectRight );
														
 
															 	container.add( objectRightRow );
														
 
															 	// top
														
 
															-	var objectTopRow = new UI.Row();
														
 
															-	var objectTop = new UI.Number().onChange( update );
														
 
															+	var objectTopRow = new UIRow();
														
 
															+	var objectTop = new UINumber().onChange( update );
														
 
															-	objectTopRow.add( new UI.Text( strings.getKey( 'sidebar/object/top' ) ).setWidth( '90px' ) );
														
 
															+	objectTopRow.add( new UIText( strings.getKey( 'sidebar/object/top' ) ).setWidth( '90px' ) );
														
 
															 	objectTopRow.add( objectTop );
														
 
															 	container.add( objectTopRow );
														
 
															 	// bottom
														
 
															-	var objectBottomRow = new UI.Row();
														
 
															-	var objectBottom = new UI.Number().onChange( update );
														
 
															+	var objectBottomRow = new UIRow();
														
 
															+	var objectBottom = new UINumber().onChange( update );
														
 
															-	objectBottomRow.add( new UI.Text( strings.getKey( 'sidebar/object/bottom' ) ).setWidth( '90px' ) );
														
 
															+	objectBottomRow.add( new UIText( strings.getKey( 'sidebar/object/bottom' ) ).setWidth( '90px' ) );
														
 
															 	objectBottomRow.add( objectBottom );
														
 
															 	container.add( objectBottomRow );
														
 
															 	// near
														
 
															-	var objectNearRow = new UI.Row();
														
 
															-	var objectNear = new UI.Number().onChange( update );
														
 
															+	var objectNearRow = new UIRow();
														
 
															+	var objectNear = new UINumber().onChange( update );
														
 
															-	objectNearRow.add( new UI.Text( strings.getKey( 'sidebar/object/near' ) ).setWidth( '90px' ) );
														
 
															+	objectNearRow.add( new UIText( strings.getKey( 'sidebar/object/near' ) ).setWidth( '90px' ) );
														
 
															 	objectNearRow.add( objectNear );
														
 
															 	container.add( objectNearRow );
														
 
															 	// far
														
 
															-	var objectFarRow = new UI.Row();
														
 
															-	var objectFar = new UI.Number().onChange( update );
														
 
															+	var objectFarRow = new UIRow();
														
 
															+	var objectFar = new UINumber().onChange( update );
														
 
															-	objectFarRow.add( new UI.Text( strings.getKey( 'sidebar/object/far' ) ).setWidth( '90px' ) );
														
 
															+	objectFarRow.add( new UIText( strings.getKey( 'sidebar/object/far' ) ).setWidth( '90px' ) );
														
 
															 	objectFarRow.add( objectFar );
														
 
															 	container.add( objectFarRow );
														
 
															 	// intensity
														
 
															-	var objectIntensityRow = new UI.Row();
														
 
															-	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
														
 
															+	var objectIntensityRow = new UIRow();
														
 
															+	var objectIntensity = new UINumber().setRange( 0, Infinity ).onChange( update );
														
 
															-	objectIntensityRow.add( new UI.Text( strings.getKey( 'sidebar/object/intensity' ) ).setWidth( '90px' ) );
														
 
															+	objectIntensityRow.add( new UIText( strings.getKey( 'sidebar/object/intensity' ) ).setWidth( '90px' ) );
														
 
															 	objectIntensityRow.add( objectIntensity );
														
 
															 	container.add( objectIntensityRow );
														
 
															 	// color
														
 
															-	var objectColorRow = new UI.Row();
														
 
															-	var objectColor = new UI.Color().onChange( update );
														
 
															+	var objectColorRow = new UIRow();
														
 
															+	var objectColor = new UIColor().onChange( update );
														
 
															-	objectColorRow.add( new UI.Text( strings.getKey( 'sidebar/object/color' ) ).setWidth( '90px' ) );
														
 
															+	objectColorRow.add( new UIText( strings.getKey( 'sidebar/object/color' ) ).setWidth( '90px' ) );
														
 
															 	objectColorRow.add( objectColor );
														
 
															 	container.add( objectColorRow );
														
 
															 	// ground color
														
 
															-	var objectGroundColorRow = new UI.Row();
														
 
															-	var objectGroundColor = new UI.Color().onChange( update );
														
 
															+	var objectGroundColorRow = new UIRow();
														
 
															+	var objectGroundColor = new UIColor().onChange( update );
														
 
															-	objectGroundColorRow.add( new UI.Text( strings.getKey( 'sidebar/object/groundcolor' ) ).setWidth( '90px' ) );
														
 
															+	objectGroundColorRow.add( new UIText( strings.getKey( 'sidebar/object/groundcolor' ) ).setWidth( '90px' ) );
														
 
															 	objectGroundColorRow.add( objectGroundColor );
														
 
															 	container.add( objectGroundColorRow );
														
 
															 	// distance
														
 
															-	var objectDistanceRow = new UI.Row();
														
 
															-	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
														
 
															+	var objectDistanceRow = new UIRow();
														
 
															+	var objectDistance = new UINumber().setRange( 0, Infinity ).onChange( update );
														
 
															-	objectDistanceRow.add( new UI.Text( strings.getKey( 'sidebar/object/distance' ) ).setWidth( '90px' ) );
														
 
															+	objectDistanceRow.add( new UIText( strings.getKey( 'sidebar/object/distance' ) ).setWidth( '90px' ) );
														
 
															 	objectDistanceRow.add( objectDistance );
														
 
															 	container.add( objectDistanceRow );
														
 
															 	// angle
														
 
															-	var objectAngleRow = new UI.Row();
														
 
															-	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
														
 
															+	var objectAngleRow = new UIRow();
														
 
															+	var objectAngle = new UINumber().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
														
 
															-	objectAngleRow.add( new UI.Text( strings.getKey( 'sidebar/object/angle' ) ).setWidth( '90px' ) );
														
 
															+	objectAngleRow.add( new UIText( strings.getKey( 'sidebar/object/angle' ) ).setWidth( '90px' ) );
														
 
															 	objectAngleRow.add( objectAngle );
														
 
															 	container.add( objectAngleRow );
														
 
															 	// penumbra
														
 
															-	var objectPenumbraRow = new UI.Row();
														
 
															-	var objectPenumbra = new UI.Number().setRange( 0, 1 ).onChange( update );
														
 
															+	var objectPenumbraRow = new UIRow();
														
 
															+	var objectPenumbra = new UINumber().setRange( 0, 1 ).onChange( update );
														
 
															-	objectPenumbraRow.add( new UI.Text( strings.getKey( 'sidebar/object/penumbra' ) ).setWidth( '90px' ) );
														
 
															+	objectPenumbraRow.add( new UIText( strings.getKey( 'sidebar/object/penumbra' ) ).setWidth( '90px' ) );
														
 
															 	objectPenumbraRow.add( objectPenumbra );
														
 
															 	container.add( objectPenumbraRow );
														
 
															 	// decay
														
 
															-	var objectDecayRow = new UI.Row();
														
 
															-	var objectDecay = new UI.Number().setRange( 0, Infinity ).onChange( update );
														
 
															+	var objectDecayRow = new UIRow();
														
 
															+	var objectDecay = new UINumber().setRange( 0, Infinity ).onChange( update );
														
 
															-	objectDecayRow.add( new UI.Text( strings.getKey( 'sidebar/object/decay' ) ).setWidth( '90px' ) );
														
 
															+	objectDecayRow.add( new UIText( strings.getKey( 'sidebar/object/decay' ) ).setWidth( '90px' ) );
														
 
															 	objectDecayRow.add( objectDecay );
														
 
															 	container.add( objectDecayRow );
														
 
															 	// shadow
														
 
															-	var objectShadowRow = new UI.Row();
														
 
															+	var objectShadowRow = new UIRow();
														
 
															-	objectShadowRow.add( new UI.Text( strings.getKey( 'sidebar/object/shadow' ) ).setWidth( '90px' ) );
														
 
															+	objectShadowRow.add( new UIText( strings.getKey( 'sidebar/object/shadow' ) ).setWidth( '90px' ) );
														
 
															-	var objectCastShadow = new UI.THREE.Boolean( false, strings.getKey( 'sidebar/object/cast' ) ).onChange( update );
														
 
															+	var objectCastShadow = new UIBoolean( false, strings.getKey( 'sidebar/object/cast' ) ).onChange( update );
														
 
															 	objectShadowRow.add( objectCastShadow );
														
 
															-	var objectReceiveShadow = new UI.THREE.Boolean( false, strings.getKey( 'sidebar/object/receive' ) ).onChange( update );
														
 
															+	var objectReceiveShadow = new UIBoolean( false, strings.getKey( 'sidebar/object/receive' ) ).onChange( update );
														
 
															 	objectShadowRow.add( objectReceiveShadow );
														
 
															-	var objectShadowRadius = new UI.Number( 1 ).onChange( update );
														
 
															+	var objectShadowRadius = new UINumber( 1 ).onChange( update );
														
 
															 	objectShadowRow.add( objectShadowRadius );
														
 
															 	container.add( objectShadowRow );
														
 
															 	// visible
														
 
															-	var objectVisibleRow = new UI.Row();
														
 
															-	var objectVisible = new UI.Checkbox().onChange( update );
														
 
															+	var objectVisibleRow = new UIRow();
														
 
															+	var objectVisible = new UICheckbox().onChange( update );
														
 
															-	objectVisibleRow.add( new UI.Text( strings.getKey( 'sidebar/object/visible' ) ).setWidth( '90px' ) );
														
 
															+	objectVisibleRow.add( new UIText( strings.getKey( 'sidebar/object/visible' ) ).setWidth( '90px' ) );
														
 
															 	objectVisibleRow.add( objectVisible );
														
 
															 	container.add( objectVisibleRow );
														
 
															 	// frustumCulled
														
 
															-	var objectFrustumCulledRow = new UI.Row();
														
 
															-	var objectFrustumCulled = new UI.Checkbox().onChange( update );
														
 
															+	var objectFrustumCulledRow = new UIRow();
														
 
															+	var objectFrustumCulled = new UICheckbox().onChange( update );
														
 
															-	objectFrustumCulledRow.add( new UI.Text( strings.getKey( 'sidebar/object/frustumcull' ) ).setWidth( '90px' ) );
														
 
															+	objectFrustumCulledRow.add( new UIText( strings.getKey( 'sidebar/object/frustumcull' ) ).setWidth( '90px' ) );
														
 
															 	objectFrustumCulledRow.add( objectFrustumCulled );
														
 
															 	container.add( objectFrustumCulledRow );
														
 
															 	// renderOrder
														
 
															-	var objectRenderOrderRow = new UI.Row();
														
 
															-	var objectRenderOrder = new UI.Integer().setWidth( '50px' ).onChange( update );
														
 
															+	var objectRenderOrderRow = new UIRow();
														
 
															+	var objectRenderOrder = new UIInteger().setWidth( '50px' ).onChange( update );
														
 
															-	objectRenderOrderRow.add( new UI.Text( strings.getKey( 'sidebar/object/renderorder' ) ).setWidth( '90px' ) );
														
 
															+	objectRenderOrderRow.add( new UIText( strings.getKey( 'sidebar/object/renderorder' ) ).setWidth( '90px' ) );
														
 
															 	objectRenderOrderRow.add( objectRenderOrder );
														
 
															 	container.add( objectRenderOrderRow );
														
 
															 	// user data
														
 
															-	var timeout;
														
 
															-
														
 
															-	var objectUserDataRow = new UI.Row();
														
 
															-	var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
														
 
															+	var objectUserDataRow = new UIRow();
														
 
															+	var objectUserData = new UITextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
														
 
															 	objectUserData.onKeyUp( function () {
														
 
															 		try {
														
@@ -347,7 +361,7 @@ Sidebar.Object = function ( editor ) {
 
															 	} );
														
 
															-	objectUserDataRow.add( new UI.Text( strings.getKey( 'sidebar/object/userdata' ) ).setWidth( '90px' ) );
														
 
															+	objectUserDataRow.add( new UIText( strings.getKey( 'sidebar/object/userdata' ) ).setWidth( '90px' ) );
														
 
															 	objectUserDataRow.add( objectUserData );
														
 
															 	container.add( objectUserDataRow );
														
@@ -412,21 +426,21 @@ Sidebar.Object = function ( editor ) {
 
															 		if ( object !== null ) {
														
 
															-			var newPosition = new THREE.Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
														
 
															+			var newPosition = new Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
														
 
															 			if ( object.position.distanceTo( newPosition ) >= 0.01 ) {
														
 
															 				editor.execute( new SetPositionCommand( editor, object, newPosition ) );
														
 
															 			}
														
 
															-			var newRotation = new THREE.Euler( objectRotationX.getValue() * THREE.Math.DEG2RAD, objectRotationY.getValue() * THREE.Math.DEG2RAD, objectRotationZ.getValue() * THREE.Math.DEG2RAD );
														
 
															+			var newRotation = new Euler( objectRotationX.getValue() * _Math.DEG2RAD, objectRotationY.getValue() * _Math.DEG2RAD, objectRotationZ.getValue() * _Math.DEG2RAD );
														
 
															 			if ( object.rotation.toVector3().distanceTo( newRotation.toVector3() ) >= 0.01 ) {
														
 
															 				editor.execute( new SetRotationCommand( editor, object, newRotation ) );
														
 
															 			}
														
 
															-			var newScale = new THREE.Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
														
 
															+			var newScale = new Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
														
 
															 			if ( object.scale.distanceTo( newScale ) >= 0.01 ) {
														
 
															 				editor.execute( new SetScaleCommand( editor, object, newScale ) );
														
@@ -685,9 +699,9 @@ Sidebar.Object = function ( editor ) {
 
															 		objectPositionY.setValue( object.position.y );
														
 
															 		objectPositionZ.setValue( object.position.z );
														
 
															-		objectRotationX.setValue( object.rotation.x * THREE.Math.RAD2DEG );
														
 
															-		objectRotationY.setValue( object.rotation.y * THREE.Math.RAD2DEG );
														
 
															-		objectRotationZ.setValue( object.rotation.z * THREE.Math.RAD2DEG );
														
 
															+		objectRotationX.setValue( object.rotation.x * _Math.RAD2DEG );
														
 
															+		objectRotationY.setValue( object.rotation.y * _Math.RAD2DEG );
														
 
															+		objectRotationZ.setValue( object.rotation.z * _Math.RAD2DEG );
														
 
															 		objectScaleX.setValue( object.scale.x );
														
 
															 		objectScaleY.setValue( object.scale.y );
														
@@ -819,3 +833,5 @@ Sidebar.Object = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarObject };
														
--- a/editor/js/Sidebar.Project.js
+++ b/editor/js/Sidebar.Project.js
@@ -2,7 +2,17 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Project = function ( editor ) {
														
 
															+import { WebGLRenderer } from '../../build/three.module.js';
														
 
															+
														
 
															+import { SVGRenderer } from '../../examples/jsm/renderers/SVGRenderer.js';
														
 
															+import { RaytracingRenderer } from '../../examples/jsm/renderers/RaytracingRenderer.js';
														
 
															+
														
 
															+import { UIPanel, UIRow, UIInput, UICheckbox, UISelect, UIText, UIListbox, UISpan, UIButton } from './libs/ui.js';
														
 
															+import { UIBoolean } from './libs/ui.three.js';
														
 
															+
														
 
															+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
														
 
															+
														
 
															+var SidebarProject = function ( editor ) {
														
 
															 	var config = editor.config;
														
 
															 	var signals = editor.signals;
														
@@ -10,15 +20,15 @@ Sidebar.Project = function ( editor ) {
 
															 	var rendererTypes = {
														
 
															-		'WebGLRenderer': THREE.WebGLRenderer,
														
 
															-		'SVGRenderer': THREE.SVGRenderer,
														
 
															-		'RaytracingRenderer': THREE.RaytracingRenderer
														
 
															+		'WebGLRenderer': WebGLRenderer,
														
 
															+		'SVGRenderer': SVGRenderer,
														
 
															+		'RaytracingRenderer': RaytracingRenderer
														
 
															 	};
														
 
															-	var container = new UI.Span();
														
 
															+	var container = new UISpan();
														
 
															-	var projectsettings = new UI.Panel();
														
 
															+	var projectsettings = new UIPanel();
														
 
															 	projectsettings.setBorderTop( '0' );
														
 
															 	projectsettings.setPaddingTop( '20px' );
														
@@ -26,28 +36,28 @@ Sidebar.Project = function ( editor ) {
 
															 	// Title
														
 
															-	var titleRow = new UI.Row();
														
 
															-	var title = new UI.Input( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
														
 
															+	var titleRow = new UIRow();
														
 
															+	var title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
														
 
															 		config.setKey( 'project/title', this.getValue() );
														
 
															 	} );
														
 
															-	titleRow.add( new UI.Text( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
														
 
															+	titleRow.add( new UIText( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
														
 
															 	titleRow.add( title );
														
 
															 	projectsettings.add( titleRow );
														
 
															 	// Editable
														
 
															-	var editableRow = new UI.Row();
														
 
															-	var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
														
 
															+	var editableRow = new UIRow();
														
 
															+	var editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
														
 
															 		config.setKey( 'project/editable', this.getValue() );
														
 
															 	} );
														
 
															-	editableRow.add( new UI.Text( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
														
 
															+	editableRow.add( new UIText( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
														
 
															 	editableRow.add( editable );
														
 
															 	projectsettings.add( editableRow );
														
@@ -64,8 +74,8 @@ Sidebar.Project = function ( editor ) {
 
															 	}
														
 
															-	var rendererTypeRow = new UI.Row();
														
 
															-	var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
														
 
															+	var rendererTypeRow = new UIRow();
														
 
															+	var rendererType = new UISelect().setOptions( options ).setWidth( '150px' ).onChange( function () {
														
 
															 		var value = this.getValue();
														
@@ -75,7 +85,7 @@ Sidebar.Project = function ( editor ) {
 
															 	} );
														
 
															-	rendererTypeRow.add( new UI.Text( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
														
 
															+	rendererTypeRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
														
 
															 	rendererTypeRow.add( rendererType );
														
 
															 	projectsettings.add( rendererTypeRow );
														
@@ -88,9 +98,9 @@ Sidebar.Project = function ( editor ) {
 
															 	// Renderer / Antialias
														
 
															-	var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' );
														
 
															+	var rendererPropertiesRow = new UIRow().setMarginLeft( '90px' );
														
 
															-	var rendererAntialias = new UI.THREE.Boolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
														
 
															+	var rendererAntialias = new UIBoolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
														
 
															 		config.setKey( 'project/renderer/antialias', this.getValue() );
														
 
															 		updateRenderer();
														
@@ -100,7 +110,7 @@ Sidebar.Project = function ( editor ) {
 
															 	// Renderer / Shadows
														
 
															-	var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), strings.getKey( 'sidebar/project/shadows' ) ).onChange( function () {
														
 
															+	var rendererShadows = new UIBoolean( config.getKey( 'project/renderer/shadows' ), strings.getKey( 'sidebar/project/shadows' ) ).onChange( function () {
														
 
															 		config.setKey( 'project/renderer/shadows', this.getValue() );
														
 
															 		updateRenderer();
														
@@ -156,14 +166,14 @@ Sidebar.Project = function ( editor ) {
 
															 	// Materials
														
 
															-	var materials = new UI.Panel();
														
 
															+	var materials = new UIPanel();
														
 
															-	var headerRow = new UI.Row();
														
 
															-	headerRow.add( new UI.Text( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
														
 
															+	var headerRow = new UIRow();
														
 
															+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
														
 
															 	materials.add( headerRow );
														
 
															-	var listbox = new UI.Listbox();
														
 
															+	var listbox = new UIListbox();
														
 
															 	signals.materialAdded.add( function () {
														
 
															 		listbox.setItems( Object.values( editor.materials ) );
														
@@ -171,7 +181,7 @@ Sidebar.Project = function ( editor ) {
 
															 	} );
														
 
															 	materials.add( listbox );
														
 
															-	var buttonsRow = new UI.Row();
														
 
															+	var buttonsRow = new UIRow();
														
 
															 	buttonsRow.setPadding( '10px 0px' );
														
 
															 	materials.add( buttonsRow );
														
@@ -185,7 +195,7 @@ Sidebar.Project = function ( editor ) {
 
															 	buttonsRow.add( addButton );
														
 
															 	*/
														
 
															-	var assignMaterial = new UI.Button().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
														
 
															+	var assignMaterial = new UIButton().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
														
 
															 	assignMaterial.onClick( function () {
														
 
															 		if ( editor.selected !== null ) {
														
@@ -221,3 +231,5 @@ Sidebar.Project = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarProject };
														
--- a/editor/js/Sidebar.Properties.js
+++ b/editor/js/Sidebar.Properties.js
@@ -2,18 +2,26 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Properties = function ( editor ) {
														
 
															+import { UITabbedPanel } from './libs/ui.js';
														
 
															+
														
 
															+import { SidebarObject } from './Sidebar.Object.js';
														
 
															+import { SidebarGeometry } from './Sidebar.Geometry.js';
														
 
															+import { SidebarMaterial } from './Sidebar.Material.js';
														
 
															+
														
 
															+var SidebarProperties = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.TabbedPanel();
														
 
															+	var container = new UITabbedPanel();
														
 
															 	container.setId( 'properties' );
														
 
															-	container.addTab( 'object', strings.getKey( 'sidebar/properties/object' ), new Sidebar.Object( editor ) );
														
 
															-	container.addTab( 'geometry', strings.getKey( 'sidebar/properties/geometry' ), new Sidebar.Geometry( editor ) );
														
 
															-	container.addTab( 'material', strings.getKey( 'sidebar/properties/material' ), new Sidebar.Material( editor ) );
														
 
															+	container.addTab( 'object', strings.getKey( 'sidebar/properties/object' ), new SidebarObject( editor ) );
														
 
															+	container.addTab( 'geometry', strings.getKey( 'sidebar/properties/geometry' ), new SidebarGeometry( editor ) );
														
 
															+	container.addTab( 'material', strings.getKey( 'sidebar/properties/material' ), new SidebarMaterial( editor ) );
														
 
															 	container.select( 'object' );
														
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarProperties };
														
--- a/editor/js/Sidebar.Scene.js
+++ b/editor/js/Sidebar.Scene.js
@@ -2,12 +2,15 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Scene = function ( editor ) {
														
 
															+import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
														
 
															+import { UIOutliner } from './libs/ui.three.js';
														
 
															+
														
 
															+var SidebarScene = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setBorderTop( '0' );
														
 
															 	container.setPaddingTop( '20px' );
														
@@ -89,7 +92,7 @@ Sidebar.Scene = function ( editor ) {
 
															 	var ignoreObjectSelectedSignal = false;
														
 
															-	var outliner = new UI.Outliner( editor );
														
 
															+	var outliner = new UIOutliner( editor );
														
 
															 	outliner.setId( 'outliner' );
														
 
															 	outliner.onChange( function () {
														
@@ -106,7 +109,7 @@ Sidebar.Scene = function ( editor ) {
 
															 	} );
														
 
															 	container.add( outliner );
														
 
															-	container.add( new UI.Break() );
														
 
															+	container.add( new UIBreak() );
														
 
															 	// background
														
@@ -116,11 +119,11 @@ Sidebar.Scene = function ( editor ) {
 
															 	}
														
 
															-	var backgroundRow = new UI.Row();
														
 
															+	var backgroundRow = new UIRow();
														
 
															-	var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
														
 
															+	var backgroundColor = new UIColor().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
														
 
															-	backgroundRow.add( new UI.Text( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
														
 
															+	backgroundRow.add( new UIText( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
														
 
															 	backgroundRow.add( backgroundColor );
														
 
															 	container.add( backgroundRow );
														
@@ -139,8 +142,8 @@ Sidebar.Scene = function ( editor ) {
 
															 	}
														
 
															-	var fogTypeRow = new UI.Row();
														
 
															-	var fogType = new UI.Select().setOptions( {
														
 
															+	var fogTypeRow = new UIRow();
														
 
															+	var fogType = new UISelect().setOptions( {
														
 
															 		'None': 'None',
														
 
															 		'Fog': 'Linear',
														
@@ -154,35 +157,35 @@ Sidebar.Scene = function ( editor ) {
 
															 	} );
														
 
															-	fogTypeRow.add( new UI.Text( strings.getKey( 'sidebar/scene/fog' ) ).setWidth( '90px' ) );
														
 
															+	fogTypeRow.add( new UIText( strings.getKey( 'sidebar/scene/fog' ) ).setWidth( '90px' ) );
														
 
															 	fogTypeRow.add( fogType );
														
 
															 	container.add( fogTypeRow );
														
 
															 	// fog color
														
 
															-	var fogPropertiesRow = new UI.Row();
														
 
															+	var fogPropertiesRow = new UIRow();
														
 
															 	fogPropertiesRow.setDisplay( 'none' );
														
 
															 	fogPropertiesRow.setMarginLeft( '90px' );
														
 
															 	container.add( fogPropertiesRow );
														
 
															-	var fogColor = new UI.Color().setValue( '#aaaaaa' );
														
 
															+	var fogColor = new UIColor().setValue( '#aaaaaa' );
														
 
															 	fogColor.onChange( onFogChanged );
														
 
															 	fogPropertiesRow.add( fogColor );
														
 
															 	// fog near
														
 
															-	var fogNear = new UI.Number( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
														
 
															+	var fogNear = new UINumber( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
														
 
															 	fogPropertiesRow.add( fogNear );
														
 
															 	// fog far
														
 
															-	var fogFar = new UI.Number( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
														
 
															+	var fogFar = new UINumber( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
														
 
															 	fogPropertiesRow.add( fogFar );
														
 
															 	// fog density
														
 
															-	var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogChanged );
														
 
															+	var fogDensity = new UINumber( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogChanged );
														
 
															 	fogPropertiesRow.add( fogDensity );
														
 
															 	//
														
@@ -303,3 +306,5 @@ Sidebar.Scene = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarScene };
														
--- a/editor/js/Sidebar.Script.js
+++ b/editor/js/Sidebar.Script.js
@@ -2,25 +2,31 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Script = function ( editor ) {
														
 
															+import { UIPanel, UIBreak, UIText, UIButton, UIRow, UIInput } from './libs/ui.js';
														
 
															+
														
 
															+import { AddScriptCommand } from './commands/AddScriptCommand.js';
														
 
															+import { SetScriptValueCommand } from './commands/SetScriptValueCommand.js';
														
 
															+import { RemoveScriptCommand } from './commands/RemoveScriptCommand.js';
														
 
															+
														
 
															+var SidebarScript = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setDisplay( 'none' );
														
 
															-	container.add( new UI.Text( strings.getKey( 'sidebar/script' ) ).setTextTransform( 'uppercase' ) );
														
 
															-	container.add( new UI.Break() );
														
 
															-	container.add( new UI.Break() );
														
 
															+	container.add( new UIText( strings.getKey( 'sidebar/script' ) ).setTextTransform( 'uppercase' ) );
														
 
															+	container.add( new UIBreak() );
														
 
															+	container.add( new UIBreak() );
														
 
															 	//
														
 
															-	var scriptsContainer = new UI.Row();
														
 
															+	var scriptsContainer = new UIRow();
														
 
															 	container.add( scriptsContainer );
														
 
															-	var newScript = new UI.Button( strings.getKey( 'sidebar/script/new' ) );
														
 
															+	var newScript = new UIButton( strings.getKey( 'sidebar/script/new' ) );
														
 
															 	newScript.onClick( function () {
														
 
															 		var script = { name: '', source: 'function update( event ) {}' };
														
@@ -60,7 +66,7 @@ Sidebar.Script = function ( editor ) {
 
															 				( function ( object, script ) {
														
 
															-					var name = new UI.Input( script.name ).setWidth( '130px' ).setFontSize( '12px' );
														
 
															+					var name = new UIInput( script.name ).setWidth( '130px' ).setFontSize( '12px' );
														
 
															 					name.onChange( function () {
														
 
															 						editor.execute( new SetScriptValueCommand( editor, editor.selected, script, 'name', this.getValue() ) );
														
@@ -68,7 +74,7 @@ Sidebar.Script = function ( editor ) {
 
															 					} );
														
 
															 					scriptsContainer.add( name );
														
 
															-					var edit = new UI.Button( strings.getKey( 'sidebar/script/edit' ) );
														
 
															+					var edit = new UIButton( strings.getKey( 'sidebar/script/edit' ) );
														
 
															 					edit.setMarginLeft( '4px' );
														
 
															 					edit.onClick( function () {
														
@@ -77,7 +83,7 @@ Sidebar.Script = function ( editor ) {
 
															 					} );
														
 
															 					scriptsContainer.add( edit );
														
 
															-					var remove = new UI.Button( strings.getKey( 'sidebar/script/remove' ) );
														
 
															+					var remove = new UIButton( strings.getKey( 'sidebar/script/remove' ) );
														
 
															 					remove.setMarginLeft( '4px' );
														
 
															 					remove.onClick( function () {
														
@@ -90,9 +96,9 @@ Sidebar.Script = function ( editor ) {
 
															 					} );
														
 
															 					scriptsContainer.add( remove );
														
 
															-					scriptsContainer.add( new UI.Break() );
														
 
															+					scriptsContainer.add( new UIBreak() );
														
 
															-				} )( object, scripts[ i ] )
														
 
															+				} )( object, scripts[ i ] );
														
 
															 			}
														
@@ -125,3 +131,5 @@ Sidebar.Script = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarScript };
														
--- a/editor/js/Sidebar.Settings.Shortcuts.js
+++ b/editor/js/Sidebar.Settings.Shortcuts.js
@@ -2,7 +2,11 @@
 
															  * @author TyLindberg / https://github.com/TyLindberg
														
 
															  */
														
 
															-Sidebar.Settings.Shortcuts = function ( editor ) {
														
 
															+import { UIDiv, UIBreak, UIText, UIRow, UIInput } from './libs/ui.js';
														
 
															+
														
 
															+import { RemoveObjectCommand } from './commands/RemoveObjectCommand.js';
														
 
															+
														
 
															+var SidebarSettingsShortcuts = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
@@ -17,17 +21,17 @@ Sidebar.Settings.Shortcuts = function ( editor ) {
 
															 	var config = editor.config;
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Div();
														
 
															-	container.add( new UI.Break() );
														
 
															+	var container = new UIDiv();
														
 
															+	container.add( new UIBreak() );
														
 
															 	var shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus' ];
														
 
															 	function createShortcutInput( name ) {
														
 
															 		var configName = 'settings/shortcuts/' + name;
														
 
															-		var shortcutRow = new UI.Row();
														
 
															+		var shortcutRow = new UIRow();
														
 
															-		var shortcutInput = new UI.Input().setWidth( '150px' ).setFontSize( '12px' );
														
 
															+		var shortcutInput = new UIInput().setWidth( '150px' ).setFontSize( '12px' );
														
 
															 		shortcutInput.setTextTransform( 'lowercase' );
														
 
															 		shortcutInput.onChange( function () {
														
@@ -78,7 +82,7 @@ Sidebar.Settings.Shortcuts = function ( editor ) {
 
															 		}
														
 
															 		shortcutInput.dom.maxLength = 1;
														
 
															-		shortcutRow.add( new UI.Text( strings.getKey( 'sidebar/settings/shortcuts/' + name ) ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
														
 
															+		shortcutRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts/' + name ) ).setTextTransform( 'capitalize' ).setWidth( '90px' ) );
														
 
															 		shortcutRow.add( shortcutInput );
														
 
															 		container.add( shortcutRow );
														
@@ -167,3 +171,5 @@ Sidebar.Settings.Shortcuts = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarSettingsShortcuts };
														
--- a/editor/js/Sidebar.Settings.Viewport.js
+++ b/editor/js/Sidebar.Settings.Viewport.js
@@ -2,17 +2,21 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Settings.Viewport = function ( editor ) {
														
 
															+import { UIDiv, UIBreak, UIText } from './libs/ui.js';
														
 
															+import { UIBoolean } from './libs/ui.three.js';
														
 
															+
														
 
															+
														
 
															+var SidebarSettingsViewport = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Div();
														
 
															-	container.add( new UI.Break() );
														
 
															+	var container = new UIDiv();
														
 
															+	container.add( new UIBreak() );
														
 
															-	container.add( new UI.Text( strings.getKey( 'sidebar/settings/viewport/grid' ) ).setWidth( '90px' ) );
														
 
															+	container.add( new UIText( strings.getKey( 'sidebar/settings/viewport/grid' ) ).setWidth( '90px' ) );
														
 
															-	var show = new UI.THREE.Boolean( true ).onChange( update );
														
 
															+	var show = new UIBoolean( true ).onChange( update );
														
 
															 	container.add( show );
														
 
															 	/*
														
@@ -34,3 +38,5 @@ Sidebar.Settings.Viewport = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarSettingsViewport };
														
--- a/editor/js/Sidebar.Settings.js
+++ b/editor/js/Sidebar.Settings.js
@@ -2,13 +2,17 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Sidebar.Settings = function ( editor ) {
														
 
															+import { UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
														
 
															+
														
 
															+import { SidebarSettingsViewport } from './Sidebar.Settings.Viewport.js';
														
 
															+import { SidebarSettingsShortcuts } from './Sidebar.Settings.Shortcuts.js';
														
 
															+
														
 
															+var SidebarSettings = function ( editor ) {
														
 
															 	var config = editor.config;
														
 
															-	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setBorderTop( '0' );
														
 
															 	container.setPaddingTop( '20px' );
														
 
															 	container.setPaddingBottom( '20px' );
														
@@ -20,8 +24,8 @@ Sidebar.Settings = function ( editor ) {
 
															 		zh: '中文'
														
 
															 	};
														
 
															-	var languageRow = new UI.Row();
														
 
															-	var language = new UI.Select().setWidth( '150px' );
														
 
															+	var languageRow = new UIRow();
														
 
															+	var language = new UISelect().setWidth( '150px' );
														
 
															 	language.setOptions( options );
														
 
															 	if ( config.getKey( 'language' ) !== undefined ) {
														
@@ -38,14 +42,16 @@ Sidebar.Settings = function ( editor ) {
 
															 	} );
														
 
															-	languageRow.add( new UI.Text( strings.getKey( 'sidebar/settings/language' ) ).setWidth( '90px' ) );
														
 
															+	languageRow.add( new UIText( strings.getKey( 'sidebar/settings/language' ) ).setWidth( '90px' ) );
														
 
															 	languageRow.add( language );
														
 
															 	container.add( languageRow );
														
 
															-	container.add( new Sidebar.Settings.Shortcuts( editor ) );
														
 
															-	container.add( new Sidebar.Settings.Viewport( editor ) );
														
 
															+	container.add( new SidebarSettingsShortcuts( editor ) );
														
 
															+	container.add( new SidebarSettingsViewport( editor ) );
														
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { SidebarSettings };
														
--- a/editor/js/Sidebar.js
+++ b/editor/js/Sidebar.js
@@ -2,25 +2,35 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import { UITabbedPanel, UISpan } from './libs/ui.js';
														
 
															+
														
 
															+import { SidebarScene } from './Sidebar.Scene.js';
														
 
															+import { SidebarProperties } from './Sidebar.Properties.js';
														
 
															+import { SidebarScript } from './Sidebar.Script.js';
														
 
															+import { SidebarAnimation } from './Sidebar.Animation.js';
														
 
															+import { SidebarProject } from './Sidebar.Project.js';
														
 
															+import { SidebarHistory } from './Sidebar.History.js';
														
 
															+import { SidebarSettings } from './Sidebar.Settings.js';
														
 
															+
														
 
															 var Sidebar = function ( editor ) {
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.TabbedPanel();
														
 
															+	var container = new UITabbedPanel();
														
 
															 	container.setId( 'sidebar' );
														
 
															-	var scene = new UI.Span().add(
														
 
															-		new Sidebar.Scene( editor ),
														
 
															-		new Sidebar.Properties( editor ),
														
 
															-		new Sidebar.Animation( editor ),
														
 
															-		new Sidebar.Script( editor )
														
 
															+	var scene = new UISpan().add(
														
 
															+		new SidebarScene( editor ),
														
 
															+		new SidebarProperties( editor ),
														
 
															+		new SidebarAnimation( editor ),
														
 
															+		new SidebarScript( editor )
														
 
															 	);
														
 
															-	var project = new Sidebar.Project( editor );
														
 
															+	var project = new SidebarProject( editor );
														
 
															-	var settings = new UI.Span().add(
														
 
															-		new Sidebar.Settings( editor ),
														
 
															-		new Sidebar.History( editor )
														
 
															+	var settings = new UISpan().add(
														
 
															+		new SidebarSettings( editor ),
														
 
															+		new SidebarHistory( editor )
														
 
															 	);
														
 
															 	container.addTab( 'scene', strings.getKey( 'sidebar/scene' ), scene );
														
@@ -31,3 +41,5 @@ var Sidebar = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Sidebar };
														
--- a/editor/js/Storage.js
+++ b/editor/js/Storage.js
@@ -6,7 +6,7 @@ var Storage = function () {
 
															 	var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
														
 
															-	if ( indexedDB === undefined  ) {
														
 
															+	if ( indexedDB === undefined ) {
														
 
															 		console.warn( 'Storage: IndexedDB not available.' );
														
 
															 		return { init: function () {}, get: function () {}, set: function () {}, clear: function () {} };
														
@@ -63,14 +63,14 @@ var Storage = function () {
 
															 		},
														
 
															-		set: function ( data, callback ) {
														
 
															+		set: function ( data ) {
														
 
															 			var start = performance.now();
														
 
															 			var transaction = database.transaction( [ 'states' ], 'readwrite' );
														
 
															 			var objectStore = transaction.objectStore( 'states' );
														
 
															 			var request = objectStore.put( data, 0 );
														
 
															-			request.onsuccess = function ( event ) {
														
 
															+			request.onsuccess = function () {
														
 
															 				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB. ' + ( performance.now() - start ).toFixed( 2 ) + 'ms' );
														
@@ -85,7 +85,7 @@ var Storage = function () {
 
															 			var transaction = database.transaction( [ 'states' ], 'readwrite' );
														
 
															 			var objectStore = transaction.objectStore( 'states' );
														
 
															 			var request = objectStore.clear();
														
 
															-			request.onsuccess = function ( event ) {
														
 
															+			request.onsuccess = function () {
														
 
															 				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Cleared IndexedDB.' );
														
@@ -96,3 +96,5 @@ var Storage = function () {
 
															 	};
														
 
															 };
														
 
															+
														
 
															+export { Storage };
														
--- a/editor/js/Strings.js
+++ b/editor/js/Strings.js
@@ -609,3 +609,5 @@ var Strings = function ( config ) {
 
															 	};
														
 
															 };
														
 
															+
														
 
															+export { Strings };
														
--- a/editor/js/Toolbar.js
+++ b/editor/js/Toolbar.js
@@ -2,21 +2,24 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import { UIPanel, UIButton } from './libs/ui.js';
														
 
															+import { UIBoolean } from './libs/ui.three.js';
														
 
															+
														
 
															 var Toolbar = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'toolbar' );
														
 
															 	container.setDisplay( 'none' );
														
 
															-	var buttons = new UI.Panel();
														
 
															+	var buttons = new UIPanel();
														
 
															 	container.add( buttons );
														
 
															 	// translate / rotate / scale
														
 
															-	var translate = new UI.Button( strings.getKey( 'toolbar/translate' ) );
														
 
															+	var translate = new UIButton( strings.getKey( 'toolbar/translate' ) );
														
 
															 	translate.dom.className = 'Button selected';
														
 
															 	translate.onClick( function () {
														
@@ -25,7 +28,7 @@ var Toolbar = function ( editor ) {
 
															 	} );
														
 
															 	buttons.add( translate );
														
 
															-	var rotate = new UI.Button( strings.getKey( 'toolbar/rotate' ) );
														
 
															+	var rotate = new UIButton( strings.getKey( 'toolbar/rotate' ) );
														
 
															 	rotate.onClick( function () {
														
 
															 		signals.transformModeChanged.dispatch( 'rotate' );
														
@@ -33,7 +36,7 @@ var Toolbar = function ( editor ) {
 
															 	} );
														
 
															 	buttons.add( rotate );
														
 
															-	var scale = new UI.Button( strings.getKey( 'toolbar/scale' ) );
														
 
															+	var scale = new UIButton( strings.getKey( 'toolbar/scale' ) );
														
 
															 	scale.onClick( function () {
														
 
															 		signals.transformModeChanged.dispatch( 'scale' );
														
@@ -41,7 +44,7 @@ var Toolbar = function ( editor ) {
 
															 	} );
														
 
															 	buttons.add( scale );
														
 
															-	var local = new UI.THREE.Boolean( false, strings.getKey( 'toolbar/local' ) );
														
 
															+	var local = new UIBoolean( false, strings.getKey( 'toolbar/local' ) );
														
 
															 	local.onChange( function () {
														
 
															 		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );
														
@@ -76,3 +79,5 @@ var Toolbar = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Toolbar };
														
--- a/editor/js/Viewport.Camera.js
+++ b/editor/js/Viewport.Camera.js
@@ -2,13 +2,15 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Viewport.Camera = function ( editor ) {
														
 
															+import { UISelect } from './libs/ui.js';
														
 
															+
														
 
															+var ViewportCamera = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	//
														
 
															-	var cameraSelect = new UI.Select();
														
 
															+	var cameraSelect = new UISelect();
														
 
															 	cameraSelect.setPosition( 'absolute' );
														
 
															 	cameraSelect.setRight( '10px' );
														
 
															 	cameraSelect.setTop( '10px' );
														
@@ -46,3 +48,5 @@ Viewport.Camera = function ( editor ) {
 
															 	return cameraSelect;
														
 
															 };
														
 
															+
														
 
															+export { ViewportCamera };
														
--- a/editor/js/Viewport.Info.js
+++ b/editor/js/Viewport.Info.js
@@ -2,12 +2,14 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-Viewport.Info = function ( editor ) {
														
 
															+import { UIPanel, UIBreak, UIText } from './libs/ui.js';
														
 
															+
														
 
															+var ViewportInfo = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															 	var strings = editor.strings;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'info' );
														
 
															 	container.setPosition( 'absolute' );
														
 
															 	container.setLeft( '10px' );
														
@@ -15,16 +17,16 @@ Viewport.Info = function ( editor ) {
 
															 	container.setFontSize( '12px' );
														
 
															 	container.setColor( '#fff' );
														
 
															-	var objectsText = new UI.Text( '0' ).setMarginLeft( '6px' );
														
 
															-	var verticesText = new UI.Text( '0' ).setMarginLeft( '6px' );
														
 
															-	var trianglesText = new UI.Text( '0' ).setMarginLeft( '6px' );
														
 
															+	var objectsText = new UIText( '0' ).setMarginLeft( '6px' );
														
 
															+	var verticesText = new UIText( '0' ).setMarginLeft( '6px' );
														
 
															+	var trianglesText = new UIText( '0' ).setMarginLeft( '6px' );
														
 
															-	container.add( new UI.Text( strings.getKey( 'viewport/info/objects' ) ).setTextTransform( 'lowercase' ) );
														
 
															-	container.add( objectsText, new UI.Break() );
														
 
															-	container.add( new UI.Text( strings.getKey( 'viewport/info/vertices' ) ).setTextTransform( 'lowercase' ) );
														
 
															-	container.add( verticesText, new UI.Break() );
														
 
															-	container.add( new UI.Text( strings.getKey( 'viewport/info/triangles' ) ).setTextTransform( 'lowercase' ) );
														
 
															-	container.add( trianglesText, new UI.Break() );
														
 
															+	container.add( new UIText( strings.getKey( 'viewport/info/objects' ) ).setTextTransform( 'lowercase' ) );
														
 
															+	container.add( objectsText, new UIBreak() );
														
 
															+	container.add( new UIText( strings.getKey( 'viewport/info/vertices' ) ).setTextTransform( 'lowercase' ) );
														
 
															+	container.add( verticesText, new UIBreak() );
														
 
															+	container.add( new UIText( strings.getKey( 'viewport/info/triangles' ) ).setTextTransform( 'lowercase' ) );
														
 
															+	container.add( trianglesText, new UIBreak() );
														
 
															 	signals.objectAdded.add( update );
														
 
															 	signals.objectRemoved.add( update );
														
@@ -86,3 +88,5 @@ Viewport.Info = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { ViewportInfo };
														
--- a/editor/js/Viewport.js
+++ b/editor/js/Viewport.js
@@ -2,16 +2,41 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															+import {
														
 
															+	Box3,
														
 
															+	BoxHelper,
														
 
															+	GridHelper,
														
 
															+	Vector2,
														
 
															+	Raycaster,
														
 
															+	Fog,
														
 
															+	FogExp2,
														
 
															+	sRGBEncoding
														
 
															+} from '../../build/three.module.js';
														
 
															+
														
 
															+import { TransformControls } from '../../examples/jsm/controls/TransformControls.js';
														
 
															+import { RaytracingRenderer } from '../../examples/jsm/renderers/RaytracingRenderer.js';
														
 
															+
														
 
															+import { UIPanel } from './libs/ui.js';
														
 
															+
														
 
															+import { EditorControls } from './EditorControls.js';
														
 
															+
														
 
															+import { ViewportCamera } from './Viewport.Camera.js';
														
 
															+import { ViewportInfo } from './Viewport.Info.js';
														
 
															+
														
 
															+import { SetPositionCommand } from './commands/SetPositionCommand.js';
														
 
															+import { SetRotationCommand } from './commands/SetRotationCommand.js';
														
 
															+import { SetScaleCommand } from './commands/SetScaleCommand.js';
														
 
															+
														
 
															 var Viewport = function ( editor ) {
														
 
															 	var signals = editor.signals;
														
 
															-	var container = new UI.Panel();
														
 
															+	var container = new UIPanel();
														
 
															 	container.setId( 'viewport' );
														
 
															 	container.setPosition( 'absolute' );
														
 
															-	container.add( new Viewport.Camera( editor ) );
														
 
															-	container.add( new Viewport.Info( editor ) );
														
 
															+	container.add( new ViewportCamera( editor ) );
														
 
															+	container.add( new ViewportInfo( editor ) );
														
 
															 	//
														
@@ -25,7 +50,7 @@ var Viewport = function ( editor ) {
 
															 	// helpers
														
 
															-	var grid = new THREE.GridHelper( 30, 30, 0x444444, 0x888888 );
														
 
															+	var grid = new GridHelper( 30, 30, 0x444444, 0x888888 );
														
 
															 	sceneHelpers.add( grid );
														
 
															 	var array = grid.geometry.attributes.color.array;
														
@@ -42,9 +67,9 @@ var Viewport = function ( editor ) {
 
															 	//
														
 
															-	var box = new THREE.Box3();
														
 
															+	var box = new Box3();
														
 
															-	var selectionBox = new THREE.BoxHelper();
														
 
															+	var selectionBox = new BoxHelper();
														
 
															 	selectionBox.material.depthTest = false;
														
 
															 	selectionBox.material.transparent = true;
														
 
															 	selectionBox.visible = false;
														
@@ -54,7 +79,7 @@ var Viewport = function ( editor ) {
 
															 	var objectRotationOnDown = null;
														
 
															 	var objectScaleOnDown = null;
														
 
															-	var transformControls = new THREE.TransformControls( camera, container.dom );
														
 
															+	var transformControls = new TransformControls( camera, container.dom );
														
 
															 	transformControls.addEventListener( 'change', function () {
														
 
															 		var object = transformControls.object;
														
@@ -137,8 +162,8 @@ var Viewport = function ( editor ) {
 
															 	// object picking
														
 
															-	var raycaster = new THREE.Raycaster();
														
 
															-	var mouse = new THREE.Vector2();
														
 
															+	var raycaster = new Raycaster();
														
 
															+	var mouse = new Vector2();
														
 
															 	// events
														
@@ -152,9 +177,9 @@ var Viewport = function ( editor ) {
 
															 	}
														
 
															-	var onDownPosition = new THREE.Vector2();
														
 
															-	var onUpPosition = new THREE.Vector2();
														
 
															-	var onDoubleClickPosition = new THREE.Vector2();
														
 
															+	var onDownPosition = new Vector2();
														
 
															+	var onUpPosition = new Vector2();
														
 
															+	var onDoubleClickPosition = new Vector2();
														
 
															 	function getMousePosition( dom, x, y ) {
														
@@ -267,7 +292,7 @@ var Viewport = function ( editor ) {
 
															 	// controls need to be added *after* main logic,
														
 
															 	// otherwise controls.enabled doesn't work.
														
 
															-	var controls = new THREE.EditorControls( camera, container.dom );
														
 
															+	var controls = new EditorControls( camera, container.dom );
														
 
															 	controls.addEventListener( 'change', function () {
														
 
															 		signals.cameraChanged.dispatch( camera );
														
@@ -313,7 +338,7 @@ var Viewport = function ( editor ) {
 
															 		renderer.autoClear = false;
														
 
															 		renderer.autoUpdateScene = false;
														
 
															-		renderer.outputEncoding = THREE.sRGBEncoding;
														
 
															+		renderer.outputEncoding = sRGBEncoding;
														
 
															 		renderer.setPixelRatio( window.devicePixelRatio );
														
 
															 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
														
@@ -440,7 +465,7 @@ var Viewport = function ( editor ) {
 
															 	} );
														
 
															-	signals.materialChanged.add( function ( material ) {
														
 
															+	signals.materialChanged.add( function () {
														
 
															 		render();
														
@@ -468,10 +493,10 @@ var Viewport = function ( editor ) {
 
															 					scene.fog = null;
														
 
															 					break;
														
 
															 				case 'Fog':
														
 
															-					scene.fog = new THREE.Fog();
														
 
															+					scene.fog = new Fog();
														
 
															 					break;
														
 
															 				case 'FogExp2':
														
 
															-					scene.fog = new THREE.FogExp2();
														
 
															+					scene.fog = new FogExp2();
														
 
															 					break;
														
 
															 			}
														
@@ -575,7 +600,7 @@ var Viewport = function ( editor ) {
 
															 		scene.updateMatrixWorld();
														
 
															 		renderer.render( scene, camera );
														
 
															-		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
														
 
															+		if ( renderer instanceof RaytracingRenderer === false ) {
														
 
															 			if ( camera === editor.camera ) {
														
@@ -591,3 +616,5 @@ var Viewport = function ( editor ) {
 
															 	return container;
														
 
															 };
														
 
															+
														
 
															+export { Viewport };
														
--- a/editor/js/commands/AddObjectCommand.js
+++ b/editor/js/commands/AddObjectCommand.js
@@ -3,12 +3,14 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { ObjectLoader } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var AddObjectCommand = function ( editor, object ) {
														
 
															 	Command.call( this, editor );
														
@@ -57,7 +59,7 @@ AddObjectCommand.prototype = {
 
															 		if ( this.object === undefined ) {
														
 
															-			var loader = new THREE.ObjectLoader();
														
 
															+			var loader = new ObjectLoader();
														
 
															 			this.object = loader.parse( json.object );
														
 
															 		}
														
@@ -65,3 +67,5 @@ AddObjectCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { AddObjectCommand };
														
--- a/editor/js/commands/AddScriptCommand.js
+++ b/editor/js/commands/AddScriptCommand.js
@@ -3,13 +3,14 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @param script javascript object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var AddScriptCommand = function ( editor, object, script ) {
														
 
															 	Command.call( this, editor );
														
@@ -75,3 +76,5 @@ AddScriptCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { AddScriptCommand };
														
--- a/editor/js/commands/MoveObjectCommand.js
+++ b/editor/js/commands/MoveObjectCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newBefore THREE.Object3D
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var MoveObjectCommand = function ( editor, object, newParent, newBefore ) {
														
 
															 	Command.call( this, editor );
														
@@ -106,3 +107,5 @@ MoveObjectCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { MoveObjectCommand };
														
--- a/editor/js/commands/MultiCmdsCommand.js
+++ b/editor/js/commands/MultiCmdsCommand.js
@@ -3,12 +3,13 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param cmdArray array containing command objects
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var MultiCmdsCommand = function ( editor, cmdArray ) {
														
 
															 	Command.call( this, editor );
														
@@ -84,3 +85,5 @@ MultiCmdsCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { MultiCmdsCommand };
														
--- a/editor/js/commands/RemoveObjectCommand.js
+++ b/editor/js/commands/RemoveObjectCommand.js
@@ -3,12 +3,14 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { ObjectLoader } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var RemoveObjectCommand = function ( editor, object ) {
														
 
															 	Command.call( this, editor );
														
@@ -94,7 +96,7 @@ RemoveObjectCommand.prototype = {
 
															 		this.object = this.editor.objectByUuid( json.object.object.uuid );
														
 
															 		if ( this.object === undefined ) {
														
 
															-			var loader = new THREE.ObjectLoader();
														
 
															+			var loader = new ObjectLoader();
														
 
															 			this.object = loader.parse( json.object );
														
 
															 		}
														
@@ -102,3 +104,5 @@ RemoveObjectCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { RemoveObjectCommand };
														
--- a/editor/js/commands/RemoveScriptCommand.js
+++ b/editor/js/commands/RemoveScriptCommand.js
@@ -3,13 +3,14 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @param script javascript object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var RemoveScriptCommand = function ( editor, object, script ) {
														
 
															 	Command.call( this, editor );
														
@@ -80,3 +81,5 @@ RemoveScriptCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { RemoveScriptCommand };
														
--- a/editor/js/commands/SetColorCommand.js
+++ b/editor/js/commands/SetColorCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newValue integer representing a hex color value
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetColorCommand = function ( editor, object, attributeName, newValue ) {
														
 
															 	Command.call( this, editor );
														
@@ -73,3 +74,5 @@ SetColorCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetColorCommand };
														
--- a/editor/js/commands/SetGeometryCommand.js
+++ b/editor/js/commands/SetGeometryCommand.js
@@ -3,6 +3,9 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { ObjectLoader } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -75,9 +78,9 @@ SetGeometryCommand.prototype = {
 
															 		this.oldGeometry = parseGeometry( json.oldGeometry );
														
 
															 		this.newGeometry = parseGeometry( json.newGeometry );
														
 
															-		function parseGeometry ( data ) {
														
 
															+		function parseGeometry( data ) {
														
 
															-			var loader = new THREE.ObjectLoader();
														
 
															+			var loader = new ObjectLoader();
														
 
															 			return loader.parseGeometries( [ data ] )[ data.uuid ];
														
 
															 		}
														
@@ -85,3 +88,5 @@ SetGeometryCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetGeometryCommand };
														
--- a/editor/js/commands/SetGeometryValueCommand.js
+++ b/editor/js/commands/SetGeometryValueCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newValue number, string, boolean or object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetGeometryValueCommand = function ( editor, object, attributeName, newValue ) {
														
 
															 	Command.call( this, editor );
														
@@ -70,3 +71,5 @@ SetGeometryValueCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetGeometryValueCommand };
														
--- a/editor/js/commands/SetMaterialColorCommand.js
+++ b/editor/js/commands/SetMaterialColorCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newValue integer representing a hex color value
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetMaterialColorCommand = function ( editor, object, attributeName, newValue, materialSlot ) {
														
 
															 	Command.call( this, editor );
														
@@ -78,3 +79,5 @@ SetMaterialColorCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetMaterialColorCommand };
														
--- a/editor/js/commands/SetMaterialCommand.js
+++ b/editor/js/commands/SetMaterialCommand.js
@@ -3,13 +3,15 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { ObjectLoader } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @param newMaterial THREE.Material
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetMaterialCommand = function ( editor, object, newMaterial, materialSlot ) {
														
 
															 	Command.call( this, editor );
														
@@ -61,11 +63,11 @@ SetMaterialCommand.prototype = {
 
															 		this.oldMaterial = parseMaterial( json.oldMaterial );
														
 
															 		this.newMaterial = parseMaterial( json.newMaterial );
														
 
															-		function parseMaterial ( json ) {
														
 
															+		function parseMaterial( json ) {
														
 
															-			var loader = new THREE.ObjectLoader();
														
 
															+			var loader = new ObjectLoader();
														
 
															 			var images = loader.parseImages( json.images );
														
 
															-			var textures  = loader.parseTextures( json.textures, images );
														
 
															+			var textures = loader.parseTextures( json.textures, images );
														
 
															 			var materials = loader.parseMaterials( [ json ], textures );
														
 
															 			return materials[ json.uuid ];
														
@@ -74,3 +76,5 @@ SetMaterialCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetMaterialCommand };
														
--- a/editor/js/commands/SetMaterialMapCommand.js
+++ b/editor/js/commands/SetMaterialMapCommand.js
@@ -3,6 +3,9 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+ import { Command } from '../Command.js';
														
 
															+ import { ObjectLoader } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +13,6 @@
 
															  * @param newMap THREE.Texture
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetMaterialMapCommand = function ( editor, object, mapName, newMap, materialSlot ) {
														
 
															 	Command.call( this, editor );
														
@@ -61,7 +63,7 @@ SetMaterialMapCommand.prototype = {
 
															 		// serializes a map (THREE.Texture)
														
 
															-		function serializeMap ( map ) {
														
 
															+		function serializeMap( map ) {
														
 
															 			if ( map === null || map === undefined ) return null;
														
@@ -86,7 +88,7 @@ SetMaterialMapCommand.prototype = {
 
															 		// extract data from the cache hash
														
 
															 		// remove metadata on each item
														
 
															 		// and return as array
														
 
															-		function extractFromCache ( cache ) {
														
 
															+		function extractFromCache( cache ) {
														
 
															 			var values = [];
														
 
															 			for ( var key in cache ) {
														
@@ -111,14 +113,14 @@ SetMaterialMapCommand.prototype = {
 
															 		this.oldMap = parseTexture( json.oldMap );
														
 
															 		this.newMap = parseTexture( json.newMap );
														
 
															-		function parseTexture ( json ) {
														
 
															+		function parseTexture( json ) {
														
 
															 			var map = null;
														
 
															 			if ( json !== null ) {
														
 
															-				var loader = new THREE.ObjectLoader();
														
 
															+				var loader = new ObjectLoader();
														
 
															 				var images = loader.parseImages( json.images );
														
 
															-				var textures  = loader.parseTextures( [ json ], images );
														
 
															+				var textures = loader.parseTextures( [ json ], images );
														
 
															 				map = textures[ json.uuid ];
														
 
															 				map.sourceFile = json.sourceFile;
														
@@ -130,3 +132,5 @@ SetMaterialMapCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetMaterialMapCommand };
														
--- a/editor/js/commands/SetMaterialValueCommand.js
+++ b/editor/js/commands/SetMaterialValueCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newValue number, string, boolean or object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetMaterialValueCommand = function ( editor, object, attributeName, newValue, materialSlot ) {
														
 
															 	Command.call( this, editor );
														
@@ -82,3 +83,5 @@ SetMaterialValueCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetMaterialValueCommand };
														
--- a/editor/js/commands/SetMaterialVectorCommand.js
+++ b/editor/js/commands/SetMaterialVectorCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 var SetMaterialVectorCommand = function ( editor, object, attributeName, newValue, materialSlot ) {
														
 
															 	Command.call( this, editor );
														
@@ -70,3 +72,5 @@ SetMaterialVectorCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetMaterialVectorCommand };
														
--- a/editor/js/commands/SetPositionCommand.js
+++ b/editor/js/commands/SetPositionCommand.js
@@ -3,6 +3,9 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { Vector3 } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +13,6 @@
 
															  * @param optionalOldPosition THREE.Vector3
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetPositionCommand = function ( editor, object, newPosition, optionalOldPosition ) {
														
 
															 	Command.call( this, editor );
														
@@ -76,9 +78,11 @@ SetPositionCommand.prototype = {
 
															 		Command.prototype.fromJSON.call( this, json );
														
 
															 		this.object = this.editor.objectByUuid( json.objectUuid );
														
 
															-		this.oldPosition = new THREE.Vector3().fromArray( json.oldPosition );
														
 
															-		this.newPosition = new THREE.Vector3().fromArray( json.newPosition );
														
 
															+		this.oldPosition = new Vector3().fromArray( json.oldPosition );
														
 
															+		this.newPosition = new Vector3().fromArray( json.newPosition );
														
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetPositionCommand };
														
--- a/editor/js/commands/SetRotationCommand.js
+++ b/editor/js/commands/SetRotationCommand.js
@@ -3,6 +3,9 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { Euler } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +13,6 @@
 
															  * @param optionalOldRotation THREE.Euler
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetRotationCommand = function ( editor, object, newRotation, optionalOldRotation ) {
														
 
															 	Command.call( this, editor );
														
@@ -77,9 +79,11 @@ SetRotationCommand.prototype = {
 
															 		Command.prototype.fromJSON.call( this, json );
														
 
															 		this.object = this.editor.objectByUuid( json.objectUuid );
														
 
															-		this.oldRotation = new THREE.Euler().fromArray( json.oldRotation );
														
 
															-		this.newRotation = new THREE.Euler().fromArray( json.newRotation );
														
 
															+		this.oldRotation = new Euler().fromArray( json.oldRotation );
														
 
															+		this.newRotation = new Euler().fromArray( json.newRotation );
														
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetRotationCommand };
														
--- a/editor/js/commands/SetScaleCommand.js
+++ b/editor/js/commands/SetScaleCommand.js
@@ -3,6 +3,9 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { Vector3 } from '../../../build/three.module.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +13,6 @@
 
															  * @param optionalOldScale THREE.Vector3
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetScaleCommand = function ( editor, object, newScale, optionalOldScale ) {
														
 
															 	Command.call( this, editor );
														
@@ -77,9 +79,11 @@ SetScaleCommand.prototype = {
 
															 		Command.prototype.fromJSON.call( this, json );
														
 
															 		this.object = this.editor.objectByUuid( json.objectUuid );
														
 
															-		this.oldScale = new THREE.Vector3().fromArray( json.oldScale );
														
 
															-		this.newScale = new THREE.Vector3().fromArray( json.newScale );
														
 
															+		this.oldScale = new Vector3().fromArray( json.oldScale );
														
 
															+		this.newScale = new Vector3().fromArray( json.newScale );
														
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetScaleCommand };
														
--- a/editor/js/commands/SetSceneCommand.js
+++ b/editor/js/commands/SetSceneCommand.js
@@ -3,12 +3,16 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+import { SetUuidCommand } from './SetUuidCommand.js';
														
 
															+import { SetValueCommand } from './SetValueCommand.js';
														
 
															+import { AddObjectCommand } from './AddObjectCommand.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param scene containing children to import
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetSceneCommand = function ( editor, scene ) {
														
 
															 	Command.call( this, editor );
														
@@ -99,3 +103,5 @@ SetSceneCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetSceneCommand };
														
--- a/editor/js/commands/SetScriptValueCommand.js
+++ b/editor/js/commands/SetScriptValueCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -11,7 +13,6 @@
 
															  * @param newValue string, object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetScriptValueCommand = function ( editor, object, script, attributeName, newValue ) {
														
 
															 	Command.call( this, editor );
														
@@ -80,3 +81,5 @@ SetScriptValueCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetScriptValueCommand };
														
--- a/editor/js/commands/SetUuidCommand.js
+++ b/editor/js/commands/SetUuidCommand.js
@@ -3,13 +3,14 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
 
															  * @param newUuid string
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetUuidCommand = function ( editor, object, newUuid ) {
														
 
															 	Command.call( this, editor );
														
@@ -70,3 +71,5 @@ SetUuidCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetUuidCommand };
														
--- a/editor/js/commands/SetValueCommand.js
+++ b/editor/js/commands/SetValueCommand.js
@@ -3,6 +3,8 @@
 
															  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
														
 
															  */
														
 
															+import { Command } from '../Command.js';
														
 
															+
														
 
															 /**
														
 
															  * @param editor Editor
														
 
															  * @param object THREE.Object3D
														
@@ -10,7 +12,6 @@
 
															  * @param newValue number, string, boolean or object
														
 
															  * @constructor
														
 
															  */
														
 
															-
														
 
															 var SetValueCommand = function ( editor, object, attributeName, newValue ) {
														
 
															 	Command.call( this, editor );
														
@@ -75,3 +76,5 @@ SetValueCommand.prototype = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { SetValueCommand };
														
--- a/editor/js/libs/app.js
+++ b/editor/js/libs/app.js
@@ -4,7 +4,9 @@
 
															 var APP = {
														
 
															-	Player: function () {
														
 
															+	Player: function ( THREE ) {
														
 
															+
														
 
															+		window.THREE = THREE; // FIX for editor scripts (they require THREE in global namespace)
														
 
															 		var loader = new THREE.ObjectLoader();
														
 
															 		var camera, scene, renderer;
														
@@ -275,3 +277,5 @@ var APP = {
 
															 	}
														
 
															 };
														
 
															+
														
 
															+export { APP };
														
--- a/editor/js/libs/app/index.html
+++ b/editor/js/libs/app/index.html
@@ -16,15 +16,16 @@
 
															 		</style>
														
 
															 	</head>
														
 
															 	<body ontouchstart="">
														
 
															-		<script src="js/three.min.js"></script>
														
 
															-		<script src="js/app.js"></script>
														
 
															-		<!-- includes -->
														
 
															-		<script>
														
 
															+
														
 
															+		<script type="module">
														
 
															+
														
 
															+			import * as THREE from './js/three.module.js';
														
 
															+			import { APP } from './js/app.js';
														
 
															 			var loader = new THREE.FileLoader();
														
 
															 			loader.load( 'app.json', function ( text ) {
														
 
															-				var player = new APP.Player();
														
 
															+				var player = new APP.Player( THREE );
														
 
															 				player.load( JSON.parse( text ) );
														
 
															 				player.setSize( window.innerWidth, window.innerHeight );
														
 
															 				player.play();
														
@@ -32,7 +33,9 @@
 
															 				document.body.appendChild( player.dom );
														
 
															 				window.addEventListener( 'resize', function () {
														
 
															+
														
 
															 					player.setSize( window.innerWidth, window.innerHeight );
														
 
															+
														
 
															 				} );
														
 
															 			} );
														
--- a/editor/js/libs/html2canvas.js
+++ b/editor/js/libs/html2canvas.js
@@ -1,189 +0,0 @@
 
															-/**
														
 
															- * @author mrdoob / http://mrdoob.com/
														
 
															- */
														
 
															-
														
 
															-function html2canvas( element ) {
														
 
															-
														
 
															-	var range = document.createRange();
														
 
															-
														
 
															-	function Clipper( context ) {
														
 
															-
														
 
															-		var clips = [];
														
 
															-		var isClipping = false;
														
 
															-
														
 
															-		function doClip() {
														
 
															-
														
 
															-			if ( isClipping ) {
														
 
															-
														
 
															-				isClipping = false;
														
 
															-				context.restore();
														
 
															-
														
 
															-			}
														
 
															-
														
 
															-			if ( clips.length === 0 ) return;
														
 
															-
														
 
															-			var minX = - Infinity, minY = - Infinity;
														
 
															-			var maxX = Infinity, maxY = Infinity;
														
 
															-
														
 
															-			for ( var i = 0; i < clips.length; i ++ ) {
														
 
															-
														
 
															-				var clip = clips[ i ];
														
 
															-
														
 
															-				minX = Math.max( minX, clip.x );
														
 
															-				minY = Math.max( minY, clip.y );
														
 
															-				maxX = Math.min( maxX, clip.x + clip.width );
														
 
															-				maxY = Math.min( maxY, clip.y + clip.height );
														
 
															-
														
 
															-			}
														
 
															-
														
 
															-			context.save();
														
 
															-			context.beginPath();
														
 
															-			context.rect( minX, minY, maxX - minX, maxY - minY );
														
 
															-			context.clip();
														
 
															-
														
 
															-			isClipping = true;
														
 
															-
														
 
															-		}
														
 
															-
														
 
															-		return {
														
 
															-			add: function ( clip ) {
														
 
															-				clips.push( clip );
														
 
															-				doClip();
														
 
															-			},
														
 
															-			remove: function () {
														
 
															-				clips.pop();
														
 
															-				doClip();
														
 
															-			}
														
 
															-		};
														
 
															-
														
 
															-	}
														
 
															-
														
 
															-	function drawText( style, x, y, string ) {
														
 
															-
														
 
															-		if ( string !== '' ) {
														
 
															-
														
 
															-			context.font = style.fontSize + ' ' + style.fontFamily;
														
 
															-			context.textBaseline = 'top';
														
 
															-			context.fillStyle = style.color;
														
 
															-			context.fillText( string, x, y );
														
 
															-
														
 
															-		}
														
 
															-
														
 
															-	}
														
 
															-
														
 
															-	function drawBorder( style, which, x, y, width, height ) {
														
 
															-
														
 
															-		var borderWidth = style[ which + 'Width' ];
														
 
															-		var borderStyle = style[ which + 'Style' ];
														
 
															-		var borderColor = style[ which + 'Color' ];
														
 
															-
														
 
															-		if ( borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' ) {
														
 
															-
														
 
															-			context.strokeStyle = borderColor;
														
 
															-			context.beginPath();
														
 
															-			context.moveTo( x, y );
														
 
															-			context.lineTo( x + width, y + height );
														
 
															-			context.stroke();
														
 
															-
														
 
															-		}
														
 
															-
														
 
															-	}
														
 
															-
														
 
															-	function drawElement( element, style ) {
														
 
															-
														
 
															-		var x = 0, y = 0, width = 0, height = 0;
														
 
															-
														
 
															-		if ( element.nodeType === 3 ) {
														
 
															-
														
 
															-			// text
														
 
															-
														
 
															-			range.selectNode( element );
														
 
															-
														
 
															-			var rect = range.getBoundingClientRect();
														
 
															-
														
 
															-			x = rect.left - offset.left - 0.5;
														
 
															-			y = rect.top - offset.top - 0.5;
														
 
															-			width = rect.width;
														
 
															-			height = rect.height;
														
 
															-
														
 
															-			drawText( style, x, y, element.nodeValue.trim() );
														
 
															-
														
 
															-		} else {
														
 
															-
														
 
															-			if ( element.style.display === 'none' ) return;
														
 
															-
														
 
															-			var rect = element.getBoundingClientRect();
														
 
															-
														
 
															-			x = rect.left - offset.left - 0.5;
														
 
															-			y = rect.top - offset.top - 0.5;
														
 
															-			width = rect.width;
														
 
															-			height = rect.height;
														
 
															-
														
 
															-			style = window.getComputedStyle( element );
														
 
															-
														
 
															-			var backgroundColor = style.backgroundColor;
														
 
															-
														
 
															-			if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
														
 
															-
														
 
															-				context.fillStyle = backgroundColor;
														
 
															-				context.fillRect( x, y, width, height );
														
 
															-
														
 
															-			}
														
 
															-
														
 
															-			drawBorder( style, 'borderTop', x, y, width, 0 );
														
 
															-			drawBorder( style, 'borderLeft', x, y, 0, height );
														
 
															-			drawBorder( style, 'borderBottom', x, y + height, width, 0 );
														
 
															-			drawBorder( style, 'borderRight', x + width, y, 0, height );
														
 
															-
														
 
															-			if ( element.type === 'color' || element.type === 'text' ) {
														
 
															-
														
 
															-				clipper.add( { x: x, y: y, width: width, height: height } );
														
 
															-
														
 
															-				drawText( style, x + parseInt( style.paddingLeft ), y + parseInt( style.paddingTop ), element.value );
														
 
															-
														
 
															-				clipper.remove();
														
 
															-
														
 
															-			}
														
 
															-
														
 
															-		}
														
 
															-
														
 
															-		/*
														
 
															-		// debug
														
 
															-
														
 
															-		context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
														
 
															-		context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
														
 
															-		*/
														
 
															-
														
 
															-		var isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
														
 
															-
														
 
															-		if ( isClipping ) clipper.add( { x: x, y: y, width: width, height: height } );
														
 
															-
														
 
															-		for ( var i = 0; i < element.childNodes.length; i ++ ) {
														
 
															-
														
 
															-			drawElement( element.childNodes[ i ], style );
														
 
															-
														
 
															-		}
														
 
															-
														
 
															-		if ( isClipping ) clipper.remove();
														
 
															-
														
 
															-	}
														
 
															-
														
 
															-	var offset = element.getBoundingClientRect();
														
 
															-
														
 
															-	var canvas = document.createElement( 'canvas' );
														
 
															-	canvas.width = offset.width;
														
 
															-	canvas.height = offset.height;
														
 
															-
														
 
															-	var context = canvas.getContext( '2d'/*, { alpha: false }*/ );
														
 
															-
														
 
															-	var clipper = new Clipper( context );
														
 
															-
														
 
															-	console.time( 'drawElement' );
														
 
															-
														
 
															-	drawElement( element );
														
 
															-
														
 
															-	console.timeEnd( 'drawElement' );
														
 
															-
														
 
															-	return canvas;
														
 
															-
														
 
															-}
														
--- a/editor/js/libs/three.html.js
+++ b/editor/js/libs/three.html.js
@@ -1,75 +0,0 @@
 
															-/**
														
 
															- * @author mrdoob / http://mrdoob.com/
														
 
															- */
														
 
															-
														
 
															-THREE.HTMLGroup = function ( dom ) {
														
 
															-
														
 
															-	THREE.Group.call( this );
														
 
															-
														
 
															-	this.type = 'HTMLGroup';
														
 
															-
														
 
															-	/*
														
 
															-	dom.addEventListener( 'mousemove', function ( event ) {
														
 
															-
														
 
															-		console.log( 'mousemove' );
														
 
															-
														
 
															-	} );
														
 
															-
														
 
															-	dom.addEventListener( 'click', function ( event ) {
														
 
															-
														
 
															-		console.log( 'click' );
														
 
															-
														
 
															-	} );
														
 
															-	*/
														
 
															-
														
 
															-};
														
 
															-
														
 
															-THREE.HTMLGroup.prototype = Object.assign( Object.create( THREE.Group.prototype ), {
														
 
															-
														
 
															-	constructor: THREE.HTMLGroup
														
 
															-
														
 
															-} );
														
 
															-
														
 
															-THREE.HTMLMesh = function ( dom ) {
														
 
															-
														
 
															-	var texture = new THREE.HTMLTexture( dom );
														
 
															-
														
 
															-	var geometry = new THREE.PlaneBufferGeometry( texture.image.width * 0.05, texture.image.height * 0.05 );
														
 
															-	var material = new THREE.MeshBasicMaterial( { map: texture } );
														
 
															-
														
 
															-	THREE.Mesh.call( this, geometry, material );
														
 
															-
														
 
															-	this.type = 'HTMLMesh';
														
 
															-
														
 
															-};
														
 
															-
														
 
															-THREE.HTMLMesh.prototype = Object.assign( Object.create( THREE.Mesh.prototype ), {
														
 
															-
														
 
															-	constructor: THREE.HTMLMesh
														
 
															-
														
 
															-} );
														
 
															-
														
 
															-THREE.HTMLTexture = function ( dom ) {
														
 
															-
														
 
															-	THREE.CanvasTexture.call( this, html2canvas( dom ) );
														
 
															-
														
 
															-	this.dom = dom;
														
 
															-
														
 
															-	this.anisotropy = 16;
														
 
															-
														
 
															-};
														
 
															-
														
 
															-THREE.HTMLTexture.prototype = Object.assign( Object.create( THREE.CanvasTexture.prototype ), {
														
 
															-
														
 
															-	constructor: THREE.HTMLTexture,
														
 
															-
														
 
															-	update: function () {
														
 
															-
														
 
															-		console.log( 'yo!', this, this.dom );
														
 
															-
														
 
															-		this.image = html2canvas( this.dom );
														
 
															-		this.needsUpdate = true;
														
 
															-
														
 
															-	}
														
 
															-
														
 
															-} );
														
--- a/editor/js/libs/ui.js
+++ b/editor/js/libs/ui.js
@@ -2,15 +2,13 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-var UI = {};
														
 
															-
														
 
															-UI.Element = function ( dom ) {
														
 
															+var UIElement = function ( dom ) {
														
 
															 	this.dom = dom;
														
 
															 };
														
 
															-UI.Element.prototype = {
														
 
															+UIElement.prototype = {
														
 
															 	add: function () {
														
@@ -18,13 +16,13 @@ UI.Element.prototype = {
 
															 			var argument = arguments[ i ];
														
 
															-			if ( argument instanceof UI.Element ) {
														
 
															+			if ( argument instanceof UIElement ) {
														
 
															 				this.dom.appendChild( argument.dom );
														
 
															 			} else {
														
 
															-				console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );
														
 
															+				console.error( 'UIElement:', argument, 'is not an instance of UIElement.' );
														
 
															 			}
														
@@ -40,13 +38,13 @@ UI.Element.prototype = {
 
															 			var argument = arguments[ i ];
														
 
															-			if ( argument instanceof UI.Element ) {
														
 
															+			if ( argument instanceof UIElement ) {
														
 
															 				this.dom.removeChild( argument.dom );
														
 
															 			} else {
														
 
															-				console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );
														
 
															+				console.error( 'UIElement:', argument, 'is not an instance of UIElement.' );
														
 
															 			}
														
@@ -74,7 +72,7 @@ UI.Element.prototype = {
 
															 	},
														
 
															-	getId: function ( id ) {
														
 
															+	getId: function () {
														
 
															 		return this.dom.id;
														
@@ -144,7 +142,7 @@ properties.forEach( function ( property ) {
 
															 	var method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
														
 
															-	UI.Element.prototype[ method ] = function () {
														
 
															+	UIElement.prototype[ method ] = function () {
														
 
															 		this.setStyle( property, arguments );
														
@@ -162,7 +160,7 @@ events.forEach( function ( event ) {
 
															 	var method = 'on' + event;
														
 
															-	UI.Element.prototype[ method ] = function ( callback ) {
														
 
															+	UIElement.prototype[ method ] = function ( callback ) {
														
 
															 		this.dom.addEventListener( event.toLowerCase(), callback.bind( this ), false );
														
@@ -172,11 +170,11 @@ events.forEach( function ( event ) {
 
															 } );
														
 
															-// Span
														
 
															+// UISpan
														
 
															-UI.Span = function () {
														
 
															+var UISpan = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	this.dom = document.createElement( 'span' );
														
@@ -184,14 +182,14 @@ UI.Span = function () {
 
															 };
														
 
															-UI.Span.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Span.prototype.constructor = UI.Span;
														
 
															+UISpan.prototype = Object.create( UIElement.prototype );
														
 
															+UISpan.prototype.constructor = UISpan;
														
 
															-// Div
														
 
															+// UIDiv
														
 
															-UI.Div = function () {
														
 
															+var UIDiv = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	this.dom = document.createElement( 'div' );
														
@@ -199,14 +197,14 @@ UI.Div = function () {
 
															 };
														
 
															-UI.Div.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Div.prototype.constructor = UI.Div;
														
 
															+UIDiv.prototype = Object.create( UIElement.prototype );
														
 
															+UIDiv.prototype.constructor = UIDiv;
														
 
															-// Row
														
 
															+// UIRow
														
 
															-UI.Row = function () {
														
 
															+var UIRow = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'div' );
														
 
															 	dom.className = 'Row';
														
@@ -217,14 +215,14 @@ UI.Row = function () {
 
															 };
														
 
															-UI.Row.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Row.prototype.constructor = UI.Row;
														
 
															+UIRow.prototype = Object.create( UIElement.prototype );
														
 
															+UIRow.prototype.constructor = UIRow;
														
 
															-// Panel
														
 
															+// UIPanel
														
 
															-UI.Panel = function () {
														
 
															+var UIPanel = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'div' );
														
 
															 	dom.className = 'Panel';
														
@@ -235,14 +233,14 @@ UI.Panel = function () {
 
															 };
														
 
															-UI.Panel.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Panel.prototype.constructor = UI.Panel;
														
 
															+UIPanel.prototype = Object.create( UIElement.prototype );
														
 
															+UIPanel.prototype.constructor = UIPanel;
														
 
															-// Text
														
 
															+// UIText
														
 
															-UI.Text = function ( text ) {
														
 
															+var UIText = function ( text ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'span' );
														
 
															 	dom.className = 'Text';
														
@@ -257,16 +255,16 @@ UI.Text = function ( text ) {
 
															 };
														
 
															-UI.Text.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Text.prototype.constructor = UI.Text;
														
 
															+UIText.prototype = Object.create( UIElement.prototype );
														
 
															+UIText.prototype.constructor = UIText;
														
 
															-UI.Text.prototype.getValue = function () {
														
 
															+UIText.prototype.getValue = function () {
														
 
															 	return this.dom.textContent;
														
 
															 };
														
 
															-UI.Text.prototype.setValue = function ( value ) {
														
 
															+UIText.prototype.setValue = function ( value ) {
														
 
															 	if ( value !== undefined ) {
														
@@ -279,13 +277,11 @@ UI.Text.prototype.setValue = function ( value ) {
 
															 };
														
 
															-// Input
														
 
															-
														
 
															-UI.Input = function ( text ) {
														
 
															+// UIInput
														
 
															-	UI.Element.call( this );
														
 
															+var UIInput = function ( text ) {
														
 
															-	var scope = this;
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'input' );
														
 
															 	dom.className = 'Input';
														
@@ -305,16 +301,16 @@ UI.Input = function ( text ) {
 
															 };
														
 
															-UI.Input.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Input.prototype.constructor = UI.Input;
														
 
															+UIInput.prototype = Object.create( UIElement.prototype );
														
 
															+UIInput.prototype.constructor = UIInput;
														
 
															-UI.Input.prototype.getValue = function () {
														
 
															+UIInput.prototype.getValue = function () {
														
 
															 	return this.dom.value;
														
 
															 };
														
 
															-UI.Input.prototype.setValue = function ( value ) {
														
 
															+UIInput.prototype.setValue = function ( value ) {
														
 
															 	this.dom.value = value;
														
@@ -323,13 +319,11 @@ UI.Input.prototype.setValue = function ( value ) {
 
															 };
														
 
															-// TextArea
														
 
															+// UITextArea
														
 
															-UI.TextArea = function () {
														
 
															+var UITextArea = function () {
														
 
															-	UI.Element.call( this );
														
 
															-
														
 
															-	var scope = this;
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'textarea' );
														
 
															 	dom.className = 'TextArea';
														
@@ -360,16 +354,16 @@ UI.TextArea = function () {
 
															 };
														
 
															-UI.TextArea.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.TextArea.prototype.constructor = UI.TextArea;
														
 
															+UITextArea.prototype = Object.create( UIElement.prototype );
														
 
															+UITextArea.prototype.constructor = UITextArea;
														
 
															-UI.TextArea.prototype.getValue = function () {
														
 
															+UITextArea.prototype.getValue = function () {
														
 
															 	return this.dom.value;
														
 
															 };
														
 
															-UI.TextArea.prototype.setValue = function ( value ) {
														
 
															+UITextArea.prototype.setValue = function ( value ) {
														
 
															 	this.dom.value = value;
														
@@ -378,13 +372,11 @@ UI.TextArea.prototype.setValue = function ( value ) {
 
															 };
														
 
															-// Select
														
 
															+// UISelect
														
 
															-UI.Select = function () {
														
 
															+var UISelect = function () {
														
 
															-	UI.Element.call( this );
														
 
															-
														
 
															-	var scope = this;
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'select' );
														
 
															 	dom.className = 'Select';
														
@@ -396,10 +388,10 @@ UI.Select = function () {
 
															 };
														
 
															-UI.Select.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Select.prototype.constructor = UI.Select;
														
 
															+UISelect.prototype = Object.create( UIElement.prototype );
														
 
															+UISelect.prototype.constructor = UISelect;
														
 
															-UI.Select.prototype.setMultiple = function ( boolean ) {
														
 
															+UISelect.prototype.setMultiple = function ( boolean ) {
														
 
															 	this.dom.multiple = boolean;
														
@@ -407,7 +399,7 @@ UI.Select.prototype.setMultiple = function ( boolean ) {
 
															 };
														
 
															-UI.Select.prototype.setOptions = function ( options ) {
														
 
															+UISelect.prototype.setOptions = function ( options ) {
														
 
															 	var selected = this.dom.value;
														
@@ -432,13 +424,13 @@ UI.Select.prototype.setOptions = function ( options ) {
 
															 };
														
 
															-UI.Select.prototype.getValue = function () {
														
 
															+UISelect.prototype.getValue = function () {
														
 
															 	return this.dom.value;
														
 
															 };
														
 
															-UI.Select.prototype.setValue = function ( value ) {
														
 
															+UISelect.prototype.setValue = function ( value ) {
														
 
															 	value = String( value );
														
@@ -452,13 +444,11 @@ UI.Select.prototype.setValue = function ( value ) {
 
															 };
														
 
															-// Checkbox
														
 
															-
														
 
															-UI.Checkbox = function ( boolean ) {
														
 
															+// UICheckbox
														
 
															-	UI.Element.call( this );
														
 
															+var UICheckbox = function ( boolean ) {
														
 
															-	var scope = this;
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'input' );
														
 
															 	dom.className = 'Checkbox';
														
@@ -471,16 +461,16 @@ UI.Checkbox = function ( boolean ) {
 
															 };
														
 
															-UI.Checkbox.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Checkbox.prototype.constructor = UI.Checkbox;
														
 
															+UICheckbox.prototype = Object.create( UIElement.prototype );
														
 
															+UICheckbox.prototype.constructor = UICheckbox;
														
 
															-UI.Checkbox.prototype.getValue = function () {
														
 
															+UICheckbox.prototype.getValue = function () {
														
 
															 	return this.dom.checked;
														
 
															 };
														
 
															-UI.Checkbox.prototype.setValue = function ( value ) {
														
 
															+UICheckbox.prototype.setValue = function ( value ) {
														
 
															 	if ( value !== undefined ) {
														
@@ -493,13 +483,11 @@ UI.Checkbox.prototype.setValue = function ( value ) {
 
															 };
														
 
															-// Color
														
 
															+// UIColor
														
 
															-UI.Color = function () {
														
 
															+var UIColor = function () {
														
 
															-	UI.Element.call( this );
														
 
															-
														
 
															-	var scope = this;
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'input' );
														
 
															 	dom.className = 'Color';
														
@@ -522,22 +510,22 @@ UI.Color = function () {
 
															 };
														
 
															-UI.Color.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Color.prototype.constructor = UI.Color;
														
 
															+UIColor.prototype = Object.create( UIElement.prototype );
														
 
															+UIColor.prototype.constructor = UIColor;
														
 
															-UI.Color.prototype.getValue = function () {
														
 
															+UIColor.prototype.getValue = function () {
														
 
															 	return this.dom.value;
														
 
															 };
														
 
															-UI.Color.prototype.getHexValue = function () {
														
 
															+UIColor.prototype.getHexValue = function () {
														
 
															 	return parseInt( this.dom.value.substr( 1 ), 16 );
														
 
															 };
														
 
															-UI.Color.prototype.setValue = function ( value ) {
														
 
															+UIColor.prototype.setValue = function ( value ) {
														
 
															 	this.dom.value = value;
														
@@ -545,7 +533,7 @@ UI.Color.prototype.setValue = function ( value ) {
 
															 };
														
 
															-UI.Color.prototype.setHexValue = function ( hex ) {
														
 
															+UIColor.prototype.setHexValue = function ( hex ) {
														
 
															 	this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( - 6 );
														
@@ -554,11 +542,11 @@ UI.Color.prototype.setHexValue = function ( hex ) {
 
															 };
														
 
															-// Number
														
 
															+// UINumber
														
 
															-UI.Number = function ( number ) {
														
 
															+var UINumber = function ( number ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var scope = this;
														
@@ -633,7 +621,7 @@ UI.Number = function ( number ) {
 
															 	}
														
 
															-	function onMouseUp( event ) {
														
 
															+	function onMouseUp() {
														
 
															 		document.removeEventListener( 'mousemove', onMouseMove, false );
														
 
															 		document.removeEventListener( 'mouseup', onMouseUp, false );
														
@@ -697,20 +685,20 @@ UI.Number = function ( number ) {
 
															 	}
														
 
															-	function onChange( event ) {
														
 
															+	function onChange() {
														
 
															 		scope.setValue( dom.value );
														
 
															 	}
														
 
															-	function onFocus( event ) {
														
 
															+	function onFocus() {
														
 
															 		dom.style.backgroundColor = '';
														
 
															 		dom.style.cursor = '';
														
 
															 	}
														
 
															-	function onBlur( event ) {
														
 
															+	function onBlur() {
														
 
															 		dom.style.backgroundColor = 'transparent';
														
 
															 		dom.style.cursor = 'col-resize';
														
@@ -729,16 +717,16 @@ UI.Number = function ( number ) {
 
															 };
														
 
															-UI.Number.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Number.prototype.constructor = UI.Number;
														
 
															+UINumber.prototype = Object.create( UIElement.prototype );
														
 
															+UINumber.prototype.constructor = UINumber;
														
 
															-UI.Number.prototype.getValue = function () {
														
 
															+UINumber.prototype.getValue = function () {
														
 
															 	return this.value;
														
 
															 };
														
 
															-UI.Number.prototype.setValue = function ( value ) {
														
 
															+UINumber.prototype.setValue = function ( value ) {
														
 
															 	if ( value !== undefined ) {
														
@@ -758,7 +746,7 @@ UI.Number.prototype.setValue = function ( value ) {
 
															 };
														
 
															-UI.Number.prototype.setPrecision = function ( precision ) {
														
 
															+UINumber.prototype.setPrecision = function ( precision ) {
														
 
															 	this.precision = precision;
														
@@ -766,7 +754,7 @@ UI.Number.prototype.setPrecision = function ( precision ) {
 
															 };
														
 
															-UI.Number.prototype.setStep = function ( step ) {
														
 
															+UINumber.prototype.setStep = function ( step ) {
														
 
															 	this.step = step;
														
@@ -774,7 +762,7 @@ UI.Number.prototype.setStep = function ( step ) {
 
															 };
														
 
															-UI.Number.prototype.setRange = function ( min, max ) {
														
 
															+UINumber.prototype.setRange = function ( min, max ) {
														
 
															 	this.min = min;
														
 
															 	this.max = max;
														
@@ -783,7 +771,7 @@ UI.Number.prototype.setRange = function ( min, max ) {
 
															 };
														
 
															-UI.Number.prototype.setUnit = function ( unit ) {
														
 
															+UINumber.prototype.setUnit = function ( unit ) {
														
 
															 	this.unit = unit;
														
@@ -791,11 +779,11 @@ UI.Number.prototype.setUnit = function ( unit ) {
 
															 };
														
 
															-// Integer
														
 
															+// UIInteger
														
 
															-UI.Integer = function ( number ) {
														
 
															+var UIInteger = function ( number ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var scope = this;
														
@@ -866,7 +854,7 @@ UI.Integer = function ( number ) {
 
															 	}
														
 
															-	function onMouseUp( event ) {
														
 
															+	function onMouseUp() {
														
 
															 		document.removeEventListener( 'mousemove', onMouseMove, false );
														
 
															 		document.removeEventListener( 'mouseup', onMouseUp, false );
														
@@ -880,20 +868,20 @@ UI.Integer = function ( number ) {
 
															 	}
														
 
															-	function onChange( event ) {
														
 
															+	function onChange() {
														
 
															 		scope.setValue( dom.value );
														
 
															 	}
														
 
															-	function onFocus( event ) {
														
 
															+	function onFocus() {
														
 
															 		dom.style.backgroundColor = '';
														
 
															 		dom.style.cursor = '';
														
 
															 	}
														
 
															-	function onBlur( event ) {
														
 
															+	function onBlur() {
														
 
															 		dom.style.backgroundColor = 'transparent';
														
 
															 		dom.style.cursor = 'col-resize';
														
@@ -911,16 +899,16 @@ UI.Integer = function ( number ) {
 
															 };
														
 
															-UI.Integer.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Integer.prototype.constructor = UI.Integer;
														
 
															+UIInteger.prototype = Object.create( UIElement.prototype );
														
 
															+UIInteger.prototype.constructor = UIInteger;
														
 
															-UI.Integer.prototype.getValue = function () {
														
 
															+UIInteger.prototype.getValue = function () {
														
 
															 	return this.value;
														
 
															 };
														
 
															-UI.Integer.prototype.setValue = function ( value ) {
														
 
															+UIInteger.prototype.setValue = function ( value ) {
														
 
															 	if ( value !== undefined ) {
														
@@ -935,7 +923,7 @@ UI.Integer.prototype.setValue = function ( value ) {
 
															 };
														
 
															-UI.Integer.prototype.setStep = function ( step ) {
														
 
															+UIInteger.prototype.setStep = function ( step ) {
														
 
															 	this.step = parseInt( step );
														
@@ -943,7 +931,7 @@ UI.Integer.prototype.setStep = function ( step ) {
 
															 };
														
 
															-UI.Integer.prototype.setRange = function ( min, max ) {
														
 
															+UIInteger.prototype.setRange = function ( min, max ) {
														
 
															 	this.min = min;
														
 
															 	this.max = max;
														
@@ -953,11 +941,11 @@ UI.Integer.prototype.setRange = function ( min, max ) {
 
															 };
														
 
															-// Break
														
 
															+// UIBreak
														
 
															-UI.Break = function () {
														
 
															+var UIBreak = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'br' );
														
 
															 	dom.className = 'Break';
														
@@ -968,15 +956,15 @@ UI.Break = function () {
 
															 };
														
 
															-UI.Break.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Break.prototype.constructor = UI.Break;
														
 
															+UIBreak.prototype = Object.create( UIElement.prototype );
														
 
															+UIBreak.prototype.constructor = UIBreak;
														
 
															-// HorizontalRule
														
 
															+// UIHorizontalRule
														
 
															-UI.HorizontalRule = function () {
														
 
															+var UIHorizontalRule = function () {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'hr' );
														
 
															 	dom.className = 'HorizontalRule';
														
@@ -987,15 +975,15 @@ UI.HorizontalRule = function () {
 
															 };
														
 
															-UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.HorizontalRule.prototype.constructor = UI.HorizontalRule;
														
 
															+UIHorizontalRule.prototype = Object.create( UIElement.prototype );
														
 
															+UIHorizontalRule.prototype.constructor = UIHorizontalRule;
														
 
															-// Button
														
 
															+// UIButton
														
 
															-UI.Button = function ( value ) {
														
 
															+var UIButton = function ( value ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'button' );
														
 
															 	dom.className = 'Button';
														
@@ -1007,10 +995,10 @@ UI.Button = function ( value ) {
 
															 };
														
 
															-UI.Button.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Button.prototype.constructor = UI.Button;
														
 
															+UIButton.prototype = Object.create( UIElement.prototype );
														
 
															+UIButton.prototype.constructor = UIButton;
														
 
															-UI.Button.prototype.setLabel = function ( value ) {
														
 
															+UIButton.prototype.setLabel = function ( value ) {
														
 
															 	this.dom.textContent = value;
														
@@ -1019,11 +1007,11 @@ UI.Button.prototype.setLabel = function ( value ) {
 
															 };
														
 
															-// TabbedPanel
														
 
															+// UITabbedPanel
														
 
															-UI.TabbedPanel = function ( ) {
														
 
															+var UITabbedPanel = function ( ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'div' );
														
@@ -1034,10 +1022,10 @@ UI.TabbedPanel = function ( ) {
 
															 	this.tabs = [];
														
 
															 	this.panels = [];
														
 
															-	this.tabsDiv = new UI.Div();
														
 
															+	this.tabsDiv = new UIDiv();
														
 
															 	this.tabsDiv.setClass( 'Tabs' );
														
 
															-	this.panelsDiv = new UI.Div();
														
 
															+	this.panelsDiv = new UIDiv();
														
 
															 	this.panelsDiv.setClass( 'Panels' );
														
 
															 	this.add( this.tabsDiv );
														
@@ -1049,10 +1037,10 @@ UI.TabbedPanel = function ( ) {
 
															 };
														
 
															-UI.TabbedPanel.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.TabbedPanel.prototype.constructor = UI.TabbedPanel;
														
 
															+UITabbedPanel.prototype = Object.create( UIElement.prototype );
														
 
															+UITabbedPanel.prototype.constructor = UITabbedPanel;
														
 
															-UI.TabbedPanel.prototype.select = function ( id ) {
														
 
															+UITabbedPanel.prototype.select = function ( id ) {
														
 
															 	var tab;
														
 
															 	var panel;
														
@@ -1061,8 +1049,16 @@ UI.TabbedPanel.prototype.select = function ( id ) {
 
															 	// Deselect current selection
														
 
															 	if ( this.selected && this.selected.length ) {
														
 
															-		tab = this.tabs.find( function ( item ) { return item.dom.id === scope.selected } );
														
 
															-		panel = this.panels.find( function ( item ) { return item.dom.id === scope.selected } );
														
 
															+		tab = this.tabs.find( function ( item ) {
														
 
															+
														
 
															+			return item.dom.id === scope.selected;
														
 
															+
														
 
															+		} );
														
 
															+		panel = this.panels.find( function ( item ) {
														
 
															+
														
 
															+			return item.dom.id === scope.selected;
														
 
															+
														
 
															+		} );
														
 
															 		if ( tab ) {
														
@@ -1078,8 +1074,16 @@ UI.TabbedPanel.prototype.select = function ( id ) {
 
															 	}
														
 
															-	tab = this.tabs.find( function ( item ) { return item.dom.id === id } );
														
 
															-	panel = this.panels.find( function ( item ) { return item.dom.id === id } );
														
 
															+	tab = this.tabs.find( function ( item ) {
														
 
															+
														
 
															+		return item.dom.id === id;
														
 
															+
														
 
															+	} );
														
 
															+	panel = this.panels.find( function ( item ) {
														
 
															+
														
 
															+		return item.dom.id === id;
														
 
															+
														
 
															+	} );
														
 
															 	if ( tab ) {
														
@@ -1099,14 +1103,14 @@ UI.TabbedPanel.prototype.select = function ( id ) {
 
															 };
														
 
															-UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
														
 
															+UITabbedPanel.prototype.addTab = function ( id, label, items ) {
														
 
															-	var tab = new UI.TabbedPanel.Tab( label, this );
														
 
															+	var tab = new UITabbedPanel.Tab( label, this );
														
 
															 	tab.setId( id );
														
 
															 	this.tabs.push( tab );
														
 
															 	this.tabsDiv.add( tab );
														
 
															-	var panel = new UI.Div();
														
 
															+	var panel = new UIDiv();
														
 
															 	panel.setId( id );
														
 
															 	panel.add( items );
														
 
															 	panel.setDisplay( 'none' );
														
@@ -1117,16 +1121,16 @@ UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
 
															 };
														
 
															-UI.TabbedPanel.Tab = function ( text, parent ) {
														
 
															+UITabbedPanel.Tab = function ( text, parent ) {
														
 
															-	UI.Text.call( this, text );
														
 
															+	UIText.call( this, text );
														
 
															 	this.parent = parent;
														
 
															 	this.setClass( 'Tab' );
														
 
															 	var scope = this;
														
 
															-	this.dom.addEventListener( 'click', function ( event ) {
														
 
															+	this.dom.addEventListener( 'click', function () {
														
 
															 		scope.parent.select( scope.dom.id );
														
@@ -1136,13 +1140,13 @@ UI.TabbedPanel.Tab = function ( text, parent ) {
 
															 };
														
 
															-UI.TabbedPanel.Tab.prototype = Object.create( UI.Text.prototype );
														
 
															-UI.TabbedPanel.Tab.prototype.constructor = UI.TabbedPanel.Tab;
														
 
															+UITabbedPanel.Tab.prototype = Object.create( UIText.prototype );
														
 
															+UITabbedPanel.Tab.prototype.constructor = UITabbedPanel.Tab;
														
 
															-// Listbox
														
 
															-UI.Listbox = function ( ) {
														
 
															+// UIListbox
														
 
															+var UIListbox = function ( ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'div' );
														
 
															 	dom.className = 'Listbox';
														
@@ -1158,10 +1162,10 @@ UI.Listbox = function ( ) {
 
															 };
														
 
															-UI.Listbox.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Listbox.prototype.constructor = UI.Listbox;
														
 
															+UIListbox.prototype = Object.create( UIElement.prototype );
														
 
															+UIListbox.prototype.constructor = UIListbox;
														
 
															-UI.Listbox.prototype.setItems = function ( items ) {
														
 
															+UIListbox.prototype.setItems = function ( items ) {
														
 
															 	if ( Array.isArray( items ) ) {
														
@@ -1173,7 +1177,7 @@ UI.Listbox.prototype.setItems = function ( items ) {
 
															 };
														
 
															-UI.Listbox.prototype.render = function ( ) {
														
 
															+UIListbox.prototype.render = function ( ) {
														
 
															 	while ( this.listitems.length ) {
														
@@ -1189,7 +1193,7 @@ UI.Listbox.prototype.render = function ( ) {
 
															 		var item = this.items[ i ];
														
 
															-		var listitem = new UI.Listbox.ListboxItem( this );
														
 
															+		var listitem = new UIListbox.ListboxItem( this );
														
 
															 		listitem.setId( item.id || `Listbox-${i}` );
														
 
															 		listitem.setTextContent( item.name || item.type );
														
 
															 		this.add( listitem );
														
@@ -1199,17 +1203,17 @@ UI.Listbox.prototype.render = function ( ) {
 
															 };
														
 
															 // Assuming user passes valid list items
														
 
															-UI.Listbox.prototype.add = function () {
														
 
															+UIListbox.prototype.add = function () {
														
 
															 	var items = Array.from( arguments );
														
 
															 	this.listitems = this.listitems.concat( items );
														
 
															-	UI.Element.prototype.add.apply( this, items );
														
 
															+	UIElement.prototype.add.apply( this, items );
														
 
															 };
														
 
															-UI.Listbox.prototype.selectIndex = function ( index ) {
														
 
															+UIListbox.prototype.selectIndex = function ( index ) {
														
 
															 	if ( index >= 0 && index < this.items.length ) {
														
@@ -1221,13 +1225,13 @@ UI.Listbox.prototype.selectIndex = function ( index ) {
 
															 };
														
 
															-UI.Listbox.prototype.getValue = function () {
														
 
															+UIListbox.prototype.getValue = function () {
														
 
															 	return this.selectedValue;
														
 
															 };
														
 
															-UI.Listbox.prototype.setValue = function ( value ) {
														
 
															+UIListbox.prototype.setValue = function ( value ) {
														
 
															 	for ( var i = 0; i < this.listitems.length; i ++ ) {
														
@@ -1254,9 +1258,9 @@ UI.Listbox.prototype.setValue = function ( value ) {
 
															 };
														
 
															 // Listbox Item
														
 
															-UI.Listbox.ListboxItem = function ( parent ) {
														
 
															+UIListbox.ListboxItem = function ( parent ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var dom = document.createElement( 'div' );
														
 
															 	dom.className = 'ListboxItem';
														
@@ -1282,5 +1286,7 @@ UI.Listbox.ListboxItem = function ( parent ) {
 
															 };
														
 
															-UI.Listbox.ListboxItem.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Listbox.ListboxItem.prototype.constructor = UI.Listbox.ListboxItem;
														
 
															+UIListbox.ListboxItem.prototype = Object.create( UIElement.prototype );
														
 
															+UIListbox.ListboxItem.prototype.constructor = UIListbox.ListboxItem;
														
 
															+
														
 
															+export { UIElement, UISpan, UIDiv, UIRow, UIPanel, UIText, UIInput, UITextArea, UISelect, UICheckbox, UIColor, UINumber, UIInteger, UIBreak, UIHorizontalRule, UIButton, UITabbedPanel, UIListbox };
														
--- a/editor/js/libs/ui.three.js
+++ b/editor/js/libs/ui.three.js
@@ -2,9 +2,23 @@
 
															  * @author mrdoob / http://mrdoob.com/
														
 
															  */
														
 
															-UI.Texture = function ( mapping ) {
														
 
															+import {
														
 
															+	CanvasTexture,
														
 
															+	RGBFormat,
														
 
															+	RGBAFormat,
														
 
															+ 	Texture,
														
 
															+	Vector2,
														
 
															+	Vector3
														
 
															+} from '../../../build/three.module.js';
														
 
															-	UI.Element.call( this );
														
 
															+import { TGALoader } from '../../../examples/jsm/loaders/TGALoader.js';
														
 
															+
														
 
															+import { UIElement, UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
														
 
															+import { MoveObjectCommand } from '../commands/MoveObjectCommand.js';
														
 
															+
														
 
															+var UITexture = function ( mapping ) {
														
 
															+
														
 
															+	UIElement.call( this );
														
 
															 	var scope = this;
														
@@ -27,7 +41,7 @@ UI.Texture = function ( mapping ) {
 
															 	canvas.style.cursor = 'pointer';
														
 
															 	canvas.style.marginRight = '5px';
														
 
															 	canvas.style.border = '1px solid #888';
														
 
															-	canvas.addEventListener( 'click', function ( event ) {
														
 
															+	canvas.addEventListener( 'click', function () {
														
 
															 		input.click();
														
@@ -41,6 +55,12 @@ UI.Texture = function ( mapping ) {
 
															 	}, false );
														
 
															 	dom.appendChild( canvas );
														
 
															+	var name = document.createElement( 'input' );
														
 
															+	name.disabled = true;
														
 
															+	name.style.width = '64px';
														
 
															+	name.style.border = '1px solid #ccc';
														
 
															+	dom.appendChild( name );
														
 
															+
														
 
															 	function loadFile( file ) {
														
 
															 		if ( file.type.match( 'image.*' ) ) {
														
@@ -51,9 +71,9 @@ UI.Texture = function ( mapping ) {
 
															 				reader.addEventListener( 'load', function ( event ) {
														
 
															-					var canvas = new THREE.TGALoader().parse( event.target.result );
														
 
															+					var canvas = new TGALoader().parse( event.target.result );
														
 
															-					var texture = new THREE.CanvasTexture( canvas, mapping );
														
 
															+					var texture = new CanvasTexture( canvas, mapping );
														
 
															 					texture.sourceFile = file.name;
														
 
															 					scope.setValue( texture );
														
@@ -69,11 +89,11 @@ UI.Texture = function ( mapping ) {
 
															 				reader.addEventListener( 'load', function ( event ) {
														
 
															 					var image = document.createElement( 'img' );
														
 
															-					image.addEventListener( 'load', function ( event ) {
														
 
															+					image.addEventListener( 'load', function () {
														
 
															-						var texture = new THREE.Texture( this, mapping );
														
 
															+						var texture = new Texture( this, mapping );
														
 
															 						texture.sourceFile = file.name;
														
 
															-						texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
														
 
															+						texture.format = file.type === 'image/jpeg' ? RGBFormat : RGBAFormat;
														
 
															 						texture.needsUpdate = true;
														
 
															 						scope.setValue( texture );
														
@@ -104,18 +124,19 @@ UI.Texture = function ( mapping ) {
 
															 };
														
 
															-UI.Texture.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Texture.prototype.constructor = UI.Texture;
														
 
															+UITexture.prototype = Object.create( UIElement.prototype );
														
 
															+UITexture.prototype.constructor = UITexture;
														
 
															-UI.Texture.prototype.getValue = function () {
														
 
															+UITexture.prototype.getValue = function () {
														
 
															 	return this.texture;
														
 
															 };
														
 
															-UI.Texture.prototype.setValue = function ( texture ) {
														
 
															+UITexture.prototype.setValue = function ( texture ) {
														
 
															 	var canvas = this.dom.children[ 0 ];
														
 
															+	var name = this.dom.children[ 1 ];
														
 
															 	var context = canvas.getContext( '2d' );
														
 
															 	if ( texture !== null ) {
														
@@ -124,21 +145,21 @@ UI.Texture.prototype.setValue = function ( texture ) {
 
															 		if ( image !== undefined && image.width > 0 ) {
														
 
															-			canvas.title = texture.sourceFile;
														
 
															+			name.value = texture.sourceFile;
														
 
															 			var scale = canvas.width / image.width;
														
 
															 			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
														
 
															 		} else {
														
 
															-			canvas.title = texture.sourceFile + ' (error)';
														
 
															+			name.value = texture.sourceFile + ' (error)';
														
 
															 			context.clearRect( 0, 0, canvas.width, canvas.height );
														
 
															 		}
														
 
															 	} else {
														
 
															-		canvas.title = 'empty';
														
 
															+		name.value = '';
														
 
															 		if ( context !== null ) {
														
@@ -154,7 +175,7 @@ UI.Texture.prototype.setValue = function ( texture ) {
 
															 };
														
 
															-UI.Texture.prototype.setEncoding = function ( encoding ) {
														
 
															+UITexture.prototype.setEncoding = function ( encoding ) {
														
 
															 	var texture = this.getValue();
														
 
															 	if ( texture !== null ) {
														
@@ -167,7 +188,7 @@ UI.Texture.prototype.setEncoding = function ( encoding ) {
 
															 };
														
 
															-UI.Texture.prototype.onChange = function ( callback ) {
														
 
															+UITexture.prototype.onChange = function ( callback ) {
														
 
															 	this.onChangeCallback = callback;
														
@@ -175,11 +196,11 @@ UI.Texture.prototype.onChange = function ( callback ) {
 
															 };
														
 
															-// Outliner
														
 
															+// UIOutliner
														
 
															-UI.Outliner = function ( editor ) {
														
 
															+var UIOutliner = function ( editor ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															 	var scope = this;
														
@@ -189,6 +210,7 @@ UI.Outliner = function ( editor ) {
 
															 	// hack
														
 
															 	this.scene = editor.scene;
														
 
															+	this.editor = editor;
														
 
															 	// Prevent native scroll behavior
														
 
															 	dom.addEventListener( 'keydown', function ( event ) {
														
@@ -231,10 +253,10 @@ UI.Outliner = function ( editor ) {
 
															 };
														
 
															-UI.Outliner.prototype = Object.create( UI.Element.prototype );
														
 
															-UI.Outliner.prototype.constructor = UI.Outliner;
														
 
															+UIOutliner.prototype = Object.create( UIElement.prototype );
														
 
															+UIOutliner.prototype.constructor = UIOutliner;
														
 
															-UI.Outliner.prototype.selectIndex = function ( index ) {
														
 
															+UIOutliner.prototype.selectIndex = function ( index ) {
														
 
															 	if ( index >= 0 && index < this.options.length ) {
														
@@ -248,7 +270,7 @@ UI.Outliner.prototype.selectIndex = function ( index ) {
 
															 };
														
 
															-UI.Outliner.prototype.setOptions = function ( options ) {
														
 
															+UIOutliner.prototype.setOptions = function ( options ) {
														
 
															 	var scope = this;
														
@@ -272,7 +294,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
															 	var currentDrag;
														
 
															-	function onDrag( event ) {
														
 
															+	function onDrag() {
														
 
															 		currentDrag = this;
														
@@ -358,7 +380,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
															 		if ( newParentIsChild ) return;
														
 
															-		editor.execute( new MoveObjectCommand( editor, object, newParent, nextObject ) );
														
 
															+		scope.editor.execute( new MoveObjectCommand( scope.editor, object, newParent, nextObject ) );
														
 
															 		var changeEvent = document.createEvent( 'HTMLEvents' );
														
 
															 		changeEvent.initEvent( 'change', true, true );
														
@@ -398,26 +420,26 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
															 };
														
 
															-UI.Outliner.prototype.getValue = function () {
														
 
															+UIOutliner.prototype.getValue = function () {
														
 
															 	return this.selectedValue;
														
 
															 };
														
 
															-UI.Outliner.prototype.setValue = function ( value ) {
														
 
															+UIOutliner.prototype.setValue = function ( value ) {
														
 
															 	for ( var i = 0; i < this.options.length; i ++ ) {
														
 
															-		var element = this.options[ i ];
														
 
															+		var UIElement = this.options[ i ];
														
 
															-		if ( element.value === value ) {
														
 
															+		if ( UIElement.value === value ) {
														
 
															-			element.classList.add( 'active' );
														
 
															+			UIElement.classList.add( 'active' );
														
 
															 			// scroll into view
														
 
															-			var y = element.offsetTop - this.dom.offsetTop;
														
 
															-			var bottomY = y + element.offsetHeight;
														
 
															+			var y = UIElement.offsetTop - this.dom.offsetTop;
														
 
															+			var bottomY = y + UIElement.offsetHeight;
														
 
															 			var minScroll = bottomY - this.dom.offsetHeight;
														
 
															 			if ( this.dom.scrollTop > y ) {
														
@@ -434,7 +456,7 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
															 		} else {
														
 
															-			element.classList.remove( 'active' );
														
 
															+			UIElement.classList.remove( 'active' );
														
 
															 		}
														
@@ -446,19 +468,19 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
															 };
														
 
															-var Points = function ( onAddClicked ) {
														
 
															+var UIPoints = function ( onAddClicked ) {
														
 
															-	UI.Element.call( this );
														
 
															+	UIElement.call( this );
														
 
															-	var span = new UI.Span().setDisplay( 'inline-block' );
														
 
															+	var span = new UISpan().setDisplay( 'inline-block' );
														
 
															-	this.pointsList = new UI.Div();
														
 
															+	this.pointsList = new UIDiv();
														
 
															 	span.add( this.pointsList );
														
 
															-	var row = new UI.Row();
														
 
															+	var row = new UIRow();
														
 
															 	span.add( row );
														
 
															-	var addPointButton = new UI.Button( '+' ).onClick( onAddClicked );
														
 
															+	var addPointButton = new UIButton( '+' ).onClick( onAddClicked );
														
 
															 	row.add( addPointButton );
														
 
															 	this.update = function () {
														
@@ -479,10 +501,10 @@ var Points = function ( onAddClicked ) {
 
															 };
														
 
															-Points.prototype = Object.create( UI.Element.prototype );
														
 
															-Points.prototype.constructor = Points;
														
 
															+UIPoints.prototype = Object.create( UIElement.prototype );
														
 
															+UIPoints.prototype.constructor = UIPoints;
														
 
															-Points.prototype.onChange = function ( callback ) {
														
 
															+UIPoints.prototype.onChange = function ( callback ) {
														
 
															 	this.onChangeCallback = callback;
														
@@ -490,9 +512,9 @@ Points.prototype.onChange = function ( callback ) {
 
															 };
														
 
															-Points.prototype.clear = function () {
														
 
															+UIPoints.prototype.clear = function () {
														
 
															-	for ( var i = 0; i < this.pointsUI.length; ++ i ) {
														
 
															+	for ( var i = 0; i < this.pointslength; ++ i ) {
														
 
															 		if ( this.pointsUI[ i ] ) {
														
@@ -506,7 +528,7 @@ Points.prototype.clear = function () {
 
															 };
														
 
															-Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
														
 
															+UIPoints.prototype.deletePointRow = function ( idx, dontUpdate ) {
														
 
															 	if ( ! this.pointsUI[ idx ] ) return;
														
@@ -521,26 +543,26 @@ Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
 
															 };
														
 
															-UI.Points2 = function () {
														
 
															+var UIPoints2 = function () {
														
 
															-	Points.call( this, UI.Points2.addRow.bind( this ) );
														
 
															+	UIPoints.call( this, UIPoints2.addRow.bind( this ) );
														
 
															 	return this;
														
 
															 };
														
 
															-UI.Points2.prototype = Object.create( Points.prototype );
														
 
															-UI.Points2.prototype.constructor = UI.Points2;
														
 
															+UIPoints2.prototype = Object.create( UIPoints.prototype );
														
 
															+UIPoints2.prototype.constructor = UIPoints2;
														
 
															-UI.Points2.addRow = function () {
														
 
															+UIPoints2.addRow = function () {
														
 
															-	if ( this.pointsUI.length === 0 ) {
														
 
															+	if ( this.pointslength === 0 ) {
														
 
															 		this.pointsList.add( this.createPointRow( 0, 0 ) );
														
 
															 	} else {
														
 
															-		var point = this.pointsUI[ this.pointsUI.length - 1 ];
														
 
															+		var point = this.pointsUI[ this.pointslength - 1 ];
														
 
															 		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue() ) );
														
@@ -550,20 +572,17 @@ UI.Points2.addRow = function () {
 
															 };
														
 
															-UI.Points2.prototype.getValue = function () {
														
 
															+UIPoints2.prototype.getValue = function () {
														
 
															 	var points = [];
														
 
															-	var count = 0;
														
 
															-	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
														
 
															+	for ( var i = 0; i < this.pointslength; i ++ ) {
														
 
															 		var pointUI = this.pointsUI[ i ];
														
 
															 		if ( ! pointUI ) continue;
														
 
															-		points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
														
 
															-		++ count;
														
 
															-		pointUI.lbl.setValue( count );
														
 
															+		points.push( new Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
														
 
															 	}
														
@@ -571,7 +590,7 @@ UI.Points2.prototype.getValue = function () {
 
															 };
														
 
															-UI.Points2.prototype.setValue = function ( points ) {
														
 
															+UIPoints2.prototype.setValue = function ( points ) {
														
 
															 	this.clear();
														
@@ -587,23 +606,23 @@ UI.Points2.prototype.setValue = function ( points ) {
 
															 };
														
 
															-UI.Points2.prototype.createPointRow = function ( x, y ) {
														
 
															+UIPoints2.prototype.createPointRow = function ( x, y ) {
														
 
															-	var pointRow = new UI.Div();
														
 
															-	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
														
 
															-	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
														
 
															-	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
														
 
															+	var pointRow = new UIDiv();
														
 
															+	var lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
														
 
															+	var txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
														
 
															+	var txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
														
 
															 	var idx = this.lastPointIdx;
														
 
															 	var scope = this;
														
 
															-	var btn = new UI.Button( '-' ).onClick( function () {
														
 
															+	var btn = new UIButton( '-' ).onClick( function () {
														
 
															 		if ( scope.isEditing ) return;
														
 
															 		scope.deletePointRow( idx );
														
 
															 	} );
														
 
															-	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
														
 
															+	this.pointspush( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
														
 
															 	++ this.lastPointIdx;
														
 
															 	pointRow.add( lbl, txtX, txtY, btn );
														
@@ -611,26 +630,26 @@ UI.Points2.prototype.createPointRow = function ( x, y ) {
 
															 };
														
 
															-UI.Points3 = function () {
														
 
															+var UIPoints3 = function () {
														
 
															-	Points.call( this, UI.Points3.addRow.bind( this ) );
														
 
															+	UIPoints.call( this, UIPoints3.addRow.bind( this ) );
														
 
															 	return this;
														
 
															 };
														
 
															-UI.Points3.prototype = Object.create( Points.prototype );
														
 
															-UI.Points3.prototype.constructor = UI.Points3;
														
 
															+UIPoints3.prototype = Object.create( UIPoints.prototype );
														
 
															+UIPoints3.prototype.constructor = UIPoints3;
														
 
															-UI.Points3.addRow = function () {
														
 
															+UIPoints3.addRow = function () {
														
 
															-	if ( this.pointsUI.length === 0 ) {
														
 
															+	if ( this.pointslength === 0 ) {
														
 
															 		this.pointsList.add( this.createPointRow( 0, 0, 0 ) );
														
 
															 	} else {
														
 
															-		var point = this.pointsUI[ this.pointsUI.length - 1 ];
														
 
															+		var point = this.pointsUI[ this.pointslength - 1 ];
														
 
															 		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
														
@@ -640,20 +659,17 @@ UI.Points3.addRow = function () {
 
															 };
														
 
															-UI.Points3.prototype.getValue = function () {
														
 
															+UIPoints3.prototype.getValue = function () {
														
 
															 	var points = [];
														
 
															-	var count = 0;
														
 
															-	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
														
 
															+	for ( var i = 0; i < this.pointslength; i ++ ) {
														
 
															 		var pointUI = this.pointsUI[ i ];
														
 
															 		if ( ! pointUI ) continue;
														
 
															-		points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
														
 
															-		++ count;
														
 
															-		pointUI.lbl.setValue( count );
														
 
															+		points.push( new Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
														
 
															 	}
														
@@ -661,7 +677,7 @@ UI.Points3.prototype.getValue = function () {
 
															 };
														
 
															-UI.Points3.prototype.setValue = function ( points ) {
														
 
															+UIPoints3.prototype.setValue = function ( points ) {
														
 
															 	this.clear();
														
@@ -677,24 +693,24 @@ UI.Points3.prototype.setValue = function ( points ) {
 
															 };
														
 
															-UI.Points3.prototype.createPointRow = function ( x, y, z ) {
														
 
															+UIPoints3.prototype.createPointRow = function ( x, y, z ) {
														
 
															-	var pointRow = new UI.Div();
														
 
															-	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
														
 
															-	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
														
 
															-	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
														
 
															-	var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( this.update );
														
 
															+	var pointRow = new UIDiv();
														
 
															+	var lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
														
 
															+	var txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
														
 
															+	var txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
														
 
															+	var txtZ = new UINumber( z ).setWidth( '30px' ).onChange( this.update );
														
 
															 	var idx = this.lastPointIdx;
														
 
															 	var scope = this;
														
 
															-	var btn = new UI.Button( '-' ).onClick( function () {
														
 
															+	var btn = new UIButton( '-' ).onClick( function () {
														
 
															 		if ( scope.isEditing ) return;
														
 
															 		scope.deletePointRow( idx );
														
 
															 	} );
														
 
															-	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
														
 
															+	this.pointspush( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
														
 
															 	++ this.lastPointIdx;
														
 
															 	pointRow.add( lbl, txtX, txtY, txtZ, btn );
														
@@ -702,33 +718,33 @@ UI.Points3.prototype.createPointRow = function ( x, y, z ) {
 
															 };
														
 
															-UI.THREE = {};
														
 
															-
														
 
															-UI.THREE.Boolean = function ( boolean, text ) {
														
 
															+var UIBoolean = function ( boolean, text ) {
														
 
															-	UI.Span.call( this );
														
 
															+	UISpan.call( this );
														
 
															 	this.setMarginRight( '10px' );
														
 
															-	this.checkbox = new UI.Checkbox( boolean );
														
 
															-	this.text = new UI.Text( text ).setMarginLeft( '3px' );
														
 
															+	this.checkbox = new UICheckbox( boolean );
														
 
															+	this.text = new UIText( text ).setMarginLeft( '3px' );
														
 
															 	this.add( this.checkbox );
														
 
															 	this.add( this.text );
														
 
															 };
														
 
															-UI.THREE.Boolean.prototype = Object.create( UI.Span.prototype );
														
 
															-UI.THREE.Boolean.prototype.constructor = UI.THREE.Boolean;
														
 
															+UIBoolean.prototype = Object.create( UISpan.prototype );
														
 
															+UIBoolean.prototype.constructor = UIBoolean;
														
 
															-UI.THREE.Boolean.prototype.getValue = function () {
														
 
															+UIBoolean.prototype.getValue = function () {
														
 
															 	return this.checkbox.getValue();
														
 
															 };
														
 
															-UI.THREE.Boolean.prototype.setValue = function ( value ) {
														
 
															+UIBoolean.prototype.setValue = function ( value ) {
														
 
															 	return this.checkbox.setValue( value );
														
 
															 };
														
 
															+
														
 
															+export { UITexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };
														
--- a/editor/sw.js
+++ b/editor/sw.js
@@ -5,43 +5,49 @@ const assets = [
 
															 	'../files/favicon.ico',
														
 
															-	'../build/three.js',
														
 
															+	'../build/three.module.js',
														
 
															-	'../examples/js/controls/TransformControls.js',
														
 
															+	'../examples/jsm/controls/TransformControls.js',
														
 
															+
														
 
															+	'../examples/jsm/libs/chevrotain.module.min.js',
														
 
															+	'../examples/jsm/libs/inflate.module.min.js',
														
 
															-	'../examples/js/libs/chevrotain.min.js',
														
 
															 	'../examples/js/libs/jszip.min.js',
														
 
															-	'../examples/js/libs/inflate.min.js',
														
 
															 	'../examples/js/libs/draco/draco_decoder.js',
														
 
															 	'../examples/js/libs/draco/draco_decoder.wasm',
														
 
															 	'../examples/js/libs/draco/draco_wasm_wrapper.js',
														
 
															-	'../examples/js/loaders/AMFLoader.js',
														
 
															-	'../examples/js/loaders/ColladaLoader.js',
														
 
															-	'../examples/js/loaders/DRACOLoader.js',
														
 
															-	'../examples/js/loaders/FBXLoader.js',
														
 
															-	'../examples/js/loaders/GLTFLoader.js',
														
 
															-	'../examples/js/loaders/KMZLoader.js',
														
 
															-	'../examples/js/loaders/MD2Loader.js',
														
 
															-	'../examples/js/loaders/OBJLoader.js',
														
 
															-	'../examples/js/loaders/MTLLoader.js',
														
 
															-	'../examples/js/loaders/PLYLoader.js',
														
 
															-	'../examples/js/loaders/STLLoader.js',
														
 
															-	'../examples/js/loaders/SVGLoader.js',
														
 
															-	'../examples/js/loaders/TGALoader.js',
														
 
															-	'../examples/js/loaders/TDSLoader.js',
														
 
															-	'../examples/js/loaders/VRMLLoader.js',
														
 
															-	'../examples/js/loaders/VTKLoader.js',
														
 
															-
														
 
															-	'../examples/js/exporters/ColladaExporter.js',
														
 
															-	'../examples/js/exporters/GLTFExporter.js',
														
 
															-	'../examples/js/exporters/OBJExporter.js',
														
 
															-	'../examples/js/exporters/PLYExporter.js',
														
 
															-	'../examples/js/exporters/STLExporter.js',
														
 
															-
														
 
															-	'../examples/js/renderers/Projector.js',
														
 
															-	'../examples/js/renderers/RaytracingRenderer.js',
														
 
															-	'../examples/js/renderers/SVGRenderer.js',
														
 
															+	'../examples/jsm/loaders/AMFLoader.js',
														
 
															+	'../examples/jsm/loaders/ColladaLoader.js',
														
 
															+	'../examples/jsm/loaders/DRACOLoader.js',
														
 
															+	'../examples/jsm/loaders/FBXLoader.js',
														
 
															+	'../examples/jsm/loaders/GLTFLoader.js',
														
 
															+	'../examples/jsm/loaders/KMZLoader.js',
														
 
															+	'../examples/jsm/loaders/MD2Loader.js',
														
 
															+	'../examples/jsm/loaders/OBJLoader.js',
														
 
															+	'../examples/jsm/loaders/MTLLoader.js',
														
 
															+	'../examples/jsm/loaders/PLYLoader.js',
														
 
															+	'../examples/jsm/loaders/STLLoader.js',
														
 
															+	'../examples/jsm/loaders/SVGLoader.js',
														
 
															+	'../examples/jsm/loaders/TGALoader.js',
														
 
															+	'../examples/jsm/loaders/TDSLoader.js',
														
 
															+	'../examples/jsm/loaders/VRMLLoader.js',
														
 
															+	'../examples/jsm/loaders/VTKLoader.js',
														
 
															+
														
 
															+	'../examples/jsm/curves/NURBSCurve.js',
														
 
															+	'../examples/jsm/curves/NURBSUtils.js',
														
 
															+
														
 
															+	'../examples/jsm/exporters/ColladaExporter.js',
														
 
															+	'../examples/jsm/exporters/GLTFExporter.js',
														
 
															+	'../examples/jsm/exporters/OBJExporter.js',
														
 
															+	'../examples/jsm/exporters/PLYExporter.js',
														
 
															+	'../examples/jsm/exporters/STLExporter.js',
														
 
															+
														
 
															+	'../examples/jsm/renderers/Projector.js',
														
 
															+	'../examples/jsm/renderers/RaytracingRenderer.js',
														
 
															+	'../examples/jsm/renderers/SVGRenderer.js',
														
 
															+
														
 
															+	'../examples/jsm/geometries/TeapotBufferGeometry.js',
														
 
															 	'./manifest.json',
														
 
															 	'./images/icon.png',
														
@@ -81,9 +87,6 @@ const assets = [
 
															 	'./js/libs/ui.js',
														
 
															 	'./js/libs/ui.three.js',
														
 
															-	'./js/libs/html2canvas.js',
														
 
															-	'./js/libs/three.html.js',
														
 
															-
														
 
															 	'./js/libs/app.js',
														
 
															 	'./js/Player.js',
														
 
															 	'./js/Script.js',
														
@@ -104,7 +107,6 @@ const assets = [
 
															 	'./js/Menubar.Edit.js',
														
 
															 	'./js/Menubar.Add.js',
														
 
															 	'./js/Menubar.Play.js',
														
 
															-	// './js/Menubar.View.js',
														
 
															 	'./js/Menubar.Examples.js',
														
 
															 	'./js/Menubar.Help.js',
														
 
															 	'./js/Menubar.Status.js',
														
@@ -135,7 +137,6 @@ const assets = [
 
															 	'./js/Sidebar.Geometry.TorusGeometry.js',
														
 
															 	'./js/Sidebar.Geometry.TorusKnotGeometry.js',
														
 
															 	'./js/Sidebar.Geometry.TubeGeometry.js',
														
 
															-	'../examples/js/geometries/TeapotBufferGeometry.js',
														
 
															 	'./js/Sidebar.Geometry.TeapotBufferGeometry.js',
														
 
															 	'./js/Sidebar.Geometry.LatheGeometry.js',
														
 
															 	'./js/Sidebar.Material.js',