Merge branch 'dev' into examples-instancing-performance

.github/ISSUE_TEMPLATE.md

@@ -17,7 +17,7 @@ Please also include a live example if possible. You can start from these templat
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r111
+- [ ] r112
 - [ ] ...
 
 ##### Browser

build/three.js

@@ -97,7 +97,7 @@
 
 	}
 
-	var REVISION = '112dev';
+	var REVISION = '112';
 	var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
 	var TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
 	var CullFaceNone = 0;
@@ -6046,7 +6046,9 @@
 		this.type = 'Scene';
 
 		this.background = null;
+		this.environment = null;
 		this.fog = null;
+
 		this.overrideMaterial = null;
 
 		this.autoUpdate = true; // checked by the renderer
@@ -6070,7 +6072,9 @@
 			Object3D.prototype.copy.call( this, source, recursive );
 
 			if ( source.background !== null ) { this.background = source.background.clone(); }
+			if ( source.environment !== null ) { this.environment = source.environment.clone(); }
 			if ( source.fog !== null ) { this.fog = source.fog.clone(); }
+
 			if ( source.overrideMaterial !== null ) { this.overrideMaterial = source.overrideMaterial.clone(); }
 
 			this.autoUpdate = source.autoUpdate;
@@ -6085,6 +6089,7 @@
 			var data = Object3D.prototype.toJSON.call( this, meta );
 
 			if ( this.background !== null ) { data.object.background = this.background.toJSON( meta ); }
+			if ( this.environment !== null ) { data.object.environment = this.environment.toJSON( meta ); }
 			if ( this.fog !== null ) { data.object.fog = this.fog.toJSON(); }
 
 			return data;
@@ -17581,7 +17586,7 @@
 		extensions = extensions || {};
 
 		var chunks = [
-			( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.tangentSpaceNormalMap || parameters.clearcoatNormalMap || parameters.flatShading || parameters.shaderID === 'physical' ) ? '#extension GL_OES_standard_derivatives : enable' : '',
+			( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.tangentSpaceNormalMap || parameters.clearcoatNormalMap || parameters.flatShading || parameters.shaderID === 'physical' ) ? '#extension GL_OES_standard_derivatives : enable' : '',
 			( extensions.fragDepth || parameters.logarithmicDepthBuffer ) && rendererExtensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
 			( extensions.drawBuffers ) && rendererExtensions.get( 'WEBGL_draw_buffers' ) ? '#extension GL_EXT_draw_buffers : require' : '',
 			( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : ''
@@ -18470,7 +18475,12 @@
 
 		}
 
-		this.getParameters = function ( material, lights, shadows, fog, nClipPlanes, nClipIntersection, object ) {
+		this.getParameters = function ( material, lights, shadows, scene, nClipPlanes, nClipIntersection, object ) {
+
+			var fog = scene.fog;
+			var environment = material.isMeshStandardMaterial ? scene.environment : null;
+
+			var envMap = material.envMap || environment;
 
 			var shaderID = shaderIDs[ material.type ];
 
@@ -18511,10 +18521,10 @@
 				mapEncoding: getTextureEncodingFromMap( material.map ),
 				matcap: !! material.matcap,
 				matcapEncoding: getTextureEncodingFromMap( material.matcap ),
-				envMap: !! material.envMap,
-				envMapMode: material.envMap && material.envMap.mapping,
-				envMapEncoding: getTextureEncodingFromMap( material.envMap ),
-				envMapCubeUV: ( !! material.envMap ) && ( ( material.envMap.mapping === CubeUVReflectionMapping ) || ( material.envMap.mapping === CubeUVRefractionMapping ) ),
+				envMap: !! envMap,
+				envMapMode: envMap && envMap.mapping,
+				envMapEncoding: getTextureEncodingFromMap( envMap ),
+				envMapCubeUV: ( !! envMap ) && ( ( envMap.mapping === CubeUVReflectionMapping ) || ( envMap.mapping === CubeUVRefractionMapping ) ),
 				lightMap: !! material.lightMap,
 				lightMapEncoding: getTextureEncodingFromMap( material.lightMap ),
 				aoMap: !! material.aoMap,
@@ -22853,13 +22863,7 @@
 		var pose = null;
 
 		var controllers = [];
-		var sortedInputSources = [];
-
-		function isPresenting() {
-
-			return session !== null && referenceSpace !== null;
-
-		}
+		var inputSourcesMap = new Map();
 
 		//
 
@@ -22879,6 +22883,8 @@
 
 		this.enabled = false;
 
+		this.isPresenting = false;
+
 		this.getController = function ( id ) {
 
 			var controller = controllers[ id ];
@@ -22901,13 +22907,11 @@
 
 		function onSessionEvent( event ) {
 
-			for ( var i = 0; i < controllers.length; i ++ ) {
-
-				if ( sortedInputSources[ i ] === event.inputSource ) {
+			var controller = inputSourcesMap.get( event.inputSource );
 
-					controllers[ i ].dispatchEvent( { type: event.type } );
+			if ( controller ) {
 
-				}
+				controller.dispatchEvent( { type: event.type } );
 
 			}
 
@@ -22915,12 +22919,25 @@
 
 		function onSessionEnd() {
 
+			inputSourcesMap.forEach( function ( controller, inputSource ) {
+
+				controller.dispatchEvent( { type: 'disconnected', data: inputSource } );
+				controller.visible = false;
+
+			} );
+
+			inputSourcesMap.clear();
+
+			//
+
 			renderer.setFramebuffer( null );
 			renderer.setRenderTarget( renderer.getRenderTarget() ); // Hack #15830
 			animation.stop();
 
 			scope.dispatchEvent( { type: 'sessionend' } );
 
+			scope.isPresenting = false;
+
 		}
 
 		function onRequestReferenceSpace( value ) {
@@ -22932,6 +22949,8 @@
 
 			scope.dispatchEvent( { type: 'sessionstart' } );
 
+			scope.isPresenting = true;
+
 		}
 
 		this.setFramebufferScaleFactor = function ( /* value */ ) {
@@ -22946,6 +22965,12 @@
 
 		};
 
+		this.getReferenceSpace = function () {
+
+			return referenceSpace;
+
+		};
+
 		this.getSession = function () {
 
 			return session;
@@ -22986,33 +23011,50 @@
 
 				session.addEventListener( 'inputsourceschange', updateInputSources );
 
-				updateInputSources();
-
 			}
 
 		};
 
-		function updateInputSources() {
+		function updateInputSources( event ) {
+
+			var inputSources = session.inputSources;
+
+			// Assign inputSources to available controllers
 
 			for ( var i = 0; i < controllers.length; i ++ ) {
 
-				sortedInputSources[ i ] = findInputSource( i );
+				inputSourcesMap.set( inputSources[ i ], controllers[ i ] );
 
 			}
 
-		}
+			// Notify disconnected
 
-		function findInputSource( id ) {
+			for ( var i = 0; i < event.removed.length; i ++ ) {
 
-			var inputSources = session.inputSources;
+				var inputSource = event.removed[ i ];
+				var controller = inputSourcesMap.get( inputSource );
 
-			for ( var i = 0; i < inputSources.length; i ++ ) {
+				if ( controller ) {
 
-				var inputSource = inputSources[ i ];
-				var handedness = inputSource.handedness;
+					controller.dispatchEvent( { type: 'disconnected', data: inputSource } );
+					inputSourcesMap.delete( inputSource );
 
-				if ( id === 0 && ( handedness === 'none' || handedness === 'right' ) ) { return inputSource; }
-				if ( id === 1 && ( handedness === 'left' ) ) { return inputSource; }
+				}
+
+			}
+
+			// Notify connected
+
+			for ( var i = 0; i < event.added.length; i ++ ) {
+
+				var inputSource = event.added[ i ];
+				var controller = inputSourcesMap.get( inputSource );
+
+				if ( controller ) {
+
+					controller.dispatchEvent( { type: 'connected', data: inputSource } );
+
+				}
 
 			}
 
@@ -23127,8 +23169,6 @@
 
 		};
 
-		this.isPresenting = isPresenting;
-
 		// Animation Loop
 
 		var onAnimationFrameCallback = null;
@@ -23167,11 +23207,13 @@
 
 			//
 
+			var inputSources = session.inputSources;
+
 			for ( var i = 0; i < controllers.length; i ++ ) {
 
 				var controller = controllers[ i ];
 
-				var inputSource = sortedInputSources[ i ];
+				var inputSource = inputSources[ i ];
 
 				if ( inputSource ) {
 
@@ -23181,12 +23223,7 @@
 
 						controller.matrix.fromArray( inputPose.transform.matrix );
 						controller.matrix.decompose( controller.position, controller.rotation, controller.scale );
-
-						if ( inputSource.targetRayMode === 'pointing' ) {
-
-							controller.visible = true;
-
-						}
+						controller.visible = true;
 
 						continue;
 
@@ -23557,7 +23594,7 @@
 
 		this.setSize = function ( width, height, updateStyle ) {
 
-			if ( xr.isPresenting() ) {
+			if ( xr.isPresenting ) {
 
 				console.warn( 'THREE.WebGLRenderer: Can\'t change size while VR device is presenting.' );
 				return;
@@ -23895,11 +23932,15 @@
 
 		};
 
-		this.renderBufferDirect = function ( camera, fog, geometry, material, object, group ) {
+		var tempScene = new Scene();
+
+		this.renderBufferDirect = function ( camera, scene, geometry, material, object, group ) {
+
+			if ( scene === null ) { scene = tempScene; } // renderBufferDirect second parameter used to be fog (could be null)
 
 			var frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
 
-			var program = setProgram( camera, fog, material, object );
+			var program = setProgram( camera, scene, material, object );
 
 			state.setMaterial( material, frontFaceCW );
 
@@ -23931,8 +23972,15 @@
 
 			//
 
-			if ( index !== null && index.count === 0 ) { return; }
-			if ( position === undefined || position.count === 0 ) { return; }
+			if ( index === null ) {
+
+				if ( position === undefined || position.count === 0 ) { return; }
+
+			} else if ( index.count === 0 ) {
+
+				return;
+
+			}
 
 			//
 
@@ -24229,13 +24277,13 @@
 
 						for ( var i = 0; i < object.material.length; i ++ ) {
 
-							initMaterial( object.material[ i ], scene.fog, object );
+							initMaterial( object.material[ i ], scene, object );
 
 						}
 
 					} else {
 
-						initMaterial( object.material, scene.fog, object );
+						initMaterial( object.material, scene, object );
 
 					}
 
@@ -24251,7 +24299,7 @@
 
 		function onAnimationFrame( time ) {
 
-			if ( xr.isPresenting() ) { return; }
+			if ( xr.isPresenting ) { return; }
 			if ( onAnimationFrameCallback ) { onAnimationFrameCallback( time ); }
 
 		}
@@ -24315,7 +24363,7 @@
 
 			if ( camera.parent === null ) { camera.updateMatrixWorld(); }
 
-			if ( xr.enabled && xr.isPresenting() ) {
+			if ( xr.enabled && xr.isPresenting ) {
 
 				camera = xr.getCamera( camera );
 
@@ -24632,7 +24680,7 @@
 
 			if ( object.isImmediateRenderObject ) {
 
-				var program = setProgram( camera, scene.fog, material, object );
+				var program = setProgram( camera, scene, material, object );
 
 				state.setMaterial( material );
 
@@ -24644,7 +24692,7 @@
 
 			} else {
 
-				_this.renderBufferDirect( camera, scene.fog, geometry, material, object, group );
+				_this.renderBufferDirect( camera, scene, geometry, material, object, group );
 
 			}
 
@@ -24653,7 +24701,7 @@
 
 		}
 
-		function initMaterial( material, fog, object ) {
+		function initMaterial( material, scene, object ) {
 
 			var materialProperties = properties.get( material );
 
@@ -24663,7 +24711,7 @@
 			var lightsStateVersion = lights.state.version;
 
 			var parameters = programCache.getParameters(
-				material, lights.state, shadowsArray, fog, _clipping.numPlanes, _clipping.numIntersection, object );
+				material, lights.state, shadowsArray, scene, _clipping.numPlanes, _clipping.numIntersection, object );
 
 			var programCacheKey = programCache.getProgramCacheKey( material, parameters );
 
@@ -24730,6 +24778,7 @@
 				program = programCache.acquireProgram( material, materialProperties.shader, parameters, programCacheKey );
 
 				materialProperties.program = program;
+				materialProperties.environment = material.isMeshStandardMaterial ? scene.environment : null;
 				materialProperties.outputEncoding = _this.outputEncoding;
 				material.program = program;
 
@@ -24781,7 +24830,7 @@
 
 			}
 
-			materialProperties.fog = fog;
+			materialProperties.fog = scene.fog;
 
 			// store the light setup it was created for
 
@@ -24818,10 +24867,13 @@
 
 		}
 
-		function setProgram( camera, fog, material, object ) {
+		function setProgram( camera, scene, material, object ) {
 
 			textures.resetTextureUnits();
 
+			var fog = scene.fog;
+			var environment = material.isMeshStandardMaterial ? scene.environment : null;
+
 			var materialProperties = properties.get( material );
 			var lights = currentRenderState.state.lights;
 
@@ -24854,6 +24906,10 @@
 
 					material.needsUpdate = true;
 
+				} else if ( materialProperties.environment !== environment ) {
+
+					material.needsUpdate = true;
+
 				} else if ( materialProperties.needsLights && ( materialProperties.lightsStateVersion !== lights.state.version ) ) {
 
 					material.needsUpdate = true;
@@ -24874,7 +24930,7 @@
 
 			if ( material.version !== materialProperties.__version ) {
 
-				initMaterial( material, fog, object );
+				initMaterial( material, scene, object );
 				materialProperties.__version = material.version;
 
 			}
@@ -25099,22 +25155,21 @@
 
 				} else if ( material.isMeshStandardMaterial ) {
 
-					refreshUniformsCommon( m_uniforms, material );
+					refreshUniformsCommon( m_uniforms, material, environment );
 
 					if ( material.isMeshPhysicalMaterial ) {
 
-						refreshUniformsPhysical( m_uniforms, material );
+						refreshUniformsPhysical( m_uniforms, material, environment );
 
 					} else {
 
-						refreshUniformsStandard( m_uniforms, material );
+						refreshUniformsStandard( m_uniforms, material, environment );
 
 					}
 
 				} else if ( material.isMeshMatcapMaterial ) {
 
 					refreshUniformsCommon( m_uniforms, material );
-
 					refreshUniformsMatcap( m_uniforms, material );
 
 				} else if ( material.isMeshDepthMaterial ) {
@@ -25207,7 +25262,7 @@
 
 		// Uniforms (refresh uniforms objects)
 
-		function refreshUniformsCommon( uniforms, material ) {
+		function refreshUniformsCommon( uniforms, material, environment ) {
 
 			uniforms.opacity.value = material.opacity;
 
@@ -25241,20 +25296,22 @@
 
 			}
 
-			if ( material.envMap ) {
+			var envMap = material.envMap || environment;
+
+			if ( envMap ) {
 
-				uniforms.envMap.value = material.envMap;
+				uniforms.envMap.value = envMap;
 
 				// don't flip CubeTexture envMaps, flip everything else:
 				//  WebGLRenderTargetCube will be flipped for backwards compatibility
 				//  WebGLRenderTargetCube.texture will be flipped because it's a Texture and NOT a CubeTexture
 				// this check must be handled differently, or removed entirely, if WebGLRenderTargetCube uses a CubeTexture in the future
-				uniforms.flipEnvMap.value = material.envMap.isCubeTexture ? - 1 : 1;
+				uniforms.flipEnvMap.value = envMap.isCubeTexture ? - 1 : 1;
 
 				uniforms.reflectivity.value = material.reflectivity;
 				uniforms.refractionRatio.value = material.refractionRatio;
 
-				uniforms.maxMipLevel.value = properties.get( material.envMap ).__maxMipLevel;
+				uniforms.maxMipLevel.value = properties.get( envMap ).__maxMipLevel;
 
 			}
 
@@ -25595,7 +25652,7 @@
 
 		}
 
-		function refreshUniformsStandard( uniforms, material ) {
+		function refreshUniformsStandard( uniforms, material, environment ) {
 
 			uniforms.roughness.value = material.roughness;
 			uniforms.metalness.value = material.metalness;
@@ -25642,7 +25699,7 @@
 
 			}
 
-			if ( material.envMap ) {
+			if ( material.envMap || environment ) {
 
 				//uniforms.envMap.value = material.envMap; // part of uniforms common
 				uniforms.envMapIntensity.value = material.envMapIntensity;
@@ -25651,9 +25708,9 @@
 
 		}
 
-		function refreshUniformsPhysical( uniforms, material ) {
+		function refreshUniformsPhysical( uniforms, material, environment ) {
 
-			refreshUniformsStandard( uniforms, material );
+			refreshUniformsStandard( uniforms, material, environment );
 
 			uniforms.reflectivity.value = material.reflectivity; // also part of uniforms common
 
@@ -25785,7 +25842,7 @@
 
 		function materialNeedsLights( material ) {
 
-			return material.isMeshLambertMaterial || material.isMeshToonMaterial || material.isMeshPhongMaterial ||
+			return material.isMeshLambertMaterial || material.isMeshToonMaterial || material.isMeshPhongMaterial ||
 				material.isMeshStandardMaterial || material.isShadowMaterial ||
 				( material.isShaderMaterial && material.lights === true );
 

build/three.module.js

@@ -91,7 +91,7 @@ if ( Object.assign === undefined ) {
 
 }
 
-var REVISION = '112dev';
+var REVISION = '112';
 var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
 var TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
 var CullFaceNone = 0;
@@ -6040,7 +6040,9 @@ function Scene() {
 	this.type = 'Scene';
 
 	this.background = null;
+	this.environment = null;
 	this.fog = null;
+
 	this.overrideMaterial = null;
 
 	this.autoUpdate = true; // checked by the renderer
@@ -6064,7 +6066,9 @@ Scene.prototype = Object.assign( Object.create( Object3D.prototype ), {
 		Object3D.prototype.copy.call( this, source, recursive );
 
 		if ( source.background !== null ) this.background = source.background.clone();
+		if ( source.environment !== null ) this.environment = source.environment.clone();
 		if ( source.fog !== null ) this.fog = source.fog.clone();
+
 		if ( source.overrideMaterial !== null ) this.overrideMaterial = source.overrideMaterial.clone();
 
 		this.autoUpdate = source.autoUpdate;
@@ -6079,6 +6083,7 @@ Scene.prototype = Object.assign( Object.create( Object3D.prototype ), {
 		var data = Object3D.prototype.toJSON.call( this, meta );
 
 		if ( this.background !== null ) data.object.background = this.background.toJSON( meta );
+		if ( this.environment !== null ) data.object.environment = this.environment.toJSON( meta );
 		if ( this.fog !== null ) data.object.fog = this.fog.toJSON();
 
 		return data;
@@ -17568,7 +17573,7 @@ function generateExtensions( extensions, parameters, rendererExtensions ) {
 	extensions = extensions || {};
 
 	var chunks = [
-		( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.tangentSpaceNormalMap || parameters.clearcoatNormalMap || parameters.flatShading || parameters.shaderID === 'physical' ) ? '#extension GL_OES_standard_derivatives : enable' : '',
+		( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.tangentSpaceNormalMap || parameters.clearcoatNormalMap || parameters.flatShading || parameters.shaderID === 'physical' ) ? '#extension GL_OES_standard_derivatives : enable' : '',
 		( extensions.fragDepth || parameters.logarithmicDepthBuffer ) && rendererExtensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
 		( extensions.drawBuffers ) && rendererExtensions.get( 'WEBGL_draw_buffers' ) ? '#extension GL_EXT_draw_buffers : require' : '',
 		( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : ''
@@ -18457,7 +18462,12 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 	}
 
-	this.getParameters = function ( material, lights, shadows, fog, nClipPlanes, nClipIntersection, object ) {
+	this.getParameters = function ( material, lights, shadows, scene, nClipPlanes, nClipIntersection, object ) {
+
+		var fog = scene.fog;
+		var environment = material.isMeshStandardMaterial ? scene.environment : null;
+
+		var envMap = material.envMap || environment;
 
 		var shaderID = shaderIDs[ material.type ];
 
@@ -18498,10 +18508,10 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 			mapEncoding: getTextureEncodingFromMap( material.map ),
 			matcap: !! material.matcap,
 			matcapEncoding: getTextureEncodingFromMap( material.matcap ),
-			envMap: !! material.envMap,
-			envMapMode: material.envMap && material.envMap.mapping,
-			envMapEncoding: getTextureEncodingFromMap( material.envMap ),
-			envMapCubeUV: ( !! material.envMap ) && ( ( material.envMap.mapping === CubeUVReflectionMapping ) || ( material.envMap.mapping === CubeUVRefractionMapping ) ),
+			envMap: !! envMap,
+			envMapMode: envMap && envMap.mapping,
+			envMapEncoding: getTextureEncodingFromMap( envMap ),
+			envMapCubeUV: ( !! envMap ) && ( ( envMap.mapping === CubeUVReflectionMapping ) || ( envMap.mapping === CubeUVRefractionMapping ) ),
 			lightMap: !! material.lightMap,
 			lightMapEncoding: getTextureEncodingFromMap( material.lightMap ),
 			aoMap: !! material.aoMap,
@@ -22845,13 +22855,7 @@ function WebXRManager( renderer, gl ) {
 	var pose = null;
 
 	var controllers = [];
-	var sortedInputSources = [];
-
-	function isPresenting() {
-
-		return session !== null && referenceSpace !== null;
-
-	}
+	var inputSourcesMap = new Map();
 
 	//
 
@@ -22871,6 +22875,8 @@ function WebXRManager( renderer, gl ) {
 
 	this.enabled = false;
 
+	this.isPresenting = false;
+
 	this.getController = function ( id ) {
 
 		var controller = controllers[ id ];
@@ -22893,13 +22899,11 @@ function WebXRManager( renderer, gl ) {
 
 	function onSessionEvent( event ) {
 
-		for ( var i = 0; i < controllers.length; i ++ ) {
-
-			if ( sortedInputSources[ i ] === event.inputSource ) {
+		var controller = inputSourcesMap.get( event.inputSource );
 
-				controllers[ i ].dispatchEvent( { type: event.type } );
+		if ( controller ) {
 
-			}
+			controller.dispatchEvent( { type: event.type } );
 
 		}
 
@@ -22907,12 +22911,25 @@ function WebXRManager( renderer, gl ) {
 
 	function onSessionEnd() {
 
+		inputSourcesMap.forEach( function ( controller, inputSource ) {
+
+			controller.dispatchEvent( { type: 'disconnected', data: inputSource } );
+			controller.visible = false;
+
+		} );
+
+		inputSourcesMap.clear();
+
+		//
+
 		renderer.setFramebuffer( null );
 		renderer.setRenderTarget( renderer.getRenderTarget() ); // Hack #15830
 		animation.stop();
 
 		scope.dispatchEvent( { type: 'sessionend' } );
 
+		scope.isPresenting = false;
+
 	}
 
 	function onRequestReferenceSpace( value ) {
@@ -22924,6 +22941,8 @@ function WebXRManager( renderer, gl ) {
 
 		scope.dispatchEvent( { type: 'sessionstart' } );
 
+		scope.isPresenting = true;
+
 	}
 
 	this.setFramebufferScaleFactor = function ( /* value */ ) {
@@ -22938,6 +22957,12 @@ function WebXRManager( renderer, gl ) {
 
 	};
 
+	this.getReferenceSpace = function () {
+
+		return referenceSpace;
+
+	};
+
 	this.getSession = function () {
 
 		return session;
@@ -22978,33 +23003,50 @@ function WebXRManager( renderer, gl ) {
 
 			session.addEventListener( 'inputsourceschange', updateInputSources );
 
-			updateInputSources();
-
 		}
 
 	};
 
-	function updateInputSources() {
+	function updateInputSources( event ) {
+
+		var inputSources = session.inputSources;
+
+		// Assign inputSources to available controllers
 
 		for ( var i = 0; i < controllers.length; i ++ ) {
 
-			sortedInputSources[ i ] = findInputSource( i );
+			inputSourcesMap.set( inputSources[ i ], controllers[ i ] );
 
 		}
 
-	}
+		// Notify disconnected
 
-	function findInputSource( id ) {
+		for ( var i = 0; i < event.removed.length; i ++ ) {
 
-		var inputSources = session.inputSources;
+			var inputSource = event.removed[ i ];
+			var controller = inputSourcesMap.get( inputSource );
 
-		for ( var i = 0; i < inputSources.length; i ++ ) {
+			if ( controller ) {
 
-			var inputSource = inputSources[ i ];
-			var handedness = inputSource.handedness;
+				controller.dispatchEvent( { type: 'disconnected', data: inputSource } );
+				inputSourcesMap.delete( inputSource );
 
-			if ( id === 0 && ( handedness === 'none' || handedness === 'right' ) ) return inputSource;
-			if ( id === 1 && ( handedness === 'left' ) ) return inputSource;
+			}
+
+		}
+
+		// Notify connected
+
+		for ( var i = 0; i < event.added.length; i ++ ) {
+
+			var inputSource = event.added[ i ];
+			var controller = inputSourcesMap.get( inputSource );
+
+			if ( controller ) {
+
+				controller.dispatchEvent( { type: 'connected', data: inputSource } );
+
+			}
 
 		}
 
@@ -23119,8 +23161,6 @@ function WebXRManager( renderer, gl ) {
 
 	};
 
-	this.isPresenting = isPresenting;
-
 	// Animation Loop
 
 	var onAnimationFrameCallback = null;
@@ -23159,11 +23199,13 @@ function WebXRManager( renderer, gl ) {
 
 		//
 
+		var inputSources = session.inputSources;
+
 		for ( var i = 0; i < controllers.length; i ++ ) {
 
 			var controller = controllers[ i ];
 
-			var inputSource = sortedInputSources[ i ];
+			var inputSource = inputSources[ i ];
 
 			if ( inputSource ) {
 
@@ -23173,12 +23215,7 @@ function WebXRManager( renderer, gl ) {
 
 					controller.matrix.fromArray( inputPose.transform.matrix );
 					controller.matrix.decompose( controller.position, controller.rotation, controller.scale );
-
-					if ( inputSource.targetRayMode === 'pointing' ) {
-
-						controller.visible = true;
-
-					}
+					controller.visible = true;
 
 					continue;
 
@@ -23549,7 +23586,7 @@ function WebGLRenderer( parameters ) {
 
 	this.setSize = function ( width, height, updateStyle ) {
 
-		if ( xr.isPresenting() ) {
+		if ( xr.isPresenting ) {
 
 			console.warn( 'THREE.WebGLRenderer: Can\'t change size while VR device is presenting.' );
 			return;
@@ -23887,11 +23924,15 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	this.renderBufferDirect = function ( camera, fog, geometry, material, object, group ) {
+	var tempScene = new Scene();
+
+	this.renderBufferDirect = function ( camera, scene, geometry, material, object, group ) {
+
+		if ( scene === null ) scene = tempScene; // renderBufferDirect second parameter used to be fog (could be null)
 
 		var frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
 
-		var program = setProgram( camera, fog, material, object );
+		var program = setProgram( camera, scene, material, object );
 
 		state.setMaterial( material, frontFaceCW );
 
@@ -23923,8 +23964,15 @@ function WebGLRenderer( parameters ) {
 
 		//
 
-		if ( index !== null && index.count === 0 ) return;
-		if ( position === undefined || position.count === 0 ) return;
+		if ( index === null ) {
+
+			if ( position === undefined || position.count === 0 ) return;
+
+		} else if ( index.count === 0 ) {
+
+			return;
+
+		}
 
 		//
 
@@ -24221,13 +24269,13 @@ function WebGLRenderer( parameters ) {
 
 					for ( var i = 0; i < object.material.length; i ++ ) {
 
-						initMaterial( object.material[ i ], scene.fog, object );
+						initMaterial( object.material[ i ], scene, object );
 
 					}
 
 				} else {
 
-					initMaterial( object.material, scene.fog, object );
+					initMaterial( object.material, scene, object );
 
 				}
 
@@ -24243,7 +24291,7 @@ function WebGLRenderer( parameters ) {
 
 	function onAnimationFrame( time ) {
 
-		if ( xr.isPresenting() ) return;
+		if ( xr.isPresenting ) return;
 		if ( onAnimationFrameCallback ) onAnimationFrameCallback( time );
 
 	}
@@ -24307,7 +24355,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
-		if ( xr.enabled && xr.isPresenting() ) {
+		if ( xr.enabled && xr.isPresenting ) {
 
 			camera = xr.getCamera( camera );
 
@@ -24624,7 +24672,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( object.isImmediateRenderObject ) {
 
-			var program = setProgram( camera, scene.fog, material, object );
+			var program = setProgram( camera, scene, material, object );
 
 			state.setMaterial( material );
 
@@ -24636,7 +24684,7 @@ function WebGLRenderer( parameters ) {
 
 		} else {
 
-			_this.renderBufferDirect( camera, scene.fog, geometry, material, object, group );
+			_this.renderBufferDirect( camera, scene, geometry, material, object, group );
 
 		}
 
@@ -24645,7 +24693,7 @@ function WebGLRenderer( parameters ) {
 
 	}
 
-	function initMaterial( material, fog, object ) {
+	function initMaterial( material, scene, object ) {
 
 		var materialProperties = properties.get( material );
 
@@ -24655,7 +24703,7 @@ function WebGLRenderer( parameters ) {
 		var lightsStateVersion = lights.state.version;
 
 		var parameters = programCache.getParameters(
-			material, lights.state, shadowsArray, fog, _clipping.numPlanes, _clipping.numIntersection, object );
+			material, lights.state, shadowsArray, scene, _clipping.numPlanes, _clipping.numIntersection, object );
 
 		var programCacheKey = programCache.getProgramCacheKey( material, parameters );
 
@@ -24722,6 +24770,7 @@ function WebGLRenderer( parameters ) {
 			program = programCache.acquireProgram( material, materialProperties.shader, parameters, programCacheKey );
 
 			materialProperties.program = program;
+			materialProperties.environment = material.isMeshStandardMaterial ? scene.environment : null;
 			materialProperties.outputEncoding = _this.outputEncoding;
 			material.program = program;
 
@@ -24773,7 +24822,7 @@ function WebGLRenderer( parameters ) {
 
 		}
 
-		materialProperties.fog = fog;
+		materialProperties.fog = scene.fog;
 
 		// store the light setup it was created for
 
@@ -24810,10 +24859,13 @@ function WebGLRenderer( parameters ) {
 
 	}
 
-	function setProgram( camera, fog, material, object ) {
+	function setProgram( camera, scene, material, object ) {
 
 		textures.resetTextureUnits();
 
+		var fog = scene.fog;
+		var environment = material.isMeshStandardMaterial ? scene.environment : null;
+
 		var materialProperties = properties.get( material );
 		var lights = currentRenderState.state.lights;
 
@@ -24846,6 +24898,10 @@ function WebGLRenderer( parameters ) {
 
 				material.needsUpdate = true;
 
+			} else if ( materialProperties.environment !== environment ) {
+
+				material.needsUpdate = true;
+
 			} else if ( materialProperties.needsLights && ( materialProperties.lightsStateVersion !== lights.state.version ) ) {
 
 				material.needsUpdate = true;
@@ -24866,7 +24922,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( material.version !== materialProperties.__version ) {
 
-			initMaterial( material, fog, object );
+			initMaterial( material, scene, object );
 			materialProperties.__version = material.version;
 
 		}
@@ -25091,22 +25147,21 @@ function WebGLRenderer( parameters ) {
 
 			} else if ( material.isMeshStandardMaterial ) {
 
-				refreshUniformsCommon( m_uniforms, material );
+				refreshUniformsCommon( m_uniforms, material, environment );
 
 				if ( material.isMeshPhysicalMaterial ) {
 
-					refreshUniformsPhysical( m_uniforms, material );
+					refreshUniformsPhysical( m_uniforms, material, environment );
 
 				} else {
 
-					refreshUniformsStandard( m_uniforms, material );
+					refreshUniformsStandard( m_uniforms, material, environment );
 
 				}
 
 			} else if ( material.isMeshMatcapMaterial ) {
 
 				refreshUniformsCommon( m_uniforms, material );
-
 				refreshUniformsMatcap( m_uniforms, material );
 
 			} else if ( material.isMeshDepthMaterial ) {
@@ -25199,7 +25254,7 @@ function WebGLRenderer( parameters ) {
 
 	// Uniforms (refresh uniforms objects)
 
-	function refreshUniformsCommon( uniforms, material ) {
+	function refreshUniformsCommon( uniforms, material, environment ) {
 
 		uniforms.opacity.value = material.opacity;
 
@@ -25233,20 +25288,22 @@ function WebGLRenderer( parameters ) {
 
 		}
 
-		if ( material.envMap ) {
+		var envMap = material.envMap || environment;
+
+		if ( envMap ) {
 
-			uniforms.envMap.value = material.envMap;
+			uniforms.envMap.value = envMap;
 
 			// don't flip CubeTexture envMaps, flip everything else:
 			//  WebGLRenderTargetCube will be flipped for backwards compatibility
 			//  WebGLRenderTargetCube.texture will be flipped because it's a Texture and NOT a CubeTexture
 			// this check must be handled differently, or removed entirely, if WebGLRenderTargetCube uses a CubeTexture in the future
-			uniforms.flipEnvMap.value = material.envMap.isCubeTexture ? - 1 : 1;
+			uniforms.flipEnvMap.value = envMap.isCubeTexture ? - 1 : 1;
 
 			uniforms.reflectivity.value = material.reflectivity;
 			uniforms.refractionRatio.value = material.refractionRatio;
 
-			uniforms.maxMipLevel.value = properties.get( material.envMap ).__maxMipLevel;
+			uniforms.maxMipLevel.value = properties.get( envMap ).__maxMipLevel;
 
 		}
 
@@ -25587,7 +25644,7 @@ function WebGLRenderer( parameters ) {
 
 	}
 
-	function refreshUniformsStandard( uniforms, material ) {
+	function refreshUniformsStandard( uniforms, material, environment ) {
 
 		uniforms.roughness.value = material.roughness;
 		uniforms.metalness.value = material.metalness;
@@ -25634,7 +25691,7 @@ function WebGLRenderer( parameters ) {
 
 		}
 
-		if ( material.envMap ) {
+		if ( material.envMap || environment ) {
 
 			//uniforms.envMap.value = material.envMap; // part of uniforms common
 			uniforms.envMapIntensity.value = material.envMapIntensity;
@@ -25643,9 +25700,9 @@ function WebGLRenderer( parameters ) {
 
 	}
 
-	function refreshUniformsPhysical( uniforms, material ) {
+	function refreshUniformsPhysical( uniforms, material, environment ) {
 
-		refreshUniformsStandard( uniforms, material );
+		refreshUniformsStandard( uniforms, material, environment );
 
 		uniforms.reflectivity.value = material.reflectivity; // also part of uniforms common
 
@@ -25777,7 +25834,7 @@ function WebGLRenderer( parameters ) {
 
 	function materialNeedsLights( material ) {
 
-		return material.isMeshLambertMaterial || material.isMeshToonMaterial || material.isMeshPhongMaterial ||
+		return material.isMeshLambertMaterial || material.isMeshToonMaterial || material.isMeshPhongMaterial ||
 			material.isMeshStandardMaterial || material.isShadowMaterial ||
 			( material.isShaderMaterial && material.lights === true );
 

docs/api/en/deprecated/DeprecatedList.html

@@ -253,7 +253,7 @@
 		<h3>[page:JSONLoader]</h3>
 		<p>JSONLoader has been removed from core.</p>
 
-		<h2>Maths</h2>
+		<h2>Math</h2>
 
 		<h3>[page:Box2]</h3>
 		<p>
@@ -293,15 +293,15 @@
 
 		<h3>[page:Matrix3]</h3>
 		<p>
-			Matrix3.flattenToArrayOffset is deprecated. Use [page:Matrix3.toArray]() instead.<br /><br />
+			Matrix3.flattenToArrayOffset() is deprecated. Use [page:Matrix3.toArray]() instead.<br /><br />
 
-			Matrix3.multiplyVector3 has been removed. Use vector.applyMatrix3( matrix ) instead.<br /><br />
+			Matrix3.multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead.<br /><br />
 
-			Matrix3.multiplyVector3Array has been renamed to [page:Matrix3.applyToVector3Array]( array ).<br /><br />
+			Matrix3.multiplyVector3Array() has been renamed to [page:Matrix3.applyToVector3Array]( array ).<br /><br />
 
-			Matrix3.applyToBuffer has been removed. Use matrix.applyToBufferAttribute( attribute ) instead.<br /><br />
+			Matrix3.applyToBufferAttribute() has been removed. Use [page:BufferAttribute.applyMatrix3]( matrix ) instead.<br /><br />
 
-			Matrix3.applyToVector3Array has been removed.
+			Matrix3.applyToVector3Array() has been removed.
 		<p>
 
 		<h3>[page:Matrix4]</h3>
@@ -332,7 +332,7 @@
 
 			Matrix4.rotateByAxis() has been removed.<br /><br />
 
-			Matrix4.applyToBuffer() has been removed. Use matrix.applyToBufferAttribute() instead.<br /><br />
+			Matrix4.applyToBufferAttribute() has been removed. Use [page:BufferAttribute.applyMatrix4]( matrix ) instead.<br /><br />
 
 			Matrix4.applyToVector3Array() has been removed.<br /><br />
 

docs/api/en/math/Matrix3.html

@@ -65,14 +65,6 @@ m.elements = [ 11, 21, 31,
 
 		<h2>Methods</h2>
 
-		<h3>[method:Array applyToBufferAttribute]( [param:BufferAttribute attribute] )</h3>
-		<p>
-		[page:BufferAttribute attribute] - An attribute of floats that represent 3D vectors.<br /><br />
-
-		Multiplies (applies) this matrix to every 3D vector in the [page:BufferAttribute attribute].
-		</p>
-
-
 		<h3>[method:Matrix3 clone]()</h3>
 		<p>Creates a new Matrix3 and with identical elements to this one.</p>
 

docs/api/en/math/Matrix4.html

@@ -101,14 +101,6 @@ m.elements = [ 11, 21, 31, 41,
 
 		<h2>Methods</h2>
 
-		<h3>[method:Array applyToBufferAttribute]( [param:BufferAttribute attribute] )</h3>
-		<p>
-		[page:BufferAttribute attribute] - An attribute of floats that represent 3D vectors.<br /><br />
-
-		Multiplies (applies) this matrix to every 3D vector in the [page:BufferAttribute attribute].
-		</p>
-
-
 		<h3>[method:Matrix4 clone]()</h3>
 		<p>Creates a new Matrix4 with identical [page:.elements elements] to this one.</p>
 

docs/api/en/scenes/Scene.html

@@ -25,14 +25,6 @@
 
 		<h2>Properties</h2>
 
-		<h3>[property:Fog fog]</h3>
-
-		<p>A [page:Fog fog] instance defining the type of fog that affects everything rendered in the scene. Default is null.</p>
-
-		<h3>[property:Material overrideMaterial]</h3>
-
-		<p>If not null, it will force everything in the scene to be rendered with that material. Default is null.</p>
-
 		<h3>[property:boolean autoUpdate]</h3>
 		<p>
 		Default is true. If set, then the renderer checks every frame if the scene and its objects needs matrix updates.
@@ -44,19 +36,33 @@
 		If not null, sets the background used when rendering the scene, and is always rendered first. Can be set to a [page:Color] which sets the clear color, a [page:Texture] covering the canvas, or a cubemap as a [page:CubeTexture] or [page:WebGLRenderTargetCube]. Default is null.
 		</p>
 
-		<h2>Methods</h2>
-
-		<h3>[method:Object toJSON]</h3>
+		<h3>[property:Texture environment]</h3>
 		<p>
-		meta -- object containing metadata such as textures or images for the scene.<br />
-		Convert the scene to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
+		If not null, this texture is set as the environment map for all physical materials in the scene.
+		However, it's not possible to overwrite an existing texture assigned to [page:MeshStandardMaterial.envmap]. Default is null.
 		</p>
 
+		<h3>[property:Fog fog]</h3>
+
+		<p>A [page:Fog fog] instance defining the type of fog that affects everything rendered in the scene. Default is null.</p>
+
+		<h3>[property:Material overrideMaterial]</h3>
+
+		<p>If not null, it will force everything in the scene to be rendered with that material. Default is null.</p>
+
+		<h2>Methods</h2>
+
 		<h3>[method:null dispose]()</h3>
 		<p>
 		Clears scene related data internally cached by [page:WebGLRenderer].
 		</p>
 
+		<h3>[method:Object toJSON]</h3>
+		<p>
+		meta -- object containing metadata such as textures or images for the scene.<br />
+		Convert the scene to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
+		</p>
+
 		<h2>Source</h2>
 
 		<p>

docs/api/zh/math/Matrix3.html

@@ -62,14 +62,6 @@ m.elements = [ 11, 21, 31,
 
 		<h2>方法（Methods）</h2>
 
-		<h3>[method:Array applyToBufferAttribute]( [param:BufferAttribute attribute] )</h3>
-		<p>
-		[page:BufferAttribute attribute] - 表示三维向量缓存属性。<br /><br />
-
-		用这个矩阵乘以缓存属性[page:BufferAttribute attribute]里的所有3d向量。
-		</p>
-
-
 		<h3>[method:Matrix3 clone]()</h3>
 		<p>创建一个新的矩阵，元素 [page:.elements elements] 与该矩阵相同。</p>
 

docs/api/zh/math/Matrix4.html

@@ -93,14 +93,6 @@ m.elements = [ 11, 21, 31, 41,
 
 		<h2>方法（Methods）</h2>
 
-		<h3>[method:Array applyToBufferAttribute]( [param:BufferAttribute attribute] )</h3>
-		<p>
-		[page:BufferAttribute attribute] - 表示三维向量缓存属性。<br /><br />
-
-		用这个矩阵乘以缓存属性[page:BufferAttribute attribute]里的所有3d向量。
-		</p>
-
-
 		<h3>[method:Matrix4 clone]()</h3>
 		<p>创建一个新的矩阵，元素[page:.elements elements]与该矩阵相同。</p>
 

docs/api/zh/scenes/Scene.html

@@ -26,15 +26,6 @@
 
 		<h2>属性</h2>
 
-		<h3>[property:Fog fog]</h3>
-
-		<p>一个[page:Fog fog]实例定义了影响场景中的每个物体的雾的类型。默认值为null。
-		</p>
-
-		<h3>[property:Material overrideMaterial]</h3>
-
-		<p>如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。</p>
-
 		<h3>[property:boolean autoUpdate]</h3>
 		<p>
 			默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。
@@ -47,19 +38,34 @@
 			可以设置一个用于的“clear”的[page:Color]（颜色）、一个覆盖canvas的[page:Texture]（纹理），或是一个[page:CubeTexture]。默认值为null。
 		</p>
 
-		<h2>方法</h2>
-
-		<h3>[method:JSON toJSON]</h3>
+		<h3>[property:Texture environment]</h3>
 		<p>
-			meta -- 包含有元数据的对象，例如场景中的的纹理或图片。
-			将scene对象转换为 three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format]（three.js JSON 物体/场景格式）。
+		If not null, this texture is set as the environment map for all physical materials in the scene.
+		However, it's not possible to overwrite an existing texture assigned to [page:MeshStandardMaterial.envmap]. Default is null.
 		</p>
 
+		<h3>[property:Fog fog]</h3>
+
+		<p>一个[page:Fog fog]实例定义了影响场景中的每个物体的雾的类型。默认值为null。
+		</p>
+
+		<h3>[property:Material overrideMaterial]</h3>
+
+		<p>如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。</p>
+
+		<h2>方法</h2>
+
 		<h3>[method:null dispose]()</h3>
 		<p>
 			清除[page:WebGLRenderer]内部所缓存的场景相关的数据。
 		</p>
 
+		<h3>[method:JSON toJSON]</h3>
+		<p>
+			meta -- 包含有元数据的对象，例如场景中的的纹理或图片。
+			将scene对象转换为 three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format]（three.js JSON 物体/场景格式）。
+		</p>
+
 		<h2>源代码</h2>
 
 		<p>

docs/examples/en/math/MeshSurfaceSampler.html

@@ -17,8 +17,8 @@
 		<h2>Example</h2>
 
 		<code>
-		// Create a sampler for a BufferGeometry surface.
-		var sampler = new THREE.MeshSurfaceSampler( surfaceGeometry )
+		// Create a sampler for a Mesh surface.
+		var sampler = new THREE.MeshSurfaceSampler( surfaceMesh )
 			.setWeightAttribute( 'color' )
 			.build();
 
@@ -52,9 +52,9 @@
 
 		<h2>Constructor</h2>
 
-		<h3>[name]( [param:BufferGeometry geometry] )</h3>
+		<h3>[name]( [param:Mesh mesh] )</h3>
 		<p>
-		[page:BufferGeometry geometry] — Surface geometry from which to sample.
+		[page:Mesh mesh] — Surface mesh from which to sample.
 		</p>
 		<p>
 		Creates a new [name]. If the input geometry is indexed, a non-indexed copy is made. After construction, the sampler is not able to return samples until [page:MeshSurfaceSampler.build build] is called.

docs/examples/zh/math/MeshSurfaceSampler.html

@@ -18,7 +18,7 @@
 
 		<code>
 		// Create a sampler for a BufferGeometry surface.
-		var sampler = new THREE.MeshSurfaceSampler( surfaceGeometry )
+		var sampler = new THREE.MeshSurfaceSampler( surfaceMesh )
 			.setWeightAttribute( 'color' )
 			.build();
 
@@ -52,9 +52,9 @@
 
 		<h2>Constructor</h2>
 
-		<h3>[name]( [param:BufferGeometry geometry] )</h3>
+		<h3>[name]( [param:Mesh mesh] )</h3>
 		<p>
-		[page:BufferGeometry geometry] — Surface geometry from which to sample.
+		[page:Mesh mesh] — Surface mesh from which to sample.
 		</p>
 		<p>
 		Creates a new [name]. If the input geometry is indexed, a non-indexed copy is made. After construction, the sampler is not able to return samples until [page:MeshSurfaceSampler.build build] is called.

docs/manual/en/introduction/How-to-update-things.html

@@ -209,7 +209,7 @@ geometry.tangentsNeedUpdate = true;
 			<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
 
 			<h3>Examples:</h3>
-			[example:webgl_materials_cars WebGL / materials / cars]<br />
+			[example:webgl_materials_car WebGL / materials / car]<br />
 			[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
 		</div>
 

docs/manual/zh/introduction/How-to-update-things.html

@@ -194,7 +194,7 @@ geometry.tangentsNeedUpdate = true;
 			<p>如果数量很大（例如，每个面可能有所不同），请考虑不同的解决方案，例如使用属性/纹理来驱动不同的每个面部外观。</p>
 
 			<h3>例子：</h3>
-			[example:webgl_materials_cars WebGL / materials / cars]<br />
+			[example:webgl_materials_car WebGL / materials / car]<br />
 			[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
 		</div>
 

editor/css/main.css

@@ -661,4 +661,12 @@ select {
 		background: #222;
 	}
 
+	.Listbox .ListboxItem:hover {
+		background-color: rgba(21,60,94,0.5);
+	}
+
+	.Listbox .ListboxItem.active {
+		background-color: rgba(21,60,94,1);
+	}
+
 }

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 * as THREE 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();
 

editor/js/Command.js

@@ -38,3 +38,5 @@ Command.prototype.fromJSON = function ( json ) {
 	this.name = json.name;
 
 };
+
+export { Command };

editor/js/Config.js

@@ -76,3 +76,5 @@ var Config = function () {
 	};
 
 };
+
+export { Config };

editor/js/Editor.js

@@ -2,6 +2,14 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
+import * as THREE 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 );
@@ -74,8 +82,8 @@ 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 );
@@ -317,7 +325,7 @@ Editor.prototype = {
 
 			if ( object.isCamera ) {
 
-				helper = new THREE.CameraHelper( object, 1 );
+				helper = new THREE.CameraHelper( object );
 
 			} else if ( object.isPointLight ) {
 
@@ -637,3 +645,5 @@ Editor.prototype = {
 	}
 
 };
+
+export { Editor };

editor/js/EditorControls.js

@@ -5,7 +5,9 @@
  * @author WestLangley / http://github.com/WestLangley
  */
 
-THREE.EditorControls = function ( object, domElement ) {
+import * as THREE from '../../build/three.module.js';
+
+var EditorControls = function ( object, domElement ) {
 
 	// API
 
@@ -309,5 +311,7 @@ THREE.EditorControls = function ( object, domElement ) {
 
 };
 
-THREE.EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
-THREE.EditorControls.prototype.constructor = THREE.EditorControls;
+EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+EditorControls.prototype.constructor = EditorControls;
+
+export { EditorControls };

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 };

editor/js/Loader.js

@@ -2,6 +2,27 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
+import * as THREE 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;
@@ -62,7 +83,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 +97,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 +113,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,7 +132,7 @@ 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 ) {
 
@@ -135,7 +156,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 +173,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 +207,7 @@ var Loader = function ( editor ) {
 
 					} else {
 
-						loader = new THREE.GLTFLoader( manager );
+						loader = new GLTFLoader( manager );
 
 					}
 
@@ -229,7 +250,7 @@ var Loader = function ( editor ) {
 						worker.onmessage = function ( event ) {
 
 							event.data.metadata = { version: 2 };
-							handleJSON( event.data, file, filename );
+							handleJSON( event.data );
 
 						};
 
@@ -254,7 +275,7 @@ var Loader = function ( editor ) {
 
 					}
 
-					handleJSON( data, file, filename );
+					handleJSON( data );
 
 				}, false );
 				reader.readAsText( file );
@@ -266,7 +287,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,7 +305,7 @@ var Loader = function ( editor ) {
 
 					var contents = event.target.result;
 
-					var geometry = new THREE.MD2Loader().parse( contents );
+					var geometry = new MD2Loader().parse( contents );
 					var material = new THREE.MeshStandardMaterial( {
 						morphTargets: true,
 						morphNormals: true
@@ -308,7 +329,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,7 +345,7 @@ 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;
 
@@ -346,7 +367,7 @@ 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;
 
@@ -377,7 +398,7 @@ var Loader = function ( editor ) {
 
 					var contents = event.target.result;
 
-					var loader = new THREE.SVGLoader();
+					var loader = new SVGLoader();
 					var paths = loader.parse( contents ).paths;
 
 					//
@@ -423,7 +444,7 @@ 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;
 
@@ -445,7 +466,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 +496,7 @@ var Loader = function ( editor ) {
 
 	};
 
-	function handleJSON( data, file, filename ) {
+	function handleJSON( data ) {
 
 		if ( data.metadata === undefined ) { // 2.0
 
@@ -566,8 +587,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 ) );
 
 		}
@@ -600,7 +621,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 +630,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 +644,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;
@@ -677,3 +698,5 @@ var Loader = function ( editor ) {
 	}
 
 };
+
+export { Loader };

editor/js/Menubar.Add.js

@@ -2,25 +2,31 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Menubar.Add = function ( editor ) {
+import * as THREE 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,11 +41,11 @@ 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 () {
@@ -55,7 +61,7 @@ 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 () {
@@ -71,7 +77,7 @@ 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 () {
@@ -87,7 +93,7 @@ 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 () {
@@ -103,7 +109,7 @@ 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 () {
@@ -119,7 +125,7 @@ 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 () {
@@ -149,7 +155,7 @@ 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 () {
@@ -165,7 +171,7 @@ 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 () {
@@ -182,7 +188,7 @@ 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 () {
@@ -198,7 +204,7 @@ 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 () {
@@ -214,7 +220,7 @@ 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 () {
@@ -229,7 +235,7 @@ 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 () {
@@ -245,7 +251,7 @@ 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 () {
@@ -261,7 +267,7 @@ 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 () {
@@ -277,7 +283,7 @@ 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 () {
@@ -301,7 +307,7 @@ Menubar.Add = function ( editor ) {
 	/*
 	// Teapot
 
-	var option = new UI.Row();
+	var option = new UIRow();
 	option.setClass( 'option' );
 	option.setTextContent( 'Teapot' );
 	option.onClick( function () {
@@ -316,7 +322,7 @@ Menubar.Add = function ( editor ) {
 
 		var material = new THREE.MeshStandardMaterial();
 
-		var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
+		var geometry = new TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
 		var mesh = new THREE.Mesh( geometry, material );
 		mesh.name = 'Teapot';
 
@@ -329,11 +335,11 @@ 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 () {
@@ -350,7 +356,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 () {
@@ -371,7 +377,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 () {
@@ -392,7 +398,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 () {
@@ -411,7 +417,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 () {
@@ -435,11 +441,11 @@ 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 () {
@@ -454,7 +460,7 @@ 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 () {
@@ -470,3 +476,5 @@ Menubar.Add = function ( editor ) {
 	return container;
 
 };
+
+export { MenubarAdd };

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 };

editor/js/Menubar.Examples.js

@@ -2,19 +2,23 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Menubar.Examples = function ( editor ) {
+import * as THREE 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 );
 
@@ -36,7 +40,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 +66,5 @@ Menubar.Examples = function ( editor ) {
 	return container;
 
 };
+
+export { MenubarExamples };

editor/js/Menubar.File.js

@@ -2,7 +2,17 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Menubar.File = function ( editor ) {
+import * as THREE 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 +27,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 +57,7 @@ Menubar.File = function ( editor ) {
 
 	//
 
-	options.add( new UI.HorizontalRule() );
+	options.add( new UIHorizontalRule() );
 
 	// Import
 
@@ -58,7 +68,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 +76,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 +88,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 +135,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 +169,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 +194,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 +216,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 +229,7 @@ Menubar.File = function ( editor ) {
 
 			// forceIndices: true, forcePowerOfTwoTextures: true
 			// to allow compatibility with facebook
+
 		}, { binary: true, forceIndices: true, forcePowerOfTwoTextures: true } );
 
 	} );
@@ -226,12 +237,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 +256,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 +270,7 @@ Menubar.File = function ( editor ) {
 
 		}
 
-		var exporter = new THREE.OBJExporter();
+		var exporter = new OBJExporter();
 
 		saveString( exporter.parse( object ), 'model.obj' );
 
@@ -268,12 +279,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 +297,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 +315,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 +329,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 +343,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 () {
@@ -400,9 +411,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 +448,5 @@ Menubar.File = function ( editor ) {
 	return container;
 
 };
+
+export { MenubarFile };

editor/js/Menubar.Help.js

@@ -2,37 +2,39 @@
  * @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 () {
 
-		window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' )
+		window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' );
 
 	} );
 	options.add( option );
 
 	// 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 };

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 };

editor/js/Menubar.Status.js

@@ -2,14 +2,19 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Menubar.Status = function ( editor ) {
+import * as THREE 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 +43,7 @@ Menubar.Status = function ( editor ) {
 
 	} );
 
-	var version = new UI.Text( 'r' + THREE.REVISION );
+	var version = new UIText( 'r' + THREE.REVISION );
 	version.setClass( 'title' );
 	version.setOpacity( 0.5 );
 	container.add( version );
@@ -46,3 +51,5 @@ Menubar.Status = function ( editor ) {
 	return container;
 
 };
+
+export { MenubarStatus };

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 };

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 };

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 };

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 };

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 };

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -2,71 +2,77 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
+import * as THREE 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 THREE.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 };

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 };

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -2,51 +2,57 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
+import * as THREE 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 * THREE.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 * THREE.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,7 +61,7 @@ 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 THREE.CircleBufferGeometry(
 			radius.getValue(),
 			segments.getValue(),
 			thetaStart.getValue() * THREE.Math.DEG2RAD,
@@ -68,4 +74,4 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.CircleBufferGeometry = Sidebar.Geometry.CircleGeometry;
+export { SidebarGeometryCircleGeometry };

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -2,71 +2,77 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
+import * as THREE 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 +81,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 THREE.CylinderBufferGeometry(
 			radiusTop.getValue(),
 			radiusBottom.getValue(),
 			height.getValue(),
@@ -90,4 +96,4 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.CylinderBufferGeometry = Sidebar.Geometry.CylinderGeometry;
+export { SidebarGeometryCylinderGeometry };

editor/js/Sidebar.Geometry.DodecahedronGeometry.js

@@ -2,31 +2,37 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
+import * as THREE 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 +41,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 THREE.DodecahedronBufferGeometry(
 			radius.getValue(),
 			detail.getValue()
 		) ) );
@@ -46,4 +52,4 @@ Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.DodecahedronBufferGeometry = Sidebar.Geometry.DodecahedronGeometry;
+export { SidebarGeometryDodecahedronGeometry };

editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -2,11 +2,17 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
-Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
+import * as THREE 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 +28,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 +70,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 THREE.ExtrudeBufferGeometry(
 			parameters.shapes,
 			{
 				curveSegments: curveSegments.getValue(),
@@ -140,4 +146,4 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.ExtrudeBufferGeometry = Sidebar.Geometry.ExtrudeGeometry;
+export { SidebarGeometryExtrudeGeometry };

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 };

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -2,31 +2,39 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
+import * as THREE 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 +43,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 THREE.IcosahedronBufferGeometry(
 			radius.getValue(),
 			detail.getValue()
 		) ) );
 
+		signals.objectChanged.dispatch( object );
+
 	}
 
 	return container;
 
 };
 
-Sidebar.Geometry.IcosahedronBufferGeometry = Sidebar.Geometry.IcosahedronGeometry;
+export { SidebarGeometryIcosahedronGeometry };

editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -2,58 +2,65 @@
  * @author rfm1201
  */
 
-Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
+import * as THREE 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 THREE.LatheBufferGeometry(
 			points.getValue(),
 			segments.getValue(),
 			phiStart.getValue() / 180 * Math.PI,
@@ -66,4 +73,4 @@ Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.LatheBufferGeometry = Sidebar.Geometry.LatheGeometry;
+export { SidebarGeometryLatheGeometry };

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 };

editor/js/Sidebar.Geometry.OctahedronGeometry.js

@@ -2,31 +2,39 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
-Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
+import * as THREE 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 +44,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 THREE.OctahedronBufferGeometry(
 			radius.getValue(),
 			detail.getValue()
 		) ) );
 
+		signals.objectChanged.dispatch( object );
+
 	}
 
 	return container;
 
 };
 
-Sidebar.Geometry.OctahedronBufferGeometry = Sidebar.Geometry.OctahedronGeometry;
+export { SidebarGeometryOctahedronGeometry };

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -2,51 +2,57 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
+import * as THREE 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 +62,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 THREE.PlaneBufferGeometry(
 			width.getValue(),
 			height.getValue(),
 			widthSegments.getValue(),
@@ -69,4 +75,4 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.PlaneBufferGeometry = Sidebar.Geometry.PlaneGeometry;
+export { SidebarGeometryPlaneGeometry };

editor/js/Sidebar.Geometry.RingGeometry.js

@@ -2,71 +2,77 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
-Sidebar.Geometry.RingGeometry = function ( editor, object ) {
+import * as THREE 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 +81,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 THREE.RingBufferGeometry(
 			innerRadius.getValue(),
 			outerRadius.getValue(),
 			thetaSegments.getValue(),
@@ -90,4 +96,4 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.RingBufferGeometry = Sidebar.Geometry.RingGeometry;
+export { SidebarGeometryRingGeometry };

editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -2,34 +2,40 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
-Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
+import * as THREE 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 THREE.ShapeBufferGeometry(
 			parameters.shapes,
 			curveSegments.getValue()
 		) ) );
@@ -50,4 +56,4 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.ShapeBufferGeometry = Sidebar.Geometry.ShapeGeometry;
+export { SidebarGeometryShapeGeometry };

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -2,81 +2,87 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
+import * as THREE 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 * THREE.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 * THREE.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 * THREE.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 * THREE.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,7 +92,7 @@ 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 THREE.SphereBufferGeometry(
 			radius.getValue(),
 			widthSegments.getValue(),
 			heightSegments.getValue(),
@@ -102,4 +108,4 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.SphereBufferGeometry = Sidebar.Geometry.SphereGeometry;
+export { SidebarGeometrySphereGeometry };

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 };

editor/js/Sidebar.Geometry.TetrahedronGeometry.js

@@ -2,32 +2,39 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
+import * as THREE 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 +44,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 THREE.TetrahedronBufferGeometry(
 			radius.getValue(),
 			detail.getValue()
 		) ) );
 
+		signals.objectChanged.dispatch( object );
+
 	}
 
 	return container;
 
 };
 
-Sidebar.Geometry.TetrahedronBufferGeometry = Sidebar.Geometry.TetrahedronGeometry;
+export { SidebarGeometryTetrahedronGeometry };

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -2,61 +2,67 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
+import * as THREE 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 * THREE.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,7 +72,7 @@ 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 THREE.TorusBufferGeometry(
 			radius.getValue(),
 			tube.getValue(),
 			radialSegments.getValue(),
@@ -80,4 +86,4 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.TorusBufferGeometry = Sidebar.Geometry.TorusGeometry;
+export { SidebarGeometryTorusGeometry };

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -2,71 +2,77 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
+import * as THREE 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 +82,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 THREE.TorusKnotBufferGeometry(
 			radius.getValue(),
 			tube.getValue(),
 			tubularSegments.getValue(),
@@ -91,4 +97,4 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.TorusKnotBufferGeometry = Sidebar.Geometry.TorusKnotGeometry;
+export { SidebarGeometryTorusKnotGeometry };

editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -2,80 +2,87 @@
  * @author Temdog007 / http://github.com/Temdog007
  */
 
-Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
+import * as THREE 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,7 +92,7 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.TubeBufferGeometry(
 			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 			tubularSegments.getValue(),
 			radius.getValue(),
@@ -99,4 +106,4 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 };
 
-Sidebar.Geometry.TubeBufferGeometry = Sidebar.Geometry.TubeGeometry;
+export { SidebarGeometryTubeGeometry };

editor/js/Sidebar.Geometry.js

@@ -2,13 +2,61 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Geometry = function ( editor ) {
+import * as THREE 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 = {
+	'BoxBufferGeometry': SidebarGeometryBoxGeometry,
+	'CircleBufferGeometry': SidebarGeometryCircleGeometry,
+	'CylinderBufferGeometry': SidebarGeometryCylinderGeometry,
+	'DodecahedronBufferGeometry': SidebarGeometryDodecahedronGeometry,
+	'ExtrudeBufferGeometry': SidebarGeometryExtrudeGeometry,
+	'IcosahedronBufferGeometry': SidebarGeometryIcosahedronGeometry,
+	'LatheBufferGeometry': SidebarGeometryLatheGeometry,
+	'OctahedronBufferGeometry': SidebarGeometryOctahedronGeometry,
+	'PlaneBufferGeometry': SidebarGeometryPlaneGeometry,
+	'RingBufferGeometry': SidebarGeometryRingGeometry,
+	'ShapeBufferGeometry': SidebarGeometryShapeGeometry,
+	'SphereBufferGeometry': SidebarGeometrySphereGeometry,
+	'TeapotBufferGeometry': SidebarGeometryTeapotBufferGeometry,
+	'TetrahedronBufferGeometry': SidebarGeometryTetrahedronGeometry,
+	'TorusBufferGeometry': SidebarGeometryTorusGeometry,
+	'TorusKnotBufferGeometry': SidebarGeometryTorusKnotGeometry,
+	'TubeBufferGeometry': 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,19 +136,19 @@ 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() );
 
@@ -108,7 +156,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	} );
 
-	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 };

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 -- ) {
 
@@ -106,7 +108,7 @@ Sidebar.History = function ( editor ) {
 
 			}
 
-		} )( history.redos, ' ' );
+		} )( history.redos );
 
 		outliner.setOptions( options );
 
@@ -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 };

editor/js/Sidebar.Material.js

@@ -2,7 +2,36 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Material = function ( editor ) {
+import * as THREE 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': THREE.LineBasicMaterial,
+	'LineDashedMaterial': THREE.LineDashedMaterial,
+	'MeshBasicMaterial': THREE.MeshBasicMaterial,
+	'MeshDepthMaterial': THREE.MeshDepthMaterial,
+	'MeshNormalMaterial': THREE.MeshNormalMaterial,
+	'MeshLambertMaterial': THREE.MeshLambertMaterial,
+	'MeshMatcapMaterial': THREE.MeshMatcapMaterial,
+	'MeshPhongMaterial': THREE.MeshPhongMaterial,
+	'MeshToonMaterial': THREE.MeshToonMaterial,
+	'MeshStandardMaterial': THREE.MeshStandardMaterial,
+	'MeshPhysicalMaterial': THREE.MeshPhysicalMaterial,
+	'RawShaderMaterial': THREE.RawShaderMaterial,
+	'ShaderMaterial': THREE.ShaderMaterial,
+	'ShadowMaterial': THREE.ShadowMaterial,
+	'SpriteMaterial': THREE.SpriteMaterial
+};
+
+var SidebarMaterial = function ( editor ) {
 
 	var strings = editor.strings;
 
@@ -12,18 +41,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 +60,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 +81,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() );
 		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 +105,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 +131,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 +140,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 +153,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 +184,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 +197,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 +256,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( {
+	var materialDepthPackingRow = new UIRow();
+	var materialDepthPacking = new UISelect().setOptions( {
 		[ THREE.BasicDepthPacking ]: 'BasicDepthPacking',
 		[ THREE.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 +299,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 +311,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 +323,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 +337,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 +353,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 +369,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 +383,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 +395,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 +407,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 +419,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( THREE.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 +433,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 +445,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 +459,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 +471,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 +483,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 +492,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 +521,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,15 +601,16 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.type !== materialClass.getValue() ) {
 
-				material = new THREE[ materialClass.getValue() ]();
+				material = new materialClasses[ materialClass.getValue() ]();
 
-				if ( material.type == "RawShaderMaterial" ) {
+				if ( material.type === "RawShaderMaterial" ) {
 
 					material.vertexShader = vertexShaderVariables + material.vertexShader;
 
 				}
 
 				editor.execute( new SetMaterialCommand( editor, currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
+				editor.addMaterial( material );
 				// TODO Copy other references in the scene graph
 				// keeping name and UUID then.
 				// Also there should be means to create a unique
@@ -612,7 +642,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 ) );
 
@@ -1617,3 +1647,5 @@ Sidebar.Material = function ( editor ) {
 	return container;
 
 };
+
+export { SidebarMaterial };

editor/js/Sidebar.Object.js

@@ -2,13 +2,25 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Object = function ( editor ) {
+import * as THREE 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 +49,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,19 +70,19 @@ 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() );
 
@@ -78,7 +90,7 @@ Sidebar.Object = function ( editor ) {
 
 	} );
 
-	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 +98,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 +150,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 +357,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 );
@@ -819,3 +829,5 @@ Sidebar.Object = function ( editor ) {
 	return container;
 
 };
+
+export { SidebarObject };

editor/js/Sidebar.Project.js

@@ -2,7 +2,17 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-Sidebar.Project = function ( editor ) {
+import * as THREE 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;
@@ -11,14 +21,14 @@ Sidebar.Project = function ( editor ) {
 	var rendererTypes = {
 
 		'WebGLRenderer': THREE.WebGLRenderer,
-		'SVGRenderer': THREE.SVGRenderer,
-		'RaytracingRenderer': THREE.RaytracingRenderer
+		'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 };

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 };

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 };

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 };

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 };

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 };

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 };

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 };

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 };

editor/js/Strings.js

@@ -609,3 +609,5 @@ var Strings = function ( config ) {
 	};
 
 };
+
+export { Strings };

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 };

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 };

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 };

editor/js/Viewport.js

@@ -2,16 +2,32 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
+import * as THREE 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 ) );
 
 	//
 
@@ -54,7 +70,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;
@@ -267,7 +283,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 );
@@ -440,7 +456,7 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	signals.materialChanged.add( function ( material ) {
+	signals.materialChanged.add( function () {
 
 		render();
 
@@ -575,7 +591,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 +607,5 @@ var Viewport = function ( editor ) {
 	return container;
 
 };
+
+export { Viewport };

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 * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
  * @constructor
  */
-
 var AddObjectCommand = function ( editor, object ) {
 
 	Command.call( this, editor );
@@ -65,3 +67,5 @@ AddObjectCommand.prototype = {
 	}
 
 };
+
+export { AddObjectCommand };

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 };

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 };

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 };

editor/js/commands/RemoveObjectCommand.js

@@ -3,12 +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 * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
  * @constructor
  */
-
 var RemoveObjectCommand = function ( editor, object ) {
 
 	Command.call( this, editor );
@@ -102,3 +105,5 @@ RemoveObjectCommand.prototype = {
 	}
 
 };
+
+export { RemoveObjectCommand };

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 };

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 };

editor/js/commands/SetGeometryCommand.js

@@ -3,6 +3,10 @@
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
  */
 
+import { Command } from '../Command.js';
+
+import * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
@@ -75,7 +79,7 @@ SetGeometryCommand.prototype = {
 		this.oldGeometry = parseGeometry( json.oldGeometry );
 		this.newGeometry = parseGeometry( json.newGeometry );
 
-		function parseGeometry ( data ) {
+		function parseGeometry( data ) {
 
 			var loader = new THREE.ObjectLoader();
 			return loader.parseGeometries( [ data ] )[ data.uuid ];
@@ -85,3 +89,5 @@ SetGeometryCommand.prototype = {
 	}
 
 };
+
+export { SetGeometryCommand };

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 };

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 };

editor/js/commands/SetMaterialCommand.js

@@ -3,13 +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 * as THREE 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 +64,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 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 +77,5 @@ SetMaterialCommand.prototype = {
 	}
 
 };
+
+export { SetMaterialCommand };

editor/js/commands/SetMaterialMapCommand.js

@@ -3,6 +3,10 @@
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
  */
 
+import { Command } from '../Command.js';
+
+import * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
@@ -10,7 +14,6 @@
  * @param newMap THREE.Texture
  * @constructor
  */
-
 var SetMaterialMapCommand = function ( editor, object, mapName, newMap, materialSlot ) {
 
 	Command.call( this, editor );
@@ -61,7 +64,7 @@ SetMaterialMapCommand.prototype = {
 
 		// serializes a map (THREE.Texture)
 
-		function serializeMap ( map ) {
+		function serializeMap( map ) {
 
 			if ( map === null || map === undefined ) return null;
 
@@ -86,7 +89,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 +114,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 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 +133,5 @@ SetMaterialMapCommand.prototype = {
 	}
 
 };
+
+export { SetMaterialMapCommand };

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 };

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 };

editor/js/commands/SetPositionCommand.js

@@ -3,6 +3,10 @@
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
  */
 
+import { Command } from '../Command.js';
+
+import * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
@@ -10,7 +14,6 @@
  * @param optionalOldPosition THREE.Vector3
  * @constructor
  */
-
 var SetPositionCommand = function ( editor, object, newPosition, optionalOldPosition ) {
 
 	Command.call( this, editor );
@@ -82,3 +85,5 @@ SetPositionCommand.prototype = {
 	}
 
 };
+
+export { SetPositionCommand };

editor/js/commands/SetRotationCommand.js

@@ -3,6 +3,10 @@
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
  */
 
+import { Command } from '../Command.js';
+
+import * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
@@ -10,7 +14,6 @@
  * @param optionalOldRotation THREE.Euler
  * @constructor
  */
-
 var SetRotationCommand = function ( editor, object, newRotation, optionalOldRotation ) {
 
 	Command.call( this, editor );
@@ -83,3 +86,5 @@ SetRotationCommand.prototype = {
 	}
 
 };
+
+export { SetRotationCommand };

editor/js/commands/SetScaleCommand.js

@@ -3,6 +3,10 @@
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
  */
 
+import { Command } from '../Command.js';
+
+import * as THREE from '../../../build/three.module.js';
+
 /**
  * @param editor Editor
  * @param object THREE.Object3D
@@ -10,7 +14,6 @@
  * @param optionalOldScale THREE.Vector3
  * @constructor
  */
-
 var SetScaleCommand = function ( editor, object, newScale, optionalOldScale ) {
 
 	Command.call( this, editor );
@@ -83,3 +86,5 @@ SetScaleCommand.prototype = {
 	}
 
 };
+
+export { SetScaleCommand };

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 };

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 };

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 };

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 };

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 };

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 );
+
 				} );
 
 			} );

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;
-
-}

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;
-
-	}
-
-} );

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 };

editor/js/libs/ui.three.js

@@ -2,9 +2,20 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-UI.Texture = function ( mapping ) {
+import * as THREE 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';
+
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var UITexture = function ( mapping ) {
+
+	UIElement.call( this );
 
 	var scope = this;
 
@@ -27,12 +38,12 @@ 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();
 
 	}, false );
-	canvas.addEventListener( 'drop', function ( event ) {
+	canvas.addEventListener( 'drop', function () {
 
 		event.preventDefault();
 		event.stopPropagation();
@@ -51,7 +62,7 @@ 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 );
 					texture.sourceFile = file.name;
@@ -69,7 +80,7 @@ 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 );
 						texture.sourceFile = file.name;
@@ -104,16 +115,16 @@ 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 context = canvas.getContext( '2d' );
@@ -154,7 +165,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 +178,7 @@ UI.Texture.prototype.setEncoding = function ( encoding ) {
 
 };
 
-UI.Texture.prototype.onChange = function ( callback ) {
+UITexture.prototype.onChange = function ( callback ) {
 
 	this.onChangeCallback = callback;
 
@@ -175,11 +186,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;
 
@@ -222,6 +233,7 @@ UI.Outliner = function ( editor ) {
 	}, false );
 
 	this.dom = dom;
+	this.editor = editor;
 
 	this.options = [];
 	this.selectedIndex = - 1;
@@ -231,10 +243,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 +260,7 @@ UI.Outliner.prototype.selectIndex = function ( index ) {
 
 };
 
-UI.Outliner.prototype.setOptions = function ( options ) {
+UIOutliner.prototype.setOptions = function ( options ) {
 
 	var scope = this;
 
@@ -272,7 +284,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 	var currentDrag;
 
-	function onDrag( event ) {
+	function onDrag() {
 
 		currentDrag = this;
 
@@ -358,6 +370,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 		if ( newParentIsChild ) return;
 
+		var editor = scope.editor;
 		editor.execute( new MoveObjectCommand( editor, object, newParent, nextObject ) );
 
 		var changeEvent = document.createEvent( 'HTMLEvents' );
@@ -398,13 +411,13 @@ 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 ++ ) {
 
@@ -446,19 +459,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 +492,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,7 +503,7 @@ Points.prototype.onChange = function ( callback ) {
 
 };
 
-Points.prototype.clear = function () {
+UIPoints.prototype.clear = function () {
 
 	for ( var i = 0; i < this.pointsUI.length; ++ i ) {
 
@@ -506,7 +519,7 @@ Points.prototype.clear = function () {
 
 };
 
-Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
+UIPoints.prototype.deletePointRow = function ( idx, dontUpdate ) {
 
 	if ( ! this.pointsUI[ idx ] ) return;
 
@@ -521,18 +534,18 @@ 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 ) {
 
@@ -550,7 +563,7 @@ UI.Points2.addRow = function () {
 
 };
 
-UI.Points2.prototype.getValue = function () {
+UIPoints2.prototype.getValue = function () {
 
 	var points = [];
 	var count = 0;
@@ -571,7 +584,7 @@ UI.Points2.prototype.getValue = function () {
 
 };
 
-UI.Points2.prototype.setValue = function ( points ) {
+UIPoints2.prototype.setValue = function ( points ) {
 
 	this.clear();
 
@@ -587,16 +600,16 @@ 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 );
@@ -611,18 +624,18 @@ 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 ) {
 
@@ -640,7 +653,7 @@ UI.Points3.addRow = function () {
 
 };
 
-UI.Points3.prototype.getValue = function () {
+UIPoints3.prototype.getValue = function () {
 
 	var points = [];
 	var count = 0;
@@ -661,7 +674,7 @@ UI.Points3.prototype.getValue = function () {
 
 };
 
-UI.Points3.prototype.setValue = function ( points ) {
+UIPoints3.prototype.setValue = function ( points ) {
 
 	this.clear();
 
@@ -677,17 +690,17 @@ 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 );
@@ -702,33 +715,33 @@ UI.Points3.prototype.createPointRow = function ( x, y, z ) {
 
 };
 
-UI.THREE = {};
+var UIBoolean = function ( boolean, text ) {
 
-UI.THREE.Boolean = 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 };