Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Editor: Move to ES6 modules (2nd attempt).

Mugen87 5 жил өмнө
parent
662d5acd06
commit
f176ca30a6
85 өөрчлөгдсөн 2112 нэмэгдсэн , 1758 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 21 130
      editor/index.html
  2. 2 0
      editor/js/Command.js
  3. 2 0
      editor/js/Config.js
  4. 44 18
      editor/js/Editor.js
  5. 26 14
      editor/js/EditorControls.js
  6. 3 1
      editor/js/History.js
  7. 80 46
      editor/js/Loader.js
  8. 125 87
      editor/js/Menubar.Add.js
  9. 26 17
      editor/js/Menubar.Edit.js
  10. 14 6
      editor/js/Menubar.Examples.js
  11. 51 35
      editor/js/Menubar.File.js
  12. 10 6
      editor/js/Menubar.Help.js
  13. 7 3
      editor/js/Menubar.Play.js
  14. 13 4
      editor/js/Menubar.Status.js
  15. 9 5
      editor/js/Menubar.View.js
  16. 20 9
      editor/js/Menubar.js
  17. 9 2
      editor/js/Player.js
  18. 46 11
      editor/js/Script.js
  19. 13 9
      editor/js/Sidebar.Animation.js
  20. 28 22
      editor/js/Sidebar.Geometry.BoxGeometry.js
  21. 14 10
      editor/js/Sidebar.Geometry.BufferGeometry.js
  22. 27 18
      editor/js/Sidebar.Geometry.CircleGeometry.js
  23. 30 22
      editor/js/Sidebar.Geometry.CylinderGeometry.js
  24. 18 10
      editor/js/Sidebar.Geometry.DodecahedronGeometry.js
  25. 39 30
      editor/js/Sidebar.Geometry.ExtrudeGeometry.js
  26. 12 8
      editor/js/Sidebar.Geometry.Geometry.js
  27. 22 10
      editor/js/Sidebar.Geometry.IcosahedronGeometry.js
  28. 25 16
      editor/js/Sidebar.Geometry.LatheGeometry.js
  29. 7 3
      editor/js/Sidebar.Geometry.Modifiers.js
  30. 22 10
      editor/js/Sidebar.Geometry.OctahedronGeometry.js
  31. 24 16
      editor/js/Sidebar.Geometry.PlaneGeometry.js
  32. 30 22
      editor/js/Sidebar.Geometry.RingGeometry.js
  33. 18 9
      editor/js/Sidebar.Geometry.ShapeGeometry.js
  34. 38 29
      editor/js/Sidebar.Geometry.SphereGeometry.js
  35. 30 24
      editor/js/Sidebar.Geometry.TeapotBufferGeometry.js
  36. 21 10
      editor/js/Sidebar.Geometry.TetrahedronGeometry.js
  37. 29 20
      editor/js/Sidebar.Geometry.TorusGeometry.js
  38. 30 22
      editor/js/Sidebar.Geometry.TorusKnotGeometry.js
  39. 36 26
      editor/js/Sidebar.Geometry.TubeGeometry.js
  40. 72 22
      editor/js/Sidebar.Geometry.js
  41. 14 8
      editor/js/Sidebar.History.js
  42. 206 154
      editor/js/Sidebar.Material.js
  43. 115 99
      editor/js/Sidebar.Object.js
  44. 36 24
      editor/js/Sidebar.Project.js
  45. 13 5
      editor/js/Sidebar.Properties.js
  46. 20 15
      editor/js/Sidebar.Scene.js
  47. 20 12
      editor/js/Sidebar.Script.js
  48. 12 6
      editor/js/Sidebar.Settings.Shortcuts.js
  49. 11 5
      editor/js/Sidebar.Settings.Viewport.js
  50. 14 8
      editor/js/Sidebar.Settings.js
  51. 22 10
      editor/js/Sidebar.js
  52. 6 4
      editor/js/Storage.js
  53. 2 0
      editor/js/Strings.js
  54. 11 6
      editor/js/Toolbar.js
  55. 6 2
      editor/js/Viewport.Camera.js
  56. 15 11
      editor/js/Viewport.Info.js
  57. 45 18
      editor/js/Viewport.js
  58. 6 2
      editor/js/commands/AddObjectCommand.js
  59. 4 1
      editor/js/commands/AddScriptCommand.js
  60. 4 1
      editor/js/commands/MoveObjectCommand.js
  61. 4 1
      editor/js/commands/MultiCmdsCommand.js
  62. 6 2
      editor/js/commands/RemoveObjectCommand.js
  63. 4 1
      editor/js/commands/RemoveScriptCommand.js
  64. 4 1
      editor/js/commands/SetColorCommand.js
  65. 7 2
      editor/js/commands/SetGeometryCommand.js
  66. 4 1
      editor/js/commands/SetGeometryValueCommand.js
  67. 4 1
      editor/js/commands/SetMaterialColorCommand.js
  68. 8 4
      editor/js/commands/SetMaterialCommand.js
  69. 10 6
      editor/js/commands/SetMaterialMapCommand.js
  70. 4 1
      editor/js/commands/SetMaterialValueCommand.js
  71. 4 0
      editor/js/commands/SetMaterialVectorCommand.js
  72. 7 3
      editor/js/commands/SetPositionCommand.js
  73. 7 3
      editor/js/commands/SetRotationCommand.js
  74. 7 3
      editor/js/commands/SetScaleCommand.js
  75. 7 1
      editor/js/commands/SetSceneCommand.js
  76. 4 1
      editor/js/commands/SetScriptValueCommand.js
  77. 4 1
      editor/js/commands/SetUuidCommand.js
  78. 4 1
      editor/js/commands/SetValueCommand.js
  79. 5 1
      editor/js/libs/app.js
  80. 8 5
      editor/js/libs/app/index.html
  81. 0 189
      editor/js/libs/html2canvas.js
  82. 0 75
      editor/js/libs/three.html.js
  83. 174 168
      editor/js/libs/ui.js
  84. 115 99
      editor/js/libs/ui.three.js
  85. 36 35
      editor/sw.js

+ 21 - 130
editor/index.html
Файл харах 

@@ -11,40 +11,7 @@
 
 	<body ontouchstart="">
 
 		<link rel="stylesheet" href="css/main.css">
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="../examples/js/controls/TransformControls.js"></script>
 
-
 
-		<script src="../examples/js/libs/chevrotain.min.js"></script> <!-- VRML -->
 
 		<script src="../examples/js/libs/jszip.min.js"></script>
 
-		<script src="../examples/js/libs/inflate.min.js"></script> <!-- FBX -->
 
-
 
-		<script src="../examples/js/loaders/AMFLoader.js"></script>
 
-		<script src="../examples/js/loaders/ColladaLoader.js"></script>
 
-		<script src="../examples/js/loaders/DRACOLoader.js"></script>
 
-		<script src="../examples/js/loaders/FBXLoader.js"></script>
 
-		<script src="../examples/js/loaders/GLTFLoader.js"></script>
 
-		<script src="../examples/js/loaders/KMZLoader.js"></script>
 
-		<script src="../examples/js/loaders/MD2Loader.js"></script>
 
-		<script src="../examples/js/loaders/OBJLoader.js"></script>
 
-		<script src="../examples/js/loaders/MTLLoader.js"></script>
 
-		<script src="../examples/js/loaders/PLYLoader.js"></script>
 
-		<script src="../examples/js/loaders/STLLoader.js"></script>
 
-		<script src="../examples/js/loaders/SVGLoader.js"></script>
 
-		<script src="../examples/js/loaders/TGALoader.js"></script>
 
-		<script src="../examples/js/loaders/TDSLoader.js"></script>
 
-		<script src="../examples/js/loaders/VRMLLoader.js"></script>
 
-		<script src="../examples/js/loaders/VTKLoader.js"></script>
 
-
 
-		<script src="../examples/js/exporters/ColladaExporter.js"></script>
 
-		<script src="../examples/js/exporters/GLTFExporter.js"></script>
 
-		<script src="../examples/js/exporters/OBJExporter.js"></script>
 
-		<script src="../examples/js/exporters/PLYExporter.js"></script>
 
-		<script src="../examples/js/exporters/STLExporter.js"></script>
 
-
 
-		<script src="../examples/js/renderers/Projector.js"></script>
 
-		<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
 
-		<script src="../examples/js/renderers/SVGRenderer.js"></script>
 
 
 		<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
 
 		<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
 
@@ -60,6 +27,7 @@
 
 		<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
 
 		<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
 
 		<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">
 
+
 
 		<script src="js/libs/codemirror/addon/dialog.js"></script>
 
 		<script src="js/libs/codemirror/addon/show-hint.js"></script>
 
 		<script src="js/libs/codemirror/addon/tern.js"></script>
 
@@ -74,104 +42,27 @@
 
 		<script src="js/libs/ternjs/infer.js"></script>
 
 		<script src="js/libs/ternjs/doc_comment.js"></script>
 
 		<script src="js/libs/tern-threejs/threejs.js"></script>
 
-
 
 		<script src="js/libs/signals.min.js"></script>
 
-		<script src="js/libs/ui.js"></script>
 
-		<script src="js/libs/ui.three.js"></script>
 
-
 
-		<script src="js/libs/html2canvas.js"></script>
 
-		<script src="js/libs/three.html.js"></script>
 
-
 
-		<script src="js/libs/app.js"></script>
 
-		<script src="js/Player.js"></script>
 
-		<script src="js/Script.js"></script>
 
-
 
-		<script src="js/EditorControls.js"></script>
 
-		<script src="js/Storage.js"></script>
 
-
 
-		<script src="js/Editor.js"></script>
 
-		<script src="js/Config.js"></script>
 
-		<script src="js/History.js"></script>
 
-		<script src="js/Loader.js"></script>
 
-		<script src="js/Menubar.js"></script>
 
-		<script src="js/Menubar.File.js"></script>
 
-		<script src="js/Menubar.Edit.js"></script>
 
-		<script src="js/Menubar.Add.js"></script>
 
-		<script src="js/Menubar.Play.js"></script>
 
-		<!-- <script src="js/Menubar.View.js"></script> -->
 
-		<script src="js/Menubar.Examples.js"></script>
 
-		<script src="js/Menubar.Help.js"></script>
 
-		<script src="js/Menubar.Status.js"></script>
 
-		<script src="js/Sidebar.js"></script>
 
-		<script src="js/Sidebar.Scene.js"></script>
 
-		<script src="js/Sidebar.Project.js"></script>
 
-		<script src="js/Sidebar.Settings.js"></script>
 
-		<script src="js/Sidebar.Settings.Shortcuts.js"></script>
 
-		<script src="js/Sidebar.Settings.Viewport.js"></script>
 
-		<script src="js/Sidebar.Properties.js"></script>
 
-		<script src="js/Sidebar.Object.js"></script>
 
-		<script src="js/Sidebar.Geometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.Geometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.Modifiers.js"></script>
 
-		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.DodecahedronGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.ExtrudeGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.ShapeGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.TubeGeometry.js"></script>
 
-		<script src="../examples/js/geometries/TeapotBufferGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.TeapotBufferGeometry.js"></script>
 
-		<script src="js/Sidebar.Geometry.LatheGeometry.js"></script>
 
-		<script src="js/Sidebar.Material.js"></script>
 
-		<script src="js/Sidebar.Animation.js"></script>
 
-		<script src="js/Sidebar.Script.js"></script>
 
-		<script src="js/Sidebar.History.js"></script>
 
-		<script src="js/Strings.js"></script>
 
-		<script src="js/Toolbar.js"></script>
 
-		<script src="js/Viewport.js"></script>
 
-		<script src="js/Viewport.Camera.js"></script>
 
-		<script src="js/Viewport.Info.js"></script>
 
-
 
-		<script src="js/Command.js"></script>
 
-		<script src="js/commands/AddObjectCommand.js"></script>
 
-		<script src="js/commands/RemoveObjectCommand.js"></script>
 
-		<script src="js/commands/MoveObjectCommand.js"></script>
 
-		<script src="js/commands/SetPositionCommand.js"></script>
 
-		<script src="js/commands/SetRotationCommand.js"></script>
 
-		<script src="js/commands/SetScaleCommand.js"></script>
 
-		<script src="js/commands/SetValueCommand.js"></script>
 
-		<script src="js/commands/SetUuidCommand.js"></script>
 
-		<script src="js/commands/SetColorCommand.js"></script>
 
-		<script src="js/commands/SetGeometryCommand.js"></script>
 
-		<script src="js/commands/SetGeometryValueCommand.js"></script>
 
-		<script src="js/commands/MultiCmdsCommand.js"></script>
 
-		<script src="js/commands/AddScriptCommand.js"></script>
 
-		<script src="js/commands/RemoveScriptCommand.js"></script>
 
-		<script src="js/commands/SetScriptValueCommand.js"></script>
 
-		<script src="js/commands/SetMaterialCommand.js"></script>
 
-		<script src="js/commands/SetMaterialColorCommand.js"></script>
 
-		<script src="js/commands/SetMaterialMapCommand.js"></script>
 
-		<script src="js/commands/SetMaterialValueCommand.js"></script>
 
-		<script src="js/commands/SetMaterialVectorCommand.js"></script>
 
-		<script src="js/commands/SetSceneCommand.js"></script>
 
-
 
-		<script>
 
+
 
+		<script type="module">
 
+
 
+			import { FileLoader } from '../build/three.module.js';
 
+
 
+			import { Editor } from './js/Editor.js';
 
+			import { Viewport } from './js/Viewport.js';
 
+			import { Toolbar } from './js/Toolbar.js';
 
+			import { Script } from './js/Script.js';
 
+			import { Player } from './js/Player.js';
 
+			import { Sidebar } from './js/Sidebar.js';
 
+			import { Menubar } from './js/Menubar.js';
 
 
 			window.URL = window.URL || window.webkitURL;
 
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
 
-			Number.prototype.format = function (){
 
-				return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
 
+			Number.prototype.format = function () {
 
+
 
+				return this.toString().replace( /(\d)(?=(\d{3})+(?!\d))/g, "$1," );
 
+
 
 			};
 
 
 			//
 
@@ -224,7 +115,7 @@
 
 
 				var timeout;
 
 
-				function saveState( scene ) {
 
+				function saveState() {
 
 
 					if ( editor.config.getKey( 'autosave' ) === false ) {
 
 
@@ -248,7 +139,7 @@
 
 
 					}, 1000 );
 
 
-				};
 
+				}
 
 
 				var signals = editor.signals;
 
 
@@ -282,7 +173,7 @@
 
 
 			}, false );
 
 
-			function onWindowResize( event ) {
 
+			function onWindowResize() {
 
 
 				editor.signals.windowResize.dispatch();
 
 
@@ -303,7 +194,7 @@
 
 
 				if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
 
 
-					var loader = new THREE.FileLoader();
 
+					var loader = new FileLoader();
 
 					loader.crossOrigin = '';
 
 					loader.load( file, function ( text ) {

+ 2 - 0
editor/js/Command.js
Файл харах 

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

+ 2 - 0
editor/js/Config.js
Файл харах 

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

+ 44 - 18
editor/js/Editor.js
Файл харах 

@@ -2,12 +2,36 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
+import {
 
+	AnimationMixer,
 
+	CameraHelper,
 
+	Color,
 
+	DirectionalLightHelper,
 
+	HemisphereLightHelper,
 
+	Mesh,
 
+	MeshBasicMaterial,
 
+	ObjectLoader,
 
+	PerspectiveCamera,
 
+	PointLightHelper,
 
+	Scene,
 
+	SkeletonHelper,
 
+	SphereBufferGeometry,
 
+	SpotLightHelper,
 
+	Vector3
 
+} from '../../build/three.module.js';
 
+
 
+import { Config } from './Config.js';
 
+import { Loader } from './Loader.js';
 
+import { History as _History } from './History.js';
 
+import { Strings } from './Strings.js';
 
+import { Storage as _Storage } from './Storage.js';
 
+
 
 var Editor = function () {
 
 
-	this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
 
+	this.DEFAULT_CAMERA = new PerspectiveCamera( 50, 1, 0.01, 1000 );
 
 	this.DEFAULT_CAMERA.name = 'Camera';
 
 	this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
 
-	this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
 
+	this.DEFAULT_CAMERA.lookAt( new Vector3() );
 
 
 	var Signal = signals.Signal;
 
 
@@ -74,19 +98,19 @@ var Editor = function () {
 
 	};
 
 
 	this.config = new Config();
 
-	this.history = new History( this );
 
-	this.storage = new Storage();
 
+	this.history = new _History( this );
 
+	this.storage = new _Storage();
 
 	this.strings = new Strings( this.config );
 
 
 	this.loader = new Loader( this );
 
 
 	this.camera = this.DEFAULT_CAMERA.clone();
 
 
-	this.scene = new THREE.Scene();
 
+	this.scene = new Scene();
 
 	this.scene.name = 'Scene';
 
-	this.scene.background = new THREE.Color( 0xaaaaaa );
 
+	this.scene.background = new Color( 0xaaaaaa );
 
 
-	this.sceneHelpers = new THREE.Scene();
 
+	this.sceneHelpers = new Scene();
 
 
 	this.object = {};
 
 	this.geometries = {};
 
@@ -95,7 +119,7 @@ var Editor = function () {
 
 	this.scripts = {};
 
 
 	this.animations = {};
 
-	this.mixer = new THREE.AnimationMixer( this.scene );
 
+	this.mixer = new AnimationMixer( this.scene );
 
 
 	this.selected = null;
 
 	this.helpers = {};
 
@@ -308,8 +332,8 @@ Editor.prototype = {
 
 
 	addHelper: function () {
 
 
-		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
 
-		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
 
+		var geometry = new SphereBufferGeometry( 2, 4, 2 );
 
+		var material = new MeshBasicMaterial( { color: 0xff0000, visible: false } );
 
 
 		return function ( object ) {
 
 
@@ -317,27 +341,27 @@ Editor.prototype = {
 
 
 			if ( object.isCamera ) {
 
 
-				helper = new THREE.CameraHelper( object, 1 );
 
+				helper = new CameraHelper( object, 1 );
 
 
 			} else if ( object.isPointLight ) {
 
 
-				helper = new THREE.PointLightHelper( object, 1 );
 
+				helper = new PointLightHelper( object, 1 );
 
 
 			} else if ( object.isDirectionalLight ) {
 
 
-				helper = new THREE.DirectionalLightHelper( object, 1 );
 
+				helper = new DirectionalLightHelper( object, 1 );
 
 
 			} else if ( object.isSpotLight ) {
 
 
-				helper = new THREE.SpotLightHelper( object, 1 );
 
+				helper = new SpotLightHelper( object, 1 );
 
 
 			} else if ( object.isHemisphereLight ) {
 
 
-				helper = new THREE.HemisphereLightHelper( object, 1 );
 
+				helper = new HemisphereLightHelper( object, 1 );
 
 
 			} else if ( object.isSkinnedMesh ) {
 
 
-				helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
 
+				helper = new SkeletonHelper( object.skeleton.bones[ 0 ] );
 
 
 			} else {
 
 
@@ -346,7 +370,7 @@ Editor.prototype = {
 
 
 			}
 
 
-			var picker = new THREE.Mesh( geometry, material );
 
+			var picker = new Mesh( geometry, material );
 
 			picker.name = 'picker';
 
 			picker.userData.object = object;
 
 			helper.add( picker );
 
@@ -551,7 +575,7 @@ Editor.prototype = {
 
 
 	fromJSON: function ( json ) {
 
 
-		var loader = new THREE.ObjectLoader();
 
+		var loader = new ObjectLoader();
 
 
 		// backwards
 
 
@@ -637,3 +661,5 @@ Editor.prototype = {
 
 	}
 
 
 };
 
+
 
+export { Editor };

+ 26 - 14
editor/js/EditorControls.js
Файл харах 

@@ -5,12 +5,22 @@
 
  * @author WestLangley / http://github.com/WestLangley
 
  */
 
 
-THREE.EditorControls = function ( object, domElement ) {
 
+import {
 
+	Box3,
 
+	EventDispatcher,
 
+	Matrix3,
 
+	Sphere,
 
+	Spherical,
 
+	Vector2,
 
+	Vector3
 
+} from '../../build/three.module.js';
 
+
 
+var EditorControls = function ( object, domElement ) {
 
 
 	// API
 
 
 	this.enabled = true;
 
-	this.center = new THREE.Vector3();
 
+	this.center = new Vector3();
 
 	this.panSpeed = 0.002;
 
 	this.zoomSpeed = 0.1;
 
 	this.rotationSpeed = 0.005;
 
@@ -18,19 +28,19 @@ THREE.EditorControls = function ( object, domElement ) {
 
 	// internals
 
 
 	var scope = this;
 
-	var vector = new THREE.Vector3();
 
-	var delta = new THREE.Vector3();
 
-	var box = new THREE.Box3();
 
+	var vector = new Vector3();
 
+	var delta = new Vector3();
 
+	var box = new Box3();
 
 
 	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
 
 	var state = STATE.NONE;
 
 
 	var center = this.center;
 
-	var normalMatrix = new THREE.Matrix3();
 
-	var pointer = new THREE.Vector2();
 
-	var pointerOld = new THREE.Vector2();
 
-	var spherical = new THREE.Spherical();
 
-	var sphere = new THREE.Sphere();
 
+	var normalMatrix = new Matrix3();
 
+	var pointer = new Vector2();
 
+	var pointerOld = new Vector2();
 
+	var spherical = new Spherical();
 
+	var sphere = new Sphere();
 
 
 	// events
 
 
@@ -221,8 +231,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
 
 	// touch
 
 
-	var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
 
-	var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
 
+	var touches = [ new Vector3(), new Vector3(), new Vector3() ];
 
+	var prevTouches = [ new Vector3(), new Vector3(), new Vector3() ];
 
 
 	var prevDistance = null;
 
 
@@ -309,5 +319,7 @@ THREE.EditorControls = function ( object, domElement ) {
 
 
 };
 
 
-THREE.EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
 
-THREE.EditorControls.prototype.constructor = THREE.EditorControls;
 
+EditorControls.prototype = Object.create( EventDispatcher.prototype );
 
+EditorControls.prototype.constructor = EditorControls;
 
+
 
+export { EditorControls };

+ 3 - 1
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 };

+ 80 - 46
editor/js/Loader.js
Файл харах 

@@ -2,6 +2,38 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
+import {
 
+	AnimationMixer,
 
+	BufferGeometryLoader,
 
+	Group,
 
+	LoadingManager,
 
+	LoaderUtils,
 
+	Mesh,
 
+	MeshBasicMaterial,
 
+	MeshStandardMaterial,
 
+	ObjectLoader,
 
+	ShapeBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { AMFLoader } from '../../examples/jsm/loaders/AMFLoader.js';
 
+import { ColladaLoader } from '../../examples/jsm/loaders/ColladaLoader.js';
 
+import { DRACOLoader } from '../../examples/jsm/loaders/DRACOLoader.js';
 
+import { FBXLoader } from '../../examples/jsm/loaders/FBXLoader.js';
 
+import { GLTFLoader } from '../../examples/jsm/loaders/GLTFLoader.js';
 
+import { KMZLoader } from '../../examples/jsm/loaders/KMZLoader.js';
 
+import { MD2Loader } from '../../examples/jsm/loaders/MD2Loader.js';
 
+import { MTLLoader } from '../../examples/jsm/loaders/MTLLoader.js';
 
+import { OBJLoader } from '../../examples/jsm/loaders/OBJLoader.js';
 
+import { PLYLoader } from '../../examples/jsm/loaders/PLYLoader.js';
 
+import { STLLoader } from '../../examples/jsm/loaders/STLLoader.js';
 
+import { SVGLoader } from '../../examples/jsm/loaders/SVGLoader.js';
 
+import { TDSLoader } from '../../examples/jsm/loaders/TDSLoader.js';
 
+import { VTKLoader } from '../../examples/jsm/loaders/VTKLoader.js';
 
+import { VRMLLoader } from '../../examples/jsm/loaders/VRMLLoader.js';
 
+
 
+import { AddObjectCommand } from './commands/AddObjectCommand.js';
 
+import { SetSceneCommand } from './commands/SetSceneCommand.js';
 
+
 
 var Loader = function ( editor ) {
 
 
 	var scope = this;
 
@@ -14,7 +46,7 @@ var Loader = function ( editor ) {
 
 
 			var filesMap = createFileMap( files );
 
 
-			var manager = new THREE.LoadingManager();
 
+			var manager = new LoadingManager();
 
 			manager.setURLModifier( function ( url ) {
 
 
 				var file = filesMap[ url ];
 
@@ -62,7 +94,7 @@ var Loader = function ( editor ) {
 
 
 				reader.addEventListener( 'load', function ( event ) {
 
 
-					var loader = new THREE.TDSLoader();
 
+					var loader = new TDSLoader();
 
 					var object = loader.parse( event.target.result );
 
 
 					editor.execute( new AddObjectCommand( editor, object ) );
 
@@ -76,7 +108,7 @@ var Loader = function ( editor ) {
 
 
 				reader.addEventListener( 'load', function ( event ) {
 
 
-					var loader = new THREE.AMFLoader();
 
+					var loader = new AMFLoader();
 
 					var amfobject = loader.parse( event.target.result );
 
 
 					editor.execute( new AddObjectCommand( editor, amfobject ) );
 
@@ -92,7 +124,7 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var loader = new THREE.ColladaLoader( manager );
 
+					var loader = new ColladaLoader( manager );
 
 					var collada = loader.parse( contents );
 
 
 					collada.scene.name = filename;
 
@@ -111,13 +143,13 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var loader = new THREE.DRACOLoader();
 
+					var loader = new DRACOLoader();
 
 					loader.setDecoderPath( '../examples/js/libs/draco/' );
 
 					loader.decodeDracoFile( contents, function ( geometry ) {
 
 
-						var material = new THREE.MeshStandardMaterial();
 
+						var material = new MeshStandardMaterial();
 
 
-						var mesh = new THREE.Mesh( geometry, material );
 
+						var mesh = new Mesh( geometry, material );
 
 						mesh.name = filename;
 
 
 						editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -135,7 +167,7 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var loader = new THREE.FBXLoader( manager );
 
+					var loader = new FBXLoader( manager );
 
 					var object = loader.parse( contents );
 
 
 					editor.addAnimation( object, object.animations );
 
@@ -152,10 +184,10 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var dracoLoader = new THREE.DRACOLoader();
 
+					var dracoLoader = new DRACOLoader();
 
 					dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
 
 
-					var loader = new THREE.GLTFLoader();
 
+					var loader = new GLTFLoader();
 
 					loader.setDRACOLoader( dracoLoader );
 
 					loader.parse( contents, '', function ( result ) {
 
 
@@ -186,7 +218,7 @@ var Loader = function ( editor ) {
 
 
 					} else {
 
 
-						loader = new THREE.GLTFLoader( manager );
 
+						loader = new GLTFLoader( manager );
 
 
 					}
 
 
@@ -229,7 +261,7 @@ var Loader = function ( editor ) {
 
 						worker.onmessage = function ( event ) {
 
 
 							event.data.metadata = { version: 2 };
 
-							handleJSON( event.data, file, filename );
 
+							handleJSON( event.data );
 
 
 						};
 
 
@@ -254,7 +286,7 @@ var Loader = function ( editor ) {
 
 
 					}
 
 
-					handleJSON( data, file, filename );
 
+					handleJSON( data );
 
 
 				}, false );
 
 				reader.readAsText( file );
 
@@ -266,7 +298,7 @@ var Loader = function ( editor ) {
 
 
 				reader.addEventListener( 'load', function ( event ) {
 
 
-					var loader = new THREE.KMZLoader();
 
+					var loader = new KMZLoader();
 
 					var collada = loader.parse( event.target.result );
 
 
 					collada.scene.name = filename;
 
@@ -284,14 +316,14 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var geometry = new THREE.MD2Loader().parse( contents );
 
-					var material = new THREE.MeshStandardMaterial( {
 
+					var geometry = new MD2Loader().parse( contents );
 
+					var material = new MeshStandardMaterial( {
 
 						morphTargets: true,
 
 						morphNormals: true
 
 					} );
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-					mesh.mixer = new THREE.AnimationMixer( mesh );
 
+					var mesh = new Mesh( geometry, material );
 
+					mesh.mixer = new AnimationMixer( mesh );
 
 					mesh.name = filename;
 
 
 					editor.addAnimation( mesh, geometry.animations );
 
@@ -308,7 +340,7 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var object = new THREE.OBJLoader().parse( contents );
 
+					var object = new OBJLoader().parse( contents );
 
 					object.name = filename;
 
 
 					editor.execute( new AddObjectCommand( editor, object ) );
 
@@ -324,13 +356,13 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var geometry = new THREE.PLYLoader().parse( contents );
 
+					var geometry = new PLYLoader().parse( contents );
 
 					geometry.sourceType = "ply";
 
 					geometry.sourceFile = file.name;
 
 
-					var material = new THREE.MeshStandardMaterial();
 
+					var material = new MeshStandardMaterial();
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.name = filename;
 
 
 					editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -346,13 +378,13 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var geometry = new THREE.STLLoader().parse( contents );
 
+					var geometry = new STLLoader().parse( contents );
 
 					geometry.sourceType = "stl";
 
 					geometry.sourceFile = file.name;
 
 
-					var material = new THREE.MeshStandardMaterial();
 
+					var material = new MeshStandardMaterial();
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.name = filename;
 
 
 					editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -377,12 +409,12 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var loader = new THREE.SVGLoader();
 
+					var loader = new SVGLoader();
 
 					var paths = loader.parse( contents ).paths;
 
 
 					//
 
 
-					var group = new THREE.Group();
 
+					var group = new Group();
 
 					group.scale.multiplyScalar( 0.1 );
 
 					group.scale.y *= - 1;
 
 
@@ -390,7 +422,7 @@ var Loader = function ( editor ) {
 
 
 						var path = paths[ i ];
 
 
-						var material = new THREE.MeshBasicMaterial( {
 
+						var material = new MeshBasicMaterial( {
 
 							color: path.color,
 
 							depthWrite: false
 
 						} );
 
@@ -401,8 +433,8 @@ var Loader = function ( editor ) {
 
 
 							var shape = shapes[ j ];
 
 
-							var geometry = new THREE.ShapeBufferGeometry( shape );
 
-							var mesh = new THREE.Mesh( geometry, material );
 
+							var geometry = new ShapeBufferGeometry( shape );
 
+							var mesh = new Mesh( geometry, material );
 
 
 							group.add( mesh );
 
 
@@ -423,13 +455,13 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var geometry = new THREE.VTKLoader().parse( contents );
 
+					var geometry = new VTKLoader().parse( contents );
 
 					geometry.sourceType = "vtk";
 
 					geometry.sourceFile = file.name;
 
 
-					var material = new THREE.MeshStandardMaterial();
 
+					var material = new MeshStandardMaterial();
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.name = filename;
 
 
 					editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -445,7 +477,7 @@ var Loader = function ( editor ) {
 
 
 					var contents = event.target.result;
 
 
-					var result = new THREE.VRMLLoader().parse( contents );
 
+					var result = new VRMLLoader().parse( contents );
 
 
 					editor.execute( new SetSceneCommand( editor, result ) );
 
 
@@ -475,7 +507,7 @@ var Loader = function ( editor ) {
 
 
 	};
 
 
-	function handleJSON( data, file, filename ) {
 
+	function handleJSON( data ) {
 
 
 		if ( data.metadata === undefined ) { // 2.0
 
 
@@ -499,10 +531,10 @@ var Loader = function ( editor ) {
 
 
 			case 'buffergeometry':
 
 
-				var loader = new THREE.BufferGeometryLoader();
 
+				var loader = new BufferGeometryLoader();
 
 				var result = loader.parse( data );
 
 
-				var mesh = new THREE.Mesh( result );
 
+				var mesh = new Mesh( result );
 
 
 				editor.execute( new AddObjectCommand( editor, mesh ) );
 
 
@@ -516,7 +548,7 @@ var Loader = function ( editor ) {
 
 
 			case 'object':
 
 
-				var loader = new THREE.ObjectLoader();
 
+				var loader = new ObjectLoader();
 
 				loader.setResourcePath( scope.texturePath );
 
 
 				var result = loader.parse( data );
 
@@ -566,8 +598,8 @@ var Loader = function ( editor ) {
 
 
 		if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {
 
 
-			var materials = new THREE.MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
 
-			var object = new THREE.OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
 
+			var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
 
+			var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
 
 			editor.execute( new AddObjectCommand( editor, object ) );
 
 
 		}
 
@@ -576,7 +608,7 @@ var Loader = function ( editor ) {
 
 
 		zip.filter( function ( path, file ) {
 
 
-			var manager = new THREE.LoadingManager();
 
+			var manager = new LoadingManager();
 
 			manager.setURLModifier( function ( url ) {
 
 
 				var file = zip.files[ url ];
 
@@ -600,7 +632,7 @@ var Loader = function ( editor ) {
 
 
 				case 'fbx':
 
 
-					var loader = new THREE.FBXLoader( manager );
 
+					var loader = new FBXLoader( manager );
 
 					var object = loader.parse( file.asArrayBuffer() );
 
 
 					editor.execute( new AddObjectCommand( editor, object ) );
 
@@ -609,7 +641,7 @@ var Loader = function ( editor ) {
 
 
 				case 'glb':
 
 
-					var loader = new THREE.GLTFLoader();
 
+					var loader = new GLTFLoader();
 
 					loader.parse( file.asArrayBuffer(), '', function ( result ) {
 
 
 						var scene = result.scene;
 
@@ -623,7 +655,7 @@ var Loader = function ( editor ) {
 
 
 				case 'gltf':
 
 
-					var loader = new THREE.GLTFLoader( manager );
 
+					var loader = new GLTFLoader( manager );
 
 					loader.parse( file.asText(), '', function ( result ) {
 
 
 						var scene = result.scene;
 
@@ -652,7 +684,7 @@ var Loader = function ( editor ) {
 
 
 		} else {
 
 
-			var magic = THREE.LoaderUtils.decodeText( new Uint8Array( contents, 0, 4 ) );
 
+			var magic = LoaderUtils.decodeText( new Uint8Array( contents, 0, 4 ) );
 
 
 			if ( magic === 'glTF' ) {
 
 
@@ -664,7 +696,7 @@ var Loader = function ( editor ) {
 
 			} else {
 
 
 				// contents is a .gltf file
 
-				resultContent = THREE.LoaderUtils.decodeText( new Uint8Array( contents ) );
 
+				resultContent = LoaderUtils.decodeText( new Uint8Array( contents ) );
 
 
 			}
 
 
@@ -677,3 +709,5 @@ var Loader = function ( editor ) {
 
 	}
 
 
 };
 
+
 
+export { Loader };

+ 125 - 87
editor/js/Menubar.Add.js
Файл харах 

@@ -2,25 +2,61 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Menubar.Add = function ( editor ) {
 
+import {
 
+	AmbientLight,
 
+	BoxBufferGeometry,
 
+	CatmullRomCurve3,
 
+	CircleBufferGeometry,
 
+	CylinderBufferGeometry,
 
+	DirectionalLight,
 
+	DodecahedronBufferGeometry,
 
+	DoubleSide,
 
+	HemisphereLight,
 
+	IcosahedronBufferGeometry,
 
+	LatheBufferGeometry,
 
+	Mesh,
 
+	MeshStandardMaterial,
 
+	OctahedronBufferGeometry,
 
+	OrthographicCamera,
 
+	PerspectiveCamera,
 
+	PlaneBufferGeometry,
 
+	PointLight,
 
+	RingBufferGeometry,
 
+	SphereBufferGeometry,
 
+	Sprite,
 
+	SpriteMaterial,
 
+	SpotLight,
 
+	TetrahedronBufferGeometry,
 
+	TorusBufferGeometry,
 
+	TorusKnotBufferGeometry,
 
+	TubeBufferGeometry,
 
+	Vector2,
 
+	Vector3
 
+} from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
 
+
 
+import { AddObjectCommand } from './commands/AddObjectCommand.js';
 
+
 
+var MenubarAdd = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setClass( 'menu' );
 
 
-	var title = new UI.Panel();
 
+	var title = new UIPanel();
 
 	title.setClass( 'title' );
 
 	title.setTextContent( strings.getKey( 'menubar/add' ) );
 
 	container.add( title );
 
 
-	var options = new UI.Panel();
 
+	var options = new UIPanel();
 
 	options.setClass( 'options' );
 
 	container.add( options );
 
 
 	// Group
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/group' ) );
 
 	option.onClick( function () {
 
@@ -35,17 +71,17 @@ Menubar.Add = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// Box
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/box' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Box';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -55,13 +91,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Circle
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Circle';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -71,13 +107,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Cylinder
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Cylinder';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -87,13 +123,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Dodecahedron
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/dodecahedron' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.DodecahedronBufferGeometry( 1, 0 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new DodecahedronBufferGeometry( 1, 0 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Dodecahedron';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -103,13 +139,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Icosahedron
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new IcosahedronBufferGeometry( 1, 0 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Icosahedron';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -119,27 +155,27 @@ Menubar.Add = function ( editor ) {
 
 
 	// Lathe
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
 
 	option.onClick( function () {
 
 
 		var points = [
 
-			new THREE.Vector2( 0, 0 ),
 
-			new THREE.Vector2( 0.4, 0 ),
 
-			new THREE.Vector2( 0.35, 0.05 ),
 
-			new THREE.Vector2( 0.1, 0.075 ),
 
-			new THREE.Vector2( 0.08, 0.1 ),
 
-			new THREE.Vector2( 0.08, 0.4 ),
 
-			new THREE.Vector2( 0.1, 0.42 ),
 
-			new THREE.Vector2( 0.14, 0.48 ),
 
-			new THREE.Vector2( 0.2, 0.5 ),
 
-			new THREE.Vector2( 0.25, 0.54 ),
 
-			new THREE.Vector2( 0.3, 1.2 )
 
+			new Vector2( 0, 0 ),
 
+			new Vector2( 0.4, 0 ),
 
+			new Vector2( 0.35, 0.05 ),
 
+			new Vector2( 0.1, 0.075 ),
 
+			new Vector2( 0.08, 0.1 ),
 
+			new Vector2( 0.08, 0.4 ),
 
+			new Vector2( 0.1, 0.42 ),
 
+			new Vector2( 0.14, 0.48 ),
 
+			new Vector2( 0.2, 0.5 ),
 
+			new Vector2( 0.25, 0.54 ),
 
+			new Vector2( 0.3, 1.2 )
 
 		];
 
 
-		var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
 
+		var geometry = new LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial( { side: DoubleSide } ) );
 
 		mesh.name = 'Lathe';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -149,13 +185,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Octahedron
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new OctahedronBufferGeometry( 1, 0 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Octahedron';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -165,14 +201,14 @@ Menubar.Add = function ( editor ) {
 
 
 	// Plane
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
 
-		var material = new THREE.MeshStandardMaterial();
 
-		var mesh = new THREE.Mesh( geometry, material );
 
+		var geometry = new PlaneBufferGeometry( 1, 1, 1, 1 );
 
+		var material = new MeshStandardMaterial();
 
+		var mesh = new Mesh( geometry, material );
 
 		mesh.name = 'Plane';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -182,13 +218,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Ring
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Ring';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -198,13 +234,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Sphere
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Sphere';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -214,12 +250,12 @@ Menubar.Add = function ( editor ) {
 
 
 	// Sprite
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
 
 	option.onClick( function () {
 
 
-		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
 
+		var sprite = new Sprite( new SpriteMaterial() );
 
 		sprite.name = 'Sprite';
 
 
 		editor.execute( new AddObjectCommand( editor, sprite ) );
 
@@ -229,13 +265,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Tetrahedron
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.TetrahedronBufferGeometry( 1, 0 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new TetrahedronBufferGeometry( 1, 0 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Tetrahedron';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -245,13 +281,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// Torus
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Torus';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -261,13 +297,13 @@ Menubar.Add = function ( editor ) {
 
 
 	// TorusKnot
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
 
 	option.onClick( function () {
 
 
-		var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'TorusKnot';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -277,20 +313,20 @@ Menubar.Add = function ( editor ) {
 
 
 	// Tube
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
 
 	option.onClick( function () {
 
 
-		var path = new THREE.CatmullRomCurve3( [
 
-			new THREE.Vector3( 2, 2, - 2 ),
 
-			new THREE.Vector3( 2, - 2, - 0.6666666666666667 ),
 
-			new THREE.Vector3( - 2, - 2, 0.6666666666666667 ),
 
-			new THREE.Vector3( - 2, 2, 2 )
 
+		var path = new CatmullRomCurve3( [
 
+			new Vector3( 2, 2, - 2 ),
 
+			new Vector3( 2, - 2, - 0.6666666666666667 ),
 
+			new Vector3( - 2, - 2, 0.6666666666666667 ),
 
+			new Vector3( - 2, 2, 2 )
 
 		] );
 
 
-		var geometry = new THREE.TubeBufferGeometry( path, 64, 1, 8, false );
 
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 
+		var geometry = new TubeBufferGeometry( path, 64, 1, 8, false );
 
+		var mesh = new Mesh( geometry, new MeshStandardMaterial() );
 
 		mesh.name = 'Tube';
 
 
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
@@ -301,7 +337,7 @@ Menubar.Add = function ( editor ) {
 
 	/*
 
 	// Teapot
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( 'Teapot' );
 
 	option.onClick( function () {
 
@@ -314,10 +350,10 @@ Menubar.Add = function ( editor ) {
 
 		var fitLid = false;
 
 		var blinnScale = true;
 
 
-		var material = new THREE.MeshStandardMaterial();
 
+		var material = new MeshStandardMaterial();
 
 
-		var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
 
-		var mesh = new THREE.Mesh( geometry, material );
 
+		var geometry = new TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
 
+		var mesh = new Mesh( geometry, material );
 
 		mesh.name = 'Teapot';
 
 
 		editor.addObject( mesh );
 
@@ -329,18 +365,18 @@ Menubar.Add = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// AmbientLight
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
 
 	option.onClick( function () {
 
 
 		var color = 0x222222;
 
 
-		var light = new THREE.AmbientLight( color );
 
+		var light = new AmbientLight( color );
 
 		light.name = 'AmbientLight';
 
 
 		editor.execute( new AddObjectCommand( editor, light ) );
 
@@ -350,7 +386,7 @@ Menubar.Add = function ( editor ) {
 
 
 	// DirectionalLight
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
 
 	option.onClick( function () {
 
@@ -358,7 +394,7 @@ Menubar.Add = function ( editor ) {
 
 		var color = 0xffffff;
 
 		var intensity = 1;
 
 
-		var light = new THREE.DirectionalLight( color, intensity );
 
+		var light = new DirectionalLight( color, intensity );
 
 		light.name = 'DirectionalLight';
 
 		light.target.name = 'DirectionalLight Target';
 
 
@@ -371,7 +407,7 @@ Menubar.Add = function ( editor ) {
 
 
 	// HemisphereLight
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
 
 	option.onClick( function () {
 
@@ -380,7 +416,7 @@ Menubar.Add = function ( editor ) {
 
 		var groundColor = 0xffaa00;
 
 		var intensity = 1;
 
 
-		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
 
+		var light = new HemisphereLight( skyColor, groundColor, intensity );
 
 		light.name = 'HemisphereLight';
 
 
 		light.position.set( 0, 10, 0 );
 
@@ -392,7 +428,7 @@ Menubar.Add = function ( editor ) {
 
 
 	// PointLight
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
 
 	option.onClick( function () {
 
@@ -401,7 +437,7 @@ Menubar.Add = function ( editor ) {
 
 		var intensity = 1;
 
 		var distance = 0;
 
 
-		var light = new THREE.PointLight( color, intensity, distance );
 
+		var light = new PointLight( color, intensity, distance );
 
 		light.name = 'PointLight';
 
 
 		editor.execute( new AddObjectCommand( editor, light ) );
 
@@ -411,7 +447,7 @@ Menubar.Add = function ( editor ) {
 
 
 	// SpotLight
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
 
 	option.onClick( function () {
 
@@ -422,7 +458,7 @@ Menubar.Add = function ( editor ) {
 
 		var angle = Math.PI * 0.1;
 
 		var penumbra = 0;
 
 
-		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
 
+		var light = new SpotLight( color, intensity, distance, angle, penumbra );
 
 		light.name = 'SpotLight';
 
 		light.target.name = 'SpotLight Target';
 
 
@@ -435,16 +471,16 @@ Menubar.Add = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// OrthographicCamera
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
 
 	option.onClick( function () {
 
 
-		var camera = new THREE.OrthographicCamera();
 
+		var camera = new OrthographicCamera();
 
 		camera.name = 'OrthographicCamera';
 
 
 		editor.execute( new AddObjectCommand( editor, camera ) );
 
@@ -454,12 +490,12 @@ Menubar.Add = function ( editor ) {
 
 
 	// PerspectiveCamera
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
 
 	option.onClick( function () {
 
 
-		var camera = new THREE.PerspectiveCamera();
 
+		var camera = new PerspectiveCamera();
 
 		camera.name = 'PerspectiveCamera';
 
 
 		editor.execute( new AddObjectCommand( editor, camera ) );
 
@@ -470,3 +506,5 @@ Menubar.Add = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { MenubarAdd };

+ 26 - 17
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 };

+ 14 - 6
editor/js/Menubar.Examples.js
Файл харах 

@@ -2,19 +2,25 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Menubar.Examples = function ( editor ) {
 
+import {
 
+	FileLoader
 
+} from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIRow } from './libs/ui.js';
 
+
 
+var MenubarExamples = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setClass( 'menu' );
 
 
-	var title = new UI.Panel();
 
+	var title = new UIPanel();
 
 	title.setClass( 'title' );
 
 	title.setTextContent( strings.getKey( 'menubar/examples' ) );
 
 	container.add( title );
 
 
-	var options = new UI.Panel();
 
+	var options = new UIPanel();
 
 	options.setClass( 'options' );
 
 	container.add( options );
 
 
@@ -28,7 +34,7 @@ Menubar.Examples = function ( editor ) {
 
 		{ title: 'menubar/examples/Shaders', file: 'shaders.app.json' }
 
 	];
 
 
-	var loader = new THREE.FileLoader();
 
+	var loader = new FileLoader();
 
 
 	for ( var i = 0; i < items.length; i ++ ) {
 
 
@@ -36,7 +42,7 @@ Menubar.Examples = function ( editor ) {
 
 
 			var item = items[ i ];
 
 
-			var option = new UI.Row();
 
+			var option = new UIRow();
 
 			option.setClass( 'option' );
 
 			option.setTextContent( strings.getKey( item.title ) );
 
 			option.onClick( function () {
 
@@ -62,3 +68,5 @@ Menubar.Examples = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { MenubarExamples };

+ 51 - 35
editor/js/Menubar.File.js
Файл харах 

@@ -2,7 +2,20 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Menubar.File = function ( editor ) {
 
+import {
 
+	FileLoader,
 
+	LoadingManager
 
+} from '../../build/three.module.js';
 
+
 
+import { ColladaExporter } from '../../examples/jsm/exporters/ColladaExporter.js';
 
+import { GLTFExporter } from '../../examples/jsm/exporters/GLTFExporter.js';
 
+import { OBJExporter } from '../../examples/jsm/exporters/OBJExporter.js';
 
+import { PLYExporter } from '../../examples/jsm/exporters/PLYExporter.js';
 
+import { STLExporter } from '../../examples/jsm/exporters/STLExporter.js';
 
+
 
+import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
 
+
 
+var MenubarFile = function ( editor ) {
 
 
 	var NUMBER_PRECISION = 6;
 
 
@@ -17,21 +30,21 @@ Menubar.File = function ( editor ) {
 
 	var config = editor.config;
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setClass( 'menu' );
 
 
-	var title = new UI.Panel();
 
+	var title = new UIPanel();
 
 	title.setClass( 'title' );
 
 	title.setTextContent( strings.getKey( 'menubar/file' ) );
 
 	container.add( title );
 
 
-	var options = new UI.Panel();
 
+	var options = new UIPanel();
 
 	options.setClass( 'options' );
 
 	container.add( options );
 
 
 	// New
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/new' ) );
 
 	option.onClick( function () {
 
@@ -47,7 +60,7 @@ Menubar.File = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// Import
 
 
@@ -58,7 +71,7 @@ Menubar.File = function ( editor ) {
 
 	var fileInput = document.createElement( 'input' );
 
 	fileInput.multiple = true;
 
 	fileInput.type = 'file';
 
-	fileInput.addEventListener( 'change', function ( event ) {
 
+	fileInput.addEventListener( 'change', function () {
 
 
 		editor.loader.loadFiles( fileInput.files );
 
 		form.reset();
 
@@ -66,7 +79,7 @@ Menubar.File = function ( editor ) {
 
 	} );
 
 	form.appendChild( fileInput );
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/import' ) );
 
 	option.onClick( function () {
 
@@ -78,11 +91,11 @@ Menubar.File = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// Export Geometry
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/geometry' ) );
 
 	option.onClick( function () {
 
@@ -125,7 +138,7 @@ Menubar.File = function ( editor ) {
 
 
 	// Export Object
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/object' ) );
 
 	option.onClick( function () {
 
@@ -159,7 +172,7 @@ Menubar.File = function ( editor ) {
 
 
 	// Export Scene
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/scene' ) );
 
 	option.onClick( function () {
 
@@ -184,16 +197,16 @@ Menubar.File = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// Export DAE
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/dae' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.ColladaExporter();
 
+		var exporter = new ColladaExporter();
 
 
 		exporter.parse( editor.scene, function ( result ) {
 
 
@@ -206,12 +219,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export GLB
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/glb' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.GLTFExporter();
 
+		var exporter = new GLTFExporter();
 
 
 		exporter.parse( editor.scene, function ( result ) {
 
 
@@ -219,6 +232,7 @@ Menubar.File = function ( editor ) {
 
 
 			// forceIndices: true, forcePowerOfTwoTextures: true
 
 			// to allow compatibility with facebook
 
+
 
 		}, { binary: true, forceIndices: true, forcePowerOfTwoTextures: true } );
 
 
 	} );
 
@@ -226,12 +240,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export GLTF
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/gltf' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.GLTFExporter();
 
+		var exporter = new GLTFExporter();
 
 
 		exporter.parse( editor.scene, function ( result ) {
 
 
@@ -245,7 +259,7 @@ Menubar.File = function ( editor ) {
 
 
 	// Export OBJ
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/obj' ) );
 
 	option.onClick( function () {
 
@@ -259,7 +273,7 @@ Menubar.File = function ( editor ) {
 
 
 		}
 
 
-		var exporter = new THREE.OBJExporter();
 
+		var exporter = new OBJExporter();
 
 
 		saveString( exporter.parse( object ), 'model.obj' );
 
 
@@ -268,12 +282,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export PLY (ASCII)
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/ply' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.PLYExporter();
 
+		var exporter = new PLYExporter();
 
 
 		exporter.parse( editor.scene, function ( result ) {
 
 
@@ -286,12 +300,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export PLY (Binary)
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/ply_binary' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.PLYExporter();
 
+		var exporter = new PLYExporter();
 
 
 		exporter.parse( editor.scene, function ( result ) {
 
 
@@ -304,12 +318,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export STL (ASCII)
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/stl' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.STLExporter();
 
+		var exporter = new STLExporter();
 
 
 		saveString( exporter.parse( editor.scene ), 'model.stl' );
 
 
@@ -318,12 +332,12 @@ Menubar.File = function ( editor ) {
 
 
 	// Export STL (Binary)
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/export/stl_binary' ) );
 
 	option.onClick( function () {
 
 
-		var exporter = new THREE.STLExporter();
 
+		var exporter = new STLExporter();
 
 
 		saveArrayBuffer( exporter.parse( editor.scene, { binary: true } ), 'model-binary.stl' );
 
 
@@ -332,11 +346,11 @@ Menubar.File = function ( editor ) {
 
 
 	//
 
 
-	options.add( new UI.HorizontalRule() );
 
+	options.add( new UIHorizontalRule() );
 
 
 	// Publish
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/file/publish' ) );
 
 	option.onClick( function () {
 
@@ -358,13 +372,13 @@ Menubar.File = function ( editor ) {
 
 
 		var title = config.getKey( 'project/title' );
 
 
-		var manager = new THREE.LoadingManager( function () {
 
+		var manager = new LoadingManager( function () {
 
 
 			save( zip.generate( { type: 'blob' } ), ( title !== '' ? title : 'untitled' ) + '.zip' );
 
 
 		} );
 
 
-		var loader = new THREE.FileLoader( manager );
 
+		var loader = new FileLoader( manager );
 
 		loader.load( 'js/libs/app/index.html', function ( content ) {
 
 
 			content = content.replace( '<!-- title -->', title );
 
@@ -400,9 +414,9 @@ Menubar.File = function ( editor ) {
 
 			zip.file( 'js/app.js', content );
 
 
 		} );
 
-		loader.load( '../build/three.min.js', function ( content ) {
 
+		loader.load( '../build/three.module.js', function ( content ) {
 
 
-			zip.file( 'js/three.min.js', content );
 
+			zip.file( 'js/three.module.js', content );
 
 
 		} );
 
 
@@ -437,3 +451,5 @@ Menubar.File = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { MenubarFile };

+ 10 - 6
editor/js/Menubar.Help.js
Файл харах 

@@ -2,25 +2,27 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Menubar.Help = function ( editor ) {
 
+import { UIPanel, UIRow } from './libs/ui.js';
 
+
 
+var MenubarHelp = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setClass( 'menu' );
 
 
-	var title = new UI.Panel();
 
+	var title = new UIPanel();
 
 	title.setClass( 'title' );
 
 	title.setTextContent( strings.getKey( 'menubar/help' ) );
 
 	container.add( title );
 
 
-	var options = new UI.Panel();
 
+	var options = new UIPanel();
 
 	options.setClass( 'options' );
 
 	container.add( options );
 
 
 	// Source code
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/help/source_code' ) );
 
 	option.onClick( function () {
 
@@ -32,7 +34,7 @@ Menubar.Help = function ( editor ) {
 
 
 	// About
 
 
-	var option = new UI.Row();
 
+	var option = new UIRow();
 
 	option.setClass( 'option' );
 
 	option.setTextContent( strings.getKey( 'menubar/help/about' ) );
 
 	option.onClick( function () {
 
@@ -45,3 +47,5 @@ Menubar.Help = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { MenubarHelp };

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

+ 13 - 4
editor/js/Menubar.Status.js
Файл харах 

@@ -2,14 +2,21 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Menubar.Status = function ( editor ) {
 
+import {
 
+	REVISION
 
+} from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIText } from './libs/ui.js';
 
+import { UIBoolean } from './libs/ui.three.js';
 
+
 
+var MenubarStatus = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setClass( 'menu right' );
 
 
-	var autosave = new UI.THREE.Boolean( editor.config.getKey( 'autosave' ), strings.getKey( 'menubar/status/autosave' ) );
 
+	var autosave = new UIBoolean( editor.config.getKey( 'autosave' ), strings.getKey( 'menubar/status/autosave' ) );
 
 	autosave.text.setColor( '#888' );
 
 	autosave.onChange( function () {
 
 
@@ -38,7 +45,7 @@ Menubar.Status = function ( editor ) {
 
 
 	} );
 
 
-	var version = new UI.Text( 'r' + THREE.REVISION );
 
+	var version = new UIText( 'r' + REVISION );
 
 	version.setClass( 'title' );
 
 	version.setOpacity( 0.5 );
 
 	container.add( version );
 
@@ -46,3 +53,5 @@ Menubar.Status = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { MenubarStatus };

+ 9 - 5
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 };

+ 20 - 9
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 };

+ 9 - 2
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 };

+ 46 - 11
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 };

+ 13 - 9
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 };

+ 28 - 22
editor/js/Sidebar.Geometry.BoxGeometry.js
Файл харах 

@@ -2,71 +2,77 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
+import { BoxBufferGeometry } from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UINumber, UIInteger } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryBoxGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// width
 
 
-	var widthRow = new UI.Row();
 
-	var width = new UI.Number( parameters.width ).onChange( update );
 
+	var widthRow = new UIRow();
 
+	var width = new UINumber( parameters.width ).onChange( update );
 
 
-	widthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setWidth( '90px' ) );
 
+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setWidth( '90px' ) );
 
 	widthRow.add( width );
 
 
 	container.add( widthRow );
 
 
 	// height
 
 
-	var heightRow = new UI.Row();
 
-	var height = new UI.Number( parameters.height ).onChange( update );
 
+	var heightRow = new UIRow();
 
+	var height = new UINumber( parameters.height ).onChange( update );
 
 
-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setWidth( '90px' ) );
 
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setWidth( '90px' ) );
 
 	heightRow.add( height );
 
 
 	container.add( heightRow );
 
 
 	// depth
 
 
-	var depthRow = new UI.Row();
 
-	var depth = new UI.Number( parameters.depth ).onChange( update );
 
+	var depthRow = new UIRow();
 
+	var depth = new UINumber( parameters.depth ).onChange( update );
 
 
-	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setWidth( '90px' ) );
 
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setWidth( '90px' ) );
 
 	depthRow.add( depth );
 
 
 	container.add( depthRow );
 
 
 	// widthSegments
 
 
-	var widthSegmentsRow = new UI.Row();
 
-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var widthSegmentsRow = new UIRow();
 
+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setWidth( '90px' ) );
 
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).setWidth( '90px' ) );
 
 	widthSegmentsRow.add( widthSegments );
 
 
 	container.add( widthSegmentsRow );
 
 
 	// heightSegments
 
 
-	var heightSegmentsRow = new UI.Row();
 
-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var heightSegmentsRow = new UIRow();
 
+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setWidth( '90px' ) );
 
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/heightseg' ) ).setWidth( '90px' ) );
 
 	heightSegmentsRow.add( heightSegments );
 
 
 	container.add( heightSegmentsRow );
 
 
 	// depthSegments
 
 
-	var depthSegmentsRow = new UI.Row();
 
-	var depthSegments = new UI.Integer( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var depthSegmentsRow = new UIRow();
 
+	var depthSegments = new UIInteger( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	depthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setWidth( '90px' ) );
 
+	depthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setWidth( '90px' ) );
 
 	depthSegmentsRow.add( depthSegments );
 
 
 	container.add( depthSegmentsRow );
 
@@ -75,7 +81,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new BoxBufferGeometry(
 
 			width.getValue(),
 
 			height.getValue(),
 
 			depth.getValue(),
 
@@ -90,4 +96,4 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.BoxBufferGeometry = Sidebar.Geometry.BoxGeometry;
 
+export { SidebarGeometryBoxGeometry };

+ 14 - 10
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 };

+ 27 - 18
editor/js/Sidebar.Geometry.CircleGeometry.js
Файл харах 

@@ -2,51 +2,60 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
+import {
 
+	CircleBufferGeometry,
 
+	Math as _Math
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryCircleGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// segments
 
 
-	var segmentsRow = new UI.Row();
 
-	var segments = new UI.Integer( parameters.segments ).setRange( 3, Infinity ).onChange( update );
 
+	var segmentsRow = new UIRow();
 
+	var segments = new UIInteger( parameters.segments ).setRange( 3, Infinity ).onChange( update );
 
 
-	segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setWidth( '90px' ) );
 
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setWidth( '90px' ) );
 
 	segmentsRow.add( segments );
 
 
 	container.add( segmentsRow );
 
 
 	// thetaStart
 
 
-	var thetaStartRow = new UI.Row();
 
-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaStartRow = new UIRow();
 
+	var thetaStart = new UINumber( parameters.thetaStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setWidth( '90px' ) );
 
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetastart' ) ).setWidth( '90px' ) );
 
 	thetaStartRow.add( thetaStart );
 
 
 	container.add( thetaStartRow );
 
 
 	// thetaLength
 
 
-	var thetaLengthRow = new UI.Row();
 
-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaLengthRow = new UIRow();
 
+	var thetaLength = new UINumber( parameters.thetaLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setWidth( '90px' ) );
 
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/thetalength' ) ).setWidth( '90px' ) );
 
 	thetaLengthRow.add( thetaLength );
 
 
 	container.add( thetaLengthRow );
 
@@ -55,11 +64,11 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new CircleBufferGeometry(
 
 			radius.getValue(),
 
 			segments.getValue(),
 
-			thetaStart.getValue() * THREE.Math.DEG2RAD,
 
-			thetaLength.getValue() * THREE.Math.DEG2RAD
 
+			thetaStart.getValue() * _Math.DEG2RAD,
 
+			thetaLength.getValue() * _Math.DEG2RAD
 
 		) ) );
 
 
 	}
 
@@ -68,4 +77,4 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.CircleBufferGeometry = Sidebar.Geometry.CircleGeometry;
 
+export { SidebarGeometryCircleGeometry };

+ 30 - 22
editor/js/Sidebar.Geometry.CylinderGeometry.js
Файл харах 

@@ -2,71 +2,79 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
+import {
 
+	CylinderBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UICheckbox, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryCylinderGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radiusTop
 
 
-	var radiusTopRow = new UI.Row();
 
-	var radiusTop = new UI.Number( parameters.radiusTop ).onChange( update );
 
+	var radiusTopRow = new UIRow();
 
+	var radiusTop = new UINumber( parameters.radiusTop ).onChange( update );
 
 
-	radiusTopRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setWidth( '90px' ) );
 
+	radiusTopRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setWidth( '90px' ) );
 
 	radiusTopRow.add( radiusTop );
 
 
 	container.add( radiusTopRow );
 
 
 	// radiusBottom
 
 
-	var radiusBottomRow = new UI.Row();
 
-	var radiusBottom = new UI.Number( parameters.radiusBottom ).onChange( update );
 
+	var radiusBottomRow = new UIRow();
 
+	var radiusBottom = new UINumber( parameters.radiusBottom ).onChange( update );
 
 
-	radiusBottomRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setWidth( '90px' ) );
 
+	radiusBottomRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setWidth( '90px' ) );
 
 	radiusBottomRow.add( radiusBottom );
 
 
 	container.add( radiusBottomRow );
 
 
 	// height
 
 
-	var heightRow = new UI.Row();
 
-	var height = new UI.Number( parameters.height ).onChange( update );
 
+	var heightRow = new UIRow();
 
+	var height = new UINumber( parameters.height ).onChange( update );
 
 
-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setWidth( '90px' ) );
 
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setWidth( '90px' ) );
 
 	heightRow.add( height );
 
 
 	container.add( heightRow );
 
 
 	// radialSegments
 
 
-	var radialSegmentsRow = new UI.Row();
 
-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var radialSegmentsRow = new UIRow();
 
+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
 	radialSegmentsRow.add( radialSegments );
 
 
 	container.add( radialSegmentsRow );
 
 
 	// heightSegments
 
 
-	var heightSegmentsRow = new UI.Row();
 
-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var heightSegmentsRow = new UIRow();
 
+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
 	heightSegmentsRow.add( heightSegments );
 
 
 	container.add( heightSegmentsRow );
 
 
 	// openEnded
 
 
-	var openEndedRow = new UI.Row();
 
-	var openEnded = new UI.Checkbox( parameters.openEnded ).onChange( update );
 
+	var openEndedRow = new UIRow();
 
+	var openEnded = new UICheckbox( parameters.openEnded ).onChange( update );
 
 
-	openEndedRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setWidth( '90px' ) );
 
+	openEndedRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setWidth( '90px' ) );
 
 	openEndedRow.add( openEnded );
 
 
 	container.add( openEndedRow );
 
@@ -75,7 +83,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new CylinderBufferGeometry(
 
 			radiusTop.getValue(),
 
 			radiusBottom.getValue(),
 
 			height.getValue(),
 
@@ -90,4 +98,4 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.CylinderBufferGeometry = Sidebar.Geometry.CylinderGeometry;
 
+export { SidebarGeometryCylinderGeometry };

+ 18 - 10
editor/js/Sidebar.Geometry.DodecahedronGeometry.js
Файл харах 

@@ -2,31 +2,39 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
+import {
 
+	DodecahedronBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryDodecahedronGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// detail
 
 
-	var detailRow = new UI.Row();
 
-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
+	var detailRow = new UIRow();
 
+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
 
-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/dodecahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
 	detailRow.add( detail );
 
 
 	container.add( detailRow );
 
@@ -35,7 +43,7 @@ Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new DodecahedronBufferGeometry(
 
 			radius.getValue(),
 
 			detail.getValue()
 
 		) ) );
 
@@ -46,4 +54,4 @@ Sidebar.Geometry.DodecahedronGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.DodecahedronBufferGeometry = Sidebar.Geometry.DodecahedronGeometry;
 
+export { SidebarGeometryDodecahedronGeometry };

+ 39 - 30
editor/js/Sidebar.Geometry.ExtrudeGeometry.js
Файл харах 

@@ -2,11 +2,20 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
-Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
+import {
 
+	ExtrudeBufferGeometry,
 
+	ShapeBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UICheckbox, UIButton, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryExtrudeGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
@@ -22,40 +31,40 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 
 	// curveSegments
 
 
-	var curveSegmentsRow = new UI.Row();
 
-	var curveSegments = new UI.Integer( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
 
+	var curveSegmentsRow = new UIRow();
 
+	var curveSegments = new UIInteger( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
 
 
-	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
 
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
 
 	curveSegmentsRow.add( curveSegments );
 
 
 	container.add( curveSegmentsRow );
 
 
 	// steps
 
 
-	var stepsRow = new UI.Row();
 
-	var steps = new UI.Integer( options.steps ).onChange( update ).setRange( 1, Infinity );
 
+	var stepsRow = new UIRow();
 
+	var steps = new UIInteger( options.steps ).onChange( update ).setRange( 1, Infinity );
 
 
-	stepsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
 
+	stepsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
 
 	stepsRow.add( steps );
 
 
 	container.add( stepsRow );
 
 
 	// depth
 
 
-	var depthRow = new UI.Row();
 
-	var depth = new UI.Number( options.depth ).onChange( update ).setRange( 1, Infinity );
 
+	var depthRow = new UIRow();
 
+	var depth = new UINumber( options.depth ).onChange( update ).setRange( 1, Infinity );
 
 
-	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
 
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
 
 	depthRow.add( depth );
 
 
 	container.add( depthRow );
 
 
 	// enabled
 
 
-	var enabledRow = new UI.Row();
 
-	var enabled = new UI.Checkbox( options.bevelEnabled ).onChange( update );
 
+	var enabledRow = new UIRow();
 
+	var enabled = new UICheckbox( options.bevelEnabled ).onChange( update );
 
 
-	enabledRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
 
+	enabledRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
 
 	enabledRow.add( enabled );
 
 
 	container.add( enabledRow );
 
@@ -64,54 +73,54 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 
 		// thickness
 
 
-		var thicknessRow = new UI.Row();
 
-		var thickness = new UI.Number( options.bevelThickness ).onChange( update );
 
+		var thicknessRow = new UIRow();
 
+		var thickness = new UINumber( options.bevelThickness ).onChange( update );
 
 
-		thicknessRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
 
+		thicknessRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
 
 		thicknessRow.add( thickness );
 
 
 		container.add( thicknessRow );
 
 
 		// size
 
 
-		var sizeRow = new UI.Row();
 
-		var size = new UI.Number( options.bevelSize ).onChange( update );
 
+		var sizeRow = new UIRow();
 
+		var size = new UINumber( options.bevelSize ).onChange( update );
 
 
-		sizeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
 
+		sizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
 
 		sizeRow.add( size );
 
 
 		container.add( sizeRow );
 
 
 		// offset
 
 
-		var offsetRow = new UI.Row();
 
-		var offset = new UI.Number( options.bevelOffset ).onChange( update );
 
+		var offsetRow = new UIRow();
 
+		var offset = new UINumber( options.bevelOffset ).onChange( update );
 
 
-		offsetRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
 
+		offsetRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
 
 		offsetRow.add( offset );
 
 
 		container.add( offsetRow );
 
 
 		// segments
 
 
-		var segmentsRow = new UI.Row();
 
-		var segments = new UI.Integer( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
 
+		var segmentsRow = new UIRow();
 
+		var segments = new UIInteger( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
 
 
-		segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
 
+		segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
 
 		segmentsRow.add( segments );
 
 
 		container.add( segmentsRow );
 
 
 	}
 
 
-	var button = new UI.Button( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
 
+	var button = new UIButton( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
 
 	container.add( button );
 
 
 	//
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new ExtrudeBufferGeometry(
 
 			parameters.shapes,
 
 			{
 
 				curveSegments: curveSegments.getValue(),
 
@@ -129,7 +138,7 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 
 	function toShape() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeBufferGeometry(
 
+		editor.execute( new SetGeometryCommand( editor, object, new ShapeBufferGeometry(
 
 			parameters.shapes,
 
 			options.curveSegments
 
 		) ) );
 
@@ -140,4 +149,4 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.ExtrudeBufferGeometry = Sidebar.Geometry.ExtrudeGeometry;
 
+export { SidebarGeometryExtrudeGeometry };

+ 12 - 8
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 };

+ 22 - 10
editor/js/Sidebar.Geometry.IcosahedronGeometry.js
Файл харах 

@@ -2,31 +2,41 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
+import {
 
+	IcosahedronBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryIcosahedronGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var signals = editor.signals;
 
+
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/icosahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// detail
 
 
-	var detailRow = new UI.Row();
 
-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
+	var detailRow = new UIRow();
 
+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
 
-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/icosahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
 	detailRow.add( detail );
 
 
 	container.add( detailRow );
 
@@ -35,15 +45,17 @@ Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new IcosahedronBufferGeometry(
 
 			radius.getValue(),
 
 			detail.getValue()
 
 		) ) );
 
 
+		signals.objectChanged.dispatch( object );
 
+
 
 	}
 
 
 	return container;
 
 
 };
 
 
-Sidebar.Geometry.IcosahedronBufferGeometry = Sidebar.Geometry.IcosahedronGeometry;
 
+export { SidebarGeometryIcosahedronGeometry };

+ 25 - 16
editor/js/Sidebar.Geometry.LatheGeometry.js
Файл харах 

@@ -2,58 +2,67 @@
 
  * @author rfm1201
 
  */
 
 
-Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
+import {
 
+	LatheBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+import { UIPoints2 } from './libs/ui.three.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryLatheGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// segments
 
 
-	var segmentsRow = new UI.Row();
 
-	var segments = new UI.Integer( parameters.segments ).onChange( update );
 
+	var segmentsRow = new UIRow();
 
+	var segments = new UIInteger( parameters.segments ).onChange( update );
 
 
-	segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/segments' ) ).setWidth( '90px' ) );
 
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/segments' ) ).setWidth( '90px' ) );
 
 	segmentsRow.add( segments );
 
 
 	container.add( segmentsRow );
 
 
 	// phiStart
 
 
-	var phiStartRow = new UI.Row();
 
-	var phiStart = new UI.Number( parameters.phiStart * 180 / Math.PI ).onChange( update );
 
+	var phiStartRow = new UIRow();
 
+	var phiStart = new UINumber( parameters.phiStart * 180 / Math.PI ).onChange( update );
 
 
-	phiStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setWidth( '90px' ) );
 
+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setWidth( '90px' ) );
 
 	phiStartRow.add( phiStart );
 
 
 	container.add( phiStartRow );
 
 
 	// phiLength
 
 
-	var phiLengthRow = new UI.Row();
 
-	var phiLength = new UI.Number( parameters.phiLength * 180 / Math.PI ).onChange( update );
 
+	var phiLengthRow = new UIRow();
 
+	var phiLength = new UINumber( parameters.phiLength * 180 / Math.PI ).onChange( update );
 
 
-	phiLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setWidth( '90px' ) );
 
+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setWidth( '90px' ) );
 
 	phiLengthRow.add( phiLength );
 
 
 	container.add( phiLengthRow );
 
 
 	// points
 
 
-	var pointsRow = new UI.Row();
 
-	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
 
+	var pointsRow = new UIRow();
 
+	pointsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
 
 
-	var points = new UI.Points2().setValue( parameters.points ).onChange( update );
 
+	var points = new UIPoints2().setValue( parameters.points ).onChange( update );
 
 	pointsRow.add( points );
 
 
 	container.add( pointsRow );
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new LatheBufferGeometry(
 
 			points.getValue(),
 
 			segments.getValue(),
 
 			phiStart.getValue() / 180 * Math.PI,
 
@@ -66,4 +75,4 @@ Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.LatheBufferGeometry = Sidebar.Geometry.LatheGeometry;
 
+export { SidebarGeometryLatheGeometry };

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

+ 22 - 10
editor/js/Sidebar.Geometry.OctahedronGeometry.js
Файл харах 

@@ -2,31 +2,41 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
-Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
 
+import {
 
+	OctahedronBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryOctahedronGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var signals = editor.signals;
 
+
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// detail
 
 
-	var detailRow = new UI.Row();
 
-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
+	var detailRow = new UIRow();
 
+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
 
-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
 	detailRow.add( detail );
 
 
 	container.add( detailRow );
 
@@ -36,15 +46,17 @@ Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new OctahedronBufferGeometry(
 
 			radius.getValue(),
 
 			detail.getValue()
 
 		) ) );
 
 
+		signals.objectChanged.dispatch( object );
 
+
 
 	}
 
 
 	return container;
 
 
 };
 
 
-Sidebar.Geometry.OctahedronBufferGeometry = Sidebar.Geometry.OctahedronGeometry;
 
+export { SidebarGeometryOctahedronGeometry };

+ 24 - 16
editor/js/Sidebar.Geometry.PlaneGeometry.js
Файл харах 

@@ -2,51 +2,59 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
+import {
 
+	PlaneBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryPlaneGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// width
 
 
-	var widthRow = new UI.Row();
 
-	var width = new UI.Number( parameters.width ).onChange( update );
 
+	var widthRow = new UIRow();
 
+	var width = new UINumber( parameters.width ).onChange( update );
 
 
-	widthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/width' ) ).setWidth( '90px' ) );
 
+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/width' ) ).setWidth( '90px' ) );
 
 	widthRow.add( width );
 
 
 	container.add( widthRow );
 
 
 	// height
 
 
-	var heightRow = new UI.Row();
 
-	var height = new UI.Number( parameters.height ).onChange( update );
 
+	var heightRow = new UIRow();
 
+	var height = new UINumber( parameters.height ).onChange( update );
 
 
-	heightRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/height' ) ).setWidth( '90px' ) );
 
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/height' ) ).setWidth( '90px' ) );
 
 	heightRow.add( height );
 
 
 	container.add( heightRow );
 
 
 	// widthSegments
 
 
-	var widthSegmentsRow = new UI.Row();
 
-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var widthSegmentsRow = new UIRow();
 
+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/widthsegments' ) ).setWidth( '90px' ) );
 
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/widthsegments' ) ).setWidth( '90px' ) );
 
 	widthSegmentsRow.add( widthSegments );
 
 
 	container.add( widthSegmentsRow );
 
 
 	// heightSegments
 
 
-	var heightSegmentsRow = new UI.Row();
 
-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var heightSegmentsRow = new UIRow();
 
+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/plane_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
 	heightSegmentsRow.add( heightSegments );
 
 
 	container.add( heightSegmentsRow );
 
@@ -56,7 +64,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new PlaneBufferGeometry(
 
 			width.getValue(),
 
 			height.getValue(),
 
 			widthSegments.getValue(),
 
@@ -69,4 +77,4 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.PlaneBufferGeometry = Sidebar.Geometry.PlaneGeometry;
 
+export { SidebarGeometryPlaneGeometry };

+ 30 - 22
editor/js/Sidebar.Geometry.RingGeometry.js
Файл харах 

@@ -2,71 +2,79 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
-Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
+import {
 
+	RingBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryRingGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// innerRadius
 
 
-	var innerRadiusRow = new UI.Row();
 
-	var innerRadius = new UI.Number( parameters.innerRadius ).onChange( update );
 
+	var innerRadiusRow = new UIRow();
 
+	var innerRadius = new UINumber( parameters.innerRadius ).onChange( update );
 
 
-	innerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setWidth( '90px' ) );
 
+	innerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setWidth( '90px' ) );
 
 	innerRadiusRow.add( innerRadius );
 
 
 	container.add( innerRadiusRow );
 
 
 	// outerRadius
 
 
-	var outerRadiusRow = new UI.Row();
 
-	var outerRadius = new UI.Number( parameters.outerRadius ).onChange( update );
 
+	var outerRadiusRow = new UIRow();
 
+	var outerRadius = new UINumber( parameters.outerRadius ).onChange( update );
 
 
-	outerRadiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setWidth( '90px' ) );
 
+	outerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setWidth( '90px' ) );
 
 	outerRadiusRow.add( outerRadius );
 
 
 	container.add( outerRadiusRow );
 
 
 	// thetaSegments
 
 
-	var thetaSegmentsRow = new UI.Row();
 
-	var thetaSegments = new UI.Integer( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
 
+	var thetaSegmentsRow = new UIRow();
 
+	var thetaSegments = new UIInteger( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
 
 
-	thetaSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setWidth( '90px' ) );
 
+	thetaSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setWidth( '90px' ) );
 
 	thetaSegmentsRow.add( thetaSegments );
 
 
 	container.add( thetaSegmentsRow );
 
 
 	// phiSegments
 
 
-	var phiSegmentsRow = new UI.Row();
 
-	var phiSegments = new UI.Integer( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
 
+	var phiSegmentsRow = new UIRow();
 
+	var phiSegments = new UIInteger( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
 
 
-	phiSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setWidth( '90px' ) );
 
+	phiSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setWidth( '90px' ) );
 
 	phiSegmentsRow.add( phiSegments );
 
 
 	container.add( phiSegmentsRow );
 
 
 	// thetaStart
 
 
-	var thetaStartRow = new UI.Row();
 
-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaStartRow = new UIRow();
 
+	var thetaStart = new UINumber( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setWidth( '90px' ) );
 
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setWidth( '90px' ) );
 
 	thetaStartRow.add( thetaStart );
 
 
 	container.add( thetaStartRow );
 
 
 	// thetaLength
 
 
-	var thetaLengthRow = new UI.Row();
 
-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaLengthRow = new UIRow();
 
+	var thetaLength = new UINumber( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setWidth( '90px' ) );
 
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setWidth( '90px' ) );
 
 	thetaLengthRow.add( thetaLength );
 
 
 	container.add( thetaLengthRow );
 
@@ -75,7 +83,7 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new RingBufferGeometry(
 
 			innerRadius.getValue(),
 
 			outerRadius.getValue(),
 
 			thetaSegments.getValue(),
 
@@ -90,4 +98,4 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.RingBufferGeometry = Sidebar.Geometry.RingGeometry;
 
+export { SidebarGeometryRingGeometry };

+ 18 - 9
editor/js/Sidebar.Geometry.ShapeGeometry.js
Файл харах 

@@ -2,34 +2,43 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
-Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
+import {
 
+	ExtrudeBufferGeometry,
 
+	ShapeBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UIButton } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryShapeGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// curveSegments
 
 
-	var curveSegmentsRow = new UI.Row();
 
-	var curveSegments = new UI.Integer( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
 
+	var curveSegmentsRow = new UIRow();
 
+	var curveSegments = new UIInteger( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
 
 
-	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
 
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
 
 	curveSegmentsRow.add( curveSegments );
 
 
 	container.add( curveSegmentsRow );
 
 
 	// to extrude
 
-	var button = new UI.Button( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
 
+	var button = new UIButton( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
 
 	container.add( button );
 
 
 	//
 
 
 	function changeShape() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new ShapeBufferGeometry(
 
 			parameters.shapes,
 
 			curveSegments.getValue()
 
 		) ) );
 
@@ -38,7 +47,7 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
 
 	function toExtrude() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeBufferGeometry(
 
+		editor.execute( new SetGeometryCommand( editor, object, new ExtrudeBufferGeometry(
 
 			parameters.shapes, {
 
 				curveSegments: curveSegments.getValue()
 
 			}
 
@@ -50,4 +59,4 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.ShapeBufferGeometry = Sidebar.Geometry.ShapeGeometry;
 
+export { SidebarGeometryShapeGeometry };

+ 38 - 29
editor/js/Sidebar.Geometry.SphereGeometry.js
Файл харах 

@@ -2,81 +2,90 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
+import {
 
+	Math as _Math,
 
+	SphereBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometrySphereGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// widthSegments
 
 
-	var widthSegmentsRow = new UI.Row();
 
-	var widthSegments = new UI.Integer( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var widthSegmentsRow = new UIRow();
 
+	var widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	widthSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/widthsegments' ) ).setWidth( '90px' ) );
 
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/widthsegments' ) ).setWidth( '90px' ) );
 
 	widthSegmentsRow.add( widthSegments );
 
 
 	container.add( widthSegmentsRow );
 
 
 	// heightSegments
 
 
-	var heightSegmentsRow = new UI.Row();
 
-	var heightSegments = new UI.Integer( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var heightSegmentsRow = new UIRow();
 
+	var heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	heightSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/heightsegments' ) ).setWidth( '90px' ) );
 
 	heightSegmentsRow.add( heightSegments );
 
 
 	container.add( heightSegmentsRow );
 
 
 	// phiStart
 
 
-	var phiStartRow = new UI.Row();
 
-	var phiStart = new UI.Number( parameters.phiStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var phiStartRow = new UIRow();
 
+	var phiStart = new UINumber( parameters.phiStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	phiStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/phistart' ) ).setWidth( '90px' ) );
 
+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/phistart' ) ).setWidth( '90px' ) );
 
 	phiStartRow.add( phiStart );
 
 
 	container.add( phiStartRow );
 
 
 	// phiLength
 
 
-	var phiLengthRow = new UI.Row();
 
-	var phiLength = new UI.Number( parameters.phiLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var phiLengthRow = new UIRow();
 
+	var phiLength = new UINumber( parameters.phiLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	phiLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/philength' ) ).setWidth( '90px' ) );
 
+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/philength' ) ).setWidth( '90px' ) );
 
 	phiLengthRow.add( phiLength );
 
 
 	container.add( phiLengthRow );
 
 
 	// thetaStart
 
 
-	var thetaStartRow = new UI.Row();
 
-	var thetaStart = new UI.Number( parameters.thetaStart * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaStartRow = new UIRow();
 
+	var thetaStart = new UINumber( parameters.thetaStart * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaStartRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/thetastart' ) ).setWidth( '90px' ) );
 
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetastart' ) ).setWidth( '90px' ) );
 
 	thetaStartRow.add( thetaStart );
 
 
 	container.add( thetaStartRow );
 
 
 	// thetaLength
 
 
-	var thetaLengthRow = new UI.Row();
 
-	var thetaLength = new UI.Number( parameters.thetaLength * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var thetaLengthRow = new UIRow();
 
+	var thetaLength = new UINumber( parameters.thetaLength * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	thetaLengthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/sphere_geometry/thetalength' ) ).setWidth( '90px' ) );
 
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetalength' ) ).setWidth( '90px' ) );
 
 	thetaLengthRow.add( thetaLength );
 
 
 	container.add( thetaLengthRow );
 
@@ -86,14 +95,14 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new SphereBufferGeometry(
 
 			radius.getValue(),
 
 			widthSegments.getValue(),
 
 			heightSegments.getValue(),
 
-			phiStart.getValue() * THREE.Math.DEG2RAD,
 
-			phiLength.getValue() * THREE.Math.DEG2RAD,
 
-			thetaStart.getValue() * THREE.Math.DEG2RAD,
 
-			thetaLength.getValue() * THREE.Math.DEG2RAD
 
+			phiStart.getValue() * _Math.DEG2RAD,
 
+			phiLength.getValue() * _Math.DEG2RAD,
 
+			thetaStart.getValue() * _Math.DEG2RAD,
 
+			thetaLength.getValue() * _Math.DEG2RAD
 
 		) ) );
 
 
 	}
 
@@ -102,4 +111,4 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.SphereBufferGeometry = Sidebar.Geometry.SphereGeometry;
 
+export { SidebarGeometrySphereGeometry };

+ 30 - 24
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 };

+ 21 - 10
editor/js/Sidebar.Geometry.TetrahedronGeometry.js
Файл харах 

@@ -2,32 +2,41 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
+import {
 
+	TetrahedronBufferGeometry
 
+} from '../../build/three.module.js';
 
 
-Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryTetrahedronGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var signals = editor.signals;
 
+
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// detail
 
 
-	var detailRow = new UI.Row();
 
-	var detail = new UI.Integer( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
+	var detailRow = new UIRow();
 
+	var detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
 
 
-	detailRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/tetrahedron_geometry/detail' ) ).setWidth( '90px' ) );
 
 	detailRow.add( detail );
 
 
 	container.add( detailRow );
 
@@ -37,15 +46,17 @@ Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new TetrahedronBufferGeometry(
 
 			radius.getValue(),
 
 			detail.getValue()
 
 		) ) );
 
 
+		signals.objectChanged.dispatch( object );
 
+
 
 	}
 
 
 	return container;
 
 
 };
 
 
-Sidebar.Geometry.TetrahedronBufferGeometry = Sidebar.Geometry.TetrahedronGeometry;
 
+export { SidebarGeometryTetrahedronGeometry };

+ 29 - 20
editor/js/Sidebar.Geometry.TorusGeometry.js
Файл харах 

@@ -2,61 +2,70 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
+import {
 
+	Math as _Math,
 
+	TorusBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryTorusGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// tube
 
 
-	var tubeRow = new UI.Row();
 
-	var tube = new UI.Number( parameters.tube ).onChange( update );
 
+	var tubeRow = new UIRow();
 
+	var tube = new UINumber( parameters.tube ).onChange( update );
 
 
-	tubeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/tube' ) ).setWidth( '90px' ) );
 
+	tubeRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tube' ) ).setWidth( '90px' ) );
 
 	tubeRow.add( tube );
 
 
 	container.add( tubeRow );
 
 
 	// radialSegments
 
 
-	var radialSegmentsRow = new UI.Row();
 
-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var radialSegmentsRow = new UIRow();
 
+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
 	radialSegmentsRow.add( radialSegments );
 
 
 	container.add( radialSegmentsRow );
 
 
 	// tubularSegments
 
 
-	var tubularSegmentsRow = new UI.Row();
 
-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var tubularSegmentsRow = new UIRow();
 
+	var tubularSegments = new UIInteger( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
 	tubularSegmentsRow.add( tubularSegments );
 
 
 	container.add( tubularSegmentsRow );
 
 
 	// arc
 
 
-	var arcRow = new UI.Row();
 
-	var arc = new UI.Number( parameters.arc * THREE.Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
+	var arcRow = new UIRow();
 
+	var arc = new UINumber( parameters.arc * _Math.RAD2DEG ).setStep( 10 ).onChange( update );
 
 
-	arcRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torus_geometry/arc' ) ).setWidth( '90px' ) );
 
+	arcRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/arc' ) ).setWidth( '90px' ) );
 
 	arcRow.add( arc );
 
 
 	container.add( arcRow );
 
@@ -66,12 +75,12 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new TorusBufferGeometry(
 
 			radius.getValue(),
 
 			tube.getValue(),
 
 			radialSegments.getValue(),
 
 			tubularSegments.getValue(),
 
-			arc.getValue() * THREE.Math.DEG2RAD
 
+			arc.getValue() * _Math.DEG2RAD
 
 		) ) );
 
 
 	}
 
@@ -80,4 +89,4 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.TorusBufferGeometry = Sidebar.Geometry.TorusGeometry;
 
+export { SidebarGeometryTorusGeometry };

+ 30 - 22
editor/js/Sidebar.Geometry.TorusKnotGeometry.js
Файл харах 

@@ -2,71 +2,79 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
+import {
 
+	TorusKnotBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryTorusKnotGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// tube
 
 
-	var tubeRow = new UI.Row();
 
-	var tube = new UI.Number( parameters.tube ).onChange( update );
 
+	var tubeRow = new UIRow();
 
+	var tube = new UINumber( parameters.tube ).onChange( update );
 
 
-	tubeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tube' ) ).setWidth( '90px' ) );
 
+	tubeRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tube' ) ).setWidth( '90px' ) );
 
 	tubeRow.add( tube );
 
 
 	container.add( tubeRow );
 
 
 	// tubularSegments
 
 
-	var tubularSegmentsRow = new UI.Row();
 
-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var tubularSegmentsRow = new UIRow();
 
+	var tubularSegments = new UIInteger( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
 	tubularSegmentsRow.add( tubularSegments );
 
 
 	container.add( tubularSegmentsRow );
 
 
 	// radialSegments
 
 
-	var radialSegmentsRow = new UI.Row();
 
-	var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
+	var radialSegmentsRow = new UIRow();
 
+	var radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
 
-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
 	radialSegmentsRow.add( radialSegments );
 
 
 	container.add( radialSegmentsRow );
 
 
 	// p
 
 
-	var pRow = new UI.Row();
 
-	var p = new UI.Number( parameters.p ).onChange( update );
 
+	var pRow = new UIRow();
 
+	var p = new UINumber( parameters.p ).onChange( update );
 
 
-	pRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/p' ) ).setWidth( '90px' ) );
 
+	pRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/p' ) ).setWidth( '90px' ) );
 
 	pRow.add( p );
 
 
 	container.add( pRow );
 
 
 	// q
 
 
-	var qRow = new UI.Row();
 
-	var q = new UI.Number( parameters.q ).onChange( update );
 
+	var qRow = new UIRow();
 
+	var q = new UINumber( parameters.q ).onChange( update );
 
 
-	qRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/torusKnot_geometry/q' ) ).setWidth( '90px' ) );
 
+	qRow.add( new UIText( strings.getKey( 'sidebar/geometry/torusKnot_geometry/q' ) ).setWidth( '90px' ) );
 
 	qRow.add( q );
 
 
 	container.add( qRow );
 
@@ -76,7 +84,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 
 	function update() {
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
+		editor.execute( new SetGeometryCommand( editor, object, new TorusKnotBufferGeometry(
 
 			radius.getValue(),
 
 			tube.getValue(),
 
 			tubularSegments.getValue(),
 
@@ -91,4 +99,4 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.TorusKnotBufferGeometry = Sidebar.Geometry.TorusKnotGeometry;
 
+export { SidebarGeometryTorusKnotGeometry };

+ 36 - 26
editor/js/Sidebar.Geometry.TubeGeometry.js
Файл харах 

@@ -2,80 +2,90 @@
 
  * @author Temdog007 / http://github.com/Temdog007
 
  */
 
 
-Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
+import {
 
+	CatmullRomCurve3,
 
+	TubeBufferGeometry
 
+} from '../../build/three.module.js';
 
+
 
+import { UIRow, UIText, UIInteger, UISelect, UICheckbox, UINumber } from './libs/ui.js';
 
+import { UIPoints3 } from './libs/ui.three.js';
 
+
 
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
 
+
 
+var SidebarGeometryTubeGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 
 
-	var container = new UI.Row();
 
+	var container = new UIRow();
 
 
 	var geometry = object.geometry;
 
 	var parameters = geometry.parameters;
 
 
 	// points
 
 
-	var pointsRow = new UI.Row();
 
-	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
 
+	var pointsRow = new UIRow();
 
+	pointsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
 
 
-	var points = new UI.Points3().setValue( parameters.path.points ).onChange( update );
 
+	var points = new UIPoints3().setValue( parameters.path.points ).onChange( update );
 
 	pointsRow.add( points );
 
 
 	container.add( pointsRow );
 
 
 	// radius
 
 
-	var radiusRow = new UI.Row();
 
-	var radius = new UI.Number( parameters.radius ).onChange( update );
 
+	var radiusRow = new UIRow();
 
+	var radius = new UINumber( parameters.radius ).onChange( update );
 
 
-	radiusRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/radius' ) ).setWidth( '90px' ) );
 
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/radius' ) ).setWidth( '90px' ) );
 
 	radiusRow.add( radius );
 
 
 	container.add( radiusRow );
 
 
 	// tubularSegments
 
 
-	var tubularSegmentsRow = new UI.Row();
 
-	var tubularSegments = new UI.Integer( parameters.tubularSegments ).onChange( update );
 
+	var tubularSegmentsRow = new UIRow();
 
+	var tubularSegments = new UIInteger( parameters.tubularSegments ).onChange( update );
 
 
-	tubularSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/tubularsegments' ) ).setWidth( '90px' ) );
 
 	tubularSegmentsRow.add( tubularSegments );
 
 
 	container.add( tubularSegmentsRow );
 
 
 	// radialSegments
 
 
-	var radialSegmentsRow = new UI.Row();
 
-	var radialSegments = new UI.Integer( parameters.radialSegments ).onChange( update );
 
+	var radialSegmentsRow = new UIRow();
 
+	var radialSegments = new UIInteger( parameters.radialSegments ).onChange( update );
 
 
-	radialSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/radialsegments' ) ).setWidth( '90px' ) );
 
 	radialSegmentsRow.add( radialSegments );
 
 
 	container.add( radialSegmentsRow );
 
 
 	// closed
 
 
-	var closedRow = new UI.Row();
 
-	var closed = new UI.Checkbox( parameters.closed ).onChange( update );
 
+	var closedRow = new UIRow();
 
+	var closed = new UICheckbox( parameters.closed ).onChange( update );
 
 
-	closedRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/closed' ) ).setWidth( '90px' ) );
 
+	closedRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/closed' ) ).setWidth( '90px' ) );
 
 	closedRow.add( closed );
 
 
 	container.add( closedRow );
 
 
 	// curveType
 
 
-	var curveTypeRow = new UI.Row();
 
-	var curveType = new UI.Select().setOptions( { centripetal: 'centripetal', chordal: 'chordal', catmullrom: 'catmullrom' } ).setValue( parameters.path.curveType ).onChange( update );
 
+	var curveTypeRow = new UIRow();
 
+	var curveType = new UISelect().setOptions( { centripetal: 'centripetal', chordal: 'chordal', catmullrom: 'catmullrom' } ).setValue( parameters.path.curveType ).onChange( update );
 
 
-	curveTypeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/curvetype' ) ).setWidth( '90px' ), curveType );
 
+	curveTypeRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/curvetype' ) ).setWidth( '90px' ), curveType );
 
 
 	container.add( curveTypeRow );
 
 
 	// tension
 
 
-	var tensionRow = new UI.Row().setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
-	var tension = new UI.Number( parameters.path.tension ).setStep( 0.01 ).onChange( update );
 
+	var tensionRow = new UIRow().setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
+	var tension = new UINumber( parameters.path.tension ).setStep( 0.01 ).onChange( update );
 
 
-	tensionRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/tension' ) ).setWidth( '90px' ), tension );
 
+	tensionRow.add( new UIText( strings.getKey( 'sidebar/geometry/tube_geometry/tension' ) ).setWidth( '90px' ), tension );
 
 
 	container.add( tensionRow );
 
 
@@ -85,8 +95,8 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
 
-		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 
-			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 
+		editor.execute( new SetGeometryCommand( editor, object, new TubeBufferGeometry(
 
+			new CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 
 			tubularSegments.getValue(),
 
 			radius.getValue(),
 
 			radialSegments.getValue(),
 
@@ -99,4 +109,4 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 
 };
 
 
-Sidebar.Geometry.TubeBufferGeometry = Sidebar.Geometry.TubeGeometry;
 
+export { SidebarGeometryTubeGeometry };

+ 72 - 22
editor/js/Sidebar.Geometry.js
Файл харах 

@@ -2,13 +2,61 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Geometry = function ( editor ) {
 
+import { Math as _Math } from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIRow, UIText, UIInput, UIButton, UISpan } from './libs/ui.js';
 
+
 
+import { SetGeometryValueCommand } from './commands/SetGeometryValueCommand.js';
 
+
 
+import { SidebarGeometryGeometry } from './Sidebar.Geometry.Geometry.js';
 
+import { SidebarGeometryBufferGeometry } from './Sidebar.Geometry.BufferGeometry.js';
 
+import { SidebarGeometryModifiers } from './Sidebar.Geometry.Modifiers.js';
 
+
 
+import { SidebarGeometryBoxGeometry } from './Sidebar.Geometry.BoxGeometry.js';
 
+import { SidebarGeometryCircleGeometry } from './Sidebar.Geometry.CircleGeometry.js';
 
+import { SidebarGeometryCylinderGeometry } from './Sidebar.Geometry.CylinderGeometry.js';
 
+import { SidebarGeometryDodecahedronGeometry } from './Sidebar.Geometry.DodecahedronGeometry.js';
 
+import { SidebarGeometryExtrudeGeometry } from './Sidebar.Geometry.ExtrudeGeometry.js';
 
+import { SidebarGeometryIcosahedronGeometry } from './Sidebar.Geometry.IcosahedronGeometry.js';
 
+import { SidebarGeometryLatheGeometry } from './Sidebar.Geometry.LatheGeometry.js';
 
+import { SidebarGeometryOctahedronGeometry } from './Sidebar.Geometry.OctahedronGeometry.js';
 
+import { SidebarGeometryPlaneGeometry } from './Sidebar.Geometry.PlaneGeometry.js';
 
+import { SidebarGeometryRingGeometry } from './Sidebar.Geometry.RingGeometry.js';
 
+import { SidebarGeometryShapeGeometry } from './Sidebar.Geometry.ShapeGeometry.js';
 
+import { SidebarGeometrySphereGeometry } from './Sidebar.Geometry.SphereGeometry.js';
 
+import { SidebarGeometryTeapotBufferGeometry } from './Sidebar.Geometry.TeapotBufferGeometry.js';
 
+import { SidebarGeometryTetrahedronGeometry } from './Sidebar.Geometry.TetrahedronGeometry.js';
 
+import { SidebarGeometryTorusGeometry } from './Sidebar.Geometry.TorusGeometry.js';
 
+import { SidebarGeometryTorusKnotGeometry } from './Sidebar.Geometry.TorusKnotGeometry.js';
 
+import { SidebarGeometryTubeGeometry } from './Sidebar.Geometry.TubeGeometry.js';
 
+
 
+var geometryUIClasses = {
 
+	'BoxGeometry': SidebarGeometryBoxGeometry,
 
+	'CircleGeometry': SidebarGeometryCircleGeometry,
 
+	'CylinderGeometry': SidebarGeometryCylinderGeometry,
 
+	'DodecahedronGeometry': SidebarGeometryDodecahedronGeometry,
 
+	'ExtrudeGeometry': SidebarGeometryExtrudeGeometry,
 
+	'IcosahedronGeometry': SidebarGeometryIcosahedronGeometry,
 
+	'LatheGeometry': SidebarGeometryLatheGeometry,
 
+	'OctahedronGeometry': SidebarGeometryOctahedronGeometry,
 
+	'PlaneGeometry': SidebarGeometryPlaneGeometry,
 
+	'RingGeometry': SidebarGeometryRingGeometry,
 
+	'ShapeGeometry': SidebarGeometryShapeGeometry,
 
+	'SphereGeometry': SidebarGeometrySphereGeometry,
 
+	'TeapotBufferGeometry': SidebarGeometryTeapotBufferGeometry,
 
+	'TetrahedronGeometry': SidebarGeometryTetrahedronGeometry,
 
+	'TorusGeometry': SidebarGeometryTorusGeometry,
 
+	'TorusKnotGeometry': SidebarGeometryTorusKnotGeometry,
 
+	'TubeGeometry': SidebarGeometryTubeGeometry
 
+};
 
+
 
+var SidebarGeometry = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
 	var signals = editor.signals;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setBorderTop( '0' );
 
 	container.setDisplay( 'none' );
 
 	container.setPaddingTop( '20px' );
 
@@ -16,7 +64,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	// Actions
 
 
 	/*
 
-	var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
 
+	var objectActions = new UISelect().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
 
 	objectActions.setOptions( {
 
 
 		'Actions': 'Actions',
 
@@ -88,27 +136,27 @@ Sidebar.Geometry = function ( editor ) {
 
 
 	// type
 
 
-	var geometryTypeRow = new UI.Row();
 
-	var geometryType = new UI.Text();
 
+	var geometryTypeRow = new UIRow();
 
+	var geometryType = new UIText();
 
 
-	geometryTypeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/type' ) ).setWidth( '90px' ) );
 
+	geometryTypeRow.add( new UIText( strings.getKey( 'sidebar/geometry/type' ) ).setWidth( '90px' ) );
 
 	geometryTypeRow.add( geometryType );
 
 
 	container.add( geometryTypeRow );
 
 
 	// uuid
 
 
-	var geometryUUIDRow = new UI.Row();
 
-	var geometryUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
-	var geometryUUIDRenew = new UI.Button( strings.getKey( 'sidebar/geometry/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
+	var geometryUUIDRow = new UIRow();
 
+	var geometryUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
+	var geometryUUIDRenew = new UIButton( strings.getKey( 'sidebar/geometry/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
 
-		geometryUUID.setValue( THREE.Math.generateUUID() );
 
+		geometryUUID.setValue( _Math.generateUUID() );
 
 
 		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'uuid', geometryUUID.getValue() ) );
 
 
 	} );
 
 
-	geometryUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/uuid' ) ).setWidth( '90px' ) );
 
+	geometryUUIDRow.add( new UIText( strings.getKey( 'sidebar/geometry/uuid' ) ).setWidth( '90px' ) );
 
 	geometryUUIDRow.add( geometryUUID );
 
 	geometryUUIDRow.add( geometryUUIDRenew );
 
 
@@ -116,36 +164,36 @@ Sidebar.Geometry = function ( editor ) {
 
 
 	// name
 
 
-	var geometryNameRow = new UI.Row();
 
-	var geometryName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
+	var geometryNameRow = new UIRow();
 
+	var geometryName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 
 		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'name', geometryName.getValue() ) );
 
 
 	} );
 
 
-	geometryNameRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/name' ) ).setWidth( '90px' ) );
 
+	geometryNameRow.add( new UIText( strings.getKey( 'sidebar/geometry/name' ) ).setWidth( '90px' ) );
 
 	geometryNameRow.add( geometryName );
 
 
 	container.add( geometryNameRow );
 
 
 	// parameters
 
 
-	var parameters = new UI.Span();
 
+	var parameters = new UISpan();
 
 	container.add( parameters );
 
 
 	// geometry
 
 
-	container.add( new Sidebar.Geometry.Geometry( editor ) );
 
+	container.add( new SidebarGeometryGeometry( editor ) );
 
 
 	// buffergeometry
 
 
-	container.add( new Sidebar.Geometry.BufferGeometry( editor ) );
 
+	container.add( new SidebarGeometryBufferGeometry( editor ) );
 
 
 	// size
 
 
-	var geometryBoundingSphere = new UI.Text();
 
+	var geometryBoundingSphere = new UIText();
 
 
-	container.add( new UI.Text( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
 
+	container.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
 
 	container.add( geometryBoundingSphere );
 
 
 	//
 
@@ -171,11 +219,11 @@ Sidebar.Geometry = function ( editor ) {
 
 
 			if ( geometry.type === 'BufferGeometry' || geometry.type === 'Geometry' ) {
 
 
-				parameters.add( new Sidebar.Geometry.Modifiers( editor, object ) );
 
+				parameters.add( new SidebarGeometryModifiers( editor, object ) );
 
 
-			} else if ( Sidebar.Geometry[ geometry.type ] !== undefined ) {
 
+			} else if ( geometryUIClasses[ geometry.type ] !== undefined ) {
 
 
-				parameters.add( new Sidebar.Geometry[ geometry.type ]( editor, object ) );
 
+				parameters.add( new geometryUIClasses[ geometry.type ]( editor, object ) );
 
 
 			}
 
 
@@ -197,3 +245,5 @@ Sidebar.Geometry = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { SidebarGeometry };

+ 14 - 8
editor/js/Sidebar.History.js
Файл харах 

@@ -3,7 +3,10 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
-Sidebar.History = function ( editor ) {
 
+import { UIPanel, UIBreak, UIText } from './libs/ui.js';
 
+import { UIBoolean, UIOutliner } from './libs/ui.three.js';
 
+
 
+var SidebarHistory = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
@@ -13,13 +16,13 @@ Sidebar.History = function ( editor ) {
 
 
 	var history = editor.history;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 
-	container.add( new UI.Text( strings.getKey( 'sidebar/history' ).toUpperCase() ) );
 
+	container.add( new UIText( strings.getKey( 'sidebar/history' ).toUpperCase() ) );
 
 
 	//
 
 
-	var persistent = new UI.THREE.Boolean( config.getKey( 'settings/history' ), strings.getKey( 'sidebar/history/persistent' ) );
 
+	var persistent = new UIBoolean( config.getKey( 'settings/history' ), strings.getKey( 'sidebar/history/persistent' ) );
 
 	persistent.setPosition( 'absolute' ).setRight( '8px' );
 
 	persistent.onChange( function () {
 
 
@@ -44,11 +47,11 @@ Sidebar.History = function ( editor ) {
 
 	} );
 
 	container.add( persistent );
 
 
-	container.add( new UI.Break(), new UI.Break() );
 
+	container.add( new UIBreak(), new UIBreak() );
 
 
 	var ignoreObjectSelectedSignal = false;
 
 
-	var outliner = new UI.Outliner( editor );
 
+	var outliner = new UIOutliner( editor );
 
 	outliner.onChange( function () {
 
 
 		ignoreObjectSelectedSignal = true;
 
@@ -65,7 +68,6 @@ Sidebar.History = function ( editor ) {
 
 	var refreshUI = function () {
 
 
 		var options = [];
 
-		var enumerator = 1;
 
 
 		function buildOption( object ) {
 
 
@@ -92,7 +94,7 @@ Sidebar.History = function ( editor ) {
 
 		} )( history.undos );
 
 
 
-		( function addObjects( objects, pad ) {
 
+		( function addObjects( objects ) {
 
 
 			for ( var i = objects.length - 1; i >= 0; i -- ) {
 
 
@@ -121,6 +123,8 @@ Sidebar.History = function ( editor ) {
 
 	signals.historyChanged.add( refreshUI );
 
 	signals.historyChanged.add( function ( cmd ) {
 
 
+		if ( ignoreObjectSelectedSignal === true ) return;
 
+
 
 		outliner.setValue( cmd !== undefined ? cmd.id : null );
 
 
 	} );
 
@@ -129,3 +133,5 @@ Sidebar.History = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { SidebarHistory };

+ 206 - 154
editor/js/Sidebar.Material.js
Файл харах 

@@ -2,7 +2,57 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Material = function ( editor ) {
 
+import {
 
+	BasicDepthPacking,
 
+	LineBasicMaterial,
 
+	LineDashedMaterial,
 
+	Math as _Math,
 
+	MeshBasicMaterial,
 
+	MeshDepthMaterial,
 
+	MeshNormalMaterial,
 
+	MeshLambertMaterial,
 
+	MeshToonMaterial,
 
+	MeshPhongMaterial,
 
+	MeshMatcapMaterial,
 
+	ShaderMaterial,
 
+	RawShaderMaterial,
 
+	SpriteMaterial,
 
+	MeshPhysicalMaterial,
 
+	ShadowMaterial,
 
+	MeshStandardMaterial,
 
+	RGBADepthPacking,
 
+	SphericalReflectionMapping,
 
+	sRGBEncoding
 
+} from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIRow, UIInput, UIButton, UIColor, UICheckbox, UISelect, UIText, UINumber } from './libs/ui.js';
 
+import { UITexture } from './libs/ui.three.js';
 
+
 
+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
 
+import { SetMaterialColorCommand } from './commands/SetMaterialColorCommand.js';
 
+import { SetMaterialMapCommand } from './commands/SetMaterialMapCommand.js';
 
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
 
+import { SetMaterialVectorCommand } from './commands/SetMaterialVectorCommand.js';
 
+
 
+var materialClasses = {
 
+	'LineBasicMaterial': LineBasicMaterial,
 
+	'LineDashedMaterial': LineDashedMaterial,
 
+	'MeshBasicMaterial': MeshBasicMaterial,
 
+	'MeshDepthMaterial': MeshDepthMaterial,
 
+	'MeshNormalMaterial': MeshNormalMaterial,
 
+	'MeshLambertMaterial': MeshLambertMaterial,
 
+	'MeshMatcapMaterial': MeshMatcapMaterial,
 
+	'MeshPhongMaterial': MeshPhongMaterial,
 
+	'MeshToonMaterial': MeshToonMaterial,
 
+	'MeshStandardMaterial': MeshStandardMaterial,
 
+	'MeshPhysicalMaterial': MeshPhysicalMaterial,
 
+	'RawShaderMaterial': RawShaderMaterial,
 
+	'ShaderMaterial': ShaderMaterial,
 
+	'ShadowMaterial': ShadowMaterial,
 
+	'SpriteMaterial': SpriteMaterial
 
+};
 
+
 
+var SidebarMaterial = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
@@ -12,18 +62,18 @@ Sidebar.Material = function ( editor ) {
 
 
 	var currentMaterialSlot = 0;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setBorderTop( '0' );
 
 	container.setDisplay( 'none' );
 
 	container.setPaddingTop( '20px' );
 
 
 	// Current material slot
 
 
-	var materialSlotRow = new UI.Row();
 
+	var materialSlotRow = new UIRow();
 
 
-	materialSlotRow.add( new UI.Text( 'Slot' ).setWidth( '90px' ) );
 
+	materialSlotRow.add( new UIText( 'Slot' ).setWidth( '90px' ) );
 
 
-	var materialSlotSelect = new UI.Select().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
 
+	var materialSlotSelect = new UISelect().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
 
 	materialSlotSelect.setOptions( { 0: '' } ).setValue( 0 );
 
 	materialSlotRow.add( materialSlotSelect );
 
 
@@ -31,8 +81,8 @@ Sidebar.Material = function ( editor ) {
 
 
 	// type
 
 
-	var materialClassRow = new UI.Row();
 
-	var materialClass = new UI.Select().setOptions( {
 
+	var materialClassRow = new UIRow();
 
+	var materialClass = new UISelect().setOptions( {
 
 
 		'LineBasicMaterial': 'LineBasicMaterial',
 
 		'LineDashedMaterial': 'LineDashedMaterial',
 
@@ -52,23 +102,23 @@ Sidebar.Material = function ( editor ) {
 
 
 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
 
 
-	materialClassRow.add( new UI.Text( strings.getKey( 'sidebar/material/type' ) ).setWidth( '90px' ) );
 
+	materialClassRow.add( new UIText( strings.getKey( 'sidebar/material/type' ) ).setWidth( '90px' ) );
 
 	materialClassRow.add( materialClass );
 
 
 	container.add( materialClassRow );
 
 
 	// uuid
 
 
-	var materialUUIDRow = new UI.Row();
 
-	var materialUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
-	var materialUUIDRenew = new UI.Button( strings.getKey( 'sidebar/material/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
+	var materialUUIDRow = new UIRow();
 
+	var materialUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
+	var materialUUIDRenew = new UIButton( strings.getKey( 'sidebar/material/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
 
-		materialUUID.setValue( THREE.Math.generateUUID() );
 
+		materialUUID.setValue( _Math.generateUUID() );
 
 		update();
 
 
 	} );
 
 
-	materialUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/material/uuid' ) ).setWidth( '90px' ) );
 
+	materialUUIDRow.add( new UIText( strings.getKey( 'sidebar/material/uuid' ) ).setWidth( '90px' ) );
 
 	materialUUIDRow.add( materialUUID );
 
 	materialUUIDRow.add( materialUUIDRenew );
 
 
@@ -76,24 +126,24 @@ Sidebar.Material = function ( editor ) {
 
 
 	// name
 
 
-	var materialNameRow = new UI.Row();
 
-	var materialName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
+	var materialNameRow = new UIRow();
 
+	var materialName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 
 		editor.execute( new SetMaterialValueCommand( editor, editor.selected, 'name', materialName.getValue(), currentMaterialSlot ) );
 
 
 	} );
 
 
-	materialNameRow.add( new UI.Text( strings.getKey( 'sidebar/material/name' ) ).setWidth( '90px' ) );
 
+	materialNameRow.add( new UIText( strings.getKey( 'sidebar/material/name' ) ).setWidth( '90px' ) );
 
 	materialNameRow.add( materialName );
 
 
 	container.add( materialNameRow );
 
 
 	// program
 
 
-	var materialProgramRow = new UI.Row();
 
-	materialProgramRow.add( new UI.Text( strings.getKey( 'sidebar/material/program' ) ).setWidth( '90px' ) );
 
+	var materialProgramRow = new UIRow();
 
+	materialProgramRow.add( new UIText( strings.getKey( 'sidebar/material/program' ) ).setWidth( '90px' ) );
 
 
-	var materialProgramInfo = new UI.Button( strings.getKey( 'sidebar/material/info' ) );
 
+	var materialProgramInfo = new UIButton( strings.getKey( 'sidebar/material/info' ) );
 
 	materialProgramInfo.setMarginLeft( '4px' );
 
 	materialProgramInfo.onClick( function () {
 
 
@@ -102,7 +152,7 @@ Sidebar.Material = function ( editor ) {
 
 	} );
 
 	materialProgramRow.add( materialProgramInfo );
 
 
-	var materialProgramVertex = new UI.Button( strings.getKey( 'sidebar/material/vertex' ) );
 
+	var materialProgramVertex = new UIButton( strings.getKey( 'sidebar/material/vertex' ) );
 
 	materialProgramVertex.setMarginLeft( '4px' );
 
 	materialProgramVertex.onClick( function () {
 
 
@@ -111,7 +161,7 @@ Sidebar.Material = function ( editor ) {
 
 	} );
 
 	materialProgramRow.add( materialProgramVertex );
 
 
-	var materialProgramFragment = new UI.Button( strings.getKey( 'sidebar/material/fragment' ) );
 
+	var materialProgramFragment = new UIButton( strings.getKey( 'sidebar/material/fragment' ) );
 
 	materialProgramFragment.setMarginLeft( '4px' );
 
 	materialProgramFragment.onClick( function () {
 
 
@@ -124,30 +174,30 @@ Sidebar.Material = function ( editor ) {
 
 
 	// color
 
 
-	var materialColorRow = new UI.Row();
 
-	var materialColor = new UI.Color().onChange( update );
 
+	var materialColorRow = new UIRow();
 
+	var materialColor = new UIColor().onChange( update );
 
 
-	materialColorRow.add( new UI.Text( strings.getKey( 'sidebar/material/color' ) ).setWidth( '90px' ) );
 
+	materialColorRow.add( new UIText( strings.getKey( 'sidebar/material/color' ) ).setWidth( '90px' ) );
 
 	materialColorRow.add( materialColor );
 
 
 	container.add( materialColorRow );
 
 
 	// roughness
 
 
-	var materialRoughnessRow = new UI.Row();
 
-	var materialRoughness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialRoughnessRow = new UIRow();
 
+	var materialRoughness = new UINumber( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialRoughnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/roughness' ) ).setWidth( '90px' ) );
 
+	materialRoughnessRow.add( new UIText( strings.getKey( 'sidebar/material/roughness' ) ).setWidth( '90px' ) );
 
 	materialRoughnessRow.add( materialRoughness );
 
 
 	container.add( materialRoughnessRow );
 
 
 	// metalness
 
 
-	var materialMetalnessRow = new UI.Row();
 
-	var materialMetalness = new UI.Number( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialMetalnessRow = new UIRow();
 
+	var materialMetalness = new UINumber( 0.5 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialMetalnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/metalness' ) ).setWidth( '90px' ) );
 
+	materialMetalnessRow.add( new UIText( strings.getKey( 'sidebar/material/metalness' ) ).setWidth( '90px' ) );
 
 	materialMetalnessRow.add( materialMetalness );
 
 
 	container.add( materialMetalnessRow );
 
@@ -155,11 +205,11 @@ Sidebar.Material = function ( editor ) {
 
 	/*
 
 	// sheen
 
 
-	var materialSheenRow = new UI.Row();
 
-	var materialSheenEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialSheen = new UI.Color().setHexValue( 0x000000 ).onChange( update );
 
+	var materialSheenRow = new UIRow();
 
+	var materialSheenEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialSheen = new UIColor().setHexValue( 0x000000 ).onChange( update );
 
 
-	materialSheenRow.add( new UI.Text( strings.getKey( 'sidebar/material/sheen' ) ).setWidth( '90px' ) )
 
+	materialSheenRow.add( new UIText( strings.getKey( 'sidebar/material/sheen' ) ).setWidth( '90px' ) )
 
 	materialSheenRow.add( materialSheenEnabled );
 
 	materialSheenRow.add( materialSheen );
 
 
@@ -168,58 +218,58 @@ Sidebar.Material = function ( editor ) {
 
 
 	// emissive
 
 
-	var materialEmissiveRow = new UI.Row();
 
-	var materialEmissive = new UI.Color().setHexValue( 0x000000 ).onChange( update );
 
+	var materialEmissiveRow = new UIRow();
 
+	var materialEmissive = new UIColor().setHexValue( 0x000000 ).onChange( update );
 
 
-	materialEmissiveRow.add( new UI.Text( strings.getKey( 'sidebar/material/emissive' ) ).setWidth( '90px' ) );
 
+	materialEmissiveRow.add( new UIText( strings.getKey( 'sidebar/material/emissive' ) ).setWidth( '90px' ) );
 
 	materialEmissiveRow.add( materialEmissive );
 
 
 	container.add( materialEmissiveRow );
 
 
 	// specular
 
 
-	var materialSpecularRow = new UI.Row();
 
-	var materialSpecular = new UI.Color().setHexValue( 0x111111 ).onChange( update );
 
+	var materialSpecularRow = new UIRow();
 
+	var materialSpecular = new UIColor().setHexValue( 0x111111 ).onChange( update );
 
 
-	materialSpecularRow.add( new UI.Text( strings.getKey( 'sidebar/material/specular' ) ).setWidth( '90px' ) );
 
+	materialSpecularRow.add( new UIText( strings.getKey( 'sidebar/material/specular' ) ).setWidth( '90px' ) );
 
 	materialSpecularRow.add( materialSpecular );
 
 
 	container.add( materialSpecularRow );
 
 
 	// shininess
 
 
-	var materialShininessRow = new UI.Row();
 
-	var materialShininess = new UI.Number( 30 ).onChange( update );
 
+	var materialShininessRow = new UIRow();
 
+	var materialShininess = new UINumber( 30 ).onChange( update );
 
 
-	materialShininessRow.add( new UI.Text( strings.getKey( 'sidebar/material/shininess' ) ).setWidth( '90px' ) );
 
+	materialShininessRow.add( new UIText( strings.getKey( 'sidebar/material/shininess' ) ).setWidth( '90px' ) );
 
 	materialShininessRow.add( materialShininess );
 
 
 	container.add( materialShininessRow );
 
 
 	// clearcoat
 
 
-	var materialClearcoatRow = new UI.Row();
 
-	var materialClearcoat = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialClearcoatRow = new UIRow();
 
+	var materialClearcoat = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialClearcoatRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoat' ) ).setWidth( '90px' ) );
 
+	materialClearcoatRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoat' ) ).setWidth( '90px' ) );
 
 	materialClearcoatRow.add( materialClearcoat );
 
 
 	container.add( materialClearcoatRow );
 
 
 	// clearcoatRoughness
 
 
-	var materialClearcoatRoughnessRow = new UI.Row();
 
-	var materialClearcoatRoughness = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialClearcoatRoughnessRow = new UIRow();
 
+	var materialClearcoatRoughness = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialClearcoatRoughnessRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoatroughness' ) ).setWidth( '90px' ) );
 
+	materialClearcoatRoughnessRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoatroughness' ) ).setWidth( '90px' ) );
 
 	materialClearcoatRoughnessRow.add( materialClearcoatRoughness );
 
 
 	container.add( materialClearcoatRoughnessRow );
 
 
 	// vertex colors
 
 
-	var materialVertexColorsRow = new UI.Row();
 
-	var materialVertexColors = new UI.Select().setOptions( {
 
+	var materialVertexColorsRow = new UIRow();
 
+	var materialVertexColors = new UISelect().setOptions( {
 
 
 		0: strings.getKey( 'sidebar/material/vertexcolors/no' ),
 
 		1: strings.getKey( 'sidebar/material/vertexcolors/face' ),
 
@@ -227,42 +277,42 @@ Sidebar.Material = function ( editor ) {
 
 
 	} ).onChange( update );
 
 
-	materialVertexColorsRow.add( new UI.Text( strings.getKey( 'sidebar/material/vertexcolors' ) ).setWidth( '90px' ) );
 
+	materialVertexColorsRow.add( new UIText( strings.getKey( 'sidebar/material/vertexcolors' ) ).setWidth( '90px' ) );
 
 	materialVertexColorsRow.add( materialVertexColors );
 
 
 	container.add( materialVertexColorsRow );
 
 
 	// depth packing
 
 
-	var materialDepthPackingRow = new UI.Row();
 
-	var materialDepthPacking = new UI.Select().setOptions( {
 
-		[ THREE.BasicDepthPacking ]: 'BasicDepthPacking',
 
-		[ THREE.RGBADepthPacking ]: 'RGBADepthPacking'
 
+	var materialDepthPackingRow = new UIRow();
 
+	var materialDepthPacking = new UISelect().setOptions( {
 
+		[ BasicDepthPacking ]: 'BasicDepthPacking',
 
+		[ RGBADepthPacking ]: 'RGBADepthPacking'
 
 	} );
 
 	materialDepthPacking.onChange( update );
 
 
-	materialDepthPackingRow.add( new UI.Text( strings.getKey( 'sidebar/material/depthPacking' ) ).setWidth( '90px' ) );
 
+	materialDepthPackingRow.add( new UIText( strings.getKey( 'sidebar/material/depthPacking' ) ).setWidth( '90px' ) );
 
 	materialDepthPackingRow.add( materialDepthPacking );
 
 
 	container.add( materialDepthPackingRow );
 
 
 	// skinning
 
 
-	var materialSkinningRow = new UI.Row();
 
-	var materialSkinning = new UI.Checkbox( false ).onChange( update );
 
+	var materialSkinningRow = new UIRow();
 
+	var materialSkinning = new UICheckbox( false ).onChange( update );
 
 
-	materialSkinningRow.add( new UI.Text( strings.getKey( 'sidebar/material/skinning' ) ).setWidth( '90px' ) );
 
+	materialSkinningRow.add( new UIText( strings.getKey( 'sidebar/material/skinning' ) ).setWidth( '90px' ) );
 
 	materialSkinningRow.add( materialSkinning );
 
 
 	container.add( materialSkinningRow );
 
 
 	// map
 
 
-	var materialMapRow = new UI.Row();
 
-	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialMap = new UI.Texture().onChange( updateMaterial );
 
+	var materialMapRow = new UIRow();
 
+	var materialMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialMap = new UITexture().onChange( updateMaterial );
 
 
-	materialMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/map' ) ).setWidth( '90px' ) );
 
+	materialMapRow.add( new UIText( strings.getKey( 'sidebar/material/map' ) ).setWidth( '90px' ) );
 
 	materialMapRow.add( materialMapEnabled );
 
 	materialMapRow.add( materialMap );
 
 
@@ -270,11 +320,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// matcap map
 
 
-	var materialMatcapMapRow = new UI.Row();
 
-	var materialMatcapMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialMatcapMap = new UI.Texture().onChange( update );
 
+	var materialMatcapMapRow = new UIRow();
 
+	var materialMatcapMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialMatcapMap = new UITexture().onChange( update );
 
 
-	materialMatcapMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/matcap' ) ).setWidth( '90px' ) );
 
+	materialMatcapMapRow.add( new UIText( strings.getKey( 'sidebar/material/matcap' ) ).setWidth( '90px' ) );
 
 	materialMatcapMapRow.add( materialMatcapMapEnabled );
 
 	materialMatcapMapRow.add( materialMatcapMap );
 
 
@@ -282,11 +332,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// alpha map
 
 
-	var materialAlphaMapRow = new UI.Row();
 
-	var materialAlphaMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialAlphaMap = new UI.Texture().onChange( update );
 
+	var materialAlphaMapRow = new UIRow();
 
+	var materialAlphaMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialAlphaMap = new UITexture().onChange( update );
 
 
-	materialAlphaMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/alphamap' ) ).setWidth( '90px' ) );
 
+	materialAlphaMapRow.add( new UIText( strings.getKey( 'sidebar/material/alphamap' ) ).setWidth( '90px' ) );
 
 	materialAlphaMapRow.add( materialAlphaMapEnabled );
 
 	materialAlphaMapRow.add( materialAlphaMap );
 
 
@@ -294,12 +344,12 @@ Sidebar.Material = function ( editor ) {
 
 
 	// bump map
 
 
-	var materialBumpMapRow = new UI.Row();
 
-	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialBumpMap = new UI.Texture().onChange( update );
 
-	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialBumpMapRow = new UIRow();
 
+	var materialBumpMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialBumpMap = new UITexture().onChange( update );
 
+	var materialBumpScale = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialBumpMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/bumpmap' ) ).setWidth( '90px' ) );
 
+	materialBumpMapRow.add( new UIText( strings.getKey( 'sidebar/material/bumpmap' ) ).setWidth( '90px' ) );
 
 	materialBumpMapRow.add( materialBumpMapEnabled );
 
 	materialBumpMapRow.add( materialBumpMap );
 
 	materialBumpMapRow.add( materialBumpScale );
 
@@ -308,13 +358,13 @@ Sidebar.Material = function ( editor ) {
 
 
 	// normal map
 
 
-	var materialNormalMapRow = new UI.Row();
 
-	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialNormalMap = new UI.Texture().onChange( update );
 
-	var materialNormalScaleX = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
-	var materialNormalScaleY = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialNormalMapRow = new UIRow();
 
+	var materialNormalMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialNormalMap = new UITexture().onChange( update );
 
+	var materialNormalScaleX = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialNormalScaleY = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialNormalMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/normalmap' ) ).setWidth( '90px' ) );
 
+	materialNormalMapRow.add( new UIText( strings.getKey( 'sidebar/material/normalmap' ) ).setWidth( '90px' ) );
 
 	materialNormalMapRow.add( materialNormalMapEnabled );
 
 	materialNormalMapRow.add( materialNormalMap );
 
 	materialNormalMapRow.add( materialNormalScaleX );
 
@@ -324,13 +374,13 @@ Sidebar.Material = function ( editor ) {
 
 
 	// clearcoat normal map
 
 
-	var materialClearcoatNormalMapRow = new UI.Row();
 
-	var materialClearcoatNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialClearcoatNormalMap = new UI.Texture().onChange( update );
 
-	var materialClearcoatNormalScaleX = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
-	var materialClearcoatNormalScaleY = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialClearcoatNormalMapRow = new UIRow();
 
+	var materialClearcoatNormalMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialClearcoatNormalMap = new UITexture().onChange( update );
 
+	var materialClearcoatNormalScaleX = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialClearcoatNormalScaleY = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialClearcoatNormalMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/clearcoatnormalmap' ) ).setWidth( '90px' ) );
 
+	materialClearcoatNormalMapRow.add( new UIText( strings.getKey( 'sidebar/material/clearcoatnormalmap' ) ).setWidth( '90px' ) );
 
 	materialClearcoatNormalMapRow.add( materialClearcoatNormalMapEnabled );
 
 	materialClearcoatNormalMapRow.add( materialClearcoatNormalMap );
 
 	materialClearcoatNormalMapRow.add( materialClearcoatNormalScaleX );
 
@@ -340,12 +390,12 @@ Sidebar.Material = function ( editor ) {
 
 
 	// displacement map
 
 
-	var materialDisplacementMapRow = new UI.Row();
 
-	var materialDisplacementMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialDisplacementMap = new UI.Texture().onChange( update );
 
-	var materialDisplacementScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialDisplacementMapRow = new UIRow();
 
+	var materialDisplacementMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialDisplacementMap = new UITexture().onChange( update );
 
+	var materialDisplacementScale = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialDisplacementMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/displacemap' ) ).setWidth( '90px' ) );
 
+	materialDisplacementMapRow.add( new UIText( strings.getKey( 'sidebar/material/displacemap' ) ).setWidth( '90px' ) );
 
 	materialDisplacementMapRow.add( materialDisplacementMapEnabled );
 
 	materialDisplacementMapRow.add( materialDisplacementMap );
 
 	materialDisplacementMapRow.add( materialDisplacementScale );
 
@@ -354,11 +404,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// roughness map
 
 
-	var materialRoughnessMapRow = new UI.Row();
 
-	var materialRoughnessMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialRoughnessMap = new UI.Texture().onChange( update );
 
+	var materialRoughnessMapRow = new UIRow();
 
+	var materialRoughnessMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialRoughnessMap = new UITexture().onChange( update );
 
 
-	materialRoughnessMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/roughmap' ) ).setWidth( '90px' ) );
 
+	materialRoughnessMapRow.add( new UIText( strings.getKey( 'sidebar/material/roughmap' ) ).setWidth( '90px' ) );
 
 	materialRoughnessMapRow.add( materialRoughnessMapEnabled );
 
 	materialRoughnessMapRow.add( materialRoughnessMap );
 
 
@@ -366,11 +416,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// metalness map
 
 
-	var materialMetalnessMapRow = new UI.Row();
 
-	var materialMetalnessMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialMetalnessMap = new UI.Texture().onChange( update );
 
+	var materialMetalnessMapRow = new UIRow();
 
+	var materialMetalnessMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialMetalnessMap = new UITexture().onChange( update );
 
 
-	materialMetalnessMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/metalmap' ) ).setWidth( '90px' ) );
 
+	materialMetalnessMapRow.add( new UIText( strings.getKey( 'sidebar/material/metalmap' ) ).setWidth( '90px' ) );
 
 	materialMetalnessMapRow.add( materialMetalnessMapEnabled );
 
 	materialMetalnessMapRow.add( materialMetalnessMap );
 
 
@@ -378,11 +428,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// specular map
 
 
-	var materialSpecularMapRow = new UI.Row();
 
-	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialSpecularMap = new UI.Texture().onChange( update );
 
+	var materialSpecularMapRow = new UIRow();
 
+	var materialSpecularMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialSpecularMap = new UITexture().onChange( update );
 
 
-	materialSpecularMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/specularmap' ) ).setWidth( '90px' ) );
 
+	materialSpecularMapRow.add( new UIText( strings.getKey( 'sidebar/material/specularmap' ) ).setWidth( '90px' ) );
 
 	materialSpecularMapRow.add( materialSpecularMapEnabled );
 
 	materialSpecularMapRow.add( materialSpecularMap );
 
 
@@ -390,12 +440,12 @@ Sidebar.Material = function ( editor ) {
 
 
 	// env map
 
 
-	var materialEnvMapRow = new UI.Row();
 
-	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( updateMaterial );
 
-	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialEnvMapRow = new UIRow();
 
+	var materialEnvMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialEnvMap = new UITexture( SphericalReflectionMapping ).onChange( updateMaterial );
 
+	var materialReflectivity = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialEnvMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/envmap' ) ).setWidth( '90px' ) );
 
+	materialEnvMapRow.add( new UIText( strings.getKey( 'sidebar/material/envmap' ) ).setWidth( '90px' ) );
 
 	materialEnvMapRow.add( materialEnvMapEnabled );
 
 	materialEnvMapRow.add( materialEnvMap );
 
 	materialEnvMapRow.add( materialReflectivity );
 
@@ -404,11 +454,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// light map
 
 
-	var materialLightMapRow = new UI.Row();
 
-	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialLightMap = new UI.Texture().onChange( update );
 
+	var materialLightMapRow = new UIRow();
 
+	var materialLightMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialLightMap = new UITexture().onChange( update );
 
 
-	materialLightMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/lightmap' ) ).setWidth( '90px' ) );
 
+	materialLightMapRow.add( new UIText( strings.getKey( 'sidebar/material/lightmap' ) ).setWidth( '90px' ) );
 
 	materialLightMapRow.add( materialLightMapEnabled );
 
 	materialLightMapRow.add( materialLightMap );
 
 
@@ -416,12 +466,12 @@ Sidebar.Material = function ( editor ) {
 
 
 	// ambient occlusion map
 
 
-	var materialAOMapRow = new UI.Row();
 
-	var materialAOMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialAOMap = new UI.Texture().onChange( update );
 
-	var materialAOScale = new UI.Number( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );
 
+	var materialAOMapRow = new UIRow();
 
+	var materialAOMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialAOMap = new UITexture().onChange( update );
 
+	var materialAOScale = new UINumber( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialAOMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/aomap' ) ).setWidth( '90px' ) );
 
+	materialAOMapRow.add( new UIText( strings.getKey( 'sidebar/material/aomap' ) ).setWidth( '90px' ) );
 
 	materialAOMapRow.add( materialAOMapEnabled );
 
 	materialAOMapRow.add( materialAOMap );
 
 	materialAOMapRow.add( materialAOScale );
 
@@ -430,11 +480,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// emissive map
 
 
-	var materialEmissiveMapRow = new UI.Row();
 
-	var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialEmissiveMap = new UI.Texture().onChange( updateMaterial );
 
+	var materialEmissiveMapRow = new UIRow();
 
+	var materialEmissiveMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialEmissiveMap = new UITexture().onChange( updateMaterial );
 
 
-	materialEmissiveMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/emissivemap' ) ).setWidth( '90px' ) );
 
+	materialEmissiveMapRow.add( new UIText( strings.getKey( 'sidebar/material/emissivemap' ) ).setWidth( '90px' ) );
 
 	materialEmissiveMapRow.add( materialEmissiveMapEnabled );
 
 	materialEmissiveMapRow.add( materialEmissiveMap );
 
 
@@ -442,11 +492,11 @@ Sidebar.Material = function ( editor ) {
 
 
 	// gradient map
 
 
-	var materialGradientMapRow = new UI.Row();
 
-	var materialGradientMapEnabled = new UI.Checkbox( false ).onChange( update );
 
-	var materialGradientMap = new UI.Texture().onChange( update );
 
+	var materialGradientMapRow = new UIRow();
 
+	var materialGradientMapEnabled = new UICheckbox( false ).onChange( update );
 
+	var materialGradientMap = new UITexture().onChange( update );
 
 
-	materialGradientMapRow.add( new UI.Text( strings.getKey( 'sidebar/material/gradientmap' ) ).setWidth( '90px' ) );
 
+	materialGradientMapRow.add( new UIText( strings.getKey( 'sidebar/material/gradientmap' ) ).setWidth( '90px' ) );
 
 	materialGradientMapRow.add( materialGradientMapEnabled );
 
 	materialGradientMapRow.add( materialGradientMap );
 
 
@@ -454,8 +504,8 @@ Sidebar.Material = function ( editor ) {
 
 
 	// side
 
 
-	var materialSideRow = new UI.Row();
 
-	var materialSide = new UI.Select().setOptions( {
 
+	var materialSideRow = new UIRow();
 
+	var materialSide = new UISelect().setOptions( {
 
 
 		0: strings.getKey( 'sidebar/material/side/front' ),
 
 		1: strings.getKey( 'sidebar/material/side/back' ),
 
@@ -463,25 +513,25 @@ Sidebar.Material = function ( editor ) {
 
 
 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
 
 
-	materialSideRow.add( new UI.Text( strings.getKey( 'sidebar/material/side' ) ).setWidth( '90px' ) );
 
+	materialSideRow.add( new UIText( strings.getKey( 'sidebar/material/side' ) ).setWidth( '90px' ) );
 
 	materialSideRow.add( materialSide );
 
 
 	container.add( materialSideRow );
 
 
 	// shading
 
 
-	var materialShadingRow = new UI.Row();
 
-	var materialShading = new UI.Checkbox( false ).setLeft( '100px' ).onChange( update );
 
+	var materialShadingRow = new UIRow();
 
+	var materialShading = new UICheckbox( false ).setLeft( '100px' ).onChange( update );
 
 
-	materialShadingRow.add( new UI.Text( strings.getKey( 'sidebar/material/flatshaded' ) ).setWidth( '90px' ) );
 
+	materialShadingRow.add( new UIText( strings.getKey( 'sidebar/material/flatshaded' ) ).setWidth( '90px' ) );
 
 	materialShadingRow.add( materialShading );
 
 
 	container.add( materialShadingRow );
 
 
 	// blending
 
 
-	var materialBlendingRow = new UI.Row();
 
-	var materialBlending = new UI.Select().setOptions( {
 
+	var materialBlendingRow = new UIRow();
 
+	var materialBlending = new UISelect().setOptions( {
 
 
 		0: strings.getKey( 'sidebar/material/blending/no' ),
 
 		1: strings.getKey( 'sidebar/material/blending/normal' ),
 
@@ -492,48 +542,48 @@ Sidebar.Material = function ( editor ) {
 
 
 	} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
 
 
-	materialBlendingRow.add( new UI.Text( strings.getKey( 'sidebar/material/blending' ) ).setWidth( '90px' ) );
 
+	materialBlendingRow.add( new UIText( strings.getKey( 'sidebar/material/blending' ) ).setWidth( '90px' ) );
 
 	materialBlendingRow.add( materialBlending );
 
 
 	container.add( materialBlendingRow );
 
 
 	// opacity
 
 
-	var materialOpacityRow = new UI.Row();
 
-	var materialOpacity = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialOpacityRow = new UIRow();
 
+	var materialOpacity = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialOpacityRow.add( new UI.Text( strings.getKey( 'sidebar/material/opacity' ) ).setWidth( '90px' ) );
 
+	materialOpacityRow.add( new UIText( strings.getKey( 'sidebar/material/opacity' ) ).setWidth( '90px' ) );
 
 	materialOpacityRow.add( materialOpacity );
 
 
 	container.add( materialOpacityRow );
 
 
 	// transparent
 
 
-	var materialTransparentRow = new UI.Row();
 
-	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
 
+	var materialTransparentRow = new UIRow();
 
+	var materialTransparent = new UICheckbox().setLeft( '100px' ).onChange( update );
 
 
-	materialTransparentRow.add( new UI.Text( strings.getKey( 'sidebar/material/transparent' ) ).setWidth( '90px' ) );
 
+	materialTransparentRow.add( new UIText( strings.getKey( 'sidebar/material/transparent' ) ).setWidth( '90px' ) );
 
 	materialTransparentRow.add( materialTransparent );
 
 
 	container.add( materialTransparentRow );
 
 
 	// alpha test
 
 
-	var materialAlphaTestRow = new UI.Row();
 
-	var materialAlphaTest = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
+	var materialAlphaTestRow = new UIRow();
 
+	var materialAlphaTest = new UINumber().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
 
-	materialAlphaTestRow.add( new UI.Text( strings.getKey( 'sidebar/material/alphatest' ) ).setWidth( '90px' ) );
 
+	materialAlphaTestRow.add( new UIText( strings.getKey( 'sidebar/material/alphatest' ) ).setWidth( '90px' ) );
 
 	materialAlphaTestRow.add( materialAlphaTest );
 
 
 	container.add( materialAlphaTestRow );
 
 
 	// wireframe
 
 
-	var materialWireframeRow = new UI.Row();
 
-	var materialWireframe = new UI.Checkbox( false ).onChange( update );
 
-	var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
 
+	var materialWireframeRow = new UIRow();
 
+	var materialWireframe = new UICheckbox( false ).onChange( update );
 
+	var materialWireframeLinewidth = new UINumber( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
 
 
-	materialWireframeRow.add( new UI.Text( strings.getKey( 'sidebar/material/wireframe' ) ).setWidth( '90px' ) );
 
+	materialWireframeRow.add( new UIText( strings.getKey( 'sidebar/material/wireframe' ) ).setWidth( '90px' ) );
 
 	materialWireframeRow.add( materialWireframe );
 
 	materialWireframeRow.add( materialWireframeLinewidth );
 
 
@@ -572,7 +622,7 @@ Sidebar.Material = function ( editor ) {
 
 
 			if ( material.type !== materialClass.getValue() ) {
 
 
-				material = new THREE[ materialClass.getValue() ]();
 
+				material = new materialClasses[ materialClass.getValue() ]();
 
 
 				if ( material.type == "RawShaderMaterial" ) {
 
 
@@ -612,7 +662,7 @@ Sidebar.Material = function ( editor ) {
 
 
 				var sheenEnabled = materialSheenEnabled.getValue() === true;
 
 
-				var sheen = sheenEnabled ? new THREE.Color(materialSheen.getHexValue()) : null;
 
+				var sheen = sheenEnabled ? new Color(materialSheen.getHexValue()) : null;
 
 
 				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'sheen', sheen, currentMaterialSlot ) );
 
 
@@ -1118,9 +1168,9 @@ Sidebar.Material = function ( editor ) {
 
 
 		if ( texture !== null ) {
 
 
-			if ( texture.encoding !== THREE.sRGBEncoding ) {
 
+			if ( texture.encoding !== sRGBEncoding ) {
 
 
-				texture.encoding = THREE.sRGBEncoding;
 
+				texture.encoding = sRGBEncoding;
 
 				var object = currentObject;
 
 				if ( object !== null ) {
 
 
@@ -1617,3 +1667,5 @@ Sidebar.Material = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { SidebarMaterial };

+ 115 - 99
editor/js/Sidebar.Object.js
Файл харах 

@@ -2,13 +2,29 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Object = function ( editor ) {
 
+import {
 
+	Euler,
 
+	Math as _Math,
 
+	Vector3
 
+} from '../../build/three.module.js';
 
+
 
+import { UIPanel, UIRow, UIInput, UIButton, UIColor, UICheckbox, UIInteger, UITextArea, UIText, UINumber } from './libs/ui.js';
 
+import { UIBoolean } from './libs/ui.three.js';
 
+
 
+import { SetUuidCommand } from './commands/SetUuidCommand.js';
 
+import { SetValueCommand } from './commands/SetValueCommand.js';
 
+import { SetPositionCommand } from './commands/SetPositionCommand.js';
 
+import { SetRotationCommand } from './commands/SetRotationCommand.js';
 
+import { SetScaleCommand } from './commands/SetScaleCommand.js';
 
+import { SetColorCommand } from './commands/SetColorCommand.js';
 
+
 
+var SidebarObject = function ( editor ) {
 
 
 	var strings = editor.strings;
 
 
 	var signals = editor.signals;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setBorderTop( '0' );
 
 	container.setPaddingTop( '20px' );
 
 	container.setDisplay( 'none' );
 
@@ -37,15 +53,15 @@ Sidebar.Object = function ( editor ) {
 
 		switch ( this.getValue() ) {
 
 
 			case 'Reset Position':
 
-				editor.execute( new SetPositionCommand( editor, object, new THREE.Vector3( 0, 0, 0 ) ) );
 
+				editor.execute( new SetPositionCommand( editor, object, new Vector3( 0, 0, 0 ) ) );
 
 				break;
 
 
 			case 'Reset Rotation':
 
-				editor.execute( new SetRotationCommand( editor, object, new THREE.Euler( 0, 0, 0 ) ) );
 
+				editor.execute( new SetRotationCommand( editor, object, new Euler( 0, 0, 0 ) ) );
 
 				break;
 
 
 			case 'Reset Scale':
 
-				editor.execute( new SetScaleCommand( editor, object, new THREE.Vector3( 1, 1, 1 ) ) );
 
+				editor.execute( new SetScaleCommand( editor, object, new Vector3( 1, 1, 1 ) ) );
 
 				break;
 
 
 		}
 
@@ -58,27 +74,27 @@ Sidebar.Object = function ( editor ) {
 
 
 	// type
 
 
-	var objectTypeRow = new UI.Row();
 
-	var objectType = new UI.Text();
 
+	var objectTypeRow = new UIRow();
 
+	var objectType = new UIText();
 
 
-	objectTypeRow.add( new UI.Text( strings.getKey( 'sidebar/object/type' ) ).setWidth( '90px' ) );
 
+	objectTypeRow.add( new UIText( strings.getKey( 'sidebar/object/type' ) ).setWidth( '90px' ) );
 
 	objectTypeRow.add( objectType );
 
 
 	container.add( objectTypeRow );
 
 
 	// uuid
 
 
-	var objectUUIDRow = new UI.Row();
 
-	var objectUUID = new UI.Input().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
-	var objectUUIDRenew = new UI.Button( strings.getKey( 'sidebar/object/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
+	var objectUUIDRow = new UIRow();
 
+	var objectUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
 
+	var objectUUIDRenew = new UIButton( strings.getKey( 'sidebar/object/new' ) ).setMarginLeft( '7px' ).onClick( function () {
 
 
-		objectUUID.setValue( THREE.Math.generateUUID() );
 
+		objectUUID.setValue( _Math.generateUUID() );
 
 
 		editor.execute( new SetUuidCommand( editor, editor.selected, objectUUID.getValue() ) );
 
 
 	} );
 
 
-	objectUUIDRow.add( new UI.Text( strings.getKey( 'sidebar/object/uuid' ) ).setWidth( '90px' ) );
 
+	objectUUIDRow.add( new UIText( strings.getKey( 'sidebar/object/uuid' ) ).setWidth( '90px' ) );
 
 	objectUUIDRow.add( objectUUID );
 
 	objectUUIDRow.add( objectUUIDRenew );
 
 
@@ -86,51 +102,51 @@ Sidebar.Object = function ( editor ) {
 
 
 	// name
 
 
-	var objectNameRow = new UI.Row();
 
-	var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
+	var objectNameRow = new UIRow();
 
+	var objectName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
 
 		editor.execute( new SetValueCommand( editor, editor.selected, 'name', objectName.getValue() ) );
 
 
 	} );
 
 
-	objectNameRow.add( new UI.Text( strings.getKey( 'sidebar/object/name' ) ).setWidth( '90px' ) );
 
+	objectNameRow.add( new UIText( strings.getKey( 'sidebar/object/name' ) ).setWidth( '90px' ) );
 
 	objectNameRow.add( objectName );
 
 
 	container.add( objectNameRow );
 
 
 	// position
 
 
-	var objectPositionRow = new UI.Row();
 
-	var objectPositionX = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
-	var objectPositionY = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
-	var objectPositionZ = new UI.Number().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
+	var objectPositionRow = new UIRow();
 
+	var objectPositionX = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
+	var objectPositionY = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
+	var objectPositionZ = new UINumber().setPrecision( 3 ).setWidth( '50px' ).onChange( update );
 
 
-	objectPositionRow.add( new UI.Text( strings.getKey( 'sidebar/object/position' ) ).setWidth( '90px' ) );
 
+	objectPositionRow.add( new UIText( strings.getKey( 'sidebar/object/position' ) ).setWidth( '90px' ) );
 
 	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
 
 
 	container.add( objectPositionRow );
 
 
 	// rotation
 
 
-	var objectRotationRow = new UI.Row();
 
-	var objectRotationX = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
-	var objectRotationY = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
-	var objectRotationZ = new UI.Number().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
+	var objectRotationRow = new UIRow();
 
+	var objectRotationX = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
+	var objectRotationY = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
+	var objectRotationZ = new UINumber().setStep( 10 ).setUnit( '°' ).setWidth( '50px' ).onChange( update );
 
 
-	objectRotationRow.add( new UI.Text( strings.getKey( 'sidebar/object/rotation' ) ).setWidth( '90px' ) );
 
+	objectRotationRow.add( new UIText( strings.getKey( 'sidebar/object/rotation' ) ).setWidth( '90px' ) );
 
 	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
 
 
 	container.add( objectRotationRow );
 
 
 	// scale
 
 
-	var objectScaleRow = new UI.Row();
 
-	var objectScaleLock = new UI.Checkbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
 
-	var objectScaleX = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
 
-	var objectScaleY = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
 
-	var objectScaleZ = new UI.Number( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );
 
+	var objectScaleRow = new UIRow();
 
+	var objectScaleLock = new UICheckbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
 
+	var objectScaleX = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
 
+	var objectScaleY = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
 
+	var objectScaleZ = new UINumber( 1 ).setPrecision( 3 ).setRange( 0.001, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );
 
 
-	objectScaleRow.add( new UI.Text( strings.getKey( 'sidebar/object/scale' ) ).setWidth( '90px' ) );
 
+	objectScaleRow.add( new UIText( strings.getKey( 'sidebar/object/scale' ) ).setWidth( '90px' ) );
 
 	objectScaleRow.add( objectScaleLock );
 
 	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
 
 
@@ -138,197 +154,195 @@ Sidebar.Object = function ( editor ) {
 
 
 	// fov
 
 
-	var objectFovRow = new UI.Row();
 
-	var objectFov = new UI.Number().onChange( update );
 
+	var objectFovRow = new UIRow();
 
+	var objectFov = new UINumber().onChange( update );
 
 
-	objectFovRow.add( new UI.Text( strings.getKey( 'sidebar/object/fov' ) ).setWidth( '90px' ) );
 
+	objectFovRow.add( new UIText( strings.getKey( 'sidebar/object/fov' ) ).setWidth( '90px' ) );
 
 	objectFovRow.add( objectFov );
 
 
 	container.add( objectFovRow );
 
 
 	// left
 
 
-	var objectLeftRow = new UI.Row();
 
-	var objectLeft = new UI.Number().onChange( update );
 
+	var objectLeftRow = new UIRow();
 
+	var objectLeft = new UINumber().onChange( update );
 
 
-	objectLeftRow.add( new UI.Text( strings.getKey( 'sidebar/object/left' ) ).setWidth( '90px' ) );
 
+	objectLeftRow.add( new UIText( strings.getKey( 'sidebar/object/left' ) ).setWidth( '90px' ) );
 
 	objectLeftRow.add( objectLeft );
 
 
 	container.add( objectLeftRow );
 
 
 	// right
 
 
-	var objectRightRow = new UI.Row();
 
-	var objectRight = new UI.Number().onChange( update );
 
+	var objectRightRow = new UIRow();
 
+	var objectRight = new UINumber().onChange( update );
 
 
-	objectRightRow.add( new UI.Text( strings.getKey( 'sidebar/object/right' ) ).setWidth( '90px' ) );
 
+	objectRightRow.add( new UIText( strings.getKey( 'sidebar/object/right' ) ).setWidth( '90px' ) );
 
 	objectRightRow.add( objectRight );
 
 
 	container.add( objectRightRow );
 
 
 	// top
 
 
-	var objectTopRow = new UI.Row();
 
-	var objectTop = new UI.Number().onChange( update );
 
+	var objectTopRow = new UIRow();
 
+	var objectTop = new UINumber().onChange( update );
 
 
-	objectTopRow.add( new UI.Text( strings.getKey( 'sidebar/object/top' ) ).setWidth( '90px' ) );
 
+	objectTopRow.add( new UIText( strings.getKey( 'sidebar/object/top' ) ).setWidth( '90px' ) );
 
 	objectTopRow.add( objectTop );
 
 
 	container.add( objectTopRow );
 
 
 	// bottom
 
 
-	var objectBottomRow = new UI.Row();
 
-	var objectBottom = new UI.Number().onChange( update );
 
+	var objectBottomRow = new UIRow();
 
+	var objectBottom = new UINumber().onChange( update );
 
 
-	objectBottomRow.add( new UI.Text( strings.getKey( 'sidebar/object/bottom' ) ).setWidth( '90px' ) );
 
+	objectBottomRow.add( new UIText( strings.getKey( 'sidebar/object/bottom' ) ).setWidth( '90px' ) );
 
 	objectBottomRow.add( objectBottom );
 
 
 	container.add( objectBottomRow );
 
 
 	// near
 
 
-	var objectNearRow = new UI.Row();
 
-	var objectNear = new UI.Number().onChange( update );
 
+	var objectNearRow = new UIRow();
 
+	var objectNear = new UINumber().onChange( update );
 
 
-	objectNearRow.add( new UI.Text( strings.getKey( 'sidebar/object/near' ) ).setWidth( '90px' ) );
 
+	objectNearRow.add( new UIText( strings.getKey( 'sidebar/object/near' ) ).setWidth( '90px' ) );
 
 	objectNearRow.add( objectNear );
 
 
 	container.add( objectNearRow );
 
 
 	// far
 
 
-	var objectFarRow = new UI.Row();
 
-	var objectFar = new UI.Number().onChange( update );
 
+	var objectFarRow = new UIRow();
 
+	var objectFar = new UINumber().onChange( update );
 
 
-	objectFarRow.add( new UI.Text( strings.getKey( 'sidebar/object/far' ) ).setWidth( '90px' ) );
 
+	objectFarRow.add( new UIText( strings.getKey( 'sidebar/object/far' ) ).setWidth( '90px' ) );
 
 	objectFarRow.add( objectFar );
 
 
 	container.add( objectFarRow );
 
 
 	// intensity
 
 
-	var objectIntensityRow = new UI.Row();
 
-	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
+	var objectIntensityRow = new UIRow();
 
+	var objectIntensity = new UINumber().setRange( 0, Infinity ).onChange( update );
 
 
-	objectIntensityRow.add( new UI.Text( strings.getKey( 'sidebar/object/intensity' ) ).setWidth( '90px' ) );
 
+	objectIntensityRow.add( new UIText( strings.getKey( 'sidebar/object/intensity' ) ).setWidth( '90px' ) );
 
 	objectIntensityRow.add( objectIntensity );
 
 
 	container.add( objectIntensityRow );
 
 
 	// color
 
 
-	var objectColorRow = new UI.Row();
 
-	var objectColor = new UI.Color().onChange( update );
 
+	var objectColorRow = new UIRow();
 
+	var objectColor = new UIColor().onChange( update );
 
 
-	objectColorRow.add( new UI.Text( strings.getKey( 'sidebar/object/color' ) ).setWidth( '90px' ) );
 
+	objectColorRow.add( new UIText( strings.getKey( 'sidebar/object/color' ) ).setWidth( '90px' ) );
 
 	objectColorRow.add( objectColor );
 
 
 	container.add( objectColorRow );
 
 
 	// ground color
 
 
-	var objectGroundColorRow = new UI.Row();
 
-	var objectGroundColor = new UI.Color().onChange( update );
 
+	var objectGroundColorRow = new UIRow();
 
+	var objectGroundColor = new UIColor().onChange( update );
 
 
-	objectGroundColorRow.add( new UI.Text( strings.getKey( 'sidebar/object/groundcolor' ) ).setWidth( '90px' ) );
 
+	objectGroundColorRow.add( new UIText( strings.getKey( 'sidebar/object/groundcolor' ) ).setWidth( '90px' ) );
 
 	objectGroundColorRow.add( objectGroundColor );
 
 
 	container.add( objectGroundColorRow );
 
 
 	// distance
 
 
-	var objectDistanceRow = new UI.Row();
 
-	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
+	var objectDistanceRow = new UIRow();
 
+	var objectDistance = new UINumber().setRange( 0, Infinity ).onChange( update );
 
 
-	objectDistanceRow.add( new UI.Text( strings.getKey( 'sidebar/object/distance' ) ).setWidth( '90px' ) );
 
+	objectDistanceRow.add( new UIText( strings.getKey( 'sidebar/object/distance' ) ).setWidth( '90px' ) );
 
 	objectDistanceRow.add( objectDistance );
 
 
 	container.add( objectDistanceRow );
 
 
 	// angle
 
 
-	var objectAngleRow = new UI.Row();
 
-	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
 
+	var objectAngleRow = new UIRow();
 
+	var objectAngle = new UINumber().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
 
 
-	objectAngleRow.add( new UI.Text( strings.getKey( 'sidebar/object/angle' ) ).setWidth( '90px' ) );
 
+	objectAngleRow.add( new UIText( strings.getKey( 'sidebar/object/angle' ) ).setWidth( '90px' ) );
 
 	objectAngleRow.add( objectAngle );
 
 
 	container.add( objectAngleRow );
 
 
 	// penumbra
 
 
-	var objectPenumbraRow = new UI.Row();
 
-	var objectPenumbra = new UI.Number().setRange( 0, 1 ).onChange( update );
 
+	var objectPenumbraRow = new UIRow();
 
+	var objectPenumbra = new UINumber().setRange( 0, 1 ).onChange( update );
 
 
-	objectPenumbraRow.add( new UI.Text( strings.getKey( 'sidebar/object/penumbra' ) ).setWidth( '90px' ) );
 
+	objectPenumbraRow.add( new UIText( strings.getKey( 'sidebar/object/penumbra' ) ).setWidth( '90px' ) );
 
 	objectPenumbraRow.add( objectPenumbra );
 
 
 	container.add( objectPenumbraRow );
 
 
 	// decay
 
 
-	var objectDecayRow = new UI.Row();
 
-	var objectDecay = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
+	var objectDecayRow = new UIRow();
 
+	var objectDecay = new UINumber().setRange( 0, Infinity ).onChange( update );
 
 
-	objectDecayRow.add( new UI.Text( strings.getKey( 'sidebar/object/decay' ) ).setWidth( '90px' ) );
 
+	objectDecayRow.add( new UIText( strings.getKey( 'sidebar/object/decay' ) ).setWidth( '90px' ) );
 
 	objectDecayRow.add( objectDecay );
 
 
 	container.add( objectDecayRow );
 
 
 	// shadow
 
 
-	var objectShadowRow = new UI.Row();
 
+	var objectShadowRow = new UIRow();
 
 
-	objectShadowRow.add( new UI.Text( strings.getKey( 'sidebar/object/shadow' ) ).setWidth( '90px' ) );
 
+	objectShadowRow.add( new UIText( strings.getKey( 'sidebar/object/shadow' ) ).setWidth( '90px' ) );
 
 
-	var objectCastShadow = new UI.THREE.Boolean( false, strings.getKey( 'sidebar/object/cast' ) ).onChange( update );
 
+	var objectCastShadow = new UIBoolean( false, strings.getKey( 'sidebar/object/cast' ) ).onChange( update );
 
 	objectShadowRow.add( objectCastShadow );
 
 
-	var objectReceiveShadow = new UI.THREE.Boolean( false, strings.getKey( 'sidebar/object/receive' ) ).onChange( update );
 
+	var objectReceiveShadow = new UIBoolean( false, strings.getKey( 'sidebar/object/receive' ) ).onChange( update );
 
 	objectShadowRow.add( objectReceiveShadow );
 
 
-	var objectShadowRadius = new UI.Number( 1 ).onChange( update );
 
+	var objectShadowRadius = new UINumber( 1 ).onChange( update );
 
 	objectShadowRow.add( objectShadowRadius );
 
 
 	container.add( objectShadowRow );
 
 
 	// visible
 
 
-	var objectVisibleRow = new UI.Row();
 
-	var objectVisible = new UI.Checkbox().onChange( update );
 
+	var objectVisibleRow = new UIRow();
 
+	var objectVisible = new UICheckbox().onChange( update );
 
 
-	objectVisibleRow.add( new UI.Text( strings.getKey( 'sidebar/object/visible' ) ).setWidth( '90px' ) );
 
+	objectVisibleRow.add( new UIText( strings.getKey( 'sidebar/object/visible' ) ).setWidth( '90px' ) );
 
 	objectVisibleRow.add( objectVisible );
 
 
 	container.add( objectVisibleRow );
 
 
 	// frustumCulled
 
 
-	var objectFrustumCulledRow = new UI.Row();
 
-	var objectFrustumCulled = new UI.Checkbox().onChange( update );
 
+	var objectFrustumCulledRow = new UIRow();
 
+	var objectFrustumCulled = new UICheckbox().onChange( update );
 
 
-	objectFrustumCulledRow.add( new UI.Text( strings.getKey( 'sidebar/object/frustumcull' ) ).setWidth( '90px' ) );
 
+	objectFrustumCulledRow.add( new UIText( strings.getKey( 'sidebar/object/frustumcull' ) ).setWidth( '90px' ) );
 
 	objectFrustumCulledRow.add( objectFrustumCulled );
 
 
 	container.add( objectFrustumCulledRow );
 
 
 	// renderOrder
 
 
-	var objectRenderOrderRow = new UI.Row();
 
-	var objectRenderOrder = new UI.Integer().setWidth( '50px' ).onChange( update );
 
+	var objectRenderOrderRow = new UIRow();
 
+	var objectRenderOrder = new UIInteger().setWidth( '50px' ).onChange( update );
 
 
-	objectRenderOrderRow.add( new UI.Text( strings.getKey( 'sidebar/object/renderorder' ) ).setWidth( '90px' ) );
 
+	objectRenderOrderRow.add( new UIText( strings.getKey( 'sidebar/object/renderorder' ) ).setWidth( '90px' ) );
 
 	objectRenderOrderRow.add( objectRenderOrder );
 
 
 	container.add( objectRenderOrderRow );
 
 
 	// user data
 
 
-	var timeout;
 
-
 
-	var objectUserDataRow = new UI.Row();
 
-	var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
 
+	var objectUserDataRow = new UIRow();
 
+	var objectUserData = new UITextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
 
 	objectUserData.onKeyUp( function () {
 
 
 		try {
 
@@ -347,7 +361,7 @@ Sidebar.Object = function ( editor ) {
 
 
 	} );
 
 
-	objectUserDataRow.add( new UI.Text( strings.getKey( 'sidebar/object/userdata' ) ).setWidth( '90px' ) );
 
+	objectUserDataRow.add( new UIText( strings.getKey( 'sidebar/object/userdata' ) ).setWidth( '90px' ) );
 
 	objectUserDataRow.add( objectUserData );
 
 
 	container.add( objectUserDataRow );
 
@@ -412,21 +426,21 @@ Sidebar.Object = function ( editor ) {
 
 
 		if ( object !== null ) {
 
 
-			var newPosition = new THREE.Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
 
+			var newPosition = new Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
 
 			if ( object.position.distanceTo( newPosition ) >= 0.01 ) {
 
 
 				editor.execute( new SetPositionCommand( editor, object, newPosition ) );
 
 
 			}
 
 
-			var newRotation = new THREE.Euler( objectRotationX.getValue() * THREE.Math.DEG2RAD, objectRotationY.getValue() * THREE.Math.DEG2RAD, objectRotationZ.getValue() * THREE.Math.DEG2RAD );
 
+			var newRotation = new Euler( objectRotationX.getValue() * _Math.DEG2RAD, objectRotationY.getValue() * _Math.DEG2RAD, objectRotationZ.getValue() * _Math.DEG2RAD );
 
 			if ( object.rotation.toVector3().distanceTo( newRotation.toVector3() ) >= 0.01 ) {
 
 
 				editor.execute( new SetRotationCommand( editor, object, newRotation ) );
 
 
 			}
 
 
-			var newScale = new THREE.Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
 
+			var newScale = new Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
 
 			if ( object.scale.distanceTo( newScale ) >= 0.01 ) {
 
 
 				editor.execute( new SetScaleCommand( editor, object, newScale ) );
 
@@ -685,9 +699,9 @@ Sidebar.Object = function ( editor ) {
 
 		objectPositionY.setValue( object.position.y );
 
 		objectPositionZ.setValue( object.position.z );
 
 
-		objectRotationX.setValue( object.rotation.x * THREE.Math.RAD2DEG );
 
-		objectRotationY.setValue( object.rotation.y * THREE.Math.RAD2DEG );
 
-		objectRotationZ.setValue( object.rotation.z * THREE.Math.RAD2DEG );
 
+		objectRotationX.setValue( object.rotation.x * _Math.RAD2DEG );
 
+		objectRotationY.setValue( object.rotation.y * _Math.RAD2DEG );
 
+		objectRotationZ.setValue( object.rotation.z * _Math.RAD2DEG );
 
 
 		objectScaleX.setValue( object.scale.x );
 
 		objectScaleY.setValue( object.scale.y );
 
@@ -819,3 +833,5 @@ Sidebar.Object = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { SidebarObject };

+ 36 - 24
editor/js/Sidebar.Project.js
Файл харах 

@@ -2,7 +2,17 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-Sidebar.Project = function ( editor ) {
 
+import { WebGLRenderer } from '../../build/three.module.js';
 
+
 
+import { SVGRenderer } from '../../examples/jsm/renderers/SVGRenderer.js';
 
+import { RaytracingRenderer } from '../../examples/jsm/renderers/RaytracingRenderer.js';
 
+
 
+import { UIPanel, UIRow, UIInput, UICheckbox, UISelect, UIText, UIListbox, UISpan, UIButton } from './libs/ui.js';
 
+import { UIBoolean } from './libs/ui.three.js';
 
+
 
+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
 
+
 
+var SidebarProject = function ( editor ) {
 
 
 	var config = editor.config;
 
 	var signals = editor.signals;
 
@@ -10,15 +20,15 @@ Sidebar.Project = function ( editor ) {
 
 
 	var rendererTypes = {
 
 
-		'WebGLRenderer': THREE.WebGLRenderer,
 
-		'SVGRenderer': THREE.SVGRenderer,
 
-		'RaytracingRenderer': THREE.RaytracingRenderer
 
+		'WebGLRenderer': WebGLRenderer,
 
+		'SVGRenderer': SVGRenderer,
 
+		'RaytracingRenderer': RaytracingRenderer
 
 
 	};
 
 
-	var container = new UI.Span();
 
+	var container = new UISpan();
 
 
-	var projectsettings = new UI.Panel();
 
+	var projectsettings = new UIPanel();
 
 	projectsettings.setBorderTop( '0' );
 
 	projectsettings.setPaddingTop( '20px' );
 
 
@@ -26,28 +36,28 @@ Sidebar.Project = function ( editor ) {
 
 
 	// Title
 
 
-	var titleRow = new UI.Row();
 
-	var title = new UI.Input( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
 
+	var titleRow = new UIRow();
 
+	var title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
 
 
 		config.setKey( 'project/title', this.getValue() );
 
 
 	} );
 
 
-	titleRow.add( new UI.Text( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
 
+	titleRow.add( new UIText( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
 
 	titleRow.add( title );
 
 
 	projectsettings.add( titleRow );
 
 
 	// Editable
 
 
-	var editableRow = new UI.Row();
 
-	var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
 
+	var editableRow = new UIRow();
 
+	var editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
 
 
 		config.setKey( 'project/editable', this.getValue() );
 
 
 	} );
 
 
-	editableRow.add( new UI.Text( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
 
+	editableRow.add( new UIText( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
 
 	editableRow.add( editable );
 
 
 	projectsettings.add( editableRow );
 
@@ -64,8 +74,8 @@ Sidebar.Project = function ( editor ) {
 
 
 	}
 
 
-	var rendererTypeRow = new UI.Row();
 
-	var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
 
+	var rendererTypeRow = new UIRow();
 
+	var rendererType = new UISelect().setOptions( options ).setWidth( '150px' ).onChange( function () {
 
 
 		var value = this.getValue();
 
 
@@ -75,7 +85,7 @@ Sidebar.Project = function ( editor ) {
 
 
 	} );
 
 
-	rendererTypeRow.add( new UI.Text( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
 
+	rendererTypeRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
 
 	rendererTypeRow.add( rendererType );
 
 
 	projectsettings.add( rendererTypeRow );
 
@@ -88,9 +98,9 @@ Sidebar.Project = function ( editor ) {
 
 
 	// Renderer / Antialias
 
 
-	var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' );
 
+	var rendererPropertiesRow = new UIRow().setMarginLeft( '90px' );
 
 
-	var rendererAntialias = new UI.THREE.Boolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
 
+	var rendererAntialias = new UIBoolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
 
 
 		config.setKey( 'project/renderer/antialias', this.getValue() );
 
 		updateRenderer();
 
@@ -100,7 +110,7 @@ Sidebar.Project = function ( editor ) {
 
 
 	// Renderer / Shadows
 
 
-	var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), strings.getKey( 'sidebar/project/shadows' ) ).onChange( function () {
 
+	var rendererShadows = new UIBoolean( config.getKey( 'project/renderer/shadows' ), strings.getKey( 'sidebar/project/shadows' ) ).onChange( function () {
 
 
 		config.setKey( 'project/renderer/shadows', this.getValue() );
 
 		updateRenderer();
 
@@ -156,14 +166,14 @@ Sidebar.Project = function ( editor ) {
 
 
 	// Materials
 
 
-	var materials = new UI.Panel();
 
+	var materials = new UIPanel();
 
 
-	var headerRow = new UI.Row();
 
-	headerRow.add( new UI.Text( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
 
+	var headerRow = new UIRow();
 
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
 
 
 	materials.add( headerRow );
 
 
-	var listbox = new UI.Listbox();
 
+	var listbox = new UIListbox();
 
 	signals.materialAdded.add( function () {
 
 
 		listbox.setItems( Object.values( editor.materials ) );
 
@@ -171,7 +181,7 @@ Sidebar.Project = function ( editor ) {
 
 	} );
 
 	materials.add( listbox );
 
 
-	var buttonsRow = new UI.Row();
 
+	var buttonsRow = new UIRow();
 
 	buttonsRow.setPadding( '10px 0px' );
 
 	materials.add( buttonsRow );
 
 
@@ -185,7 +195,7 @@ Sidebar.Project = function ( editor ) {
 
 	buttonsRow.add( addButton );
 
 	*/
 
 
-	var assignMaterial = new UI.Button().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
 
+	var assignMaterial = new UIButton().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
 
 	assignMaterial.onClick( function () {
 
 
 		if ( editor.selected !== null ) {
 
@@ -221,3 +231,5 @@ Sidebar.Project = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { SidebarProject };

+ 13 - 5
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 };

+ 20 - 15
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 };

+ 20 - 12
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 };

+ 12 - 6
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 };

+ 11 - 5
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 };

+ 14 - 8
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 };

+ 22 - 10
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 };

+ 6 - 4
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 };

+ 2 - 0
editor/js/Strings.js
Файл харах 

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

+ 11 - 6
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 };

+ 6 - 2
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 };

+ 15 - 11
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 };

+ 45 - 18
editor/js/Viewport.js
Файл харах 

@@ -2,16 +2,41 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
+import {
 
+	Box3,
 
+	BoxHelper,
 
+	GridHelper,
 
+	Vector2,
 
+	Raycaster,
 
+	Fog,
 
+	FogExp2,
 
+	sRGBEncoding
 
+} from '../../build/three.module.js';
 
+
 
+import { TransformControls } from '../../examples/jsm/controls/TransformControls.js';
 
+import { RaytracingRenderer } from '../../examples/jsm/renderers/RaytracingRenderer.js';
 
+
 
+import { UIPanel } from './libs/ui.js';
 
+
 
+import { EditorControls } from './EditorControls.js';
 
+
 
+import { ViewportCamera } from './Viewport.Camera.js';
 
+import { ViewportInfo } from './Viewport.Info.js';
 
+
 
+import { SetPositionCommand } from './commands/SetPositionCommand.js';
 
+import { SetRotationCommand } from './commands/SetRotationCommand.js';
 
+import { SetScaleCommand } from './commands/SetScaleCommand.js';
 
+
 
 var Viewport = function ( editor ) {
 
 
 	var signals = editor.signals;
 
 
-	var container = new UI.Panel();
 
+	var container = new UIPanel();
 
 	container.setId( 'viewport' );
 
 	container.setPosition( 'absolute' );
 
 
-	container.add( new Viewport.Camera( editor ) );
 
-	container.add( new Viewport.Info( editor ) );
 
+	container.add( new ViewportCamera( editor ) );
 
+	container.add( new ViewportInfo( editor ) );
 
 
 	//
 
 
@@ -25,7 +50,7 @@ var Viewport = function ( editor ) {
 
 
 	// helpers
 
 
-	var grid = new THREE.GridHelper( 30, 30, 0x444444, 0x888888 );
 
+	var grid = new GridHelper( 30, 30, 0x444444, 0x888888 );
 
 	sceneHelpers.add( grid );
 
 
 	var array = grid.geometry.attributes.color.array;
 
@@ -42,9 +67,9 @@ var Viewport = function ( editor ) {
 
 
 	//
 
 
-	var box = new THREE.Box3();
 
+	var box = new Box3();
 
 
-	var selectionBox = new THREE.BoxHelper();
 
+	var selectionBox = new BoxHelper();
 
 	selectionBox.material.depthTest = false;
 
 	selectionBox.material.transparent = true;
 
 	selectionBox.visible = false;
 
@@ -54,7 +79,7 @@ var Viewport = function ( editor ) {
 
 	var objectRotationOnDown = null;
 
 	var objectScaleOnDown = null;
 
 
-	var transformControls = new THREE.TransformControls( camera, container.dom );
 
+	var transformControls = new TransformControls( camera, container.dom );
 
 	transformControls.addEventListener( 'change', function () {
 
 
 		var object = transformControls.object;
 
@@ -137,8 +162,8 @@ var Viewport = function ( editor ) {
 
 
 	// object picking
 
 
-	var raycaster = new THREE.Raycaster();
 
-	var mouse = new THREE.Vector2();
 
+	var raycaster = new Raycaster();
 
+	var mouse = new Vector2();
 
 
 	// events
 
 
@@ -152,9 +177,9 @@ var Viewport = function ( editor ) {
 
 
 	}
 
 
-	var onDownPosition = new THREE.Vector2();
 
-	var onUpPosition = new THREE.Vector2();
 
-	var onDoubleClickPosition = new THREE.Vector2();
 
+	var onDownPosition = new Vector2();
 
+	var onUpPosition = new Vector2();
 
+	var onDoubleClickPosition = new Vector2();
 
 
 	function getMousePosition( dom, x, y ) {
 
 
@@ -267,7 +292,7 @@ var Viewport = function ( editor ) {
 
 	// controls need to be added *after* main logic,
 
 	// otherwise controls.enabled doesn't work.
 
 
-	var controls = new THREE.EditorControls( camera, container.dom );
 
+	var controls = new EditorControls( camera, container.dom );
 
 	controls.addEventListener( 'change', function () {
 
 
 		signals.cameraChanged.dispatch( camera );
 
@@ -313,7 +338,7 @@ var Viewport = function ( editor ) {
 
 
 		renderer.autoClear = false;
 
 		renderer.autoUpdateScene = false;
 
-		renderer.outputEncoding = THREE.sRGBEncoding;
 
+		renderer.outputEncoding = sRGBEncoding;
 
 		renderer.setPixelRatio( window.devicePixelRatio );
 
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
 
@@ -440,7 +465,7 @@ var Viewport = function ( editor ) {
 
 
 	} );
 
 
-	signals.materialChanged.add( function ( material ) {
 
+	signals.materialChanged.add( function () {
 
 
 		render();
 
 
@@ -468,10 +493,10 @@ var Viewport = function ( editor ) {
 
 					scene.fog = null;
 
 					break;
 
 				case 'Fog':
 
-					scene.fog = new THREE.Fog();
 
+					scene.fog = new Fog();
 
 					break;
 
 				case 'FogExp2':
 
-					scene.fog = new THREE.FogExp2();
 
+					scene.fog = new FogExp2();
 
 					break;
 
 
 			}
 
@@ -575,7 +600,7 @@ var Viewport = function ( editor ) {
 
 		scene.updateMatrixWorld();
 
 		renderer.render( scene, camera );
 
 
-		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
 
+		if ( renderer instanceof RaytracingRenderer === false ) {
 
 
 			if ( camera === editor.camera ) {
 
 
@@ -591,3 +616,5 @@ var Viewport = function ( editor ) {
 
 	return container;
 
 
 };
 
+
 
+export { Viewport };

+ 6 - 2
editor/js/commands/AddObjectCommand.js
Файл харах 

@@ -3,12 +3,14 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { ObjectLoader } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
  * @constructor
 
  */
 
-
 
 var AddObjectCommand = function ( editor, object ) {
 
 
 	Command.call( this, editor );
 
@@ -57,7 +59,7 @@ AddObjectCommand.prototype = {
 
 
 		if ( this.object === undefined ) {
 
 
-			var loader = new THREE.ObjectLoader();
 
+			var loader = new ObjectLoader();
 
 			this.object = loader.parse( json.object );
 
 
 		}
 
@@ -65,3 +67,5 @@ AddObjectCommand.prototype = {
 
 	}
 
 
 };
 
+
 
+export { AddObjectCommand };

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 6 - 2
editor/js/commands/RemoveObjectCommand.js
Файл харах 

@@ -3,12 +3,14 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { ObjectLoader } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
  * @constructor
 
  */
 
-
 
 var RemoveObjectCommand = function ( editor, object ) {
 
 
 	Command.call( this, editor );
 
@@ -94,7 +96,7 @@ RemoveObjectCommand.prototype = {
 
 		this.object = this.editor.objectByUuid( json.object.object.uuid );
 
 		if ( this.object === undefined ) {
 
 
-			var loader = new THREE.ObjectLoader();
 
+			var loader = new ObjectLoader();
 
 			this.object = loader.parse( json.object );
 
 
 		}
 
@@ -102,3 +104,5 @@ RemoveObjectCommand.prototype = {
 
 	}
 
 
 };
 
+
 
+export { RemoveObjectCommand };

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 7 - 2
editor/js/commands/SetGeometryCommand.js
Файл харах 

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

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 8 - 4
editor/js/commands/SetMaterialCommand.js
Файл харах 

@@ -3,13 +3,15 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { ObjectLoader } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
  * @param newMaterial THREE.Material
 
  * @constructor
 
  */
 
-
 
 var SetMaterialCommand = function ( editor, object, newMaterial, materialSlot ) {
 
 
 	Command.call( this, editor );
 
@@ -61,11 +63,11 @@ SetMaterialCommand.prototype = {
 
 		this.oldMaterial = parseMaterial( json.oldMaterial );
 
 		this.newMaterial = parseMaterial( json.newMaterial );
 
 
-		function parseMaterial ( json ) {
 
+		function parseMaterial( json ) {
 
 
-			var loader = new THREE.ObjectLoader();
 
+			var loader = new ObjectLoader();
 
 			var images = loader.parseImages( json.images );
 
-			var textures  = loader.parseTextures( json.textures, images );
 
+			var textures = loader.parseTextures( json.textures, images );
 
 			var materials = loader.parseMaterials( [ json ], textures );
 
 			return materials[ json.uuid ];
 
 
@@ -74,3 +76,5 @@ SetMaterialCommand.prototype = {
 
 	}
 
 
 };
 
+
 
+export { SetMaterialCommand };

+ 10 - 6
editor/js/commands/SetMaterialMapCommand.js
Файл харах 

@@ -3,6 +3,9 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+ import { Command } from '../Command.js';
 
+ import { ObjectLoader } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
@@ -10,7 +13,6 @@
 
  * @param newMap THREE.Texture
 
  * @constructor
 
  */
 
-
 
 var SetMaterialMapCommand = function ( editor, object, mapName, newMap, materialSlot ) {
 
 
 	Command.call( this, editor );
 
@@ -61,7 +63,7 @@ SetMaterialMapCommand.prototype = {
 
 
 		// serializes a map (THREE.Texture)
 
 
-		function serializeMap ( map ) {
 
+		function serializeMap( map ) {
 
 
 			if ( map === null || map === undefined ) return null;
 
 
@@ -86,7 +88,7 @@ SetMaterialMapCommand.prototype = {
 
 		// extract data from the cache hash
 
 		// remove metadata on each item
 
 		// and return as array
 
-		function extractFromCache ( cache ) {
 
+		function extractFromCache( cache ) {
 
 
 			var values = [];
 
 			for ( var key in cache ) {
 
@@ -111,14 +113,14 @@ SetMaterialMapCommand.prototype = {
 
 		this.oldMap = parseTexture( json.oldMap );
 
 		this.newMap = parseTexture( json.newMap );
 
 
-		function parseTexture ( json ) {
 
+		function parseTexture( json ) {
 
 
 			var map = null;
 
 			if ( json !== null ) {
 
 
-				var loader = new THREE.ObjectLoader();
 
+				var loader = new ObjectLoader();
 
 				var images = loader.parseImages( json.images );
 
-				var textures  = loader.parseTextures( [ json ], images );
 
+				var textures = loader.parseTextures( [ json ], images );
 
 				map = textures[ json.uuid ];
 
 				map.sourceFile = json.sourceFile;
 
 
@@ -130,3 +132,5 @@ SetMaterialMapCommand.prototype = {
 
 	}
 
 
 };
 
+
 
+export { SetMaterialMapCommand };

+ 4 - 1
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 };

+ 4 - 0
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 };

+ 7 - 3
editor/js/commands/SetPositionCommand.js
Файл харах 

@@ -3,6 +3,9 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { Vector3 } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
@@ -10,7 +13,6 @@
 
  * @param optionalOldPosition THREE.Vector3
 
  * @constructor
 
  */
 
-
 
 var SetPositionCommand = function ( editor, object, newPosition, optionalOldPosition ) {
 
 
 	Command.call( this, editor );
 
@@ -76,9 +78,11 @@ SetPositionCommand.prototype = {
 
 		Command.prototype.fromJSON.call( this, json );
 
 
 		this.object = this.editor.objectByUuid( json.objectUuid );
 
-		this.oldPosition = new THREE.Vector3().fromArray( json.oldPosition );
 
-		this.newPosition = new THREE.Vector3().fromArray( json.newPosition );
 
+		this.oldPosition = new Vector3().fromArray( json.oldPosition );
 
+		this.newPosition = new Vector3().fromArray( json.newPosition );
 
 
 	}
 
 
 };
 
+
 
+export { SetPositionCommand };

+ 7 - 3
editor/js/commands/SetRotationCommand.js
Файл харах 

@@ -3,6 +3,9 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { Euler } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
@@ -10,7 +13,6 @@
 
  * @param optionalOldRotation THREE.Euler
 
  * @constructor
 
  */
 
-
 
 var SetRotationCommand = function ( editor, object, newRotation, optionalOldRotation ) {
 
 
 	Command.call( this, editor );
 
@@ -77,9 +79,11 @@ SetRotationCommand.prototype = {
 
 		Command.prototype.fromJSON.call( this, json );
 
 
 		this.object = this.editor.objectByUuid( json.objectUuid );
 
-		this.oldRotation = new THREE.Euler().fromArray( json.oldRotation );
 
-		this.newRotation = new THREE.Euler().fromArray( json.newRotation );
 
+		this.oldRotation = new Euler().fromArray( json.oldRotation );
 
+		this.newRotation = new Euler().fromArray( json.newRotation );
 
 
 	}
 
 
 };
 
+
 
+export { SetRotationCommand };

+ 7 - 3
editor/js/commands/SetScaleCommand.js
Файл харах 

@@ -3,6 +3,9 @@
 
  * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
 
  */
 
 
+import { Command } from '../Command.js';
 
+import { Vector3 } from '../../../build/three.module.js';
 
+
 
 /**
 
  * @param editor Editor
 
  * @param object THREE.Object3D
 
@@ -10,7 +13,6 @@
 
  * @param optionalOldScale THREE.Vector3
 
  * @constructor
 
  */
 
-
 
 var SetScaleCommand = function ( editor, object, newScale, optionalOldScale ) {
 
 
 	Command.call( this, editor );
 
@@ -77,9 +79,11 @@ SetScaleCommand.prototype = {
 
 		Command.prototype.fromJSON.call( this, json );
 
 
 		this.object = this.editor.objectByUuid( json.objectUuid );
 
-		this.oldScale = new THREE.Vector3().fromArray( json.oldScale );
 
-		this.newScale = new THREE.Vector3().fromArray( json.newScale );
 
+		this.oldScale = new Vector3().fromArray( json.oldScale );
 
+		this.newScale = new Vector3().fromArray( json.newScale );
 
 
 	}
 
 
 };
 
+
 
+export { SetScaleCommand };

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

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 4 - 1
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 };

+ 5 - 1
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 };

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

+ 0 - 189
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;
 
-
 
-}

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

+ 174 - 168
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 };

+ 115 - 99
editor/js/libs/ui.three.js
Файл харах 

@@ -2,9 +2,23 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-UI.Texture = function ( mapping ) {
 
+import {
 
+	CanvasTexture,
 
+	RGBFormat,
 
+	RGBAFormat,
 
+ 	Texture,
 
+	Vector2,
 
+	Vector3
 
+} from '../../../build/three.module.js';
 
 
-	UI.Element.call( this );
 
+import { TGALoader } from '../../../examples/jsm/loaders/TGALoader.js';
 
+
 
+import { UIElement, UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
 
+import { MoveObjectCommand } from '../commands/MoveObjectCommand.js';
 
+
 
+var UITexture = function ( mapping ) {
 
+
 
+	UIElement.call( this );
 
 
 	var scope = this;
 
 
@@ -27,7 +41,7 @@ UI.Texture = function ( mapping ) {
 
 	canvas.style.cursor = 'pointer';
 
 	canvas.style.marginRight = '5px';
 
 	canvas.style.border = '1px solid #888';
 
-	canvas.addEventListener( 'click', function ( event ) {
 
+	canvas.addEventListener( 'click', function () {
 
 
 		input.click();
 
 
@@ -41,6 +55,12 @@ UI.Texture = function ( mapping ) {
 
 	}, false );
 
 	dom.appendChild( canvas );
 
 
+	var name = document.createElement( 'input' );
 
+	name.disabled = true;
 
+	name.style.width = '64px';
 
+	name.style.border = '1px solid #ccc';
 
+	dom.appendChild( name );
 
+
 
 	function loadFile( file ) {
 
 
 		if ( file.type.match( 'image.*' ) ) {
 
@@ -51,9 +71,9 @@ UI.Texture = function ( mapping ) {
 
 
 				reader.addEventListener( 'load', function ( event ) {
 
 
-					var canvas = new THREE.TGALoader().parse( event.target.result );
 
+					var canvas = new TGALoader().parse( event.target.result );
 
 
-					var texture = new THREE.CanvasTexture( canvas, mapping );
 
+					var texture = new CanvasTexture( canvas, mapping );
 
 					texture.sourceFile = file.name;
 
 
 					scope.setValue( texture );
 
@@ -69,11 +89,11 @@ UI.Texture = function ( mapping ) {
 
 				reader.addEventListener( 'load', function ( event ) {
 
 
 					var image = document.createElement( 'img' );
 
-					image.addEventListener( 'load', function ( event ) {
 
+					image.addEventListener( 'load', function () {
 
 
-						var texture = new THREE.Texture( this, mapping );
 
+						var texture = new Texture( this, mapping );
 
 						texture.sourceFile = file.name;
 
-						texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
 
+						texture.format = file.type === 'image/jpeg' ? RGBFormat : RGBAFormat;
 
 						texture.needsUpdate = true;
 
 
 						scope.setValue( texture );
 
@@ -104,18 +124,19 @@ UI.Texture = function ( mapping ) {
 
 
 };
 
 
-UI.Texture.prototype = Object.create( UI.Element.prototype );
 
-UI.Texture.prototype.constructor = UI.Texture;
 
+UITexture.prototype = Object.create( UIElement.prototype );
 
+UITexture.prototype.constructor = UITexture;
 
 
-UI.Texture.prototype.getValue = function () {
 
+UITexture.prototype.getValue = function () {
 
 
 	return this.texture;
 
 
 };
 
 
-UI.Texture.prototype.setValue = function ( texture ) {
 
+UITexture.prototype.setValue = function ( texture ) {
 
 
 	var canvas = this.dom.children[ 0 ];
 
+	var name = this.dom.children[ 1 ];
 
 	var context = canvas.getContext( '2d' );
 
 
 	if ( texture !== null ) {
 
@@ -124,21 +145,21 @@ UI.Texture.prototype.setValue = function ( texture ) {
 
 
 		if ( image !== undefined && image.width > 0 ) {
 
 
-			canvas.title = texture.sourceFile;
 
+			name.value = texture.sourceFile;
 
 
 			var scale = canvas.width / image.width;
 
 			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
 
 
 		} else {
 
 
-			canvas.title = texture.sourceFile + ' (error)';
 
+			name.value = texture.sourceFile + ' (error)';
 
 			context.clearRect( 0, 0, canvas.width, canvas.height );
 
 
 		}
 
 
 	} else {
 
 
-		canvas.title = 'empty';
 
+		name.value = '';
 
 
 		if ( context !== null ) {
 
 
@@ -154,7 +175,7 @@ UI.Texture.prototype.setValue = function ( texture ) {
 
 
 };
 
 
-UI.Texture.prototype.setEncoding = function ( encoding ) {
 
+UITexture.prototype.setEncoding = function ( encoding ) {
 
 
 	var texture = this.getValue();
 
 	if ( texture !== null ) {
 
@@ -167,7 +188,7 @@ UI.Texture.prototype.setEncoding = function ( encoding ) {
 
 
 };
 
 
-UI.Texture.prototype.onChange = function ( callback ) {
 
+UITexture.prototype.onChange = function ( callback ) {
 
 
 	this.onChangeCallback = callback;
 
 
@@ -175,11 +196,11 @@ UI.Texture.prototype.onChange = function ( callback ) {
 
 
 };
 
 
-// Outliner
 
+// UIOutliner
 
 
-UI.Outliner = function ( editor ) {
 
+var UIOutliner = function ( editor ) {
 
 
-	UI.Element.call( this );
 
+	UIElement.call( this );
 
 
 	var scope = this;
 
 
@@ -189,6 +210,7 @@ UI.Outliner = function ( editor ) {
 
 
 	// hack
 
 	this.scene = editor.scene;
 
+	this.editor = editor;
 
 
 	// Prevent native scroll behavior
 
 	dom.addEventListener( 'keydown', function ( event ) {
 
@@ -231,10 +253,10 @@ UI.Outliner = function ( editor ) {
 
 
 };
 
 
-UI.Outliner.prototype = Object.create( UI.Element.prototype );
 
-UI.Outliner.prototype.constructor = UI.Outliner;
 
+UIOutliner.prototype = Object.create( UIElement.prototype );
 
+UIOutliner.prototype.constructor = UIOutliner;
 
 
-UI.Outliner.prototype.selectIndex = function ( index ) {
 
+UIOutliner.prototype.selectIndex = function ( index ) {
 
 
 	if ( index >= 0 && index < this.options.length ) {
 
 
@@ -248,7 +270,7 @@ UI.Outliner.prototype.selectIndex = function ( index ) {
 
 
 };
 
 
-UI.Outliner.prototype.setOptions = function ( options ) {
 
+UIOutliner.prototype.setOptions = function ( options ) {
 
 
 	var scope = this;
 
 
@@ -272,7 +294,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 
 	var currentDrag;
 
 
-	function onDrag( event ) {
 
+	function onDrag() {
 
 
 		currentDrag = this;
 
 
@@ -358,7 +380,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 
 		if ( newParentIsChild ) return;
 
 
-		editor.execute( new MoveObjectCommand( editor, object, newParent, nextObject ) );
 
+		scope.editor.execute( new MoveObjectCommand( scope.editor, object, newParent, nextObject ) );
 
 
 		var changeEvent = document.createEvent( 'HTMLEvents' );
 
 		changeEvent.initEvent( 'change', true, true );
 
@@ -398,26 +420,26 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 
 };
 
 
-UI.Outliner.prototype.getValue = function () {
 
+UIOutliner.prototype.getValue = function () {
 
 
 	return this.selectedValue;
 
 
 };
 
 
-UI.Outliner.prototype.setValue = function ( value ) {
 
+UIOutliner.prototype.setValue = function ( value ) {
 
 
 	for ( var i = 0; i < this.options.length; i ++ ) {
 
 
-		var element = this.options[ i ];
 
+		var UIElement = this.options[ i ];
 
 
-		if ( element.value === value ) {
 
+		if ( UIElement.value === value ) {
 
 
-			element.classList.add( 'active' );
 
+			UIElement.classList.add( 'active' );
 
 
 			// scroll into view
 
 
-			var y = element.offsetTop - this.dom.offsetTop;
 
-			var bottomY = y + element.offsetHeight;
 
+			var y = UIElement.offsetTop - this.dom.offsetTop;
 
+			var bottomY = y + UIElement.offsetHeight;
 
 			var minScroll = bottomY - this.dom.offsetHeight;
 
 
 			if ( this.dom.scrollTop > y ) {
 
@@ -434,7 +456,7 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
 
 		} else {
 
 
-			element.classList.remove( 'active' );
 
+			UIElement.classList.remove( 'active' );
 
 
 		}
 
 
@@ -446,19 +468,19 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
 
 };
 
 
-var Points = function ( onAddClicked ) {
 
+var UIPoints = function ( onAddClicked ) {
 
 
-	UI.Element.call( this );
 
+	UIElement.call( this );
 
 
-	var span = new UI.Span().setDisplay( 'inline-block' );
 
+	var span = new UISpan().setDisplay( 'inline-block' );
 
 
-	this.pointsList = new UI.Div();
 
+	this.pointsList = new UIDiv();
 
 	span.add( this.pointsList );
 
 
-	var row = new UI.Row();
 
+	var row = new UIRow();
 
 	span.add( row );
 
 
-	var addPointButton = new UI.Button( '+' ).onClick( onAddClicked );
 
+	var addPointButton = new UIButton( '+' ).onClick( onAddClicked );
 
 	row.add( addPointButton );
 
 
 	this.update = function () {
 
@@ -479,10 +501,10 @@ var Points = function ( onAddClicked ) {
 
 
 };
 
 
-Points.prototype = Object.create( UI.Element.prototype );
 
-Points.prototype.constructor = Points;
 
+UIPoints.prototype = Object.create( UIElement.prototype );
 
+UIPoints.prototype.constructor = UIPoints;
 
 
-Points.prototype.onChange = function ( callback ) {
 
+UIPoints.prototype.onChange = function ( callback ) {
 
 
 	this.onChangeCallback = callback;
 
 
@@ -490,9 +512,9 @@ Points.prototype.onChange = function ( callback ) {
 
 
 };
 
 
-Points.prototype.clear = function () {
 
+UIPoints.prototype.clear = function () {
 
 
-	for ( var i = 0; i < this.pointsUI.length; ++ i ) {
 
+	for ( var i = 0; i < this.pointslength; ++ i ) {
 
 
 		if ( this.pointsUI[ i ] ) {
 
 
@@ -506,7 +528,7 @@ Points.prototype.clear = function () {
 
 
 };
 
 
-Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
 
+UIPoints.prototype.deletePointRow = function ( idx, dontUpdate ) {
 
 
 	if ( ! this.pointsUI[ idx ] ) return;
 
 
@@ -521,26 +543,26 @@ Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
 
 
 };
 
 
-UI.Points2 = function () {
 
+var UIPoints2 = function () {
 
 
-	Points.call( this, UI.Points2.addRow.bind( this ) );
 
+	UIPoints.call( this, UIPoints2.addRow.bind( this ) );
 
 
 	return this;
 
 
 };
 
 
-UI.Points2.prototype = Object.create( Points.prototype );
 
-UI.Points2.prototype.constructor = UI.Points2;
 
+UIPoints2.prototype = Object.create( UIPoints.prototype );
 
+UIPoints2.prototype.constructor = UIPoints2;
 
 
-UI.Points2.addRow = function () {
 
+UIPoints2.addRow = function () {
 
 
-	if ( this.pointsUI.length === 0 ) {
 
+	if ( this.pointslength === 0 ) {
 
 
 		this.pointsList.add( this.createPointRow( 0, 0 ) );
 
 
 	} else {
 
 
-		var point = this.pointsUI[ this.pointsUI.length - 1 ];
 
+		var point = this.pointsUI[ this.pointslength - 1 ];
 
 
 		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue() ) );
 
 
@@ -550,20 +572,17 @@ UI.Points2.addRow = function () {
 
 
 };
 
 
-UI.Points2.prototype.getValue = function () {
 
+UIPoints2.prototype.getValue = function () {
 
 
 	var points = [];
 
-	var count = 0;
 
 
-	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
 
+	for ( var i = 0; i < this.pointslength; i ++ ) {
 
 
 		var pointUI = this.pointsUI[ i ];
 
 
 		if ( ! pointUI ) continue;
 
 
-		points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
 
-		++ count;
 
-		pointUI.lbl.setValue( count );
 
+		points.push( new Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
 
 
 	}
 
 
@@ -571,7 +590,7 @@ UI.Points2.prototype.getValue = function () {
 
 
 };
 
 
-UI.Points2.prototype.setValue = function ( points ) {
 
+UIPoints2.prototype.setValue = function ( points ) {
 
 
 	this.clear();
 
 
@@ -587,23 +606,23 @@ UI.Points2.prototype.setValue = function ( points ) {
 
 
 };
 
 
-UI.Points2.prototype.createPointRow = function ( x, y ) {
 
+UIPoints2.prototype.createPointRow = function ( x, y ) {
 
 
-	var pointRow = new UI.Div();
 
-	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
 
-	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
 
-	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
 
+	var pointRow = new UIDiv();
 
+	var lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
 
+	var txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
 
+	var txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
 
 
 	var idx = this.lastPointIdx;
 
 	var scope = this;
 
-	var btn = new UI.Button( '-' ).onClick( function () {
 
+	var btn = new UIButton( '-' ).onClick( function () {
 
 
 		if ( scope.isEditing ) return;
 
 		scope.deletePointRow( idx );
 
 
 	} );
 
 
-	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
 
+	this.pointspush( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
 
 	++ this.lastPointIdx;
 
 	pointRow.add( lbl, txtX, txtY, btn );
 
 
@@ -611,26 +630,26 @@ UI.Points2.prototype.createPointRow = function ( x, y ) {
 
 
 };
 
 
-UI.Points3 = function () {
 
+var UIPoints3 = function () {
 
 
-	Points.call( this, UI.Points3.addRow.bind( this ) );
 
+	UIPoints.call( this, UIPoints3.addRow.bind( this ) );
 
 
 	return this;
 
 
 };
 
 
-UI.Points3.prototype = Object.create( Points.prototype );
 
-UI.Points3.prototype.constructor = UI.Points3;
 
+UIPoints3.prototype = Object.create( UIPoints.prototype );
 
+UIPoints3.prototype.constructor = UIPoints3;
 
 
-UI.Points3.addRow = function () {
 
+UIPoints3.addRow = function () {
 
 
-	if ( this.pointsUI.length === 0 ) {
 
+	if ( this.pointslength === 0 ) {
 
 
 		this.pointsList.add( this.createPointRow( 0, 0, 0 ) );
 
 
 	} else {
 
 
-		var point = this.pointsUI[ this.pointsUI.length - 1 ];
 
+		var point = this.pointsUI[ this.pointslength - 1 ];
 
 
 		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
 
 
@@ -640,20 +659,17 @@ UI.Points3.addRow = function () {
 
 
 };
 
 
-UI.Points3.prototype.getValue = function () {
 
+UIPoints3.prototype.getValue = function () {
 
 
 	var points = [];
 
-	var count = 0;
 
 
-	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
 
+	for ( var i = 0; i < this.pointslength; i ++ ) {
 
 
 		var pointUI = this.pointsUI[ i ];
 
 
 		if ( ! pointUI ) continue;
 
 
-		points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
 
-		++ count;
 
-		pointUI.lbl.setValue( count );
 
+		points.push( new Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
 
 
 	}
 
 
@@ -661,7 +677,7 @@ UI.Points3.prototype.getValue = function () {
 
 
 };
 
 
-UI.Points3.prototype.setValue = function ( points ) {
 
+UIPoints3.prototype.setValue = function ( points ) {
 
 
 	this.clear();
 
 
@@ -677,24 +693,24 @@ UI.Points3.prototype.setValue = function ( points ) {
 
 
 };
 
 
-UI.Points3.prototype.createPointRow = function ( x, y, z ) {
 
+UIPoints3.prototype.createPointRow = function ( x, y, z ) {
 
 
-	var pointRow = new UI.Div();
 
-	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
 
-	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
 
-	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
 
-	var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( this.update );
 
+	var pointRow = new UIDiv();
 
+	var lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
 
+	var txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
 
+	var txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
 
+	var txtZ = new UINumber( z ).setWidth( '30px' ).onChange( this.update );
 
 
 	var idx = this.lastPointIdx;
 
 	var scope = this;
 
-	var btn = new UI.Button( '-' ).onClick( function () {
 
+	var btn = new UIButton( '-' ).onClick( function () {
 
 
 		if ( scope.isEditing ) return;
 
 		scope.deletePointRow( idx );
 
 
 	} );
 
 
-	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
 
+	this.pointspush( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
 
 	++ this.lastPointIdx;
 
 	pointRow.add( lbl, txtX, txtY, txtZ, btn );
 
 
@@ -702,33 +718,33 @@ UI.Points3.prototype.createPointRow = function ( x, y, z ) {
 
 
 };
 
 
-UI.THREE = {};
 
-
 
-UI.THREE.Boolean = function ( boolean, text ) {
 
+var UIBoolean = function ( boolean, text ) {
 
 
-	UI.Span.call( this );
 
+	UISpan.call( this );
 
 
 	this.setMarginRight( '10px' );
 
 
-	this.checkbox = new UI.Checkbox( boolean );
 
-	this.text = new UI.Text( text ).setMarginLeft( '3px' );
 
+	this.checkbox = new UICheckbox( boolean );
 
+	this.text = new UIText( text ).setMarginLeft( '3px' );
 
 
 	this.add( this.checkbox );
 
 	this.add( this.text );
 
 
 };
 
 
-UI.THREE.Boolean.prototype = Object.create( UI.Span.prototype );
 
-UI.THREE.Boolean.prototype.constructor = UI.THREE.Boolean;
 
+UIBoolean.prototype = Object.create( UISpan.prototype );
 
+UIBoolean.prototype.constructor = UIBoolean;
 
 
-UI.THREE.Boolean.prototype.getValue = function () {
 
+UIBoolean.prototype.getValue = function () {
 
 
 	return this.checkbox.getValue();
 
 
 };
 
 
-UI.THREE.Boolean.prototype.setValue = function ( value ) {
 
+UIBoolean.prototype.setValue = function ( value ) {
 
 
 	return this.checkbox.setValue( value );
 
 
 };
 
+
 
+export { UITexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };

+ 36 - 35
editor/sw.js
Файл харах 

@@ -5,43 +5,49 @@ const assets = [
 
 
 	'../files/favicon.ico',
 
 
-	'../build/three.js',
 
+	'../build/three.module.js',
 
 
-	'../examples/js/controls/TransformControls.js',
 
+	'../examples/jsm/controls/TransformControls.js',
 
+
 
+	'../examples/jsm/libs/chevrotain.module.min.js',
 
+	'../examples/jsm/libs/inflate.module.min.js',
 
 
-	'../examples/js/libs/chevrotain.min.js',
 
 	'../examples/js/libs/jszip.min.js',
 
-	'../examples/js/libs/inflate.min.js',
 
 	'../examples/js/libs/draco/draco_decoder.js',
 
 	'../examples/js/libs/draco/draco_decoder.wasm',
 
 	'../examples/js/libs/draco/draco_wasm_wrapper.js',
 
 
-	'../examples/js/loaders/AMFLoader.js',
 
-	'../examples/js/loaders/ColladaLoader.js',
 
-	'../examples/js/loaders/DRACOLoader.js',
 
-	'../examples/js/loaders/FBXLoader.js',
 
-	'../examples/js/loaders/GLTFLoader.js',
 
-	'../examples/js/loaders/KMZLoader.js',
 
-	'../examples/js/loaders/MD2Loader.js',
 
-	'../examples/js/loaders/OBJLoader.js',
 
-	'../examples/js/loaders/MTLLoader.js',
 
-	'../examples/js/loaders/PLYLoader.js',
 
-	'../examples/js/loaders/STLLoader.js',
 
-	'../examples/js/loaders/SVGLoader.js',
 
-	'../examples/js/loaders/TGALoader.js',
 
-	'../examples/js/loaders/TDSLoader.js',
 
-	'../examples/js/loaders/VRMLLoader.js',
 
-	'../examples/js/loaders/VTKLoader.js',
 
-
 
-	'../examples/js/exporters/ColladaExporter.js',
 
-	'../examples/js/exporters/GLTFExporter.js',
 
-	'../examples/js/exporters/OBJExporter.js',
 
-	'../examples/js/exporters/PLYExporter.js',
 
-	'../examples/js/exporters/STLExporter.js',
 
-
 
-	'../examples/js/renderers/Projector.js',
 
-	'../examples/js/renderers/RaytracingRenderer.js',
 
-	'../examples/js/renderers/SVGRenderer.js',
 
+	'../examples/jsm/loaders/AMFLoader.js',
 
+	'../examples/jsm/loaders/ColladaLoader.js',
 
+	'../examples/jsm/loaders/DRACOLoader.js',
 
+	'../examples/jsm/loaders/FBXLoader.js',
 
+	'../examples/jsm/loaders/GLTFLoader.js',
 
+	'../examples/jsm/loaders/KMZLoader.js',
 
+	'../examples/jsm/loaders/MD2Loader.js',
 
+	'../examples/jsm/loaders/OBJLoader.js',
 
+	'../examples/jsm/loaders/MTLLoader.js',
 
+	'../examples/jsm/loaders/PLYLoader.js',
 
+	'../examples/jsm/loaders/STLLoader.js',
 
+	'../examples/jsm/loaders/SVGLoader.js',
 
+	'../examples/jsm/loaders/TGALoader.js',
 
+	'../examples/jsm/loaders/TDSLoader.js',
 
+	'../examples/jsm/loaders/VRMLLoader.js',
 
+	'../examples/jsm/loaders/VTKLoader.js',
 
+
 
+	'../examples/jsm/curves/NURBSCurve.js',
 
+	'../examples/jsm/curves/NURBSUtils.js',
 
+
 
+	'../examples/jsm/exporters/ColladaExporter.js',
 
+	'../examples/jsm/exporters/GLTFExporter.js',
 
+	'../examples/jsm/exporters/OBJExporter.js',
 
+	'../examples/jsm/exporters/PLYExporter.js',
 
+	'../examples/jsm/exporters/STLExporter.js',
 
+
 
+	'../examples/jsm/renderers/Projector.js',
 
+	'../examples/jsm/renderers/RaytracingRenderer.js',
 
+	'../examples/jsm/renderers/SVGRenderer.js',
 
+
 
+	'../examples/jsm/geometries/TeapotBufferGeometry.js',
 
 
 	'./manifest.json',
 
 	'./images/icon.png',
 
@@ -81,9 +87,6 @@ const assets = [
 
 	'./js/libs/ui.js',
 
 	'./js/libs/ui.three.js',
 
 
-	'./js/libs/html2canvas.js',
 
-	'./js/libs/three.html.js',
 
-
 
 	'./js/libs/app.js',
 
 	'./js/Player.js',
 
 	'./js/Script.js',
 
@@ -104,7 +107,6 @@ const assets = [
 
 	'./js/Menubar.Edit.js',
 
 	'./js/Menubar.Add.js',
 
 	'./js/Menubar.Play.js',
 
-	// './js/Menubar.View.js',
 
 	'./js/Menubar.Examples.js',
 
 	'./js/Menubar.Help.js',
 
 	'./js/Menubar.Status.js',
 
@@ -135,7 +137,6 @@ const assets = [
 
 	'./js/Sidebar.Geometry.TorusGeometry.js',
 
 	'./js/Sidebar.Geometry.TorusKnotGeometry.js',
 
 	'./js/Sidebar.Geometry.TubeGeometry.js',
 
-	'../examples/js/geometries/TeapotBufferGeometry.js',
 
 	'./js/Sidebar.Geometry.TeapotBufferGeometry.js',
 
 	'./js/Sidebar.Geometry.LatheGeometry.js',
 
 	'./js/Sidebar.Material.js',