Преглед на файлове

Add mains unit test files and associated builds with rollup

Tristan VALCKE преди 7 години
родител
ревизия
0d9a07af79
променени са 7 файла, в които са добавени 45620 реда и са изтрити 0 реда
  1. 81 0
      test/rollup.unit.config.js
  2. 80 0
      test/three.editor.unit.js
  3. 3 0
      test/three.example.unit.js
  4. 290 0
      test/three.source.unit.js
  5. 9442 0
      test/unit/three.editor.unit.js
  6. 15 0
      test/unit/three.example.unit.js
  7. 35709 0
      test/unit/three.source.unit.js

+ 81 - 0
test/rollup.unit.config.js

@@ -0,0 +1,81 @@
+function glsl() {
+
+	return {
+
+		transform( code, id ) {
+
+			if ( /\.glsl$/.test( id ) === false ) return;
+
+			var transformedCode = 'export default ' + JSON.stringify(
+				code
+					.replace( /[ \t]*\/\/.*\n/g, '' )
+					.replace( /[ \t]*\/\*[\s\S]*?\*\//g, '' )
+					.replace( /\n{2,}/g, '\n' )
+			) + ';';
+			return {
+				code: transformedCode,
+				map: { mappings: '' }
+			};
+
+		}
+
+	};
+
+}
+
+export default [
+	// editor unit conf
+	{
+		entry: 'test/three.editor.unit.js',
+		indent: '\t',
+		plugins: [
+			glsl()
+		],
+		// sourceMap: true,
+		targets: [
+			{
+				format: 'umd',
+				moduleName: 'THREE',
+				dest: 'test/unit/three.editor.unit.js',
+				intro: 'QUnit.module( "Editor", () => {',
+				outro: '} );',
+			}
+		]
+	},
+	// example unit conf
+	{
+		entry: 'test/three.example.unit.js',
+		indent: '\t',
+		plugins: [
+			glsl()
+		],
+		// sourceMap: true,
+		targets: [
+			{
+				format: 'umd',
+				moduleName: 'THREE',
+				dest: 'test/unit/three.example.unit.js',
+				intro: 'QUnit.module( "Example", () => {',
+				outro: '} );',
+			}
+		]
+	},
+	// source unit conf
+	{
+		entry: 'test/three.source.unit.js',
+		indent: '\t',
+		plugins: [
+			glsl()
+		],
+		// sourceMap: true,
+		targets: [
+			{
+				format: 'umd',
+				moduleName: 'THREE',
+				dest: 'test/unit/three.source.unit.js',
+				intro: 'QUnit.module( "Source", () => {',
+				outro: '} );',
+			}
+		]
+	},
+];

+ 80 - 0
test/three.editor.unit.js

@@ -0,0 +1,80 @@
+/**
+ * @author TristanVALCKE / https://github.com/Itee
+ */
+
+// TODO (Itee) Editor is not es6 module so care to include order !!!
+// TODO: all views could not be testable, waiting modular code before implement units tests on them
+
+//editor
+import './unit/editor/Command.tests';
+import './unit/editor/Config.tests';
+import './unit/editor/Editor.tests';
+import './unit/editor/History.tests';
+import './unit/editor/Loader.tests';
+import './unit/editor/Player.tests';
+import './unit/editor/Script.tests';
+
+import './unit/editor/Menubar.tests';
+import './unit/editor/Menubar.Add.tests';
+import './unit/editor/Menubar.Edit.tests';
+import './unit/editor/Menubar.Examples.tests';
+import './unit/editor/Menubar.File.tests';
+import './unit/editor/Menubar.Help.tests';
+import './unit/editor/Menubar.Play.tests';
+import './unit/editor/Menubar.Status.tests';
+import './unit/editor/Menubar.View.tests';
+
+import './unit/editor/Sidebar.tests';
+import './unit/editor/Sidebar.Animation.tests';
+import './unit/editor/Sidebar.Geometry.tests';
+import './unit/editor/Sidebar.Geometry.BoxGeometry.tests';
+import './unit/editor/Sidebar.Geometry.BufferGeometry.tests';
+import './unit/editor/Sidebar.Geometry.CircleGeometry.tests';
+import './unit/editor/Sidebar.Geometry.CylinderGeometry.tests';
+import './unit/editor/Sidebar.Geometry.Geometry.tests';
+import './unit/editor/Sidebar.Geometry.IcosahedronGeometry.tests';
+import './unit/editor/Sidebar.Geometry.LatheGeometry.tests';
+import './unit/editor/Sidebar.Geometry.Modifiers.tests';
+import './unit/editor/Sidebar.Geometry.PlaneGeometry.tests';
+import './unit/editor/Sidebar.Geometry.SphereGeometry.tests';
+import './unit/editor/Sidebar.Geometry.TeapotBufferGeometry.tests';
+import './unit/editor/Sidebar.Geometry.TorusGeometry.tests';
+import './unit/editor/Sidebar.Geometry.TorusKnotGeometry.tests';
+import './unit/editor/Sidebar.History.tests';
+import './unit/editor/Sidebar.Material.tests';
+import './unit/editor/Sidebar.Object.tests';
+import './unit/editor/Sidebar.Project.tests';
+import './unit/editor/Sidebar.Properties.tests';
+import './unit/editor/Sidebar.Scene.tests';
+import './unit/editor/Sidebar.Script.tests';
+import './unit/editor/Sidebar.Settings.tests';
+
+import './unit/editor/Storage.tests';
+import './unit/editor/Toolbar.tests';
+import './unit/editor/Viewport.tests';
+import './unit/editor/Viewport.Info.tests';
+
+//editor/commands
+import './unit/editor/commands/AddObjectCommand.tests';
+import './unit/editor/commands/AddScriptCommand.tests';
+import './unit/editor/commands/MoveObjectCommand.tests';
+import './unit/editor/commands/MultiCmdsCommand.tests';
+import './unit/editor/commands/RemoveObjectCommand.tests';
+import './unit/editor/commands/RemoveScriptCommand.tests';
+import './unit/editor/commands/SetColorCommand.tests';
+import './unit/editor/commands/SetGeometryCommand.tests';
+import './unit/editor/commands/SetGeometryValueCommand.tests';
+import './unit/editor/commands/SetMaterialColorCommand.tests';
+import './unit/editor/commands/SetMaterialCommand.tests';
+import './unit/editor/commands/SetMaterialMapCommand.tests';
+import './unit/editor/commands/SetMaterialValueCommand.tests';
+import './unit/editor/commands/SetPositionCommand.tests';
+import './unit/editor/commands/SetRotationCommand.tests';
+import './unit/editor/commands/SetScaleCommand.tests';
+import './unit/editor/commands/SetSceneCommand.tests';
+import './unit/editor/commands/SetScriptValueCommand.tests';
+import './unit/editor/commands/SetUuidCommand.tests';
+import './unit/editor/commands/SetValueCommand.tests';
+
+//editor/others
+

+ 3 - 0
test/three.example.unit.js

@@ -0,0 +1,3 @@
+/**
+ * @author TristanVALCKE / https://github.com/Itee
+ */

+ 290 - 0
test/three.source.unit.js

@@ -0,0 +1,290 @@
+/**
+ * @author TristanVALCKE / https://github.com/Itee
+ */
+
+//src
+import './unit/src/constants.tests';
+import './unit/src/polyfills.tests';
+import './unit/src/utils.tests';
+
+
+//src/animation
+import './unit/src/animation/AnimationAction.tests';
+import './unit/src/animation/AnimationClip.tests';
+import './unit/src/animation/AnimationMixer.tests';
+import './unit/src/animation/AnimationObjectGroup.tests';
+import './unit/src/animation/AnimationUtils.tests';
+import './unit/src/animation/KeyframeTrack.tests';
+import './unit/src/animation/PropertyBinding.tests';
+import './unit/src/animation/PropertyMixer.tests';
+
+//src/animation/tracks
+import './unit/src/animation/tracks/BooleanKeyframeTrack.tests';
+import './unit/src/animation/tracks/ColorKeyframeTrack.tests';
+import './unit/src/animation/tracks/NumberKeyframeTrack.tests';
+import './unit/src/animation/tracks/QuaternionKeyframeTrack.tests';
+import './unit/src/animation/tracks/StringKeyframeTrack.tests';
+import './unit/src/animation/tracks/VectorKeyframeTrack.tests';
+
+
+//src/audio
+import './unit/src/audio/Audio.tests';
+import './unit/src/audio/AudioAnalyser.tests';
+import './unit/src/audio/AudioContext.tests';
+import './unit/src/audio/AudioListener.tests';
+import './unit/src/audio/PositionalAudio.tests';
+
+
+//src/cameras
+import './unit/src/cameras/ArrayCamera.tests';
+import './unit/src/cameras/Camera.tests';
+import './unit/src/cameras/CubeCamera.tests';
+import './unit/src/cameras/OrthographicCamera.tests';
+import './unit/src/cameras/PerspectiveCamera.tests';
+import './unit/src/cameras/StereoCamera.tests';
+
+
+//src/core
+import './unit/src/core/BufferAttribute.tests';
+import './unit/src/core/BufferGeometry.tests';
+import './unit/src/core/Clock.tests';
+import './unit/src/core/DirectGeometry.tests';
+import './unit/src/core/EventDispatcher.tests';
+import './unit/src/core/Face3.tests';
+import './unit/src/core/Geometry.tests';
+import './unit/src/core/InstancedBufferAttribute.tests';
+import './unit/src/core/InstancedBufferGeometry.tests';
+import './unit/src/core/InstancedInterleavedBuffer.tests';
+import './unit/src/core/InterleavedBuffer.tests';
+import './unit/src/core/InterleavedBufferAttribute.tests';
+import './unit/src/core/Layers.tests';
+import './unit/src/core/Object3D.tests';
+import './unit/src/core/Raycaster.tests';
+import './unit/src/core/Uniform.tests';
+
+
+//src/extras
+import './unit/src/extras/SceneUtils.tests';
+import './unit/src/extras/ShapeUtils.tests';
+
+//src/extras/core
+import './unit/src/extras/core/Curve.tests';
+import './unit/src/extras/core/CurvePath.tests';
+import './unit/src/extras/core/Font.tests';
+import './unit/src/extras/core/Interpolations.tests';
+import './unit/src/extras/core/Path.tests';
+import './unit/src/extras/core/PathPrototype.tests';
+import './unit/src/extras/core/Shape.tests';
+import './unit/src/extras/core/ShapePath.tests';
+
+//src/extras/curves
+import './unit/src/extras/curves/ArcCurve.tests';
+import './unit/src/extras/curves/CatmullRomCurve3.tests';
+import './unit/src/extras/curves/CubicBezierCurve.tests';
+import './unit/src/extras/curves/CubicBezierCurve3.tests';
+import './unit/src/extras/curves/EllipseCurve.tests';
+import './unit/src/extras/curves/LineCurve.tests';
+import './unit/src/extras/curves/LineCurve3.tests';
+import './unit/src/extras/curves/QuadraticBezierCurve.tests';
+import './unit/src/extras/curves/QuadraticBezierCurve3.tests';
+import './unit/src/extras/curves/SplineCurve.tests';
+
+//src/extras/objects
+import './unit/src/extras/objects/ImmediateRenderObject.tests';
+
+
+//src/geometries
+import './unit/src/geometries/BoxGeometry.tests';
+import './unit/src/geometries/CircleGeometry.tests';
+import './unit/src/geometries/ConeGeometry.tests';
+import './unit/src/geometries/CylinderGeometry.tests';
+import './unit/src/geometries/DodecahedronGeometry.tests';
+import './unit/src/geometries/EdgesGeometry.tests';
+import './unit/src/geometries/ExtrudeGeometry.tests';
+import './unit/src/geometries/IcosahedronGeometry.tests';
+import './unit/src/geometries/LatheGeometry.tests';
+import './unit/src/geometries/OctahedronGeometry.tests';
+import './unit/src/geometries/ParametricGeometry.tests';
+import './unit/src/geometries/PlaneGeometry.tests';
+import './unit/src/geometries/PolyhedronGeometry.tests';
+import './unit/src/geometries/RingGeometry.tests';
+import './unit/src/geometries/ShapeGeometry.tests';
+import './unit/src/geometries/SphereGeometry.tests';
+import './unit/src/geometries/TetrahedronGeometry.tests';
+import './unit/src/geometries/TextGeometry.tests';
+import './unit/src/geometries/TorusGeometry.tests';
+import './unit/src/geometries/TorusKnotGeometry.tests';
+import './unit/src/geometries/TubeGeometry.tests';
+import './unit/src/geometries/WireframeGeometry.tests';
+
+
+//src/helpers
+import './unit/src/helpers/ArrowHelper.tests';
+import './unit/src/helpers/AxesHelper.tests';
+import './unit/src/helpers/Box3Helper.tests';
+import './unit/src/helpers/BoxHelper.tests';
+import './unit/src/helpers/CameraHelper.tests';
+import './unit/src/helpers/DirectionalLightHelper.tests';
+import './unit/src/helpers/FaceNormalsHelper.tests';
+import './unit/src/helpers/GridHelper.tests';
+import './unit/src/helpers/HemisphereLightHelper.tests';
+import './unit/src/helpers/PlaneHelper.tests';
+import './unit/src/helpers/PointLightHelper.tests';
+import './unit/src/helpers/PolarGridHelper.tests';
+import './unit/src/helpers/RectAreaLightHelper.tests';
+import './unit/src/helpers/SkeletonHelper.tests';
+import './unit/src/helpers/SpotLightHelper.tests';
+import './unit/src/helpers/VertexNormalsHelper.tests';
+
+
+//src/lights
+import './unit/src/lights/AmbientLight.tests';
+import './unit/src/lights/DirectionalLight.tests';
+import './unit/src/lights/DirectionalLightShadow.tests';
+import './unit/src/lights/HemisphereLight.tests';
+import './unit/src/lights/Light.tests';
+import './unit/src/lights/LightShadow.tests';
+import './unit/src/lights/PointLight.tests';
+import './unit/src/lights/RectAreaLight.tests';
+import './unit/src/lights/SpotLight.tests';
+import './unit/src/lights/SpotLightShadow.tests';
+
+
+//src/loaders
+import './unit/src/loaders/AnimationLoader.tests';
+import './unit/src/loaders/AudioLoader.tests';
+import './unit/src/loaders/BufferGeometryLoader.tests';
+import './unit/src/loaders/Cache.tests';
+import './unit/src/loaders/CompressedTextureLoader.tests';
+import './unit/src/loaders/CubeTextureLoader.tests';
+import './unit/src/loaders/DataTextureLoader.tests';
+import './unit/src/loaders/FileLoader.tests';
+import './unit/src/loaders/FontLoader.tests';
+import './unit/src/loaders/ImageLoader.tests';
+import './unit/src/loaders/JSONLoader.tests';
+import './unit/src/loaders/Loader.tests';
+import './unit/src/loaders/LoadingManager.tests';
+import './unit/src/loaders/MaterialLoader.tests';
+import './unit/src/loaders/ObjectLoader.tests';
+import './unit/src/loaders/TextureLoader.tests';
+
+
+//src/materials
+import './unit/src/materials/LineBasicMaterial.tests';
+import './unit/src/materials/LineDashedMaterial.tests';
+import './unit/src/materials/Material.tests';
+import './unit/src/materials/MeshBasicMaterial.tests';
+import './unit/src/materials/MeshDepthMaterial.tests';
+import './unit/src/materials/MeshDistanceMaterial.tests';
+import './unit/src/materials/MeshLambertMaterial.tests';
+import './unit/src/materials/MeshNormalMaterial.tests';
+import './unit/src/materials/MeshPhongMaterial.tests';
+import './unit/src/materials/MeshPhysicalMaterial.tests';
+import './unit/src/materials/MeshStandardMaterial.tests';
+import './unit/src/materials/MeshToonMaterial.tests';
+import './unit/src/materials/PointsMaterial.tests';
+import './unit/src/materials/RawShaderMaterial.tests';
+import './unit/src/materials/ShaderMaterial.tests';
+import './unit/src/materials/ShadowMaterial.tests';
+import './unit/src/materials/SpriteMaterial.tests';
+
+
+//src/math
+import './unit/src/math/Box2.tests';
+import './unit/src/math/Box3.tests';
+import './unit/src/math/Color.tests';
+import './unit/src/math/Cylindrical.tests';
+import './unit/src/math/Euler.tests';
+import './unit/src/math/Frustum.tests';
+import './unit/src/math/Interpolant.tests';
+import './unit/src/math/Line3.tests';
+import './unit/src/math/Math.tests';
+import './unit/src/math/Matrix3.tests';
+import './unit/src/math/Matrix4.tests';
+import './unit/src/math/Plane.tests';
+import './unit/src/math/Quaternion.tests';
+import './unit/src/math/Ray.tests';
+import './unit/src/math/Sphere.tests';
+import './unit/src/math/Spherical.tests';
+import './unit/src/math/Triangle.tests';
+import './unit/src/math/Vector2.tests';
+import './unit/src/math/Vector3.tests';
+import './unit/src/math/Vector4.tests';
+
+//src/math/interpolants
+import './unit/src/math/interpolants/CubicInterpolant.tests';
+import './unit/src/math/interpolants/DiscreteInterpolant.tests';
+import './unit/src/math/interpolants/LinearInterpolant.tests';
+import './unit/src/math/interpolants/QuaternionLinearInterpolant.tests';
+
+
+//src/objects
+import './unit/src/objects/Bone.tests';
+import './unit/src/objects/Group.tests';
+import './unit/src/objects/LensFlare.tests';
+import './unit/src/objects/Line.tests';
+import './unit/src/objects/LineLoop.tests';
+import './unit/src/objects/LineSegments.tests';
+import './unit/src/objects/LOD.tests';
+import './unit/src/objects/Mesh.tests';
+import './unit/src/objects/Points.tests';
+import './unit/src/objects/Skeleton.tests';
+import './unit/src/objects/SkinnedMesh.tests';
+import './unit/src/objects/Sprite.tests';
+
+
+//src/renderers
+import './unit/src/renderers/WebGL2Renderer.tests';
+import './unit/src/renderers/WebGLRenderer.tests';
+import './unit/src/renderers/WebGLRenderTarget.tests';
+import './unit/src/renderers/WebGLRenderTargetCube.tests';
+
+//src/renderers/shaders
+import './unit/src/renderers/shaders/ShaderChunk.tests';
+import './unit/src/renderers/shaders/ShaderLib.tests';
+import './unit/src/renderers/shaders/UniformsLib.tests';
+import './unit/src/renderers/shaders/UniformsUtils.tests';
+
+//src/renderers/webgl
+import './unit/src/renderers/webgl/WebGLAttributes.tests';
+import './unit/src/renderers/webgl/WebGLBackground.tests';
+import './unit/src/renderers/webgl/WebGLBufferRenderer.tests';
+import './unit/src/renderers/webgl/WebGLCapabilities.tests';
+import './unit/src/renderers/webgl/WebGLClipping.tests';
+import './unit/src/renderers/webgl/WebGLExtensions.tests';
+import './unit/src/renderers/webgl/WebGLFlareRenderer.tests';
+import './unit/src/renderers/webgl/WebGLGeometries.tests';
+import './unit/src/renderers/webgl/WebGLIndexedBufferRenderer.tests';
+import './unit/src/renderers/webgl/WebGLLights.tests';
+import './unit/src/renderers/webgl/WebGLMorphtargets.tests';
+import './unit/src/renderers/webgl/WebGLObjects.tests';
+import './unit/src/renderers/webgl/WebGLProgram.tests';
+import './unit/src/renderers/webgl/WebGLPrograms.tests';
+import './unit/src/renderers/webgl/WebGLProperties.tests';
+import './unit/src/renderers/webgl/WebGLRenderLists.tests';
+import './unit/src/renderers/webgl/WebGLShader.tests';
+import './unit/src/renderers/webgl/WebGLShadowMap.tests';
+import './unit/src/renderers/webgl/WebGLSpriteRenderer.tests';
+import './unit/src/renderers/webgl/WebGLState.tests';
+import './unit/src/renderers/webgl/WebGLTextures.tests';
+import './unit/src/renderers/webgl/WebGLUniforms.tests';
+import './unit/src/renderers/webgl/WebGLUtils.tests';
+
+//src/renderers/webvr
+import './unit/src/renderers/webvr/WebVRManager.tests';
+
+
+//src/scenes
+import './unit/src/scenes/Fog.tests';
+import './unit/src/scenes/FogExp2.tests';
+import './unit/src/scenes/Scene.tests';
+
+
+//src/textures
+import './unit/src/textures/CanvasTexture.tests';
+import './unit/src/textures/CompressedTexture.tests';
+import './unit/src/textures/CubeTexture.tests';
+import './unit/src/textures/DataTexture.tests';
+import './unit/src/textures/DepthTexture.tests';
+import './unit/src/textures/Texture.tests';
+import './unit/src/textures/VideoTexture.tests';

+ 9442 - 0
test/unit/three.editor.unit.js

@@ -0,0 +1,9442 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(factory());
+}(this, (function () { 'use strict';
+
+	QUnit.module( "Editor", () => {
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param editorRef pointer to main editor object used to initialize
+	 *        each command object with a reference to the editor
+	 * @constructor
+	 */
+
+	var Command$1 = function ( editorRef ) {
+
+		this.id = - 1;
+		this.inMemory = false;
+		this.updatable = false;
+		this.type = '';
+		this.name = '';
+
+		if ( editorRef !== undefined ) {
+
+			Command$1.editor = editorRef;
+
+		}
+		this.editor = Command$1.editor;
+
+
+	};
+
+	Command$1.prototype.toJSON = function () {
+
+		var output = {};
+		output.type = this.type;
+		output.id = this.id;
+		output.name = this.name;
+		return output;
+
+	};
+
+	Command$1.prototype.fromJSON = function ( json ) {
+
+		this.inMemory = true;
+		this.type = json.type;
+		this.id = json.id;
+		this.name = json.name;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Command', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Config', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	var Editor = function () {
+
+		this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.1, 10000 );
+		this.DEFAULT_CAMERA.name = 'Camera';
+		this.DEFAULT_CAMERA.position.set( 20, 10, 20 );
+		this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
+
+		var Signal = signals.Signal;
+
+		this.signals = {
+
+			// script
+
+			editScript: new Signal(),
+
+			// player
+
+			startPlayer: new Signal(),
+			stopPlayer: new Signal(),
+
+			// actions
+
+			showModal: new Signal(),
+
+			// notifications
+
+			editorCleared: new Signal(),
+
+			savingStarted: new Signal(),
+			savingFinished: new Signal(),
+
+			themeChanged: new Signal(),
+
+			transformModeChanged: new Signal(),
+			snapChanged: new Signal(),
+			spaceChanged: new Signal(),
+			rendererChanged: new Signal(),
+
+			sceneBackgroundChanged: new Signal(),
+			sceneFogChanged: new Signal(),
+			sceneGraphChanged: new Signal(),
+
+			cameraChanged: new Signal(),
+
+			geometryChanged: new Signal(),
+
+			objectSelected: new Signal(),
+			objectFocused: new Signal(),
+
+			objectAdded: new Signal(),
+			objectChanged: new Signal(),
+			objectRemoved: new Signal(),
+
+			helperAdded: new Signal(),
+			helperRemoved: new Signal(),
+
+			materialChanged: new Signal(),
+
+			scriptAdded: new Signal(),
+			scriptChanged: new Signal(),
+			scriptRemoved: new Signal(),
+
+			windowResize: new Signal(),
+
+			showGridChanged: new Signal(),
+			refreshSidebarObject3D: new Signal(),
+			historyChanged: new Signal()
+
+		};
+
+		this.config = new Config( 'threejs-editor' );
+		this.history = new History( this );
+		this.storage = new Storage();
+		this.loader = new Loader( this );
+
+		this.camera = this.DEFAULT_CAMERA.clone();
+
+		this.scene = new THREE.Scene();
+		this.scene.name = 'Scene';
+		this.scene.background = new THREE.Color( 0xaaaaaa );
+
+		this.sceneHelpers = new THREE.Scene();
+
+		this.object = {};
+		this.geometries = {};
+		this.materials = {};
+		this.textures = {};
+		this.scripts = {};
+
+		this.selected = null;
+		this.helpers = {};
+
+	};
+
+	Editor.prototype = {
+
+		setTheme: function ( value ) {
+
+			document.getElementById( 'theme' ).href = value;
+
+			this.signals.themeChanged.dispatch( value );
+
+		},
+
+		//
+
+		setScene: function ( scene ) {
+
+			this.scene.uuid = scene.uuid;
+			this.scene.name = scene.name;
+
+			if ( scene.background !== null ) this.scene.background = scene.background.clone();
+			if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
+
+			this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
+
+			// avoid render per object
+
+			this.signals.sceneGraphChanged.active = false;
+
+			while ( scene.children.length > 0 ) {
+
+				this.addObject( scene.children[ 0 ] );
+
+			}
+
+			this.signals.sceneGraphChanged.active = true;
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		//
+
+		addObject: function ( object ) {
+
+			var scope = this;
+
+			object.traverse( function ( child ) {
+
+				if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
+				if ( child.material !== undefined ) scope.addMaterial( child.material );
+
+				scope.addHelper( child );
+
+			} );
+
+			this.scene.add( object );
+
+			this.signals.objectAdded.dispatch( object );
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		moveObject: function ( object, parent, before ) {
+
+			if ( parent === undefined ) {
+
+				parent = this.scene;
+
+			}
+
+			parent.add( object );
+
+			// sort children array
+
+			if ( before !== undefined ) {
+
+				var index = parent.children.indexOf( before );
+				parent.children.splice( index, 0, object );
+				parent.children.pop();
+
+			}
+
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		nameObject: function ( object, name ) {
+
+			object.name = name;
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		removeObject: function ( object ) {
+
+			if ( object.parent === null ) return; // avoid deleting the camera or scene
+
+			var scope = this;
+
+			object.traverse( function ( child ) {
+
+				scope.removeHelper( child );
+
+			} );
+
+			object.parent.remove( object );
+
+			this.signals.objectRemoved.dispatch( object );
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		addGeometry: function ( geometry ) {
+
+			this.geometries[ geometry.uuid ] = geometry;
+
+		},
+
+		setGeometryName: function ( geometry, name ) {
+
+			geometry.name = name;
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		addMaterial: function ( material ) {
+
+			this.materials[ material.uuid ] = material;
+
+		},
+
+		setMaterialName: function ( material, name ) {
+
+			material.name = name;
+			this.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		addTexture: function ( texture ) {
+
+			this.textures[ texture.uuid ] = texture;
+
+		},
+
+		//
+
+		addHelper: function () {
+
+			var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
+			var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
+
+			return function ( object ) {
+
+				var helper;
+
+				if ( object instanceof THREE.Camera ) {
+
+					helper = new THREE.CameraHelper( object, 1 );
+
+				} else if ( object instanceof THREE.PointLight ) {
+
+					helper = new THREE.PointLightHelper( object, 1 );
+
+				} else if ( object instanceof THREE.DirectionalLight ) {
+
+					helper = new THREE.DirectionalLightHelper( object, 1 );
+
+				} else if ( object instanceof THREE.SpotLight ) {
+
+					helper = new THREE.SpotLightHelper( object, 1 );
+
+				} else if ( object instanceof THREE.HemisphereLight ) {
+
+					helper = new THREE.HemisphereLightHelper( object, 1 );
+
+				} else if ( object instanceof THREE.SkinnedMesh ) {
+
+					helper = new THREE.SkeletonHelper( object );
+
+				} else {
+
+					// no helper for this object type
+					return;
+
+				}
+
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				helper.add( picker );
+
+				this.sceneHelpers.add( helper );
+				this.helpers[ object.id ] = helper;
+
+				this.signals.helperAdded.dispatch( helper );
+
+			};
+
+		}(),
+
+		removeHelper: function ( object ) {
+
+			if ( this.helpers[ object.id ] !== undefined ) {
+
+				var helper = this.helpers[ object.id ];
+				helper.parent.remove( helper );
+
+				delete this.helpers[ object.id ];
+
+				this.signals.helperRemoved.dispatch( helper );
+
+			}
+
+		},
+
+		//
+
+		addScript: function ( object, script ) {
+
+			if ( this.scripts[ object.uuid ] === undefined ) {
+
+				this.scripts[ object.uuid ] = [];
+
+			}
+
+			this.scripts[ object.uuid ].push( script );
+
+			this.signals.scriptAdded.dispatch( script );
+
+		},
+
+		removeScript: function ( object, script ) {
+
+			if ( this.scripts[ object.uuid ] === undefined ) return;
+
+			var index = this.scripts[ object.uuid ].indexOf( script );
+
+			if ( index !== - 1 ) {
+
+				this.scripts[ object.uuid ].splice( index, 1 );
+
+			}
+
+			this.signals.scriptRemoved.dispatch( script );
+
+		},
+
+		getObjectMaterial: function ( object, slot ) {
+
+			var material = object.material;
+
+			if ( Array.isArray( material ) ) {
+
+				material = material[ slot ];
+
+			}
+
+			return material;
+
+		},
+
+		setObjectMaterial: function ( object, slot, newMaterial ) {
+
+			if ( Array.isArray( object.material ) ) {
+
+				object.material[ slot ] = newMaterial;
+
+			} else {
+
+				object.material = newMaterial;
+
+			}
+
+		},
+
+		//
+
+		select: function ( object ) {
+
+			if ( this.selected === object ) return;
+
+			var uuid = null;
+
+			if ( object !== null ) {
+
+				uuid = object.uuid;
+
+			}
+
+			this.selected = object;
+
+			this.config.setKey( 'selected', uuid );
+			this.signals.objectSelected.dispatch( object );
+
+		},
+
+		selectById: function ( id ) {
+
+			if ( id === this.camera.id ) {
+
+				this.select( this.camera );
+				return;
+
+			}
+
+			this.select( this.scene.getObjectById( id, true ) );
+
+		},
+
+		selectByUuid: function ( uuid ) {
+
+			var scope = this;
+
+			this.scene.traverse( function ( child ) {
+
+				if ( child.uuid === uuid ) {
+
+					scope.select( child );
+
+				}
+
+			} );
+
+		},
+
+		deselect: function () {
+
+			this.select( null );
+
+		},
+
+		focus: function ( object ) {
+
+			this.signals.objectFocused.dispatch( object );
+
+		},
+
+		focusById: function ( id ) {
+
+			this.focus( this.scene.getObjectById( id, true ) );
+
+		},
+
+		clear: function () {
+
+			this.history.clear();
+			this.storage.clear();
+
+			this.camera.copy( this.DEFAULT_CAMERA );
+			this.scene.background.setHex( 0xaaaaaa );
+			this.scene.fog = null;
+
+			var objects = this.scene.children;
+
+			while ( objects.length > 0 ) {
+
+				this.removeObject( objects[ 0 ] );
+
+			}
+
+			this.geometries = {};
+			this.materials = {};
+			this.textures = {};
+			this.scripts = {};
+
+			this.deselect();
+
+			this.signals.editorCleared.dispatch();
+
+		},
+
+		//
+
+		fromJSON: function ( json ) {
+
+			var loader = new THREE.ObjectLoader();
+
+			// backwards
+
+			if ( json.scene === undefined ) {
+
+				this.setScene( loader.parse( json ) );
+				return;
+
+			}
+
+			var camera = loader.parse( json.camera );
+
+			this.camera.copy( camera );
+			this.camera.aspect = this.DEFAULT_CAMERA.aspect;
+			this.camera.updateProjectionMatrix();
+
+			this.history.fromJSON( json.history );
+			this.scripts = json.scripts;
+
+			this.setScene( loader.parse( json.scene ) );
+
+		},
+
+		toJSON: function () {
+
+			// scripts clean up
+
+			var scene = this.scene;
+			var scripts = this.scripts;
+
+			for ( var key in scripts ) {
+
+				var script = scripts[ key ];
+
+				if ( script.length === 0 || scene.getObjectByProperty( 'uuid', key ) === undefined ) {
+
+					delete scripts[ key ];
+
+				}
+
+			}
+
+			//
+
+			return {
+
+				metadata: {},
+				project: {
+					gammaInput: this.config.getKey( 'project/renderer/gammaInput' ),
+					gammaOutput: this.config.getKey( 'project/renderer/gammaOutput' ),
+					shadows: this.config.getKey( 'project/renderer/shadows' ),
+					vr: this.config.getKey( 'project/vr' )
+				},
+				camera: this.camera.toJSON(),
+				scene: this.scene.toJSON(),
+				scripts: this.scripts,
+				history: this.history.toJSON()
+
+			};
+
+		},
+
+		objectByUuid: function ( uuid ) {
+
+			return this.scene.getObjectByProperty( 'uuid', uuid, true );
+
+		},
+
+		execute: function ( cmd, optionalName ) {
+
+			this.history.execute( cmd, optionalName );
+
+		},
+
+		undo: function () {
+
+			this.history.undo();
+
+		},
+
+		redo: function () {
+
+			this.history.redo();
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Editor', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	History = function ( editor ) {
+
+		this.editor = editor;
+		this.undos = [];
+		this.redos = [];
+		this.lastCmdTime = new Date();
+		this.idCounter = 0;
+
+		this.historyDisabled = false;
+		this.config = editor.config;
+
+		//Set editor-reference in Command
+
+		Command( editor );
+
+		// signals
+
+		var scope = this;
+
+		this.editor.signals.startPlayer.add( function () {
+
+			scope.historyDisabled = true;
+
+		} );
+
+		this.editor.signals.stopPlayer.add( function () {
+
+			scope.historyDisabled = false;
+
+		} );
+
+	};
+
+	History.prototype = {
+
+		execute: function ( cmd, optionalName ) {
+
+			var lastCmd = this.undos[ this.undos.length - 1 ];
+			var timeDifference = new Date().getTime() - this.lastCmdTime.getTime();
+
+			var isUpdatableCmd = lastCmd &&
+				lastCmd.updatable &&
+				cmd.updatable &&
+				lastCmd.object === cmd.object &&
+				lastCmd.type === cmd.type &&
+				lastCmd.script === cmd.script &&
+				lastCmd.attributeName === cmd.attributeName;
+
+			if ( isUpdatableCmd && cmd.type === "SetScriptValueCommand" ) {
+
+				// When the cmd.type is "SetScriptValueCommand" the timeDifference is ignored
+
+				lastCmd.update( cmd );
+				cmd = lastCmd;
+
+			} else if ( isUpdatableCmd && timeDifference < 500 ) {
+
+				lastCmd.update( cmd );
+				cmd = lastCmd;
+
+			} else {
+
+				// the command is not updatable and is added as a new part of the history
+
+				this.undos.push( cmd );
+				cmd.id = ++ this.idCounter;
+
+			}
+			cmd.name = ( optionalName !== undefined ) ? optionalName : cmd.name;
+			cmd.execute();
+			cmd.inMemory = true;
+
+			if ( this.config.getKey( 'settings/history' ) ) {
+
+				cmd.json = cmd.toJSON();	// serialize the cmd immediately after execution and append the json to the cmd
+
+			}
+			this.lastCmdTime = new Date();
+
+			// clearing all the redo-commands
+
+			this.redos = [];
+			this.editor.signals.historyChanged.dispatch( cmd );
+
+		},
+
+		undo: function () {
+
+			if ( this.historyDisabled ) {
+
+				alert( "Undo/Redo disabled while scene is playing." );
+				return;
+
+			}
+
+			var cmd = undefined;
+
+			if ( this.undos.length > 0 ) {
+
+				cmd = this.undos.pop();
+
+				if ( cmd.inMemory === false ) {
+
+					cmd.fromJSON( cmd.json );
+
+				}
+
+			}
+
+			if ( cmd !== undefined ) {
+
+				cmd.undo();
+				this.redos.push( cmd );
+				this.editor.signals.historyChanged.dispatch( cmd );
+
+			}
+
+			return cmd;
+
+		},
+
+		redo: function () {
+
+			if ( this.historyDisabled ) {
+
+				alert( "Undo/Redo disabled while scene is playing." );
+				return;
+
+			}
+
+			var cmd = undefined;
+
+			if ( this.redos.length > 0 ) {
+
+				cmd = this.redos.pop();
+
+				if ( cmd.inMemory === false ) {
+
+					cmd.fromJSON( cmd.json );
+
+				}
+
+			}
+
+			if ( cmd !== undefined ) {
+
+				cmd.execute();
+				this.undos.push( cmd );
+				this.editor.signals.historyChanged.dispatch( cmd );
+
+			}
+
+			return cmd;
+
+		},
+
+		toJSON: function () {
+
+			var history = {};
+			history.undos = [];
+			history.redos = [];
+
+			if ( ! this.config.getKey( 'settings/history' ) ) {
+
+				return history;
+
+			}
+
+			// Append Undos to History
+
+			for ( var i = 0 ; i < this.undos.length; i ++ ) {
+
+				if ( this.undos[ i ].hasOwnProperty( "json" ) ) {
+
+					history.undos.push( this.undos[ i ].json );
+
+				}
+
+			}
+
+			// Append Redos to History
+
+			for ( var i = 0 ; i < this.redos.length; i ++ ) {
+
+				if ( this.redos[ i ].hasOwnProperty( "json" ) ) {
+
+					history.redos.push( this.redos[ i ].json );
+
+				}
+
+			}
+
+			return history;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			if ( json === undefined ) return;
+
+			for ( var i = 0; i < json.undos.length; i ++ ) {
+
+				var cmdJSON = json.undos[ i ];
+				var cmd = new window[ cmdJSON.type ]();	// creates a new object of type "json.type"
+				cmd.json = cmdJSON;
+				cmd.id = cmdJSON.id;
+				cmd.name = cmdJSON.name;
+				this.undos.push( cmd );
+				this.idCounter = ( cmdJSON.id > this.idCounter ) ? cmdJSON.id : this.idCounter; // set last used idCounter
+
+			}
+
+			for ( var i = 0; i < json.redos.length; i ++ ) {
+
+				var cmdJSON = json.redos[ i ];
+				var cmd = new window[ cmdJSON.type ]();	// creates a new object of type "json.type"
+				cmd.json = cmdJSON;
+				cmd.id = cmdJSON.id;
+				cmd.name = cmdJSON.name;
+				this.redos.push( cmd );
+				this.idCounter = ( cmdJSON.id > this.idCounter ) ? cmdJSON.id : this.idCounter; // set last used idCounter
+
+			}
+
+			// Select the last executed undo-command
+			this.editor.signals.historyChanged.dispatch( this.undos[ this.undos.length - 1 ] );
+
+		},
+
+		clear: function () {
+
+			this.undos = [];
+			this.redos = [];
+			this.idCounter = 0;
+
+			this.editor.signals.historyChanged.dispatch();
+
+		},
+
+		goToState: function ( id ) {
+
+			if ( this.historyDisabled ) {
+
+				alert( "Undo/Redo disabled while scene is playing." );
+				return;
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = false;
+			this.editor.signals.historyChanged.active = false;
+
+			var cmd = this.undos.length > 0 ? this.undos[ this.undos.length - 1 ] : undefined;	// next cmd to pop
+
+			if ( cmd === undefined || id > cmd.id ) {
+
+				cmd = this.redo();
+				while ( cmd !== undefined && id > cmd.id ) {
+
+					cmd = this.redo();
+
+				}
+
+			} else {
+
+				while ( true ) {
+
+					cmd = this.undos[ this.undos.length - 1 ];	// next cmd to pop
+
+					if ( cmd === undefined || id === cmd.id ) break;
+
+					this.undo();
+
+				}
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.historyChanged.active = true;
+
+			this.editor.signals.sceneGraphChanged.dispatch();
+			this.editor.signals.historyChanged.dispatch( cmd );
+
+		},
+
+		enableSerialization: function ( id ) {
+
+			/**
+			 * because there might be commands in this.undos and this.redos
+			 * which have not been serialized with .toJSON() we go back
+			 * to the oldest command and redo one command after the other
+			 * while also calling .toJSON() on them.
+			 */
+
+			this.goToState( - 1 );
+
+			this.editor.signals.sceneGraphChanged.active = false;
+			this.editor.signals.historyChanged.active = false;
+
+			var cmd = this.redo();
+			while ( cmd !== undefined ) {
+
+				if ( ! cmd.hasOwnProperty( "json" ) ) {
+
+					cmd.json = cmd.toJSON();
+
+				}
+				cmd = this.redo();
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.historyChanged.active = true;
+
+			this.goToState( id );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'History', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Loader', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Player', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Script', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Add = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'Add' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		//
+
+		var meshCount = 0;
+		var lightCount = 0;
+		var cameraCount = 0;
+
+		editor.signals.editorCleared.add( function () {
+
+			meshCount = 0;
+			lightCount = 0;
+			cameraCount = 0;
+
+		} );
+
+		// Group
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Group' );
+		option.onClick( function () {
+
+			var mesh = new THREE.Group();
+			mesh.name = 'Group ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// Plane
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Plane' );
+		option.onClick( function () {
+
+			var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+			var material = new THREE.MeshStandardMaterial();
+			var mesh = new THREE.Mesh( geometry, material );
+			mesh.name = 'Plane ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Box
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Box' );
+		option.onClick( function () {
+
+			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Box ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Circle
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Circle' );
+		option.onClick( function () {
+
+			var radius = 1;
+			var segments = 32;
+
+			var geometry = new THREE.CircleBufferGeometry( radius, segments );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Circle ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Cylinder
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Cylinder' );
+		option.onClick( function () {
+
+			var radiusTop = 1;
+			var radiusBottom = 1;
+			var height = 2;
+			var radiusSegments = 32;
+			var heightSegments = 1;
+			var openEnded = false;
+
+			var geometry = new THREE.CylinderBufferGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Cylinder ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Sphere
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Sphere' );
+		option.onClick( function () {
+
+			var radius = 1;
+			var widthSegments = 32;
+			var heightSegments = 16;
+			var phiStart = 0;
+			var phiLength = Math.PI * 2;
+			var thetaStart = 0;
+			var thetaLength = Math.PI;
+
+			var geometry = new THREE.SphereBufferGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Sphere ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Icosahedron
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Icosahedron' );
+		option.onClick( function () {
+
+			var radius = 1;
+			var detail = 2;
+
+			var geometry = new THREE.IcosahedronGeometry( radius, detail );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Icosahedron ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Torus
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Torus' );
+		option.onClick( function () {
+
+			var radius = 2;
+			var tube = 1;
+			var radialSegments = 32;
+			var tubularSegments = 12;
+			var arc = Math.PI * 2;
+
+			var geometry = new THREE.TorusBufferGeometry( radius, tube, radialSegments, tubularSegments, arc );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'Torus ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// TorusKnot
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'TorusKnot' );
+		option.onClick( function () {
+
+			var radius = 2;
+			var tube = 0.8;
+			var tubularSegments = 64;
+			var radialSegments = 12;
+			var p = 2;
+			var q = 3;
+
+			var geometry = new THREE.TorusKnotBufferGeometry( radius, tube, tubularSegments, radialSegments, p, q );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+			mesh.name = 'TorusKnot ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		/*
+		// Teapot
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Teapot' );
+		option.onClick( function () {
+
+			var size = 50;
+			var segments = 10;
+			var bottom = true;
+			var lid = true;
+			var body = true;
+			var fitLid = false;
+			var blinnScale = true;
+
+			var material = new THREE.MeshStandardMaterial();
+
+			var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
+			var mesh = new THREE.Mesh( geometry, material );
+			mesh.name = 'Teapot ' + ( ++ meshCount );
+
+			editor.addObject( mesh );
+			editor.select( mesh );
+
+		} );
+		options.add( option );
+		*/
+
+		// Lathe
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Lathe' );
+		option.onClick( function() {
+
+			var points = [
+				new THREE.Vector2( 0, 0 ),
+				new THREE.Vector2( 4, 0 ),
+				new THREE.Vector2( 3.5, 0.5 ),
+				new THREE.Vector2( 1, 0.75 ),
+				new THREE.Vector2( 0.8, 1 ),
+				new THREE.Vector2( 0.8, 4 ),
+				new THREE.Vector2( 1, 4.2 ),
+				new THREE.Vector2( 1.4, 4.8 ),
+				new THREE.Vector2( 2, 5 ),
+				new THREE.Vector2( 2.5, 5.4 ),
+				new THREE.Vector2( 3, 12 )
+			];
+			var segments = 20;
+			var phiStart = 0;
+			var phiLength = 2 * Math.PI;
+
+			var geometry = new THREE.LatheBufferGeometry( points, segments, phiStart, phiLength );
+			var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
+			mesh.name = 'Lathe ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( mesh ) );
+
+		} );
+		options.add( option );
+
+		// Sprite
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Sprite' );
+		option.onClick( function () {
+
+			var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
+			sprite.name = 'Sprite ' + ( ++ meshCount );
+
+			editor.execute( new AddObjectCommand( sprite ) );
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// PointLight
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'PointLight' );
+		option.onClick( function () {
+
+			var color = 0xffffff;
+			var intensity = 1;
+			var distance = 0;
+
+			var light = new THREE.PointLight( color, intensity, distance );
+			light.name = 'PointLight ' + ( ++ lightCount );
+
+			editor.execute( new AddObjectCommand( light ) );
+
+		} );
+		options.add( option );
+
+		// SpotLight
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'SpotLight' );
+		option.onClick( function () {
+
+			var color = 0xffffff;
+			var intensity = 1;
+			var distance = 0;
+			var angle = Math.PI * 0.1;
+			var penumbra = 0;
+
+			var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
+			light.name = 'SpotLight ' + ( ++ lightCount );
+			light.target.name = 'SpotLight ' + ( lightCount ) + ' Target';
+
+			light.position.set( 5, 10, 7.5 );
+
+			editor.execute( new AddObjectCommand( light ) );
+
+		} );
+		options.add( option );
+
+		// DirectionalLight
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'DirectionalLight' );
+		option.onClick( function () {
+
+			var color = 0xffffff;
+			var intensity = 1;
+
+			var light = new THREE.DirectionalLight( color, intensity );
+			light.name = 'DirectionalLight ' + ( ++ lightCount );
+			light.target.name = 'DirectionalLight ' + ( lightCount ) + ' Target';
+
+			light.position.set( 5, 10, 7.5 );
+
+			editor.execute( new AddObjectCommand( light ) );
+
+		} );
+		options.add( option );
+
+		// HemisphereLight
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'HemisphereLight' );
+		option.onClick( function () {
+
+			var skyColor = 0x00aaff;
+			var groundColor = 0xffaa00;
+			var intensity = 1;
+
+			var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
+			light.name = 'HemisphereLight ' + ( ++ lightCount );
+
+			light.position.set( 0, 10, 0 );
+
+			editor.execute( new AddObjectCommand( light ) );
+
+		} );
+		options.add( option );
+
+		// AmbientLight
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'AmbientLight' );
+		option.onClick( function() {
+
+			var color = 0x222222;
+
+			var light = new THREE.AmbientLight( color );
+			light.name = 'AmbientLight ' + ( ++ lightCount );
+
+			editor.execute( new AddObjectCommand( light ) );
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// PerspectiveCamera
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'PerspectiveCamera' );
+		option.onClick( function() {
+
+			var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
+			camera.name = 'PerspectiveCamera ' + ( ++ cameraCount );
+
+			editor.execute( new AddObjectCommand( camera ) );
+
+		} );
+		options.add( option );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Add', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Edit = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'Edit' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		// Undo
+
+		var undo = new UI.Row();
+		undo.setClass( 'option' );
+		undo.setTextContent( 'Undo (Ctrl+Z)' );
+		undo.onClick( function () {
+
+			editor.undo();
+
+		} );
+		options.add( undo );
+
+		// Redo
+
+		var redo = new UI.Row();
+		redo.setClass( 'option' );
+		redo.setTextContent( 'Redo (Ctrl+Shift+Z)' );
+		redo.onClick( function () {
+
+			editor.redo();
+
+		} );
+		options.add( redo );
+
+		// Clear History
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Clear History' );
+		option.onClick( function () {
+
+			if ( confirm( 'The Undo/Redo History will be cleared. Are you sure?' ) ) {
+
+				editor.history.clear();
+
+			}
+
+		} );
+		options.add( option );
+
+
+		editor.signals.historyChanged.add( function () {
+
+			var history = editor.history;
+
+			undo.setClass( 'option' );
+			redo.setClass( 'option' );
+
+			if ( history.undos.length == 0 ) {
+
+				undo.setClass( 'inactive' );
+
+			}
+
+			if ( history.redos.length == 0 ) {
+
+				redo.setClass( 'inactive' );
+
+			}
+
+		} );
+
+		// ---
+
+		options.add( new UI.HorizontalRule() );
+
+		// Clone
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Clone' );
+		option.onClick( function () {
+
+			var object = editor.selected;
+
+			if ( object.parent === null ) return; // avoid cloning the camera or scene
+
+			object = object.clone();
+
+			editor.execute( new AddObjectCommand( object ) );
+
+		} );
+		options.add( option );
+
+		// Delete
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Delete (Del)' );
+		option.onClick( function () {
+
+			var object = editor.selected;
+
+			if ( confirm( 'Delete ' + object.name + '?' ) === false ) return;
+
+			var parent = object.parent;
+			if ( parent === undefined ) return; // avoid deleting the camera or scene
+
+			editor.execute( new RemoveObjectCommand( object ) );
+
+		} );
+		options.add( option );
+
+		// Minify shaders
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Minify Shaders' );
+		option.onClick( function() {
+
+			var root = editor.selected || editor.scene;
+
+			var errors = [];
+			var nMaterialsChanged = 0;
+
+			var path = [];
+
+			function getPath ( object ) {
+
+				path.length = 0;
+
+				var parent = object.parent;
+				if ( parent !== undefined ) getPath( parent );
+
+				path.push( object.name || object.uuid );
+
+				return path;
+
+			}
+
+			var cmds = [];
+			root.traverse( function ( object ) {
+
+				var material = object.material;
+
+				if ( material instanceof THREE.ShaderMaterial ) {
+
+					try {
+
+						var shader = glslprep.minifyGlsl( [
+								material.vertexShader, material.fragmentShader ] );
+
+						cmds.push( new SetMaterialValueCommand( object, 'vertexShader', shader[ 0 ] ) );
+						cmds.push( new SetMaterialValueCommand( object, 'fragmentShader', shader[ 1 ] ) );
+
+						++nMaterialsChanged;
+
+					} catch ( e ) {
+
+						var path = getPath( object ).join( "/" );
+
+						if ( e instanceof glslprep.SyntaxError )
+
+							errors.push( path + ":" +
+									e.line + ":" + e.column + ": " + e.message );
+
+						else {
+
+							errors.push( path +
+									": Unexpected error (see console for details)." );
+
+							console.error( e.stack || e );
+
+						}
+
+					}
+
+				}
+
+			} );
+
+			if ( nMaterialsChanged > 0 ) {
+
+				editor.execute( new MultiCmdsCommand( cmds ), 'Minify Shaders' );
+
+			}
+
+			window.alert( nMaterialsChanged +
+					" material(s) were changed.\n" + errors.join( "\n" ) );
+
+		} );
+		options.add( option );
+
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Edit', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Examples = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'Examples' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		// Examples
+
+		var items = [
+			{ title: 'Arkanoid', file: 'arkanoid.app.json' },
+			{ title: 'Camera', file: 'camera.app.json' },
+			{ title: 'Particles', file: 'particles.app.json' },
+			{ title: 'Pong', file: 'pong.app.json' },
+			{ title: 'Shaders', file: 'shaders.app.json' }
+		];
+
+		var loader = new THREE.FileLoader();
+
+		for ( var i = 0; i < items.length; i ++ ) {
+
+			( function ( i ) {
+
+				var item = items[ i ];
+
+				var option = new UI.Row();
+				option.setClass( 'option' );
+				option.setTextContent( item.title );
+				option.onClick( function () {
+
+					if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
+
+						loader.load( 'examples/' + item.file, function ( text ) {
+
+							editor.clear();
+							editor.fromJSON( JSON.parse( text ) );
+
+						} );
+
+					}
+
+				} );
+				options.add( option );
+
+			} )( i );
+
+		}
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Examples', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.File = function ( editor ) {
+
+		var NUMBER_PRECISION = 6;
+
+		function parseNumber( key, value ) {
+
+			return typeof value === 'number' ? parseFloat( value.toFixed( NUMBER_PRECISION ) ) : value;
+
+		}
+
+		//
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'File' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		// New
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'New' );
+		option.onClick( function () {
+
+			if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
+
+				editor.clear();
+
+			}
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// Import
+
+		var form = document.createElement( 'form' );
+		form.style.display = 'none';
+		document.body.appendChild( form );
+
+		var fileInput = document.createElement( 'input' );
+		fileInput.type = 'file';
+		fileInput.addEventListener( 'change', function ( event ) {
+
+			editor.loader.loadFile( fileInput.files[ 0 ] );
+			form.reset();
+
+		} );
+		form.appendChild( fileInput );
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Import' );
+		option.onClick( function () {
+
+			fileInput.click();
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// Export Geometry
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export Geometry' );
+		option.onClick( function () {
+
+			var object = editor.selected;
+
+			if ( object === null ) {
+
+				alert( 'No object selected.' );
+				return;
+
+			}
+
+			var geometry = object.geometry;
+
+			if ( geometry === undefined ) {
+
+				alert( 'The selected object doesn\'t have geometry.' );
+				return;
+
+			}
+
+			var output = geometry.toJSON();
+
+			try {
+
+				output = JSON.stringify( output, parseNumber, '\t' );
+				output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+			} catch ( e ) {
+
+				output = JSON.stringify( output );
+
+			}
+
+			saveString( output, 'geometry.json' );
+
+		} );
+		options.add( option );
+
+		// Export Object
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export Object' );
+		option.onClick( function () {
+
+			var object = editor.selected;
+
+			if ( object === null ) {
+
+				alert( 'No object selected' );
+				return;
+
+			}
+
+			var output = object.toJSON();
+
+			try {
+
+				output = JSON.stringify( output, parseNumber, '\t' );
+				output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+			} catch ( e ) {
+
+				output = JSON.stringify( output );
+
+			}
+
+			saveString( output, 'model.json' );
+
+		} );
+		options.add( option );
+
+		// Export Scene
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export Scene' );
+		option.onClick( function () {
+
+			var output = editor.scene.toJSON();
+
+			try {
+
+				output = JSON.stringify( output, parseNumber, '\t' );
+				output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+			} catch ( e ) {
+
+				output = JSON.stringify( output );
+
+			}
+
+			saveString( output, 'scene.json' );
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// Export GLTF
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export GLTF' );
+		option.onClick( function () {
+
+			var exporter = new THREE.GLTFExporter();
+
+			exporter.parse( editor.scene, function ( result ) {
+
+				saveString( JSON.stringify( result, null, 2 ), 'scene.gltf' );
+
+			} );
+
+
+		} );
+		options.add( option );
+
+		// Export OBJ
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export OBJ' );
+		option.onClick( function () {
+
+			var object = editor.selected;
+
+			if ( object === null ) {
+
+				alert( 'No object selected.' );
+				return;
+
+			}
+
+			var exporter = new THREE.OBJExporter();
+
+			saveString( exporter.parse( object ), 'model.obj' );
+
+		} );
+		options.add( option );
+
+		// Export STL
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Export STL' );
+		option.onClick( function () {
+
+			var exporter = new THREE.STLExporter();
+
+			saveString( exporter.parse( editor.scene ), 'model.stl' );
+
+		} );
+		options.add( option );
+
+		//
+
+		options.add( new UI.HorizontalRule() );
+
+		// Publish
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Publish' );
+		option.onClick( function () {
+
+			var zip = new JSZip();
+
+			//
+
+			var output = editor.toJSON();
+			output.metadata.type = 'App';
+			delete output.history;
+
+			var vr = output.project.vr;
+
+			output = JSON.stringify( output, parseNumber, '\t' );
+			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+			zip.file( 'app.json', output );
+
+			//
+
+			var manager = new THREE.LoadingManager( function () {
+
+				save( zip.generate( { type: 'blob' } ), 'download.zip' );
+
+			} );
+
+			var loader = new THREE.FileLoader( manager );
+			loader.load( 'js/libs/app/index.html', function ( content ) {
+
+				var includes = [];
+
+				if ( vr ) {
+
+					includes.push( '<script src="js/WebVR.js"></script>' );
+
+				}
+
+				content = content.replace( '<!-- includes -->', includes.join( '\n\t\t' ) );
+
+				zip.file( 'index.html', content );
+
+			} );
+			loader.load( 'js/libs/app.js', function ( content ) {
+
+				zip.file( 'js/app.js', content );
+
+			} );
+			loader.load( '../build/three.min.js', function ( content ) {
+
+				zip.file( 'js/three.min.js', content );
+
+			} );
+
+			if ( vr ) {
+
+				loader.load( '../examples/js/vr/WebVR.js', function ( content ) {
+
+					zip.file( 'js/WebVR.js', content );
+
+				} );
+
+			}
+
+		} );
+		options.add( option );
+
+		/*
+		// Publish (Dropbox)
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Publish (Dropbox)' );
+		option.onClick( function () {
+
+			var parameters = {
+				files: [
+					{ 'url': 'data:text/plain;base64,' + window.btoa( "Hello, World" ), 'filename': 'app/test.txt' }
+				]
+			};
+
+			Dropbox.save( parameters );
+
+		} );
+		options.add( option );
+		*/
+
+
+		//
+
+		var link = document.createElement( 'a' );
+		link.style.display = 'none';
+		document.body.appendChild( link ); // Firefox workaround, see #6594
+
+		function save( blob, filename ) {
+
+			link.href = URL.createObjectURL( blob );
+			link.download = filename || 'data.json';
+			link.click();
+
+			// URL.revokeObjectURL( url ); breaks Firefox...
+
+		}
+
+		function saveString( text, filename ) {
+
+			save( new Blob( [ text ], { type: 'text/plain' } ), filename );
+
+		}
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.File', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Help = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'Help' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		// Source code
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'Source code' );
+		option.onClick( function () {
+
+			window.open( 'https://github.com/mrdoob/three.js/tree/master/editor', '_blank' );
+
+		} );
+		options.add( option );
+
+		// About
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'About' );
+		option.onClick( function () {
+
+			window.open( 'http://threejs.org', '_blank' );
+
+		} );
+		options.add( option );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Help', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Play = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var isPlaying = false;
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'Play' );
+		title.onClick( function () {
+
+			if ( isPlaying === false ) {
+
+				isPlaying = true;
+				title.setTextContent( 'Stop' );
+				signals.startPlayer.dispatch();
+
+			} else {
+
+				isPlaying = false;
+				title.setTextContent( 'Play' );
+				signals.stopPlayer.dispatch();
+
+			}
+
+		} );
+		container.add( title );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Play', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.Status = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu right' );
+
+		var autosave = new UI.THREE.Boolean( editor.config.getKey( 'autosave' ), 'autosave' );
+		autosave.text.setColor( '#888' );
+		autosave.onChange( function () {
+
+			var value = this.getValue();
+
+			editor.config.setKey( 'autosave', value );
+
+			if ( value === true ) {
+
+				editor.signals.sceneGraphChanged.dispatch();
+
+			}
+
+		} );
+		container.add( autosave );
+
+		editor.signals.savingStarted.add( function () {
+
+			autosave.text.setTextDecoration( 'underline' );
+
+		} );
+
+		editor.signals.savingFinished.add( function () {
+
+			autosave.text.setTextDecoration( 'none' );
+
+		} );
+
+		var version = new UI.Text( 'r' + THREE.REVISION );
+		version.setClass( 'title' );
+		version.setOpacity( 0.5 );
+		container.add( version );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.Status', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Menubar.View = function ( editor ) {
+
+		var container = new UI.Panel();
+		container.setClass( 'menu' );
+
+		var title = new UI.Panel();
+		title.setClass( 'title' );
+		title.setTextContent( 'View' );
+		container.add( title );
+
+		var options = new UI.Panel();
+		options.setClass( 'options' );
+		container.add( options );
+
+		// VR mode
+
+		var option = new UI.Row();
+		option.setClass( 'option' );
+		option.setTextContent( 'VR mode' );
+		option.onClick( function () {
+
+			if ( WEBVR.isAvailable() === true ) {
+
+				editor.signals.enterVR.dispatch();
+
+			} else {
+
+				alert( 'WebVR not available' );
+
+			}
+
+		} );
+		options.add( option );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Menubar.View', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Animation = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var options = {};
+		var possibleAnimations = {};
+
+		var container = new UI.Panel();
+		container.setDisplay( 'none' );
+
+		container.add( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );
+		container.add( new UI.Break() );
+		container.add( new UI.Break() );
+
+		var animationsRow = new UI.Row();
+		container.add( animationsRow );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Animation', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+
+		// Actions
+
+		/*
+		var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
+		objectActions.setOptions( {
+
+			'Actions': 'Actions',
+			'Center': 'Center',
+			'Convert': 'Convert',
+			'Flatten': 'Flatten'
+
+		} );
+		objectActions.onClick( function ( event ) {
+
+			event.stopPropagation(); // Avoid panel collapsing
+
+		} );
+		objectActions.onChange( function ( event ) {
+
+			var action = this.getValue();
+
+			var object = editor.selected;
+			var geometry = object.geometry;
+
+			if ( confirm( action + ' ' + object.name + '?' ) === false ) return;
+
+			switch ( action ) {
+
+				case 'Center':
+
+					var offset = geometry.center();
+
+					var newPosition = object.position.clone();
+					newPosition.sub( offset );
+					editor.execute( new SetPositionCommand( object, newPosition ) );
+
+					editor.signals.geometryChanged.dispatch( object );
+
+					break;
+
+				case 'Convert':
+
+					if ( geometry instanceof THREE.Geometry ) {
+
+						editor.execute( new SetGeometryCommand( object, new THREE.BufferGeometry().fromGeometry( geometry ) ) );
+
+					}
+
+					break;
+
+				case 'Flatten':
+
+					var newGeometry = geometry.clone();
+					newGeometry.uuid = geometry.uuid;
+					newGeometry.applyMatrix( object.matrix );
+
+					var cmds = [ new SetGeometryCommand( object, newGeometry ),
+						new SetPositionCommand( object, new THREE.Vector3( 0, 0, 0 ) ),
+						new SetRotationCommand( object, new THREE.Euler( 0, 0, 0 ) ),
+						new SetScaleCommand( object, new THREE.Vector3( 1, 1, 1 ) ) ];
+
+					editor.execute( new MultiCmdsCommand( cmds ), 'Flatten Geometry' );
+
+					break;
+
+			}
+
+			this.setValue( 'Actions' );
+
+		} );
+		container.addStatic( objectActions );
+		*/
+
+		// type
+
+		var geometryTypeRow = new UI.Row();
+		var geometryType = new UI.Text();
+
+		geometryTypeRow.add( new UI.Text( '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( 'New' ).setMarginLeft( '7px' ).onClick( function () {
+
+			geometryUUID.setValue( THREE.Math.generateUUID() );
+
+			editor.execute( new SetGeometryValueCommand( editor.selected, 'uuid', geometryUUID.getValue() ) );
+
+		} );
+
+		geometryUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
+		geometryUUIDRow.add( geometryUUID );
+		geometryUUIDRow.add( geometryUUIDRenew );
+
+		container.add( geometryUUIDRow );
+
+		// name
+
+		var geometryNameRow = new UI.Row();
+		var geometryName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+			editor.execute( new SetGeometryValueCommand( editor.selected, 'name', geometryName.getValue() ) );
+
+		} );
+
+		geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
+		geometryNameRow.add( geometryName );
+
+		container.add( geometryNameRow );
+
+		// geometry
+
+		container.add( new Sidebar.Geometry.Geometry( editor ) );
+
+		// buffergeometry
+
+		container.add( new Sidebar.Geometry.BufferGeometry( editor ) );
+
+		// parameters
+
+		var parameters = new UI.Span();
+		container.add( parameters );
+
+
+		//
+
+		function build() {
+
+			var object = editor.selected;
+
+			if ( object && object.geometry ) {
+
+				var geometry = object.geometry;
+
+				container.setDisplay( 'block' );
+
+				geometryType.setValue( geometry.type );
+
+				geometryUUID.setValue( geometry.uuid );
+				geometryName.setValue( geometry.name );
+
+				//
+
+				parameters.clear();
+
+				if ( geometry.type === 'BufferGeometry' || geometry.type === 'Geometry' ) {
+
+					parameters.add( new Sidebar.Geometry.Modifiers( editor, object ) );
+
+				} else if ( Sidebar.Geometry[ geometry.type ] !== undefined ) {
+
+					parameters.add( new Sidebar.Geometry[ geometry.type ]( editor, object ) );
+
+				}
+
+			} else {
+
+				container.setDisplay( 'none' );
+
+			}
+
+		}
+
+		signals.objectSelected.add( build );
+		signals.geometryChanged.add( build );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// width
+
+		var widthRow = new UI.Row();
+		var width = new UI.Number( parameters.width ).onChange( update );
+
+		widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
+		widthRow.add( width );
+
+		container.add( widthRow );
+
+		// height
+
+		var heightRow = new UI.Row();
+		var height = new UI.Number( parameters.height ).onChange( update );
+
+		heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ) );
+		heightRow.add( height );
+
+		container.add( heightRow );
+
+		// depth
+
+		var depthRow = new UI.Row();
+		var depth = new UI.Number( parameters.depth ).onChange( update );
+
+		depthRow.add( new UI.Text( '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 );
+
+		widthSegmentsRow.add( new UI.Text( 'Width segments' ).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 );
+
+		heightSegmentsRow.add( new UI.Text( 'Height segments' ).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 );
+
+		depthSegmentsRow.add( new UI.Text( 'Depth segments' ).setWidth( '90px' ) );
+		depthSegmentsRow.add( depthSegments );
+
+		container.add( depthSegmentsRow );
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				width.getValue(),
+				height.getValue(),
+				depth.getValue(),
+				widthSegments.getValue(),
+				heightSegments.getValue(),
+				depthSegments.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.BoxBufferGeometry = Sidebar.Geometry.BoxGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.BoxGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.BufferGeometry = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		function update( object ) {
+
+			if ( object === null ) return; // objectSelected.dispatch( null )
+			if ( object === undefined ) return;
+
+			var geometry = object.geometry;
+
+			if ( geometry instanceof THREE.BufferGeometry ) {
+
+				container.clear();
+				container.setDisplay( 'block' );
+
+				var index = geometry.index;
+
+				if ( index !== null ) {
+
+					var panel = new UI.Row();
+					panel.add( new UI.Text( 'index' ).setWidth( '90px' ) );
+					panel.add( new UI.Text( ( index.count ).format() ).setFontSize( '12px' ) );
+					container.add( panel );
+
+				}
+
+				var attributes = geometry.attributes;
+
+				for ( var name in attributes ) {
+
+					var attribute = attributes[ name ];
+
+					var panel = new UI.Row();
+					panel.add( new UI.Text( name ).setWidth( '90px' ) );
+					panel.add( new UI.Text( ( attribute.count ).format() + ' (' + attribute.itemSize + ')' ).setFontSize( '12px' ) );
+					container.add( panel );
+
+				}
+
+			} else {
+
+				container.setDisplay( 'none' );
+
+			}
+
+		}
+
+		signals.objectSelected.add( update );
+		signals.geometryChanged.add( update );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.BufferGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radius
+
+		var radiusRow = new UI.Row();
+		var radius = new UI.Number( parameters.radius ).onChange( update );
+
+		radiusRow.add( new UI.Text( '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 );
+
+		segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
+		segmentsRow.add( segments );
+
+		container.add( segmentsRow );
+
+		// thetaStart
+
+		var thetaStartRow = new UI.Row();
+		var thetaStart = new UI.Number( parameters.thetaStart ).onChange( update );
+
+		thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ) );
+		thetaStartRow.add( thetaStart );
+
+		container.add( thetaStartRow );
+
+		// thetaLength
+
+		var thetaLengthRow = new UI.Row();
+		var thetaLength = new UI.Number( parameters.thetaLength ).onChange( update );
+
+		thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ) );
+		thetaLengthRow.add( thetaLength );
+
+		container.add( thetaLengthRow );
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radius.getValue(),
+				segments.getValue(),
+				thetaStart.getValue(),
+				thetaLength.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.CircleBufferGeometry = Sidebar.Geometry.CircleGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.CircleGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radiusTop
+
+		var radiusTopRow = new UI.Row();
+		var radiusTop = new UI.Number( parameters.radiusTop ).onChange( update );
+
+		radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ) );
+		radiusTopRow.add( radiusTop );
+
+		container.add( radiusTopRow );
+
+		// radiusBottom
+
+		var radiusBottomRow = new UI.Row();
+		var radiusBottom = new UI.Number( parameters.radiusBottom ).onChange( update );
+
+		radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ) );
+		radiusBottomRow.add( radiusBottom );
+
+		container.add( radiusBottomRow );
+
+		// height
+
+		var heightRow = new UI.Row();
+		var height = new UI.Number( parameters.height ).onChange( update );
+
+		heightRow.add( new UI.Text( '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 );
+
+		radialSegmentsRow.add( new UI.Text( 'Radial segments' ).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 );
+
+		heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
+		heightSegmentsRow.add( heightSegments );
+
+		container.add( heightSegmentsRow );
+
+		// openEnded
+
+		var openEndedRow = new UI.Row();
+		var openEnded = new UI.Checkbox( parameters.openEnded ).onChange( update );
+
+		openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ) );
+		openEndedRow.add( openEnded );
+
+		container.add( openEndedRow );
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radiusTop.getValue(),
+				radiusBottom.getValue(),
+				height.getValue(),
+				radialSegments.getValue(),
+				heightSegments.getValue(),
+				openEnded.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.CylinderBufferGeometry = Sidebar.Geometry.CylinderGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.CylinderGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radius
+
+		var radiusRow = new UI.Row();
+		var radius = new UI.Number( parameters.radius ).onChange( update );
+
+		radiusRow.add( new UI.Text( '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 );
+
+		detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ) );
+		detailRow.add( detail );
+
+		container.add( detailRow );
+
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radius.getValue(),
+				detail.getValue()
+			) ) );
+
+			signals.objectChanged.dispatch( object );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.IcosahedronBufferGeometry = Sidebar.Geometry.IcosahedronGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.IcosahedronGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author rfm1201
+	 */
+
+	Sidebar.Geometry.LatheGeometry = function( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// segments
+
+		var segmentsRow = new UI.Row();
+		var segments = new UI.Integer( parameters.segments ).onChange( update );
+
+		segmentsRow.add( new UI.Text( '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 );
+
+		phiStartRow.add( new UI.Text( 'Phi start (°)' ).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 );
+
+		phiLengthRow.add( new UI.Text( 'Phi length (°)' ).setWidth( '90px' ) );
+		phiLengthRow.add( phiLength );
+
+		container.add( phiLengthRow );
+
+		// points
+
+		var lastPointIdx = 0;
+		var pointsUI = [];
+
+		var pointsRow = new UI.Row();
+		pointsRow.add( new UI.Text( 'Points' ).setWidth( '90px' ) );
+
+		var points = new UI.Span().setDisplay( 'inline-block' );
+		pointsRow.add( points );
+
+		var pointsList = new UI.Div();
+		points.add( pointsList );
+
+		for ( var i = 0; i < parameters.points.length; i ++ ) {
+
+			var point = parameters.points[ i ];
+			pointsList.add( createPointRow( point.x, point.y ) );
+
+		}
+
+		var addPointButton = new UI.Button( '+' ).onClick( function() {
+
+			if( pointsUI.length === 0 ){
+
+				pointsList.add( createPointRow( 0, 0 ) );
+
+			} else {
+
+				var point = pointsUI[ pointsUI.length - 1 ];
+
+				pointsList.add( createPointRow( point.x.getValue(), point.y.getValue() ) );
+
+			}
+
+			update();
+
+		} );
+		points.add( addPointButton );
+
+		container.add( pointsRow );
+
+		//
+
+		function createPointRow( x, y ) {
+
+			var pointRow = new UI.Div();
+			var lbl = new UI.Text( lastPointIdx + 1 ).setWidth( '20px' );
+			var txtX = new UI.Number( x ).setRange( 0, Infinity ).setWidth( '40px' ).onChange( update );
+			var txtY = new UI.Number( y ).setWidth( '40px' ).onChange( update );
+			var idx = lastPointIdx;
+			var btn = new UI.Button( '-' ).onClick( function() {
+
+				deletePointRow( idx );
+
+			} );
+
+			pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
+			lastPointIdx ++;
+			pointRow.add( lbl, txtX, txtY, btn );
+
+			return pointRow;
+
+		}
+
+		function deletePointRow( idx ) {
+
+			if ( ! pointsUI[ idx ] ) return;
+
+			pointsList.remove( pointsUI[ idx ].row );
+			pointsUI[ idx ] = null;
+
+			update();
+
+		}
+
+		function update() {
+
+			var points = [];
+			var count = 0;
+
+			for ( var i = 0; i < pointsUI.length; i ++ ) {
+
+				var pointUI = pointsUI[ i ];
+
+				if ( ! pointUI ) continue;
+
+				points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
+				count ++;
+				pointUI.lbl.setValue( count );
+
+			}
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				points,
+				segments.getValue(),
+				phiStart.getValue() / 180 * Math.PI,
+				phiLength.getValue() / 180 * Math.PI
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.LatheBufferGeometry = Sidebar.Geometry.LatheGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.LatheGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.Modifiers = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row().setPaddingLeft( '90px' );
+
+		var geometry = object.geometry;
+
+		// Compute Vertex Normals
+
+		var button = new UI.Button( 'Compute Vertex Normals' );
+		button.onClick( function () {
+
+			geometry.computeVertexNormals();
+
+			if ( geometry instanceof THREE.BufferGeometry ) {
+
+				geometry.attributes.normal.needsUpdate = true;
+
+			} else {
+
+				geometry.normalsNeedUpdate = true;
+
+			}
+
+			signals.geometryChanged.dispatch( object );
+
+		} );
+
+		container.add( button );
+
+		//
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.Modifiers', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// width
+
+		var widthRow = new UI.Row();
+		var width = new UI.Number( parameters.width ).onChange( update );
+
+		widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ) );
+		widthRow.add( width );
+
+		container.add( widthRow );
+
+		// height
+
+		var heightRow = new UI.Row();
+		var height = new UI.Number( parameters.height ).onChange( update );
+
+		heightRow.add( new UI.Text( '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 );
+
+		widthSegmentsRow.add( new UI.Text( 'Width segments' ).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 );
+
+		heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
+		heightSegmentsRow.add( heightSegments );
+
+		container.add( heightSegmentsRow );
+
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				width.getValue(),
+				height.getValue(),
+				widthSegments.getValue(),
+				heightSegments.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.PlaneBufferGeometry = Sidebar.Geometry.PlaneGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.PlaneGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radius
+
+		var radiusRow = new UI.Row();
+		var radius = new UI.Number( parameters.radius ).onChange( update );
+
+		radiusRow.add( new UI.Text( '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 );
+
+		widthSegmentsRow.add( new UI.Text( 'Width segments' ).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 );
+
+		heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ) );
+		heightSegmentsRow.add( heightSegments );
+
+		container.add( heightSegmentsRow );
+
+		// phiStart
+
+		var phiStartRow = new UI.Row();
+		var phiStart = new UI.Number( parameters.phiStart ).onChange( update );
+
+		phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ) );
+		phiStartRow.add( phiStart );
+
+		container.add( phiStartRow );
+
+		// phiLength
+
+		var phiLengthRow = new UI.Row();
+		var phiLength = new UI.Number( parameters.phiLength ).onChange( update );
+
+		phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ) );
+		phiLengthRow.add( phiLength );
+
+		container.add( phiLengthRow );
+
+		// thetaStart
+
+		var thetaStartRow = new UI.Row();
+		var thetaStart = new UI.Number( parameters.thetaStart ).onChange( update );
+
+		thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ) );
+		thetaStartRow.add( thetaStart );
+
+		container.add( thetaStartRow );
+
+		// thetaLength
+
+		var thetaLengthRow = new UI.Row();
+		var thetaLength = new UI.Number( parameters.thetaLength ).onChange( update );
+
+		thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ) );
+		thetaLengthRow.add( thetaLength );
+
+		container.add( thetaLengthRow );
+
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radius.getValue(),
+				widthSegments.getValue(),
+				heightSegments.getValue(),
+				phiStart.getValue(),
+				phiLength.getValue(),
+				thetaStart.getValue(),
+				thetaLength.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.SphereBufferGeometry = Sidebar.Geometry.SphereGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.SphereGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author tschw
+	 */
+
+	Sidebar.Geometry.TeapotBufferGeometry = function ( signals, object ) {
+
+		var container = new UI.Row();
+
+		var parameters = object.geometry.parameters;
+
+		// size
+
+		var sizeRow = new UI.Row();
+		var size = new UI.Number( parameters.size ).onChange( update );
+
+		sizeRow.add( new UI.Text( '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 );
+
+		segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ) );
+		segmentsRow.add( segments );
+
+		container.add( segmentsRow );
+
+		// bottom
+
+		var bottomRow = new UI.Row();
+		var bottom = new UI.Checkbox( parameters.bottom ).onChange( update );
+
+		bottomRow.add( new UI.Text( 'Bottom' ).setWidth( '90px' ) );
+		bottomRow.add( bottom );
+
+		container.add( bottomRow );
+
+		// lid
+
+		var lidRow = new UI.Row();
+		var lid = new UI.Checkbox( parameters.lid ).onChange( update );
+
+		lidRow.add( new UI.Text( 'Lid' ).setWidth( '90px' ) );
+		lidRow.add( lid );
+
+		container.add( lidRow );
+
+		// body
+
+		var bodyRow = new UI.Row();
+		var body = new UI.Checkbox( parameters.body ).onChange( update );
+
+		bodyRow.add( new UI.Text( '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 );
+
+		fitLidRow.add( new UI.Text( '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 );
+
+		blinnRow.add( new UI.Text( 'Blinn-scaled' ).setWidth( '90px' ) );
+		blinnRow.add( blinn );
+
+		container.add( blinnRow );
+
+		function update() {
+
+			object.geometry.dispose();
+
+			object.geometry = new THREE.TeapotBufferGeometry(
+				size.getValue(),
+				segments.getValue(),
+				bottom.getValue(),
+				lid.getValue(),
+				body.getValue(),
+				fitLid.getValue(),
+				blinn.getValue()
+			);
+
+			object.geometry.computeBoundingSphere();
+
+			signals.geometryChanged.dispatch( object );
+
+		}
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.TeapotBufferGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radius
+
+		var radiusRow = new UI.Row();
+		var radius = new UI.Number( parameters.radius ).onChange( update );
+
+		radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
+		radiusRow.add( radius );
+
+		container.add( radiusRow );
+
+		// tube
+
+		var tubeRow = new UI.Row();
+		var tube = new UI.Number( parameters.tube ).onChange( update );
+
+		tubeRow.add( new UI.Text( '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 );
+
+		radialSegmentsRow.add( new UI.Text( 'Radial segments' ).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 );
+
+		tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ) );
+		tubularSegmentsRow.add( tubularSegments );
+
+		container.add( tubularSegmentsRow );
+
+		// arc
+
+		var arcRow = new UI.Row();
+		var arc = new UI.Number( parameters.arc ).onChange( update );
+
+		arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ) );
+		arcRow.add( arc );
+
+		container.add( arcRow );
+
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radius.getValue(),
+				tube.getValue(),
+				radialSegments.getValue(),
+				tubularSegments.getValue(),
+				arc.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.TorusBufferGeometry = Sidebar.Geometry.TorusGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.TorusGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Row();
+
+		var geometry = object.geometry;
+		var parameters = geometry.parameters;
+
+		// radius
+
+		var radiusRow = new UI.Row();
+		var radius = new UI.Number( parameters.radius ).onChange( update );
+
+		radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ) );
+		radiusRow.add( radius );
+
+		container.add( radiusRow );
+
+		// tube
+
+		var tubeRow = new UI.Row();
+		var tube = new UI.Number( parameters.tube ).onChange( update );
+
+		tubeRow.add( new UI.Text( '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 );
+
+		tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).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 );
+
+		radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
+		radialSegmentsRow.add( radialSegments );
+
+		container.add( radialSegmentsRow );
+
+		// p
+
+		var pRow = new UI.Row();
+		var p = new UI.Number( parameters.p ).onChange( update );
+
+		pRow.add( new UI.Text( 'P' ).setWidth( '90px' ) );
+		pRow.add( p );
+
+		container.add( pRow );
+
+		// q
+
+		var qRow = new UI.Row();
+		var q = new UI.Number( parameters.q ).onChange( update );
+
+		pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ) );
+		pRow.add( q );
+
+		container.add( qRow );
+
+
+		//
+
+		function update() {
+
+			editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+				radius.getValue(),
+				tube.getValue(),
+				tubularSegments.getValue(),
+				radialSegments.getValue(),
+				p.getValue(),
+				q.getValue()
+			) ) );
+
+		}
+
+		return container;
+
+	};
+
+	Sidebar.Geometry.TorusKnotBufferGeometry = Sidebar.Geometry.TorusKnotGeometry;
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Geometry.TorusKnotGeometry', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	Sidebar.History = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var config = editor.config;
+
+		var history = editor.history;
+
+		var container = new UI.Panel();
+
+		container.add( new UI.Text( 'HISTORY' ) );
+
+		//
+
+		var persistent = new UI.THREE.Boolean( config.getKey( 'settings/history' ), 'persistent' );
+		persistent.setPosition( 'absolute' ).setRight( '8px' );
+		persistent.onChange( function () {
+
+			var value = this.getValue();
+
+			config.setKey( 'settings/history', value );
+
+			if ( value ) {
+
+				alert( 'The history will be preserved across sessions.\nThis can have an impact on performance when working with textures.' );
+
+				var lastUndoCmd = history.undos[ history.undos.length - 1 ];
+				var lastUndoId = ( lastUndoCmd !== undefined ) ? lastUndoCmd.id : 0;
+				editor.history.enableSerialization( lastUndoId );
+
+			} else {
+
+				signals.historyChanged.dispatch();
+
+			}
+
+		} );
+		container.add( persistent );
+
+		container.add( new UI.Break(), new UI.Break() );
+
+		var ignoreObjectSelectedSignal = false;
+
+		var outliner = new UI.Outliner( editor );
+		outliner.onChange( function () {
+
+			ignoreObjectSelectedSignal = true;
+
+			editor.history.goToState( parseInt( outliner.getValue() ) );
+
+			ignoreObjectSelectedSignal = false;
+
+		} );
+		container.add( outliner );
+
+		//
+
+		var refreshUI = function () {
+
+			var options = [];
+			var enumerator = 1;
+
+			function buildOption( object ) {
+
+				var option = document.createElement( 'div' );
+				option.value = object.id;
+
+				return option;
+
+			}
+
+			( function addObjects( objects ) {
+
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+					var object = objects[ i ];
+
+					var option = buildOption( object );
+					option.innerHTML = '&nbsp;' + object.name;
+
+					options.push( option );
+
+				}
+
+			} )( history.undos );
+
+
+			( function addObjects( objects, pad ) {
+
+				for ( var i = objects.length - 1; i >= 0; i -- ) {
+
+					var object = objects[ i ];
+
+					var option = buildOption( object );
+					option.innerHTML = '&nbsp;' + object.name;
+					option.style.opacity = 0.3;
+
+					options.push( option );
+
+				}
+
+			} )( history.redos, '&nbsp;' );
+
+			outliner.setOptions( options );
+
+		};
+
+		refreshUI();
+
+		// events
+
+		signals.editorCleared.add( refreshUI );
+
+		signals.historyChanged.add( refreshUI );
+		signals.historyChanged.add( function ( cmd ) {
+
+			outliner.setValue( cmd !== undefined ? cmd.id : null );
+
+		} );
+
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.History', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Material = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var currentObject;
+
+		var currentMaterialSlot = 0;
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+
+		// New / Copy / Paste
+
+		var copiedMaterial;
+
+		var managerRow = new UI.Row();
+
+		// Current material slot
+
+		var materialSlotRow = new UI.Row();
+
+		materialSlotRow.add( new UI.Text( 'Slot' ).setWidth( '90px' ) );
+
+		var materialSlotSelect = new UI.Select().setWidth( '170px' ).setFontSize( '12px' ).onChange( update );
+		materialSlotSelect.setOptions( { 0: '' } ).setValue( 0 );
+		materialSlotRow.add( materialSlotSelect );
+
+		container.add( materialSlotRow );
+
+		managerRow.add( new UI.Text( '' ).setWidth( '90px' ) );
+
+		managerRow.add( new UI.Button( 'New' ).onClick( function () {
+
+			var material = new THREE[ materialClass.getValue() ]();
+			editor.execute( new SetMaterialCommand( currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
+			update();
+
+		} ) );
+
+		managerRow.add( new UI.Button( 'Copy' ).setMarginLeft( '4px' ).onClick( function () {
+
+			copiedMaterial = currentObject.material;
+
+			if ( Array.isArray( copiedMaterial ) ) {
+
+				if ( copiedMaterial.length === 0 ) return;
+
+				copiedMaterial = copiedMaterial[ currentMaterialSlot ];
+
+			}
+
+		} ) );
+
+		managerRow.add( new UI.Button( 'Paste' ).setMarginLeft( '4px' ).onClick( function () {
+
+			if ( copiedMaterial === undefined ) return;
+
+			editor.execute( new SetMaterialCommand( currentObject, copiedMaterial, currentMaterialSlot ), 'Pasted Material: ' + materialClass.getValue() );
+			refreshUI();
+			update();
+
+		} ) );
+
+		container.add( managerRow );
+
+
+		// type
+
+		var materialClassRow = new UI.Row();
+		var materialClass = new UI.Select().setOptions( {
+
+			'LineBasicMaterial': 'LineBasicMaterial',
+			'LineDashedMaterial': 'LineDashedMaterial',
+			'MeshBasicMaterial': 'MeshBasicMaterial',
+			'MeshDepthMaterial': 'MeshDepthMaterial',
+			'MeshNormalMaterial': 'MeshNormalMaterial',
+			'MeshLambertMaterial': 'MeshLambertMaterial',
+			'MeshPhongMaterial': 'MeshPhongMaterial',
+			'MeshStandardMaterial': 'MeshStandardMaterial',
+			'MeshPhysicalMaterial': 'MeshPhysicalMaterial',
+			'ShaderMaterial': 'ShaderMaterial',
+			'SpriteMaterial': 'SpriteMaterial'
+
+		} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
+
+		materialClassRow.add( new UI.Text( '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( 'New' ).setMarginLeft( '7px' ).onClick( function () {
+
+			materialUUID.setValue( THREE.Math.generateUUID() );
+			update();
+
+		} );
+
+		materialUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
+		materialUUIDRow.add( materialUUID );
+		materialUUIDRow.add( materialUUIDRenew );
+
+		container.add( materialUUIDRow );
+
+		// name
+
+		var materialNameRow = new UI.Row();
+		var materialName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+			editor.execute( new SetMaterialValueCommand( editor.selected, 'name', materialName.getValue(), currentMaterialSlot ) );
+
+		} );
+
+		materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
+		materialNameRow.add( materialName );
+
+		container.add( materialNameRow );
+
+		// program
+
+		var materialProgramRow = new UI.Row();
+		materialProgramRow.add( new UI.Text( 'Program' ).setWidth( '90px' ) );
+
+		var materialProgramInfo = new UI.Button( 'Info' );
+		materialProgramInfo.setMarginLeft( '4px' );
+		materialProgramInfo.onClick( function () {
+
+			signals.editScript.dispatch( currentObject, 'programInfo' );
+
+		} );
+		materialProgramRow.add( materialProgramInfo );
+
+		var materialProgramVertex = new UI.Button( 'Vertex' );
+		materialProgramVertex.setMarginLeft( '4px' );
+		materialProgramVertex.onClick( function () {
+
+			signals.editScript.dispatch( currentObject, 'vertexShader' );
+
+		} );
+		materialProgramRow.add( materialProgramVertex );
+
+		var materialProgramFragment = new UI.Button( 'Fragment' );
+		materialProgramFragment.setMarginLeft( '4px' );
+		materialProgramFragment.onClick( function () {
+
+			signals.editScript.dispatch( currentObject, 'fragmentShader' );
+
+		} );
+		materialProgramRow.add( materialProgramFragment );
+
+		container.add( materialProgramRow );
+
+		// color
+
+		var materialColorRow = new UI.Row();
+		var materialColor = new UI.Color().onChange( update );
+
+		materialColorRow.add( new UI.Text( '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 );
+
+		materialRoughnessRow.add( new UI.Text( '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 );
+
+		materialMetalnessRow.add( new UI.Text( 'Metalness' ).setWidth( '90px' ) );
+		materialMetalnessRow.add( materialMetalness );
+
+		container.add( materialMetalnessRow );
+
+		// emissive
+
+		var materialEmissiveRow = new UI.Row();
+		var materialEmissive = new UI.Color().setHexValue( 0x000000 ).onChange( update );
+
+		materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ) );
+		materialEmissiveRow.add( materialEmissive );
+
+		container.add( materialEmissiveRow );
+
+		// specular
+
+		var materialSpecularRow = new UI.Row();
+		var materialSpecular = new UI.Color().setHexValue( 0x111111 ).onChange( update );
+
+		materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ) );
+		materialSpecularRow.add( materialSpecular );
+
+		container.add( materialSpecularRow );
+
+		// shininess
+
+		var materialShininessRow = new UI.Row();
+		var materialShininess = new UI.Number( 30 ).onChange( update );
+
+		materialShininessRow.add( new UI.Text( '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 );
+
+		materialClearCoatRow.add( new UI.Text( '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 );
+
+		materialClearCoatRoughnessRow.add( new UI.Text( 'ClearCoat Roughness' ).setWidth( '90px' ) );
+		materialClearCoatRoughnessRow.add( materialClearCoatRoughness );
+
+		container.add( materialClearCoatRoughnessRow );
+
+		// vertex colors
+
+		var materialVertexColorsRow = new UI.Row();
+		var materialVertexColors = new UI.Select().setOptions( {
+
+			0: 'No',
+			1: 'Face',
+			2: 'Vertex'
+
+		} ).onChange( update );
+
+		materialVertexColorsRow.add( new UI.Text( 'Vertex Colors' ).setWidth( '90px' ) );
+		materialVertexColorsRow.add( materialVertexColors );
+
+		container.add( materialVertexColorsRow );
+
+		// skinning
+
+		var materialSkinningRow = new UI.Row();
+		var materialSkinning = new UI.Checkbox( false ).onChange( update );
+
+		materialSkinningRow.add( new UI.Text( '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( update );
+
+		materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ) );
+		materialMapRow.add( materialMapEnabled );
+		materialMapRow.add( materialMap );
+
+		container.add( materialMapRow );
+
+		// alpha map
+
+		var materialAlphaMapRow = new UI.Row();
+		var materialAlphaMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialAlphaMap = new UI.Texture().onChange( update );
+
+		materialAlphaMapRow.add( new UI.Text( 'Alpha Map' ).setWidth( '90px' ) );
+		materialAlphaMapRow.add( materialAlphaMapEnabled );
+		materialAlphaMapRow.add( materialAlphaMap );
+
+		container.add( materialAlphaMapRow );
+
+		// 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 );
+
+		materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ) );
+		materialBumpMapRow.add( materialBumpMapEnabled );
+		materialBumpMapRow.add( materialBumpMap );
+		materialBumpMapRow.add( materialBumpScale );
+
+		container.add( materialBumpMapRow );
+
+		// normal map
+
+		var materialNormalMapRow = new UI.Row();
+		var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialNormalMap = new UI.Texture().onChange( update );
+
+		materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ) );
+		materialNormalMapRow.add( materialNormalMapEnabled );
+		materialNormalMapRow.add( materialNormalMap );
+
+		container.add( materialNormalMapRow );
+
+		// 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 );
+
+		materialDisplacementMapRow.add( new UI.Text( 'Displace Map' ).setWidth( '90px' ) );
+		materialDisplacementMapRow.add( materialDisplacementMapEnabled );
+		materialDisplacementMapRow.add( materialDisplacementMap );
+		materialDisplacementMapRow.add( materialDisplacementScale );
+
+		container.add( materialDisplacementMapRow );
+
+		// roughness map
+
+		var materialRoughnessMapRow = new UI.Row();
+		var materialRoughnessMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialRoughnessMap = new UI.Texture().onChange( update );
+
+		materialRoughnessMapRow.add( new UI.Text( 'Rough. Map' ).setWidth( '90px' ) );
+		materialRoughnessMapRow.add( materialRoughnessMapEnabled );
+		materialRoughnessMapRow.add( materialRoughnessMap );
+
+		container.add( materialRoughnessMapRow );
+
+		// metalness map
+
+		var materialMetalnessMapRow = new UI.Row();
+		var materialMetalnessMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialMetalnessMap = new UI.Texture().onChange( update );
+
+		materialMetalnessMapRow.add( new UI.Text( 'Metal. Map' ).setWidth( '90px' ) );
+		materialMetalnessMapRow.add( materialMetalnessMapEnabled );
+		materialMetalnessMapRow.add( materialMetalnessMap );
+
+		container.add( materialMetalnessMapRow );
+
+		// specular map
+
+		var materialSpecularMapRow = new UI.Row();
+		var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialSpecularMap = new UI.Texture().onChange( update );
+
+		materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ) );
+		materialSpecularMapRow.add( materialSpecularMapEnabled );
+		materialSpecularMapRow.add( materialSpecularMap );
+
+		container.add( materialSpecularMapRow );
+
+		// env map
+
+		var materialEnvMapRow = new UI.Row();
+		var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( update );
+		var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
+
+		materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ) );
+		materialEnvMapRow.add( materialEnvMapEnabled );
+		materialEnvMapRow.add( materialEnvMap );
+		materialEnvMapRow.add( materialReflectivity );
+
+		container.add( materialEnvMapRow );
+
+		// light map
+
+		var materialLightMapRow = new UI.Row();
+		var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialLightMap = new UI.Texture().onChange( update );
+
+		materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ) );
+		materialLightMapRow.add( materialLightMapEnabled );
+		materialLightMapRow.add( materialLightMap );
+
+		container.add( materialLightMapRow );
+
+		// 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 );
+
+		materialAOMapRow.add( new UI.Text( 'AO Map' ).setWidth( '90px' ) );
+		materialAOMapRow.add( materialAOMapEnabled );
+		materialAOMapRow.add( materialAOMap );
+		materialAOMapRow.add( materialAOScale );
+
+		container.add( materialAOMapRow );
+
+		// emissive map
+
+		var materialEmissiveMapRow = new UI.Row();
+		var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
+		var materialEmissiveMap = new UI.Texture().onChange( update );
+
+		materialEmissiveMapRow.add( new UI.Text( 'Emissive Map' ).setWidth( '90px' ) );
+		materialEmissiveMapRow.add( materialEmissiveMapEnabled );
+		materialEmissiveMapRow.add( materialEmissiveMap );
+
+		container.add( materialEmissiveMapRow );
+
+		// side
+
+		var materialSideRow = new UI.Row();
+		var materialSide = new UI.Select().setOptions( {
+
+			0: 'Front',
+			1: 'Back',
+			2: 'Double'
+
+		} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
+
+		materialSideRow.add( new UI.Text( '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 );
+
+		materialShadingRow.add( new UI.Text( 'Flat Shaded' ).setWidth( '90px' ) );
+		materialShadingRow.add( materialShading );
+
+		container.add( materialShadingRow );
+
+		// blending
+
+		var materialBlendingRow = new UI.Row();
+		var materialBlending = new UI.Select().setOptions( {
+
+			0: 'No',
+			1: 'Normal',
+			2: 'Additive',
+			3: 'Subtractive',
+			4: 'Multiply',
+			5: 'Custom'
+
+		} ).setWidth( '150px' ).setFontSize( '12px' ).onChange( update );
+
+		materialBlendingRow.add( new UI.Text( '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 );
+
+		materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ) );
+		materialOpacityRow.add( materialOpacity );
+
+		container.add( materialOpacityRow );
+
+		// transparent
+
+		var materialTransparentRow = new UI.Row();
+		var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
+
+		materialTransparentRow.add( new UI.Text( '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 );
+
+		materialAlphaTestRow.add( new UI.Text( 'Alpha Test' ).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 );
+
+		materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ) );
+		materialWireframeRow.add( materialWireframe );
+		materialWireframeRow.add( materialWireframeLinewidth );
+
+		container.add( materialWireframeRow );
+
+		//
+
+		function update() {
+
+			var object = currentObject;
+
+			var geometry = object.geometry;
+
+			var previousSelectedSlot = currentMaterialSlot;
+
+			currentMaterialSlot = parseInt( materialSlotSelect.getValue() );
+
+			if ( currentMaterialSlot !== previousSelectedSlot ) refreshUI( true );
+
+			var material = editor.getObjectMaterial( currentObject, currentMaterialSlot );
+
+			var textureWarning = false;
+			var objectHasUvs = false;
+
+			if ( object instanceof THREE.Sprite ) objectHasUvs = true;
+			if ( geometry instanceof THREE.Geometry && geometry.faceVertexUvs[ 0 ].length > 0 ) objectHasUvs = true;
+			if ( geometry instanceof THREE.BufferGeometry && geometry.attributes.uv !== undefined ) objectHasUvs = true;
+
+			if ( material ) {
+
+				if ( material.uuid !== undefined && material.uuid !== materialUUID.getValue() ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'uuid', materialUUID.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material instanceof THREE[ materialClass.getValue() ] === false ) {
+
+					material = new THREE[ materialClass.getValue() ]();
+
+					editor.execute( new SetMaterialCommand( currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
+					// TODO Copy other references in the scene graph
+					// keeping name and UUID then.
+					// Also there should be means to create a unique
+					// copy for the current object explicitly and to
+					// attach the current material to other objects.
+
+				}
+
+				if ( material.color !== undefined && material.color.getHex() !== materialColor.getHexValue() ) {
+
+					editor.execute( new SetMaterialColorCommand( currentObject, 'color', materialColor.getHexValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.roughness !== undefined && Math.abs( material.roughness - materialRoughness.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'roughness', materialRoughness.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.metalness !== undefined && Math.abs( material.metalness - materialMetalness.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'metalness', materialMetalness.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.emissive !== undefined && material.emissive.getHex() !== materialEmissive.getHexValue() ) {
+
+					editor.execute( new SetMaterialColorCommand( currentObject, 'emissive', materialEmissive.getHexValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.specular !== undefined && material.specular.getHex() !== materialSpecular.getHexValue() ) {
+
+					editor.execute( new SetMaterialColorCommand( currentObject, 'specular', materialSpecular.getHexValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.shininess !== undefined && Math.abs( material.shininess - materialShininess.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'shininess', materialShininess.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.clearCoat !== undefined && Math.abs( material.clearCoat - materialClearCoat.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoat', materialClearCoat.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.clearCoatRoughness !== undefined && Math.abs( material.clearCoatRoughness - materialClearCoatRoughness.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoatRoughness', materialClearCoatRoughness.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.vertexColors !== undefined ) {
+
+					var vertexColors = parseInt( materialVertexColors.getValue() );
+
+					if ( material.vertexColors !== vertexColors ) {
+
+						editor.execute( new SetMaterialValueCommand( currentObject, 'vertexColors', vertexColors, currentMaterialSlot ) );
+
+					}
+
+				}
+
+				if ( material.skinning !== undefined && material.skinning !== materialSkinning.getValue() ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'skinning', materialSkinning.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.map !== undefined ) {
+
+					var mapEnabled = materialMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var map = mapEnabled ? materialMap.getValue() : null;
+						if ( material.map !== map ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'map', map, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( mapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.alphaMap !== undefined ) {
+
+					var mapEnabled = materialAlphaMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var alphaMap = mapEnabled ? materialAlphaMap.getValue() : null;
+						if ( material.alphaMap !== alphaMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'alphaMap', alphaMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( mapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.bumpMap !== undefined ) {
+
+					var bumpMapEnabled = materialBumpMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
+						if ( material.bumpMap !== bumpMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'bumpMap', bumpMap, currentMaterialSlot ) );
+
+						}
+
+						if ( material.bumpScale !== materialBumpScale.getValue() ) {
+
+							editor.execute( new SetMaterialValueCommand( currentObject, 'bumpScale', materialBumpScale.getValue(), currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( bumpMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.normalMap !== undefined ) {
+
+					var normalMapEnabled = materialNormalMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
+						if ( material.normalMap !== normalMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'normalMap', normalMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( normalMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.displacementMap !== undefined ) {
+
+					var displacementMapEnabled = materialDisplacementMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var displacementMap = displacementMapEnabled ? materialDisplacementMap.getValue() : null;
+						if ( material.displacementMap !== displacementMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'displacementMap', displacementMap, currentMaterialSlot ) );
+
+						}
+
+						if ( material.displacementScale !== materialDisplacementScale.getValue() ) {
+
+							editor.execute( new SetMaterialValueCommand( currentObject, 'displacementScale', materialDisplacementScale.getValue(), currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( displacementMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.roughnessMap !== undefined ) {
+
+					var roughnessMapEnabled = materialRoughnessMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var roughnessMap = roughnessMapEnabled ? materialRoughnessMap.getValue() : null;
+						if ( material.roughnessMap !== roughnessMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'roughnessMap', roughnessMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( roughnessMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.metalnessMap !== undefined ) {
+
+					var metalnessMapEnabled = materialMetalnessMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var metalnessMap = metalnessMapEnabled ? materialMetalnessMap.getValue() : null;
+						if ( material.metalnessMap !== metalnessMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'metalnessMap', metalnessMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( metalnessMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.specularMap !== undefined ) {
+
+					var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
+						if ( material.specularMap !== specularMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'specularMap', specularMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( specularMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.envMap !== undefined ) {
+
+					var envMapEnabled = materialEnvMapEnabled.getValue() === true;
+
+					var envMap = envMapEnabled ? materialEnvMap.getValue() : null;
+
+					if ( material.envMap !== envMap ) {
+
+						editor.execute( new SetMaterialMapCommand( currentObject, 'envMap', envMap, currentMaterialSlot ) );
+
+					}
+
+				}
+
+				if ( material.reflectivity !== undefined ) {
+
+					var reflectivity = materialReflectivity.getValue();
+
+					if ( material.reflectivity !== reflectivity ) {
+
+						editor.execute( new SetMaterialValueCommand( currentObject, 'reflectivity', reflectivity, currentMaterialSlot ) );
+
+					}
+
+				}
+
+				if ( material.lightMap !== undefined ) {
+
+					var lightMapEnabled = materialLightMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
+						if ( material.lightMap !== lightMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'lightMap', lightMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( lightMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.aoMap !== undefined ) {
+
+					var aoMapEnabled = materialAOMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var aoMap = aoMapEnabled ? materialAOMap.getValue() : null;
+						if ( material.aoMap !== aoMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'aoMap', aoMap, currentMaterialSlot ) );
+
+						}
+
+						if ( material.aoMapIntensity !== materialAOScale.getValue() ) {
+
+							editor.execute( new SetMaterialValueCommand( currentObject, 'aoMapIntensity', materialAOScale.getValue(), currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( aoMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.emissiveMap !== undefined ) {
+
+					var emissiveMapEnabled = materialEmissiveMapEnabled.getValue() === true;
+
+					if ( objectHasUvs ) {
+
+						var emissiveMap = emissiveMapEnabled ? materialEmissiveMap.getValue() : null;
+						if ( material.emissiveMap !== emissiveMap ) {
+
+							editor.execute( new SetMaterialMapCommand( currentObject, 'emissiveMap', emissiveMap, currentMaterialSlot ) );
+
+						}
+
+					} else {
+
+						if ( emissiveMapEnabled ) textureWarning = true;
+
+					}
+
+				}
+
+				if ( material.side !== undefined ) {
+
+					var side = parseInt( materialSide.getValue() );
+					if ( material.side !== side ) {
+
+						editor.execute( new SetMaterialValueCommand( currentObject, 'side', side, currentMaterialSlot ) );
+
+					}
+
+
+				}
+
+				if ( material.flatShading !== undefined ) {
+
+					var flatShading = materialShading.getValue();
+					if ( material.flatShading != flatShading ) {
+
+						editor.execute( new SetMaterialValueCommand( currentObject, 'flatShading', flatShading, currentMaterialSlot ) );
+
+					}
+
+				}
+
+				if ( material.blending !== undefined ) {
+
+					var blending = parseInt( materialBlending.getValue() );
+					if ( material.blending !== blending ) {
+
+						editor.execute( new SetMaterialValueCommand( currentObject, 'blending', blending, currentMaterialSlot ) );
+
+					}
+
+				}
+
+				if ( material.opacity !== undefined && Math.abs( material.opacity - materialOpacity.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'opacity', materialOpacity.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.transparent !== undefined && material.transparent !== materialTransparent.getValue() ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'transparent', materialTransparent.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.alphaTest !== undefined && Math.abs( material.alphaTest - materialAlphaTest.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'alphaTest', materialAlphaTest.getValue(), currentMaterialSlot ) );
+
+				}
+
+				if ( material.wireframe !== undefined && material.wireframe !== materialWireframe.getValue() ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'wireframe', materialWireframe.getValue(), currentMaterialSlot) );
+
+				}
+
+				if ( material.wireframeLinewidth !== undefined && Math.abs( material.wireframeLinewidth - materialWireframeLinewidth.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetMaterialValueCommand( currentObject, 'wireframeLinewidth', materialWireframeLinewidth.getValue(), currentMaterialSlot ) );
+
+				}
+
+				refreshUI();
+
+			}
+
+			if ( textureWarning ) {
+
+				console.warn( "Can't set texture, model doesn't have texture coordinates" );
+
+			}
+
+		}
+
+		//
+
+		function setRowVisibility() {
+
+			var properties = {
+				'name': materialNameRow,
+				'color': materialColorRow,
+				'roughness': materialRoughnessRow,
+				'metalness': materialMetalnessRow,
+				'emissive': materialEmissiveRow,
+				'specular': materialSpecularRow,
+				'shininess': materialShininessRow,
+				'clearCoat': materialClearCoatRow,
+				'clearCoatRoughness': materialClearCoatRoughnessRow,
+				'vertexShader': materialProgramRow,
+				'vertexColors': materialVertexColorsRow,
+				'skinning': materialSkinningRow,
+				'map': materialMapRow,
+				'alphaMap': materialAlphaMapRow,
+				'bumpMap': materialBumpMapRow,
+				'normalMap': materialNormalMapRow,
+				'displacementMap': materialDisplacementMapRow,
+				'roughnessMap': materialRoughnessMapRow,
+				'metalnessMap': materialMetalnessMapRow,
+				'specularMap': materialSpecularMapRow,
+				'envMap': materialEnvMapRow,
+				'lightMap': materialLightMapRow,
+				'aoMap': materialAOMapRow,
+				'emissiveMap': materialEmissiveMapRow,
+				'side': materialSideRow,
+				'flatShading': materialShadingRow,
+				'blending': materialBlendingRow,
+				'opacity': materialOpacityRow,
+				'transparent': materialTransparentRow,
+				'alphaTest': materialAlphaTestRow,
+				'wireframe': materialWireframeRow
+			};
+
+			var material = currentObject.material;
+
+			if ( Array.isArray( material ) ) {
+
+				materialSlotRow.setDisplay( '' );
+
+				if ( material.length === 0 ) return;
+
+				material = material[ currentMaterialSlot ];
+
+			} else {
+
+				materialSlotRow.setDisplay( 'none' );
+
+			}
+
+			for ( var property in properties ) {
+
+				properties[ property ].setDisplay( material[ property ] !== undefined ? '' : 'none' );
+
+			}
+
+		}
+
+
+		function refreshUI( resetTextureSelectors ) {
+
+			if ( ! currentObject ) return;
+
+			var material = currentObject.material;
+
+			if ( Array.isArray( material ) ) {
+
+				var slotOptions = {};
+
+				currentMaterialSlot = Math.max( 0, Math.min( material.length, currentMaterialSlot ) );
+
+				for ( var i = 0; i < material.length; i ++ ) {
+
+					slotOptions[ i ] = String( i + 1 ) + ': ' + material[ i ].name;
+
+				}
+
+				materialSlotSelect.setOptions( slotOptions ).setValue( currentMaterialSlot );
+
+			}
+
+			material = editor.getObjectMaterial( currentObject, currentMaterialSlot );
+
+			if ( material.uuid !== undefined ) {
+
+				materialUUID.setValue( material.uuid );
+
+			}
+
+			if ( material.name !== undefined ) {
+
+				materialName.setValue( material.name );
+
+			}
+
+			materialClass.setValue( material.type );
+
+			if ( material.color !== undefined ) {
+
+				materialColor.setHexValue( material.color.getHexString() );
+
+			}
+
+			if ( material.roughness !== undefined ) {
+
+				materialRoughness.setValue( material.roughness );
+
+			}
+
+			if ( material.metalness !== undefined ) {
+
+				materialMetalness.setValue( material.metalness );
+
+			}
+
+			if ( material.emissive !== undefined ) {
+
+				materialEmissive.setHexValue( material.emissive.getHexString() );
+
+			}
+
+			if ( material.specular !== undefined ) {
+
+				materialSpecular.setHexValue( material.specular.getHexString() );
+
+			}
+
+			if ( material.shininess !== undefined ) {
+
+				materialShininess.setValue( material.shininess );
+
+			}
+
+			if ( material.clearCoat !== undefined ) {
+
+				materialClearCoat.setValue( material.clearCoat );
+
+			}
+
+			if ( material.clearCoatRoughness !== undefined ) {
+
+				materialClearCoatRoughness.setValue( material.clearCoatRoughness );
+
+			}
+
+			if ( material.vertexColors !== undefined ) {
+
+				materialVertexColors.setValue( material.vertexColors );
+
+			}
+
+			if ( material.skinning !== undefined ) {
+
+				materialSkinning.setValue( material.skinning );
+
+			}
+
+			if ( material.map !== undefined ) {
+
+				materialMapEnabled.setValue( material.map !== null );
+
+				if ( material.map !== null || resetTextureSelectors ) {
+
+					materialMap.setValue( material.map );
+
+				}
+
+			}
+
+			if ( material.alphaMap !== undefined ) {
+
+				materialAlphaMapEnabled.setValue( material.alphaMap !== null );
+
+				if ( material.alphaMap !== null || resetTextureSelectors ) {
+
+					materialAlphaMap.setValue( material.alphaMap );
+
+				}
+
+			}
+
+			if ( material.bumpMap !== undefined ) {
+
+				materialBumpMapEnabled.setValue( material.bumpMap !== null );
+
+				if ( material.bumpMap !== null || resetTextureSelectors ) {
+
+					materialBumpMap.setValue( material.bumpMap );
+
+				}
+
+				materialBumpScale.setValue( material.bumpScale );
+
+			}
+
+			if ( material.normalMap !== undefined ) {
+
+				materialNormalMapEnabled.setValue( material.normalMap !== null );
+
+				if ( material.normalMap !== null || resetTextureSelectors ) {
+
+					materialNormalMap.setValue( material.normalMap );
+
+				}
+
+			}
+
+			if ( material.displacementMap !== undefined ) {
+
+				materialDisplacementMapEnabled.setValue( material.displacementMap !== null );
+
+				if ( material.displacementMap !== null || resetTextureSelectors ) {
+
+					materialDisplacementMap.setValue( material.displacementMap );
+
+				}
+
+				materialDisplacementScale.setValue( material.displacementScale );
+
+			}
+
+			if ( material.roughnessMap !== undefined ) {
+
+				materialRoughnessMapEnabled.setValue( material.roughnessMap !== null );
+
+				if ( material.roughnessMap !== null || resetTextureSelectors ) {
+
+					materialRoughnessMap.setValue( material.roughnessMap );
+
+				}
+
+			}
+
+			if ( material.metalnessMap !== undefined ) {
+
+				materialMetalnessMapEnabled.setValue( material.metalnessMap !== null );
+
+				if ( material.metalnessMap !== null || resetTextureSelectors ) {
+
+					materialMetalnessMap.setValue( material.metalnessMap );
+
+				}
+
+			}
+
+			if ( material.specularMap !== undefined ) {
+
+				materialSpecularMapEnabled.setValue( material.specularMap !== null );
+
+				if ( material.specularMap !== null || resetTextureSelectors ) {
+
+					materialSpecularMap.setValue( material.specularMap );
+
+				}
+
+			}
+
+			if ( material.envMap !== undefined ) {
+
+				materialEnvMapEnabled.setValue( material.envMap !== null );
+
+				if ( material.envMap !== null || resetTextureSelectors ) {
+
+					materialEnvMap.setValue( material.envMap );
+
+				}
+
+			}
+
+			if ( material.reflectivity !== undefined ) {
+
+				materialReflectivity.setValue( material.reflectivity );
+
+			}
+
+			if ( material.lightMap !== undefined ) {
+
+				materialLightMapEnabled.setValue( material.lightMap !== null );
+
+				if ( material.lightMap !== null || resetTextureSelectors ) {
+
+					materialLightMap.setValue( material.lightMap );
+
+				}
+
+			}
+
+			if ( material.aoMap !== undefined ) {
+
+				materialAOMapEnabled.setValue( material.aoMap !== null );
+
+				if ( material.aoMap !== null || resetTextureSelectors ) {
+
+					materialAOMap.setValue( material.aoMap );
+
+				}
+
+				materialAOScale.setValue( material.aoMapIntensity );
+
+			}
+
+			if ( material.emissiveMap !== undefined ) {
+
+				materialEmissiveMapEnabled.setValue( material.emissiveMap !== null );
+
+				if ( material.emissiveMap !== null || resetTextureSelectors ) {
+
+					materialEmissiveMap.setValue( material.emissiveMap );
+
+				}
+
+			}
+
+			if ( material.side !== undefined ) {
+
+				materialSide.setValue( material.side );
+
+			}
+
+			if ( material.flatShading !== undefined ) {
+
+				materialShading.setValue( material.flatShading );
+
+			}
+
+			if ( material.blending !== undefined ) {
+
+				materialBlending.setValue( material.blending );
+
+			}
+
+			if ( material.opacity !== undefined ) {
+
+				materialOpacity.setValue( material.opacity );
+
+			}
+
+			if ( material.transparent !== undefined ) {
+
+				materialTransparent.setValue( material.transparent );
+
+			}
+
+			if ( material.alphaTest !== undefined ) {
+
+				materialAlphaTest.setValue( material.alphaTest );
+
+			}
+
+			if ( material.wireframe !== undefined ) {
+
+				materialWireframe.setValue( material.wireframe );
+
+			}
+
+			if ( material.wireframeLinewidth !== undefined ) {
+
+				materialWireframeLinewidth.setValue( material.wireframeLinewidth );
+
+			}
+
+			setRowVisibility();
+
+		}
+
+		// events
+
+		signals.objectSelected.add( function ( object ) {
+
+			var hasMaterial = false;
+
+			if ( object && object.material ) {
+
+				hasMaterial = true;
+
+				if ( Array.isArray( object.material ) && object.material.length === 0 ) {
+
+					hasMaterial = false;
+
+				}
+
+			}
+
+			if ( hasMaterial ) {
+
+				var objectChanged = object !== currentObject;
+
+				currentObject = object;
+				refreshUI( objectChanged );
+				container.setDisplay( '' );
+
+			} else {
+
+				currentObject = null;
+				container.setDisplay( 'none' );
+
+			}
+
+		} );
+
+		signals.materialChanged.add( function () {
+
+			refreshUI();
+
+		} );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Material', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Object = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+		container.setDisplay( 'none' );
+
+		// Actions
+
+		var objectActions = new UI.Select().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
+		objectActions.setOptions( {
+
+			'Actions': 'Actions',
+			'Reset Position': 'Reset Position',
+			'Reset Rotation': 'Reset Rotation',
+			'Reset Scale': 'Reset Scale'
+
+		} );
+		objectActions.onClick( function ( event ) {
+
+			event.stopPropagation(); // Avoid panel collapsing
+
+		} );
+		objectActions.onChange( function ( event ) {
+
+			var object = editor.selected;
+
+			switch ( this.getValue() ) {
+
+				case 'Reset Position':
+					editor.execute( new SetPositionCommand( object, new THREE.Vector3( 0, 0, 0 ) ) );
+					break;
+
+				case 'Reset Rotation':
+					editor.execute( new SetRotationCommand( object, new THREE.Euler( 0, 0, 0 ) ) );
+					break;
+
+				case 'Reset Scale':
+					editor.execute( new SetScaleCommand( object, new THREE.Vector3( 1, 1, 1 ) ) );
+					break;
+
+			}
+
+			this.setValue( 'Actions' );
+
+		} );
+		// container.addStatic( objectActions );
+
+		// type
+
+		var objectTypeRow = new UI.Row();
+		var objectType = new UI.Text();
+
+		objectTypeRow.add( new UI.Text( '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( 'New' ).setMarginLeft( '7px' ).onClick( function () {
+
+			objectUUID.setValue( THREE.Math.generateUUID() );
+
+			editor.execute( new SetUuidCommand( editor.selected, objectUUID.getValue() ) );
+
+		} );
+
+		objectUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ) );
+		objectUUIDRow.add( objectUUID );
+		objectUUIDRow.add( objectUUIDRenew );
+
+		container.add( objectUUIDRow );
+
+		// name
+
+		var objectNameRow = new UI.Row();
+		var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+			editor.execute( new SetValueCommand( editor.selected, 'name', objectName.getValue() ) );
+
+		} );
+
+		objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ) );
+		objectNameRow.add( objectName );
+
+		container.add( objectNameRow );
+
+		// position
+
+		var objectPositionRow = new UI.Row();
+		var objectPositionX = new UI.Number().setWidth( '50px' ).onChange( update );
+		var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
+		var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
+
+		objectPositionRow.add( new UI.Text( '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 );
+
+		objectRotationRow.add( new UI.Text( '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 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
+		var objectScaleY = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
+		var objectScaleZ = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );
+
+		objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ) );
+		objectScaleRow.add( objectScaleLock );
+		objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
+
+		container.add( objectScaleRow );
+
+		// fov
+
+		var objectFovRow = new UI.Row();
+		var objectFov = new UI.Number().onChange( update );
+
+		objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ) );
+		objectFovRow.add( objectFov );
+
+		container.add( objectFovRow );
+
+		// near
+
+		var objectNearRow = new UI.Row();
+		var objectNear = new UI.Number().onChange( update );
+
+		objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ) );
+		objectNearRow.add( objectNear );
+
+		container.add( objectNearRow );
+
+		// far
+
+		var objectFarRow = new UI.Row();
+		var objectFar = new UI.Number().onChange( update );
+
+		objectFarRow.add( new UI.Text( '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 );
+
+		objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ) );
+		objectIntensityRow.add( objectIntensity );
+
+		container.add( objectIntensityRow );
+
+		// color
+
+		var objectColorRow = new UI.Row();
+		var objectColor = new UI.Color().onChange( update );
+
+		objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ) );
+		objectColorRow.add( objectColor );
+
+		container.add( objectColorRow );
+
+		// ground color
+
+		var objectGroundColorRow = new UI.Row();
+		var objectGroundColor = new UI.Color().onChange( update );
+
+		objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ) );
+		objectGroundColorRow.add( objectGroundColor );
+
+		container.add( objectGroundColorRow );
+
+		// distance
+
+		var objectDistanceRow = new UI.Row();
+		var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
+
+		objectDistanceRow.add( new UI.Text( '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 );
+
+		objectAngleRow.add( new UI.Text( '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 );
+
+		objectPenumbraRow.add( new UI.Text( '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 );
+
+		objectDecayRow.add( new UI.Text( 'Decay' ).setWidth( '90px' ) );
+		objectDecayRow.add( objectDecay );
+
+		container.add( objectDecayRow );
+
+		// shadow
+
+		var objectShadowRow = new UI.Row();
+
+		objectShadowRow.add( new UI.Text( 'Shadow' ).setWidth( '90px' ) );
+
+		var objectCastShadow = new UI.THREE.Boolean( false, 'cast' ).onChange( update );
+		objectShadowRow.add( objectCastShadow );
+
+		var objectReceiveShadow = new UI.THREE.Boolean( false, 'receive' ).onChange( update );
+		objectShadowRow.add( objectReceiveShadow );
+
+		var objectShadowRadius = new UI.Number( 1 ).onChange( update );
+		objectShadowRow.add( objectShadowRadius );
+
+		container.add( objectShadowRow );
+
+		// visible
+
+		var objectVisibleRow = new UI.Row();
+		var objectVisible = new UI.Checkbox().onChange( update );
+
+		objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ) );
+		objectVisibleRow.add( objectVisible );
+
+		container.add( objectVisibleRow );
+
+		// user data
+
+		var timeout;
+
+		var objectUserDataRow = new UI.Row();
+		var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( update );
+		objectUserData.onKeyUp( function () {
+
+			try {
+
+				JSON.parse( objectUserData.getValue() );
+
+				objectUserData.dom.classList.add( 'success' );
+				objectUserData.dom.classList.remove( 'fail' );
+
+			} catch ( error ) {
+
+				objectUserData.dom.classList.remove( 'success' );
+				objectUserData.dom.classList.add( 'fail' );
+
+			}
+
+		} );
+
+		objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ) );
+		objectUserDataRow.add( objectUserData );
+
+		container.add( objectUserDataRow );
+
+
+		//
+
+		function updateScaleX() {
+
+			var object = editor.selected;
+
+			if ( objectScaleLock.getValue() === true ) {
+
+				var scale = objectScaleX.getValue() / object.scale.x;
+
+				objectScaleY.setValue( objectScaleY.getValue() * scale );
+				objectScaleZ.setValue( objectScaleZ.getValue() * scale );
+
+			}
+
+			update();
+
+		}
+
+		function updateScaleY() {
+
+			var object = editor.selected;
+
+			if ( objectScaleLock.getValue() === true ) {
+
+				var scale = objectScaleY.getValue() / object.scale.y;
+
+				objectScaleX.setValue( objectScaleX.getValue() * scale );
+				objectScaleZ.setValue( objectScaleZ.getValue() * scale );
+
+			}
+
+			update();
+
+		}
+
+		function updateScaleZ() {
+
+			var object = editor.selected;
+
+			if ( objectScaleLock.getValue() === true ) {
+
+				var scale = objectScaleZ.getValue() / object.scale.z;
+
+				objectScaleX.setValue( objectScaleX.getValue() * scale );
+				objectScaleY.setValue( objectScaleY.getValue() * scale );
+
+			}
+
+			update();
+
+		}
+
+		function update() {
+
+			var object = editor.selected;
+
+			if ( object !== null ) {
+
+				var newPosition = new THREE.Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
+				if ( object.position.distanceTo( newPosition ) >= 0.01 ) {
+
+					editor.execute( new SetPositionCommand( object, newPosition ) );
+
+				}
+
+				var newRotation = new THREE.Euler( objectRotationX.getValue() * THREE.Math.DEG2RAD, objectRotationY.getValue() * THREE.Math.DEG2RAD, objectRotationZ.getValue() * THREE.Math.DEG2RAD );
+				if ( object.rotation.toVector3().distanceTo( newRotation.toVector3() ) >= 0.01 ) {
+
+					editor.execute( new SetRotationCommand( object, newRotation ) );
+
+				}
+
+				var newScale = new THREE.Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
+				if ( object.scale.distanceTo( newScale ) >= 0.01 ) {
+
+					editor.execute( new SetScaleCommand( object, newScale ) );
+
+				}
+
+				if ( object.fov !== undefined && Math.abs( object.fov - objectFov.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'fov', objectFov.getValue() ) );
+					object.updateProjectionMatrix();
+
+				}
+
+				if ( object.near !== undefined && Math.abs( object.near - objectNear.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'near', objectNear.getValue() ) );
+
+				}
+
+				if ( object.far !== undefined && Math.abs( object.far - objectFar.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'far', objectFar.getValue() ) );
+
+				}
+
+				if ( object.intensity !== undefined && Math.abs( object.intensity - objectIntensity.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'intensity', objectIntensity.getValue() ) );
+
+				}
+
+				if ( object.color !== undefined && object.color.getHex() !== objectColor.getHexValue() ) {
+
+					editor.execute( new SetColorCommand( object, 'color', objectColor.getHexValue() ) );
+
+				}
+
+				if ( object.groundColor !== undefined && object.groundColor.getHex() !== objectGroundColor.getHexValue() ) {
+
+					editor.execute( new SetColorCommand( object, 'groundColor', objectGroundColor.getHexValue() ) );
+
+				}
+
+				if ( object.distance !== undefined && Math.abs( object.distance - objectDistance.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'distance', objectDistance.getValue() ) );
+
+				}
+
+				if ( object.angle !== undefined && Math.abs( object.angle - objectAngle.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'angle', objectAngle.getValue() ) );
+
+				}
+
+				if ( object.penumbra !== undefined && Math.abs( object.penumbra - objectPenumbra.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'penumbra', objectPenumbra.getValue() ) );
+
+				}
+
+				if ( object.decay !== undefined && Math.abs( object.decay - objectDecay.getValue() ) >= 0.01 ) {
+
+					editor.execute( new SetValueCommand( object, 'decay', objectDecay.getValue() ) );
+
+				}
+
+				if ( object.visible !== objectVisible.getValue() ) {
+
+					editor.execute( new SetValueCommand( object, 'visible', objectVisible.getValue() ) );
+
+				}
+
+				if ( object.castShadow !== undefined && object.castShadow !== objectCastShadow.getValue() ) {
+
+					editor.execute( new SetValueCommand( object, 'castShadow', objectCastShadow.getValue() ) );
+
+				}
+
+				if ( object.receiveShadow !== undefined && object.receiveShadow !== objectReceiveShadow.getValue() ) {
+
+					editor.execute( new SetValueCommand( object, 'receiveShadow', objectReceiveShadow.getValue() ) );
+					object.material.needsUpdate = true;
+
+				}
+
+				if ( object.shadow !== undefined ) {
+
+					if ( object.shadow.radius !== objectShadowRadius.getValue() ) {
+
+						editor.execute( new SetValueCommand( object.shadow, 'radius', objectShadowRadius.getValue() ) );
+
+					}
+
+				}
+
+				try {
+
+					var userData = JSON.parse( objectUserData.getValue() );
+					if ( JSON.stringify( object.userData ) != JSON.stringify( userData ) ) {
+
+						editor.execute( new SetValueCommand( object, 'userData', userData ) );
+
+					}
+
+				} catch ( exception ) {
+
+					console.warn( exception );
+
+				}
+
+			}
+
+		}
+
+		function updateRows( object ) {
+
+			var properties = {
+				'fov': objectFovRow,
+				'near': objectNearRow,
+				'far': objectFarRow,
+				'intensity': objectIntensityRow,
+				'color': objectColorRow,
+				'groundColor': objectGroundColorRow,
+				'distance' : objectDistanceRow,
+				'angle' : objectAngleRow,
+				'penumbra' : objectPenumbraRow,
+				'decay' : objectDecayRow,
+				'castShadow' : objectShadowRow,
+				'receiveShadow' : objectReceiveShadow,
+				'shadow': objectShadowRadius
+			};
+
+			for ( var property in properties ) {
+
+				properties[ property ].setDisplay( object[ property ] !== undefined ? '' : 'none' );
+
+			}
+
+		}
+
+		function updateTransformRows( object ) {
+
+			if ( object instanceof THREE.Light ||
+			   ( object instanceof THREE.Object3D && object.userData.targetInverse ) ) {
+
+				objectRotationRow.setDisplay( 'none' );
+				objectScaleRow.setDisplay( 'none' );
+
+			} else {
+
+				objectRotationRow.setDisplay( '' );
+				objectScaleRow.setDisplay( '' );
+
+			}
+
+		}
+
+		// events
+
+		signals.objectSelected.add( function ( object ) {
+
+			if ( object !== null ) {
+
+				container.setDisplay( 'block' );
+
+				updateRows( object );
+				updateUI( object );
+
+			} else {
+
+				container.setDisplay( 'none' );
+
+			}
+
+		} );
+
+		signals.objectChanged.add( function ( object ) {
+
+			if ( object !== editor.selected ) return;
+
+			updateUI( object );
+
+		} );
+
+		signals.refreshSidebarObject3D.add( function ( object ) {
+
+			if ( object !== editor.selected ) return;
+
+			updateUI( object );
+
+		} );
+
+		function updateUI( object ) {
+
+			objectType.setValue( object.type );
+
+			objectUUID.setValue( object.uuid );
+			objectName.setValue( object.name );
+
+			objectPositionX.setValue( object.position.x );
+			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 );
+
+			objectScaleX.setValue( object.scale.x );
+			objectScaleY.setValue( object.scale.y );
+			objectScaleZ.setValue( object.scale.z );
+
+			if ( object.fov !== undefined ) {
+
+				objectFov.setValue( object.fov );
+
+			}
+
+			if ( object.near !== undefined ) {
+
+				objectNear.setValue( object.near );
+
+			}
+
+			if ( object.far !== undefined ) {
+
+				objectFar.setValue( object.far );
+
+			}
+
+			if ( object.intensity !== undefined ) {
+
+				objectIntensity.setValue( object.intensity );
+
+			}
+
+			if ( object.color !== undefined ) {
+
+				objectColor.setHexValue( object.color.getHexString() );
+
+			}
+
+			if ( object.groundColor !== undefined ) {
+
+				objectGroundColor.setHexValue( object.groundColor.getHexString() );
+
+			}
+
+			if ( object.distance !== undefined ) {
+
+				objectDistance.setValue( object.distance );
+
+			}
+
+			if ( object.angle !== undefined ) {
+
+				objectAngle.setValue( object.angle );
+
+			}
+
+			if ( object.penumbra !== undefined ) {
+
+				objectPenumbra.setValue( object.penumbra );
+
+			}
+
+			if ( object.decay !== undefined ) {
+
+				objectDecay.setValue( object.decay );
+
+			}
+
+			if ( object.castShadow !== undefined ) {
+
+				objectCastShadow.setValue( object.castShadow );
+
+			}
+
+			if ( object.receiveShadow !== undefined ) {
+
+				objectReceiveShadow.setValue( object.receiveShadow );
+
+			}
+
+			if ( object.shadow !== undefined ) {
+
+				objectShadowRadius.setValue( object.shadow.radius );
+
+			}
+
+			objectVisible.setValue( object.visible );
+
+			try {
+
+				objectUserData.setValue( JSON.stringify( object.userData, null, '  ' ) );
+
+			} catch ( error ) {
+
+				console.log( error );
+
+			}
+
+			objectUserData.setBorderColor( 'transparent' );
+			objectUserData.setBackgroundColor( '' );
+
+			updateTransformRows( object );
+
+		}
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Object', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Project = function ( editor ) {
+
+		var config = editor.config;
+		var signals = editor.signals;
+
+		var rendererTypes = {
+
+			'WebGLRenderer': THREE.WebGLRenderer,
+			'CanvasRenderer': THREE.CanvasRenderer,
+			'SVGRenderer': THREE.SVGRenderer,
+			'SoftwareRenderer': THREE.SoftwareRenderer,
+			'RaytracingRenderer': THREE.RaytracingRenderer
+
+		};
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+
+		// class
+
+		var options = {};
+
+		for ( var key in rendererTypes ) {
+
+			if ( key.indexOf( 'WebGL' ) >= 0 && System.support.webgl === false ) continue;
+
+			options[ key ] = key;
+
+		}
+
+		var rendererTypeRow = new UI.Row();
+		var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
+
+			var value = this.getValue();
+
+			config.setKey( 'project/renderer', value );
+
+			updateRenderer();
+
+		} );
+
+		rendererTypeRow.add( new UI.Text( 'Renderer' ).setWidth( '90px' ) );
+		rendererTypeRow.add( rendererType );
+
+		container.add( rendererTypeRow );
+
+		if ( config.getKey( 'project/renderer' ) !== undefined ) {
+
+			rendererType.setValue( config.getKey( 'project/renderer' ) );
+
+		}
+
+		// antialiasing
+
+		var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' );
+
+		var rendererAntialias = new UI.THREE.Boolean( config.getKey( 'project/renderer/antialias' ), 'antialias' ).onChange( function () {
+
+			config.setKey( 'project/renderer/antialias', this.getValue() );
+			updateRenderer();
+
+		} );
+		rendererPropertiesRow.add( rendererAntialias );
+
+		// shadow
+
+		var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), 'shadows' ).onChange( function () {
+
+			config.setKey( 'project/renderer/shadows', this.getValue() );
+			updateRenderer();
+
+		} );
+		rendererPropertiesRow.add( rendererShadows );
+
+		rendererPropertiesRow.add( new UI.Break() );
+
+		// gamma input
+
+		var rendererGammaInput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaInput' ), 'γ input' ).onChange( function () {
+
+			config.setKey( 'project/renderer/gammaInput', this.getValue() );
+			updateRenderer();
+
+		} );
+		rendererPropertiesRow.add( rendererGammaInput );
+
+		// gamma output
+
+		var rendererGammaOutput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaOutput' ), 'γ output' ).onChange( function () {
+
+			config.setKey( 'project/renderer/gammaOutput', this.getValue() );
+			updateRenderer();
+
+		} );
+		rendererPropertiesRow.add( rendererGammaOutput );
+
+		container.add( rendererPropertiesRow );
+
+		// VR
+
+		var vrRow = new UI.Row();
+		var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
+
+			config.setKey( 'project/vr', this.getValue() );
+			// updateRenderer();
+
+		} );
+
+		vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) );
+		vrRow.add( vr );
+
+		container.add( vrRow );
+
+		//
+
+		function updateRenderer() {
+
+			createRenderer( rendererType.getValue(), rendererAntialias.getValue(), rendererShadows.getValue(), rendererGammaInput.getValue(), rendererGammaOutput.getValue() );
+
+		}
+
+		function createRenderer( type, antialias, shadows, gammaIn, gammaOut ) {
+
+			if ( type === 'WebGLRenderer' && System.support.webgl === false ) {
+
+				type = 'CanvasRenderer';
+
+			}
+
+			rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
+
+			var renderer = new rendererTypes[ type ]( { antialias: antialias} );
+			renderer.gammaInput = gammaIn;
+			renderer.gammaOutput = gammaOut;
+			if ( shadows && renderer.shadowMap ) {
+
+				renderer.shadowMap.enabled = true;
+				// renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+			}
+
+			signals.rendererChanged.dispatch( renderer );
+
+		}
+
+		createRenderer( config.getKey( 'project/renderer' ), config.getKey( 'project/renderer/antialias' ), config.getKey( 'project/renderer/shadows' ), config.getKey( 'project/renderer/gammaInput' ), config.getKey( 'project/renderer/gammaOutput' ) );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Project', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Properties = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Span();
+
+		var objectTab = new UI.Text( 'OBJECT' ).onClick( onClick );
+		var geometryTab = new UI.Text( 'GEOMETRY' ).onClick( onClick );
+		var materialTab = new UI.Text( 'MATERIAL' ).onClick( onClick );
+
+		var tabs = new UI.Div();
+		tabs.setId( 'tabs' );
+		tabs.add( objectTab, geometryTab, materialTab );
+		container.add( tabs );
+
+		function onClick( event ) {
+
+			select( event.target.textContent );
+
+		}
+
+		//
+
+		var object = new UI.Span().add(
+			new Sidebar.Object( editor )
+		);
+		container.add( object );
+
+		var geometry = new UI.Span().add(
+			new Sidebar.Geometry( editor )
+		);
+		container.add( geometry );
+
+		var material = new UI.Span().add(
+			new Sidebar.Material( editor )
+		);
+		container.add( material );
+
+		//
+
+		function select( section ) {
+
+			objectTab.setClass( '' );
+			geometryTab.setClass( '' );
+			materialTab.setClass( '' );
+
+			object.setDisplay( 'none' );
+			geometry.setDisplay( 'none' );
+			material.setDisplay( 'none' );
+
+			switch ( section ) {
+				case 'OBJECT':
+					objectTab.setClass( 'selected' );
+					object.setDisplay( '' );
+					break;
+				case 'GEOMETRY':
+					geometryTab.setClass( 'selected' );
+					geometry.setDisplay( '' );
+					break;
+				case 'MATERIAL':
+					materialTab.setClass( 'selected' );
+					material.setDisplay( '' );
+					break;
+			}
+
+		}
+
+		select( 'OBJECT' );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Properties', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Scene = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+
+		// outliner
+
+		function buildOption( object, draggable ) {
+
+			var option = document.createElement( 'div' );
+			option.draggable = draggable;
+			option.innerHTML = buildHTML( object );
+			option.value = object.id;
+
+			return option;
+
+		}
+
+		function getMaterialName( material ) {
+
+			if ( Array.isArray( material ) ) {
+
+				var array = [];
+
+				for ( var i = 0; i < material.length; i ++ ) {
+
+					array.push( material[ i ].name );
+
+				}
+
+				return array.join( ',' );
+
+			}
+
+			return material.name;
+
+		}
+
+		function buildHTML( object ) {
+
+			var html = '<span class="type ' + object.type + '"></span> ' + object.name;
+
+			if ( object instanceof THREE.Mesh ) {
+
+				var geometry = object.geometry;
+				var material = object.material;
+
+				html += ' <span class="type ' + geometry.type + '"></span> ' + geometry.name;
+				html += ' <span class="type ' + material.type + '"></span> ' + getMaterialName( material );
+
+			}
+
+			html += getScript( object.uuid );
+
+			return html;
+
+		}
+
+		function getScript( uuid ) {
+
+			if ( editor.scripts[ uuid ] !== undefined ) {
+
+				return ' <span class="type Script"></span>';
+
+			}
+
+			return '';
+
+		}
+
+		var ignoreObjectSelectedSignal = false;
+
+		var outliner = new UI.Outliner( editor );
+		outliner.setId( 'outliner' );
+		outliner.onChange( function () {
+
+			ignoreObjectSelectedSignal = true;
+
+			editor.selectById( parseInt( outliner.getValue() ) );
+
+			ignoreObjectSelectedSignal = false;
+
+		} );
+		outliner.onDblClick( function () {
+
+			editor.focusById( parseInt( outliner.getValue() ) );
+
+		} );
+		container.add( outliner );
+		container.add( new UI.Break() );
+
+		// background
+
+		function onBackgroundChanged() {
+
+			signals.sceneBackgroundChanged.dispatch( backgroundColor.getHexValue() );
+
+		}
+
+		var backgroundRow = new UI.Row();
+
+		var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
+
+		backgroundRow.add( new UI.Text( 'Background' ).setWidth( '90px' ) );
+		backgroundRow.add( backgroundColor );
+
+		container.add( backgroundRow );
+
+		// fog
+
+		function onFogChanged() {
+
+			signals.sceneFogChanged.dispatch(
+				fogType.getValue(),
+				fogColor.getHexValue(),
+				fogNear.getValue(),
+				fogFar.getValue(),
+				fogDensity.getValue()
+			);
+
+		}
+
+		var fogTypeRow = new UI.Row();
+		var fogType = new UI.Select().setOptions( {
+
+			'None': 'None',
+			'Fog': 'Linear',
+			'FogExp2': 'Exponential'
+
+		} ).setWidth( '150px' );
+		fogType.onChange( function () {
+
+			onFogChanged();
+			refreshFogUI();
+
+		} );
+
+		fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ) );
+		fogTypeRow.add( fogType );
+
+		container.add( fogTypeRow );
+
+		// fog color
+
+		var fogPropertiesRow = new UI.Row();
+		fogPropertiesRow.setDisplay( 'none' );
+		fogPropertiesRow.setMarginLeft( '90px' );
+		container.add( fogPropertiesRow );
+
+		var fogColor = new UI.Color().setValue( '#aaaaaa' );
+		fogColor.onChange( onFogChanged );
+		fogPropertiesRow.add( fogColor );
+
+		// fog near
+
+		var fogNear = new UI.Number( 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 );
+		fogPropertiesRow.add( fogFar );
+
+		// fog density
+
+		var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setPrecision( 3 ).onChange( onFogChanged );
+		fogPropertiesRow.add( fogDensity );
+
+		//
+
+		function refreshUI() {
+
+			var camera = editor.camera;
+			var scene = editor.scene;
+
+			var options = [];
+
+			options.push( buildOption( camera, false ) );
+			options.push( buildOption( scene, false ) );
+
+			( function addObjects( objects, pad ) {
+
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+					var object = objects[ i ];
+
+					var option = buildOption( object, true );
+					option.style.paddingLeft = ( pad * 10 ) + 'px';
+					options.push( option );
+
+					addObjects( object.children, pad + 1 );
+
+				}
+
+			} )( scene.children, 1 );
+
+			outliner.setOptions( options );
+
+			if ( editor.selected !== null ) {
+
+				outliner.setValue( editor.selected.id );
+
+			}
+
+			if ( scene.background ) {
+
+				backgroundColor.setHexValue( scene.background.getHex() );
+
+			}
+
+			if ( scene.fog ) {
+
+				fogColor.setHexValue( scene.fog.color.getHex() );
+
+				if ( scene.fog instanceof THREE.Fog ) {
+
+					fogType.setValue( "Fog" );
+					fogNear.setValue( scene.fog.near );
+					fogFar.setValue( scene.fog.far );
+
+				} else if ( scene.fog instanceof THREE.FogExp2 ) {
+
+					fogType.setValue( "FogExp2" );
+					fogDensity.setValue( scene.fog.density );
+
+				}
+
+			} else {
+
+				fogType.setValue( "None" );
+
+			}
+
+			refreshFogUI();
+
+		}
+
+		function refreshFogUI() {
+
+			var type = fogType.getValue();
+
+			fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
+			fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
+			fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
+			fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
+
+		}
+
+		refreshUI();
+
+		// events
+
+		signals.editorCleared.add( refreshUI );
+
+		signals.sceneGraphChanged.add( refreshUI );
+
+		signals.objectChanged.add( function ( object ) {
+
+			var options = outliner.options;
+
+			for ( var i = 0; i < options.length; i ++ ) {
+
+				var option = options[ i ];
+
+				if ( option.value === object.id ) {
+
+					option.innerHTML = buildHTML( object );
+					return;
+
+				}
+
+			}
+
+		} );
+
+		signals.objectSelected.add( function ( object ) {
+
+			if ( ignoreObjectSelectedSignal === true ) return;
+
+			outliner.setValue( object !== null ? object.id : null );
+
+		} );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Scene', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Script = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setDisplay( 'none' );
+
+		container.add( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );
+		container.add( new UI.Break() );
+		container.add( new UI.Break() );
+
+		//
+
+		var scriptsContainer = new UI.Row();
+		container.add( scriptsContainer );
+
+		var newScript = new UI.Button( 'New' );
+		newScript.onClick( function () {
+
+			var script = { name: '', source: 'function update( event ) {}' };
+			editor.execute( new AddScriptCommand( editor.selected, script ) );
+
+		} );
+		container.add( newScript );
+
+		/*
+		var loadScript = new UI.Button( 'Load' );
+		loadScript.setMarginLeft( '4px' );
+		container.add( loadScript );
+		*/
+
+		//
+
+		function update() {
+
+			scriptsContainer.clear();
+			scriptsContainer.setDisplay( 'none' );
+
+			var object = editor.selected;
+
+			if ( object === null ) {
+
+				return;
+
+			}
+
+			var scripts = editor.scripts[ object.uuid ];
+
+			if ( scripts !== undefined ) {
+
+				scriptsContainer.setDisplay( 'block' );
+
+				for ( var i = 0; i < scripts.length; i ++ ) {
+
+					( function ( object, script ) {
+
+						var name = new UI.Input( script.name ).setWidth( '130px' ).setFontSize( '12px' );
+						name.onChange( function () {
+
+							editor.execute( new SetScriptValueCommand( editor.selected, script, 'name', this.getValue() ) );
+
+						} );
+						scriptsContainer.add( name );
+
+						var edit = new UI.Button( 'Edit' );
+						edit.setMarginLeft( '4px' );
+						edit.onClick( function () {
+
+							signals.editScript.dispatch( object, script );
+
+						} );
+						scriptsContainer.add( edit );
+
+						var remove = new UI.Button( 'Remove' );
+						remove.setMarginLeft( '4px' );
+						remove.onClick( function () {
+
+							if ( confirm( 'Are you sure?' ) ) {
+
+								editor.execute( new RemoveScriptCommand( editor.selected, script ) );
+
+							}
+
+						} );
+						scriptsContainer.add( remove );
+
+						scriptsContainer.add( new UI.Break() );
+
+					} )( object, scripts[ i ] );
+
+				}
+
+			}
+
+		}
+
+		// signals
+
+		signals.objectSelected.add( function ( object ) {
+
+			if ( object !== null && editor.camera !== object ) {
+
+				container.setDisplay( 'block' );
+
+				update();
+
+			} else {
+
+				container.setDisplay( 'none' );
+
+			}
+
+		} );
+
+		signals.scriptAdded.add( update );
+		signals.scriptRemoved.add( update );
+		signals.scriptChanged.add( update );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Script', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Sidebar.Settings = function ( editor ) {
+
+		var config = editor.config;
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setBorderTop( '0' );
+		container.setPaddingTop( '20px' );
+
+		// class
+
+		var options = {
+			'css/light.css': 'light',
+			'css/dark.css': 'dark'
+		};
+
+		var themeRow = new UI.Row();
+		var theme = new UI.Select().setWidth( '150px' );
+		theme.setOptions( options );
+
+		if ( config.getKey( 'theme' ) !== undefined ) {
+
+			theme.setValue( config.getKey( 'theme' ) );
+
+		}
+
+		theme.onChange( function () {
+
+			var value = this.getValue();
+
+			editor.setTheme( value );
+			editor.config.setKey( 'theme', value );
+
+		} );
+
+		themeRow.add( new UI.Text( 'Theme' ).setWidth( '90px' ) );
+		themeRow.add( theme );
+
+		container.add( themeRow );
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Sidebar.Settings', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Storage', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Toolbar', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Viewport', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author mrdoob / http://mrdoob.com/
+	 */
+
+	Viewport.Info = function ( editor ) {
+
+		var signals = editor.signals;
+
+		var container = new UI.Panel();
+		container.setId( 'info' );
+		container.setPosition( 'absolute' );
+		container.setLeft( '10px' );
+		container.setBottom( '10px' );
+		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' );
+
+		container.add( new UI.Text( 'objects' ), objectsText, new UI.Break() );
+		container.add( new UI.Text( 'vertices' ), verticesText, new UI.Break() );
+		container.add( new UI.Text( 'triangles' ), trianglesText, new UI.Break() );
+
+		signals.objectAdded.add( update );
+		signals.objectRemoved.add( update );
+		signals.geometryChanged.add( update );
+
+		//
+
+		function update() {
+
+			var scene = editor.scene;
+
+			var objects = 0, vertices = 0, triangles = 0;
+
+			for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
+
+				var object = scene.children[ i ];
+
+				object.traverseVisible( function ( object ) {
+
+					objects ++;
+
+					if ( object instanceof THREE.Mesh ) {
+
+						var geometry = object.geometry;
+
+						if ( geometry instanceof THREE.Geometry ) {
+
+							vertices += geometry.vertices.length;
+							triangles += geometry.faces.length;
+
+						} else if ( geometry instanceof THREE.BufferGeometry ) {
+
+							if ( geometry.index !== null ) {
+
+								vertices += geometry.index.count * 3;
+								triangles += geometry.index.count;
+
+							} else {
+
+								vertices += geometry.attributes.position.count;
+								triangles += geometry.attributes.position.count / 3;
+
+							}
+
+						}
+
+					}
+
+				} );
+
+			}
+
+			objectsText.setValue( objects.format() );
+			verticesText.setValue( vertices.format() );
+			trianglesText.setValue( triangles.format() );
+
+		}
+
+		return container;
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module.todo( 'Viewport.Info', () => {
+
+			QUnit.test( 'write me !', ( assert ) => {
+
+				assert.ok( false, "everything's gonna be alright" );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @constructor
+	 */
+
+	var AddObjectCommand$1 = function ( object ) {
+
+		Command.call( this );
+
+		this.type = 'AddObjectCommand';
+
+		this.object = object;
+		if ( object !== undefined ) {
+
+			this.name = 'Add Object: ' + object.name;
+
+		}
+
+	};
+
+	AddObjectCommand$1.prototype = {
+
+		execute: function () {
+
+			this.editor.addObject( this.object );
+			this.editor.select( this.object );
+
+		},
+
+		undo: function () {
+
+			this.editor.removeObject( this.object );
+			this.editor.deselect();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+			output.object = this.object.toJSON();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.object.object.uuid );
+
+			if ( this.object === undefined ) {
+
+				var loader = new THREE.ObjectLoader();
+				this.object = loader.parse( json.object );
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'AddObjectCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param script javascript object
+	 * @constructor
+	 */
+
+	var AddScriptCommand$1 = function ( object, script ) {
+
+		Command.call( this );
+
+		this.type = 'AddScriptCommand';
+		this.name = 'Add Script';
+
+		this.object = object;
+		this.script = script;
+
+	};
+
+	AddScriptCommand$1.prototype = {
+
+		execute: function () {
+
+			if ( this.editor.scripts[ this.object.uuid ] === undefined ) {
+
+				this.editor.scripts[ this.object.uuid ] = [];
+
+			}
+
+			this.editor.scripts[ this.object.uuid ].push( this.script );
+
+			this.editor.signals.scriptAdded.dispatch( this.script );
+
+		},
+
+		undo: function () {
+
+			if ( this.editor.scripts[ this.object.uuid ] === undefined ) return;
+
+			var index = this.editor.scripts[ this.object.uuid ].indexOf( this.script );
+
+			if ( index !== - 1 ) {
+
+				this.editor.scripts[ this.object.uuid ].splice( index, 1 );
+
+			}
+
+			this.editor.signals.scriptRemoved.dispatch( this.script );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.script = this.script;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.script = json.script;
+			this.object = this.editor.objectByUuid( json.objectUuid );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'AddScriptCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newParent THREE.Object3D
+	 * @param newBefore THREE.Object3D
+	 * @constructor
+	 */
+
+	var MoveObjectCommand = function ( object, newParent, newBefore ) {
+
+		Command.call( this );
+
+		this.type = 'MoveObjectCommand';
+		this.name = 'Move Object';
+
+		this.object = object;
+		this.oldParent = ( object !== undefined ) ? object.parent : undefined;
+		this.oldIndex = ( this.oldParent !== undefined ) ? this.oldParent.children.indexOf( this.object ) : undefined;
+		this.newParent = newParent;
+
+		if ( newBefore !== undefined ) {
+
+			this.newIndex = ( newParent !== undefined ) ? newParent.children.indexOf( newBefore ) : undefined;
+
+		} else {
+
+			this.newIndex = ( newParent !== undefined ) ? newParent.children.length : undefined;
+
+		}
+
+		if ( this.oldParent === this.newParent && this.newIndex > this.oldIndex ) {
+
+			this.newIndex --;
+
+		}
+
+		this.newBefore = newBefore;
+
+	};
+
+	MoveObjectCommand.prototype = {
+
+		execute: function () {
+
+			this.oldParent.remove( this.object );
+
+			var children = this.newParent.children;
+			children.splice( this.newIndex, 0, this.object );
+			this.object.parent = this.newParent;
+
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.newParent.remove( this.object );
+
+			var children = this.oldParent.children;
+			children.splice( this.oldIndex, 0, this.object );
+			this.object.parent = this.oldParent;
+
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.newParentUuid = this.newParent.uuid;
+			output.oldParentUuid = this.oldParent.uuid;
+			output.newIndex = this.newIndex;
+			output.oldIndex = this.oldIndex;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.oldParent = this.editor.objectByUuid( json.oldParentUuid );
+			if ( this.oldParent === undefined ) {
+
+				this.oldParent = this.editor.scene;
+
+			}
+			this.newParent = this.editor.objectByUuid( json.newParentUuid );
+			if ( this.newParent === undefined ) {
+
+				this.newParent = this.editor.scene;
+
+			}
+			this.newIndex = json.newIndex;
+			this.oldIndex = json.oldIndex;
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'MoveObjectCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param cmdArray array containing command objects
+	 * @constructor
+	 */
+
+	var MultiCmdsCommand$1 = function ( cmdArray ) {
+
+		Command.call( this );
+
+		this.type = 'MultiCmdsCommand';
+		this.name = 'Multiple Changes';
+
+		this.cmdArray = ( cmdArray !== undefined ) ? cmdArray : [];
+
+	};
+
+	MultiCmdsCommand$1.prototype = {
+
+		execute: function () {
+
+			this.editor.signals.sceneGraphChanged.active = false;
+
+			for ( var i = 0; i < this.cmdArray.length; i ++ ) {
+
+				this.cmdArray[ i ].execute();
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.editor.signals.sceneGraphChanged.active = false;
+
+			for ( var i = this.cmdArray.length - 1; i >= 0; i -- ) {
+
+				this.cmdArray[ i ].undo();
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			var cmds = [];
+			for ( var i = 0; i < this.cmdArray.length; i ++ ) {
+
+				cmds.push( this.cmdArray[ i ].toJSON() );
+
+			}
+			output.cmds = cmds;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			var cmds = json.cmds;
+			for ( var i = 0; i < cmds.length; i ++ ) {
+
+				var cmd = new window[ cmds[ i ].type ]();	// creates a new object of type "json.type"
+				cmd.fromJSON( cmds[ i ] );
+				this.cmdArray.push( cmd );
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'MultiCmdsCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @constructor
+	 */
+
+	var RemoveObjectCommand$1 = function ( object ) {
+
+		Command.call( this );
+
+		this.type = 'RemoveObjectCommand';
+		this.name = 'Remove Object';
+
+		this.object = object;
+		this.parent = ( object !== undefined ) ? object.parent : undefined;
+		if ( this.parent !== undefined ) {
+
+			this.index = this.parent.children.indexOf( this.object );
+
+		}
+
+	};
+
+	RemoveObjectCommand$1.prototype = {
+
+		execute: function () {
+
+			var scope = this.editor;
+			this.object.traverse( function ( child ) {
+
+				scope.removeHelper( child );
+
+			} );
+
+			this.parent.remove( this.object );
+			this.editor.select( this.parent );
+
+			this.editor.signals.objectRemoved.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			var scope = this.editor;
+
+			this.object.traverse( function ( child ) {
+
+				if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
+				if ( child.material !== undefined ) scope.addMaterial( child.material );
+
+				scope.addHelper( child );
+
+			} );
+
+			this.parent.children.splice( this.index, 0, this.object );
+			this.object.parent = this.parent;
+			this.editor.select( this.object );
+
+			this.editor.signals.objectAdded.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+			output.object = this.object.toJSON();
+			output.index = this.index;
+			output.parentUuid = this.parent.uuid;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.parent = this.editor.objectByUuid( json.parentUuid );
+			if ( this.parent === undefined ) {
+
+				this.parent = this.editor.scene;
+
+			}
+
+			this.index = json.index;
+
+			this.object = this.editor.objectByUuid( json.object.object.uuid );
+			if ( this.object === undefined ) {
+
+				var loader = new THREE.ObjectLoader();
+				this.object = loader.parse( json.object );
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'RemoveObjectCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param script javascript object
+	 * @constructor
+	 */
+
+	var RemoveScriptCommand$1 = function ( object, script ) {
+
+		Command.call( this );
+
+		this.type = 'RemoveScriptCommand';
+		this.name = 'Remove Script';
+
+		this.object = object;
+		this.script = script;
+		if ( this.object && this.script ) {
+
+			this.index = this.editor.scripts[ this.object.uuid ].indexOf( this.script );
+
+		}
+
+	};
+
+	RemoveScriptCommand$1.prototype = {
+
+		execute: function () {
+
+			if ( this.editor.scripts[ this.object.uuid ] === undefined ) return;
+
+			if ( this.index !== - 1 ) {
+
+				this.editor.scripts[ this.object.uuid ].splice( this.index, 1 );
+
+			}
+
+			this.editor.signals.scriptRemoved.dispatch( this.script );
+
+		},
+
+		undo: function () {
+
+			if ( this.editor.scripts[ this.object.uuid ] === undefined ) {
+
+				this.editor.scripts[ this.object.uuid ] = [];
+
+			}
+
+			this.editor.scripts[ this.object.uuid ].splice( this.index, 0, this.script );
+
+			this.editor.signals.scriptAdded.dispatch( this.script );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.script = this.script;
+			output.index = this.index;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.script = json.script;
+			this.index = json.index;
+			this.object = this.editor.objectByUuid( json.objectUuid );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'RemoveScriptCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param attributeName string
+	 * @param newValue integer representing a hex color value
+	 * @constructor
+	 */
+
+	var SetColorCommand$1 = function ( object, attributeName, newValue ) {
+
+		Command.call( this );
+
+		this.type = 'SetColorCommand';
+		this.name = 'Set ' + attributeName;
+		this.updatable = true;
+
+		this.object = object;
+		this.attributeName = attributeName;
+		this.oldValue = ( object !== undefined ) ? this.object[ this.attributeName ].getHex() : undefined;
+		this.newValue = newValue;
+
+	};
+
+	SetColorCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object[ this.attributeName ].setHex( this.newValue );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		undo: function () {
+
+			this.object[ this.attributeName ].setHex( this.oldValue );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newValue = cmd.newValue;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.attributeName = json.attributeName;
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetColorCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newGeometry THREE.Geometry
+	 * @constructor
+	 */
+
+	var SetGeometryCommand$1 = function ( object, newGeometry ) {
+
+		Command.call( this );
+
+		this.type = 'SetGeometryCommand';
+		this.name = 'Set Geometry';
+		this.updatable = true;
+
+		this.object = object;
+		this.oldGeometry = ( object !== undefined ) ? object.geometry : undefined;
+		this.newGeometry = newGeometry;
+
+	};
+
+	SetGeometryCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.geometry.dispose();
+			this.object.geometry = this.newGeometry;
+			this.object.geometry.computeBoundingSphere();
+
+			this.editor.signals.geometryChanged.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.object.geometry.dispose();
+			this.object.geometry = this.oldGeometry;
+			this.object.geometry.computeBoundingSphere();
+
+			this.editor.signals.geometryChanged.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newGeometry = cmd.newGeometry;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.oldGeometry = this.object.geometry.toJSON();
+			output.newGeometry = this.newGeometry.toJSON();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+
+			this.oldGeometry = parseGeometry( json.oldGeometry );
+			this.newGeometry = parseGeometry( json.newGeometry );
+
+			function parseGeometry ( data ) {
+
+				var loader = new THREE.ObjectLoader();
+				return loader.parseGeometries( [ data ] )[ data.uuid ];
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetGeometryCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param attributeName string
+	 * @param newValue number, string, boolean or object
+	 * @constructor
+	 */
+
+	var SetGeometryValueCommand$1 = function ( object, attributeName, newValue ) {
+
+		Command.call( this );
+
+		this.type = 'SetGeometryValueCommand';
+		this.name = 'Set Geometry.' + attributeName;
+
+		this.object = object;
+		this.attributeName = attributeName;
+		this.oldValue = ( object !== undefined ) ? object.geometry[ attributeName ] : undefined;
+		this.newValue = newValue;
+
+	};
+
+	SetGeometryValueCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.geometry[ this.attributeName ] = this.newValue;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.geometryChanged.dispatch();
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.object.geometry[ this.attributeName ] = this.oldValue;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.geometryChanged.dispatch();
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.attributeName = json.attributeName;
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetGeometryValueCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param attributeName string
+	 * @param newValue integer representing a hex color value
+	 * @constructor
+	 */
+
+	var SetMaterialColorCommand$1 = function ( object, attributeName, newValue, materialSlot ) {
+
+		Command.call( this );
+
+		this.type = 'SetMaterialColorCommand';
+		this.name = 'Set Material.' + attributeName;
+		this.updatable = true;
+
+		this.object = object;
+		this.material = this.editor.getObjectMaterial( object, materialSlot );
+
+		this.oldValue = ( this.material !== undefined ) ? this.material[ attributeName ].getHex() : undefined;
+		this.newValue = newValue;
+
+		this.attributeName = attributeName;
+
+	};
+
+	SetMaterialColorCommand$1.prototype = {
+
+		execute: function () {
+
+			this.material[ this.attributeName ].setHex( this.newValue );
+
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		undo: function () {
+
+			this.material[ this.attributeName ].setHex( this.oldValue );
+
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newValue = cmd.newValue;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.attributeName = json.attributeName;
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetMaterialColorCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newMaterial THREE.Material
+	 * @constructor
+	 */
+
+
+	var SetMaterialCommand$1 = function ( object, newMaterial, materialSlot ) {
+
+		Command.call( this );
+
+		this.type = 'SetMaterialCommand';
+		this.name = 'New Material';
+
+		this.object = object;
+		this.materialSlot = materialSlot;
+
+		this.oldMaterial = this.editor.getObjectMaterial( object, materialSlot );
+		this.newMaterial = newMaterial;
+
+	};
+
+	SetMaterialCommand$1.prototype = {
+
+		execute: function () {
+
+			this.editor.setObjectMaterial( this.object, this.materialSlot, this.newMaterial );
+			this.editor.signals.materialChanged.dispatch( this.newMaterial );
+
+		},
+
+		undo: function () {
+
+			this.editor.setObjectMaterial( this.object, this.materialSlot, this.oldMaterial );
+			this.editor.signals.materialChanged.dispatch( this.oldMaterial );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.oldMaterial = this.oldMaterial.toJSON();
+			output.newMaterial = this.newMaterial.toJSON();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.oldMaterial = parseMaterial( json.oldMaterial );
+			this.newMaterial = parseMaterial( json.newMaterial );
+
+			function parseMaterial ( json ) {
+
+				var loader = new THREE.ObjectLoader();
+				var images = loader.parseImages( json.images );
+				var textures  = loader.parseTextures( json.textures, images );
+				var materials = loader.parseMaterials( [ json ], textures );
+				return materials[ json.uuid ];
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetMaterialCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param mapName string
+	 * @param newMap THREE.Texture
+	 * @constructor
+	 */
+
+	var SetMaterialMapCommand$1 = function ( object, mapName, newMap, materialSlot ) {
+
+		Command.call( this );
+
+		this.type = 'SetMaterialMapCommand';
+		this.name = 'Set Material.' + mapName;
+
+		this.object = object;
+		this.material = this.editor.getObjectMaterial( object, materialSlot );
+
+		this.oldMap = ( object !== undefined ) ? this.material[ mapName ] : undefined;
+		this.newMap = newMap;
+
+		this.mapName = mapName;
+
+	};
+
+	SetMaterialMapCommand$1.prototype = {
+
+		execute: function () {
+
+			this.material[ this.mapName ] = this.newMap;
+			this.material.needsUpdate = true;
+
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		undo: function () {
+
+			this.material[ this.mapName ] = this.oldMap;
+			this.material.needsUpdate = true;
+
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.mapName = this.mapName;
+			output.newMap = serializeMap( this.newMap );
+			output.oldMap = serializeMap( this.oldMap );
+
+			return output;
+
+			// serializes a map (THREE.Texture)
+
+			function serializeMap ( map ) {
+
+				if ( map === null || map === undefined ) return null;
+
+				var meta = {
+					geometries: {},
+					materials: {},
+					textures: {},
+					images: {}
+				};
+
+				var json = map.toJSON( meta );
+				var images = extractFromCache( meta.images );
+				if ( images.length > 0 ) json.images = images;
+				json.sourceFile = map.sourceFile;
+
+				return json;
+
+			}
+
+			// Note: The function 'extractFromCache' is copied from Object3D.toJSON()
+
+			// extract data from the cache hash
+			// remove metadata on each item
+			// and return as array
+			function extractFromCache ( cache ) {
+
+				var values = [];
+				for ( var key in cache ) {
+
+					var data = cache[ key ];
+					delete data.metadata;
+					values.push( data );
+
+				}
+				return values;
+
+			}
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.mapName = json.mapName;
+			this.oldMap = parseTexture( json.oldMap );
+			this.newMap = parseTexture( json.newMap );
+
+			function parseTexture ( json ) {
+
+				var map = null;
+				if ( json !== null ) {
+
+					var loader = new THREE.ObjectLoader();
+					var images = loader.parseImages( json.images );
+					var textures  = loader.parseTextures( [ json ], images );
+					map = textures[ json.uuid ];
+					map.sourceFile = json.sourceFile;
+
+				}
+				return map;
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetMaterialMapCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param attributeName string
+	 * @param newValue number, string, boolean or object
+	 * @constructor
+	 */
+
+	var SetMaterialValueCommand$1 = function ( object, attributeName, newValue, materialSlot ) {
+
+		Command.call( this );
+
+		this.type = 'SetMaterialValueCommand';
+		this.name = 'Set Material.' + attributeName;
+		this.updatable = true;
+
+		this.object = object;
+		this.material = this.editor.getObjectMaterial( object, materialSlot );
+
+		this.oldValue = ( this.material !== undefined ) ? this.material[ attributeName ] : undefined;
+		this.newValue = newValue;
+
+		this.attributeName = attributeName;
+
+	};
+
+	SetMaterialValueCommand$1.prototype = {
+
+		execute: function () {
+
+			this.material[ this.attributeName ] = this.newValue;
+			this.material.needsUpdate = true;
+
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		undo: function () {
+
+			this.material[ this.attributeName ] = this.oldValue;
+			this.material.needsUpdate = true;
+
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.materialChanged.dispatch( this.material );
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newValue = cmd.newValue;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.attributeName = json.attributeName;
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+			this.object = this.editor.objectByUuid( json.objectUuid );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetMaterialValueCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newPosition THREE.Vector3
+	 * @param optionalOldPosition THREE.Vector3
+	 * @constructor
+	 */
+
+	var SetPositionCommand$1 = function ( object, newPosition, optionalOldPosition ) {
+
+		Command.call( this );
+
+		this.type = 'SetPositionCommand';
+		this.name = 'Set Position';
+		this.updatable = true;
+
+		this.object = object;
+
+		if ( object !== undefined && newPosition !== undefined ) {
+
+			this.oldPosition = object.position.clone();
+			this.newPosition = newPosition.clone();
+
+		}
+
+		if ( optionalOldPosition !== undefined ) {
+
+			this.oldPosition = optionalOldPosition.clone();
+
+		}
+
+	};
+	SetPositionCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.position.copy( this.newPosition );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		undo: function () {
+
+			this.object.position.copy( this.oldPosition );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		update: function ( command ) {
+
+			this.newPosition.copy( command.newPosition );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.oldPosition = this.oldPosition.toArray();
+			output.newPosition = this.newPosition.toArray();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			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 );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetPositionCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newRotation THREE.Euler
+	 * @param optionalOldRotation THREE.Euler
+	 * @constructor
+	 */
+
+	var SetRotationCommand$1 = function ( object, newRotation, optionalOldRotation ) {
+
+		Command.call( this );
+
+		this.type = 'SetRotationCommand';
+		this.name = 'Set Rotation';
+		this.updatable = true;
+
+		this.object = object;
+
+		if ( object !== undefined && newRotation !== undefined ) {
+
+			this.oldRotation = object.rotation.clone();
+			this.newRotation = newRotation.clone();
+
+		}
+
+		if ( optionalOldRotation !== undefined ) {
+
+			this.oldRotation = optionalOldRotation.clone();
+
+		}
+
+	};
+
+	SetRotationCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.rotation.copy( this.newRotation );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		undo: function () {
+
+			this.object.rotation.copy( this.oldRotation );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		update: function ( command ) {
+
+			this.newRotation.copy( command.newRotation );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.oldRotation = this.oldRotation.toArray();
+			output.newRotation = this.newRotation.toArray();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			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 );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetRotationCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newScale THREE.Vector3
+	 * @param optionalOldScale THREE.Vector3
+	 * @constructor
+	 */
+
+	var SetScaleCommand$1 = function ( object, newScale, optionalOldScale ) {
+
+		Command.call( this );
+
+		this.type = 'SetScaleCommand';
+		this.name = 'Set Scale';
+		this.updatable = true;
+
+		this.object = object;
+
+		if ( object !== undefined && newScale !== undefined ) {
+
+			this.oldScale = object.scale.clone();
+			this.newScale = newScale.clone();
+
+		}
+
+		if ( optionalOldScale !== undefined ) {
+
+			this.oldScale = optionalOldScale.clone();
+
+		}
+
+	};
+
+	SetScaleCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.scale.copy( this.newScale );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		undo: function () {
+
+			this.object.scale.copy( this.oldScale );
+			this.object.updateMatrixWorld( true );
+			this.editor.signals.objectChanged.dispatch( this.object );
+
+		},
+
+		update: function ( command ) {
+
+			this.newScale.copy( command.newScale );
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.oldScale = this.oldScale.toArray();
+			output.newScale = this.newScale.toArray();
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			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 );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetScaleCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param scene containing children to import
+	 * @constructor
+	 */
+
+	var SetSceneCommand$1 = function ( scene ) {
+
+		Command.call( this );
+
+		this.type = 'SetSceneCommand';
+		this.name = 'Set Scene';
+
+		this.cmdArray = [];
+
+		if ( scene !== undefined ) {
+
+			this.cmdArray.push( new SetUuidCommand( this.editor.scene, scene.uuid ) );
+			this.cmdArray.push( new SetValueCommand( this.editor.scene, 'name', scene.name ) );
+			this.cmdArray.push( new SetValueCommand( this.editor.scene, 'userData', JSON.parse( JSON.stringify( scene.userData ) ) ) );
+
+			while ( scene.children.length > 0 ) {
+
+				var child = scene.children.pop();
+				this.cmdArray.push( new AddObjectCommand( child ) );
+
+			}
+
+		}
+
+	};
+
+	SetSceneCommand$1.prototype = {
+
+		execute: function () {
+
+			this.editor.signals.sceneGraphChanged.active = false;
+
+			for ( var i = 0; i < this.cmdArray.length; i ++ ) {
+
+				this.cmdArray[ i ].execute();
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.editor.signals.sceneGraphChanged.active = false;
+
+			for ( var i = this.cmdArray.length - 1; i >= 0; i -- ) {
+
+				this.cmdArray[ i ].undo();
+
+			}
+
+			this.editor.signals.sceneGraphChanged.active = true;
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			var cmds = [];
+			for ( var i = 0; i < this.cmdArray.length; i ++ ) {
+
+				cmds.push( this.cmdArray[ i ].toJSON() );
+
+			}
+			output.cmds = cmds;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			var cmds = json.cmds;
+			for ( var i = 0; i < cmds.length; i ++ ) {
+
+				var cmd = new window[ cmds[ i ].type ]();	// creates a new object of type "json.type"
+				cmd.fromJSON( cmds[ i ] );
+				this.cmdArray.push( cmd );
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetSceneCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param script javascript object
+	 * @param attributeName string
+	 * @param newValue string, object
+	 * @constructor
+	 */
+
+	var SetScriptValueCommand$1 = function ( object, script, attributeName, newValue ) {
+
+		Command.call( this );
+
+		this.type = 'SetScriptValueCommand';
+		this.name = 'Set Script.' + attributeName;
+		this.updatable = true;
+
+		this.object = object;
+		this.script = script;
+
+		this.attributeName = attributeName;
+		this.oldValue = ( script !== undefined ) ? script[ this.attributeName ] : undefined;
+		this.newValue = newValue;
+
+	};
+
+	SetScriptValueCommand$1.prototype = {
+
+		execute: function () {
+
+			this.script[ this.attributeName ] = this.newValue;
+
+			this.editor.signals.scriptChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.script[ this.attributeName ] = this.oldValue;
+
+			this.editor.signals.scriptChanged.dispatch();
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newValue = cmd.newValue;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.index = this.editor.scripts[ this.object.uuid ].indexOf( this.script );
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+			this.attributeName = json.attributeName;
+			this.object = this.editor.objectByUuid( json.objectUuid );
+			this.script = this.editor.scripts[ json.objectUuid ][ json.index ];
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetScriptValueCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param newUuid string
+	 * @constructor
+	 */
+
+	var SetUuidCommand$1 = function ( object, newUuid ) {
+
+		Command.call( this );
+
+		this.type = 'SetUuidCommand';
+		this.name = 'Update UUID';
+
+		this.object = object;
+
+		this.oldUuid = ( object !== undefined ) ? object.uuid : undefined;
+		this.newUuid = newUuid;
+
+	};
+
+	SetUuidCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object.uuid = this.newUuid;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.object.uuid = this.oldUuid;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.oldUuid = this.oldUuid;
+			output.newUuid = this.newUuid;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.oldUuid = json.oldUuid;
+			this.newUuid = json.newUuid;
+			this.object = this.editor.objectByUuid( json.oldUuid );
+
+			if ( this.object === undefined ) {
+
+				this.object = this.editor.objectByUuid( json.newUuid );
+
+			}
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetUuidCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author dforrer / https://github.com/dforrer
+	 * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
+	 */
+
+	/**
+	 * @param object THREE.Object3D
+	 * @param attributeName string
+	 * @param newValue number, string, boolean or object
+	 * @constructor
+	 */
+
+	var SetValueCommand$1 = function ( object, attributeName, newValue ) {
+
+		Command.call( this );
+
+		this.type = 'SetValueCommand';
+		this.name = 'Set ' + attributeName;
+		this.updatable = true;
+
+		this.object = object;
+		this.attributeName = attributeName;
+		this.oldValue = ( object !== undefined ) ? object[ attributeName ] : undefined;
+		this.newValue = newValue;
+
+	};
+
+	SetValueCommand$1.prototype = {
+
+		execute: function () {
+
+			this.object[ this.attributeName ] = this.newValue;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			// this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		undo: function () {
+
+			this.object[ this.attributeName ] = this.oldValue;
+			this.editor.signals.objectChanged.dispatch( this.object );
+			// this.editor.signals.sceneGraphChanged.dispatch();
+
+		},
+
+		update: function ( cmd ) {
+
+			this.newValue = cmd.newValue;
+
+		},
+
+		toJSON: function () {
+
+			var output = Command.prototype.toJSON.call( this );
+
+			output.objectUuid = this.object.uuid;
+			output.attributeName = this.attributeName;
+			output.oldValue = this.oldValue;
+			output.newValue = this.newValue;
+
+			return output;
+
+		},
+
+		fromJSON: function ( json ) {
+
+			Command.prototype.fromJSON.call( this, json );
+
+			this.attributeName = json.attributeName;
+			this.oldValue = json.oldValue;
+			this.newValue = json.newValue;
+			this.object = this.editor.objectByUuid( json.objectUuid );
+
+		}
+
+	};
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+	/* global QUnit */
+
+	QUnit.module( 'Editor', () => {
+
+		QUnit.module( 'Commands', () => {
+
+			QUnit.module.todo( 'SetValueCommand', () => {
+
+				QUnit.test( 'write me !', ( assert ) => {
+
+					assert.ok( false, "everything's gonna be alright" );
+
+				} );
+
+			} );
+
+		} );
+
+	} );
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+
+	// TODO (Itee) Editor is not es6 module so care to include order !!!
+	// TODO: all views could not be testable, waiting modular code before implement units tests on them
+
+	//editor
+	//editor/commands
+
+
+	//editor/others
+
+	} );
+
+})));

+ 15 - 0
test/unit/three.example.unit.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(factory());
+}(this, (function () { 'use strict';
+
+	QUnit.module( "Example", () => {
+
+	/**
+	 * @author TristanVALCKE / https://github.com/Itee
+	 */
+
+	} );
+
+})));

Файловите разлики са ограничени, защото са твърде много
+ 35709 - 0
test/unit/three.source.unit.js


Някои файлове не бяха показани, защото твърде много файлове са промени