added custom UI classes for attributes

Replaced multiple attribute pannels with a single uber attribute panel

added lock to scale param

editor/index.html

@@ -65,7 +65,6 @@
 			}
 
 			.sidebar {
-				width: 300px;
 				background-color: #eee;
 				overflow: auto;
 			}
@@ -129,18 +128,8 @@
 		<script src="js/Sidebar.Outliner.Materials.js"></script>
 		<script src="js/Sidebar.Outliner.Textures.js"></script>
 
-		<script src="js/Sidebar.Selected.js"></script>
-		<script src="js/Sidebar.Object3D.js"></script>
-		<script src="js/Sidebar.Geometry.js"></script>
+		<script src="js/Sidebar.Attributes.js"></script>
 		<script src="js/Sidebar.Animation.js"></script>
-		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.CubeGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
-		<script src="js/Sidebar.Material.js"></script>
 
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>

editor/js/Editor.js

@@ -53,36 +53,12 @@ Editor.prototype = {
 
     parameters = parameters ? parameters : {};
 
-    var name = parameters.name ? parameters.name : null;
-    var width = parameters.width ? parameters.width : null;
-    var height = parameters.height ? parameters.height : null;
-    var depth = parameters.depth ? parameters.depth : null;
-    var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
-    var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
-    var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
-    var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
-    var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
-    var radius = parameters.radius ? parameters.radius : null;
-    var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
-    var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
-    var phiStart = parameters.phiStart ? parameters.phiStart : null;
-    var phiLength = parameters.phiLength ? parameters.phiLength : null;
-    var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
-    var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
-    var tube = parameters.tube ? parameters.tube : null;
-    var arc = parameters.arc ? parameters.arc : null;
-    var detail = parameters.detail ? parameters.detail : null;
-    var p = parameters.p ? parameters.p : null;
-    var q = parameters.q ? parameters.q : null;
-    var heightScale = parameters.heightScale ? parameters.heightScale : null;
-    var openEnded = parameters.openEnded ? parameters.openEnded : false;
     var color = parameters.color ? parameters.color : null;
+    var groundColor = parameters.groundColor ? parameters.groundColor : null;
     var intensity = parameters.intensity ? parameters.intensity : null;
     var distance = parameters.distance ? parameters.distance : null;
     var angle = parameters.angle ? parameters.angle : null;
     var exponent = parameters.exponent ? parameters.exponent : null;
-    var skyColor = parameters.skyColor ? parameters.skyColor : null;
-    var groundColor = parameters.groundColor ? parameters.groundColor : null;
 
     if ( !type ) {
 
@@ -91,102 +67,54 @@ Editor.prototype = {
 
     } else if ( type == 'plane' ) {
 
-      width = width ? width : 200;
-      height = height ? height : 200;
-
-      widthSegments = widthSegments ? widthSegments : 1;
-      heightSegments = heightSegments ? heightSegments : 1;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Plane ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
       object.rotation.x = - Math.PI/2;
 
     } else if ( type == 'cube' ) {
 
-      width = width ? width : 100;
-      height = height ? height : 100;
-      depth = depth ? depth : 100;
-
-      widthSegments = widthSegments ? widthSegments : 1;
-      heightSegments = heightSegments ? heightSegments : 1;
-      depthSegments = depthSegments ? depthSegments : 1;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Cube ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'cylinder' ) {
 
-      radiusTop = radiusTop ? radiusTop : 20;
-      radiusBottom = radiusBottom ? radiusBottom : 20;
-      height = height ? height : 100;
-      radialSegments = radialSegments ? radialSegments : 8;
-      heightSegments = heightSegments ? heightSegments : 1;
-      openEnded = openEnded ? openEnded : false;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Cylinder ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'sphere' ) {
 
-      radius = radius ? radius : 75;
-      widthSegments = widthSegments ? widthSegments : 32;
-      heightSegments = heightSegments ? heightSegments : 16;
-      widthSegments = widthSegments ? widthSegments : 32;
-      heightSegments = heightSegments ? heightSegments : 16;
-      phiStart = phiStart ? phiStart : null;
-      phiLength = phiLength ? phiLength : null;
-      thetaStart = thetaStart ? thetaStart : null;
-      thetaLength = thetaLength ? thetaLength : null;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Sphere ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'icosahedron' ) {
 
-      radius = radius ? radius : 75;
-      detail = detail ? detail : 2;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.IcosahedronGeometry ( radius, detail );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Icosahedron ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'torus' ) {
 
-      radius = radius ? radius : 100;
-      tube = tube ? tube : 40;
-      radialSegments = radialSegments ? radialSegments : 8;
-      tubularSegments = tubularSegments ? tubularSegments : 6;
-      arc = arc ? arc : Math.PI * 2;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'Torus ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'torusknot' ) {
 
-      radius = radius ? radius : 100;
-      tube = tube ? tube : 40;
-      radialSegments = radialSegments ? radialSegments : 64;
-      tubularSegments = tubularSegments ? tubularSegments : 8;
-      p = p ? p : 2;
-      q = q ? q : 3;
-      heightScale = heightScale ? heightScale : 1;
+      geometry = this.createGeometry( type, parameters );
 
-      geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
       object = new THREE.Mesh( geometry, this.defaultMaterial );
-      object.name = name ? name : 'TorusKnot ' + object.id;
-      geometry.name = object.name + ' geometry';
+      object.name = name ? name : type + object.id;
 
     } else if ( type == 'pointlight' ) {
 
@@ -224,11 +152,11 @@ Editor.prototype = {
 
     } else if ( type == 'hemispherelight' ) {
 
-      skyColor = skyColor ? skyColor : 0x00aaff;
+      color = color ? color : 0x00aaff;
       groundColor = groundColor ? groundColor : 0xffaa00;
       intensity = intensity ? intensity : 1;
 
-      var object = new THREE.HemisphereLight( skyColor, groundColor, intensity );
+      var object = new THREE.HemisphereLight( color, groundColor, intensity );
       object.name = name ? name : 'HemisphereLight ' + object.id;
 
       object.position.set( 1, 1, 1 ).multiplyScalar( 200 );
@@ -248,6 +176,124 @@ Editor.prototype = {
 
   },
 
+  createGeometry: function( type, parameters ) {
+
+    type = type ? type : null;
+    parameters = parameters ? parameters : {};
+
+    var name = parameters.name ? parameters.name : type + 'Geometry';
+    var width = parameters.width ? parameters.width : null;
+    var height = parameters.height ? parameters.height : null;
+    var depth = parameters.depth ? parameters.depth : null;
+    var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
+    var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
+    var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
+    var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
+    var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
+    var radius = parameters.radius ? parameters.radius : null;
+    var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
+    var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
+    var phiStart = parameters.phiStart ? parameters.phiStart : null;
+    var phiLength = parameters.phiLength ? parameters.phiLength : null;
+    var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
+    var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
+    var tube = parameters.tube ? parameters.tube : null;
+    var arc = parameters.arc ? parameters.arc : null;
+    var detail = parameters.detail ? parameters.detail : null;
+    var p = parameters.p ? parameters.p : null;
+    var q = parameters.q ? parameters.q : null;
+    var heightScale = parameters.heightScale ? parameters.heightScale : null;
+    var openEnded = parameters.openEnded ? parameters.openEnded : false;
+
+    var geometry;
+
+    if ( !type ) {
+
+      geometry = new THREE.Geometry();
+
+    } else if ( type == 'plane' ) {
+
+      width = width ? width : 200;
+      height = height ? height : 200;
+      widthSegments = widthSegments ? widthSegments : 1;
+      heightSegments = heightSegments ? heightSegments : 1;
+
+      geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
+
+    } else if ( type == 'cube' ) {
+
+      width = width ? width : 100;
+      height = height ? height : 100;
+      depth = depth ? depth : 100;
+      widthSegments = widthSegments ? widthSegments : 1;
+      heightSegments = heightSegments ? heightSegments : 1;
+      depthSegments = depthSegments ? depthSegments : 1;
+
+      geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
+
+    } else if ( type == 'cylinder' ) {
+
+      radiusTop = radiusTop ? radiusTop : 20;
+      radiusBottom = radiusBottom ? radiusBottom : 20;
+      height = height ? height : 100;
+      radialSegments = radialSegments ? radialSegments : 8;
+      heightSegments = heightSegments ? heightSegments : 1;
+      openEnded = openEnded ? openEnded : false;
+
+      geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
+
+    } else if ( type == 'sphere' ) {
+
+      radius = radius ? radius : 75;
+      widthSegments = widthSegments ? widthSegments : 32;
+      heightSegments = heightSegments ? heightSegments : 16;
+      widthSegments = widthSegments ? widthSegments : 32;
+      heightSegments = heightSegments ? heightSegments : 16;
+      phiStart = phiStart ? phiStart : 0;
+      phiLength = phiLength ? phiLength : Math.PI * 2;
+      thetaStart = thetaStart ? thetaStart : 0;
+      thetaLength = thetaLength ? thetaLength : Math.PI;
+
+      geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
+
+    } else if ( type == 'icosahedron' ) {
+
+      radius = radius ? radius : 75;
+      detail = detail ? detail : 2;
+
+      geometry = new THREE.IcosahedronGeometry ( radius, detail );
+
+    } else if ( type == 'torus' ) {
+
+      radius = radius ? radius : 100;
+      tube = tube ? tube : 40;
+      radialSegments = radialSegments ? radialSegments : 8;
+      tubularSegments = tubularSegments ? tubularSegments : 6;
+      arc = arc ? arc : Math.PI * 2;
+
+      geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
+
+    } else if ( type == 'torusknot' ) {
+
+      radius = radius ? radius : 100;
+      tube = tube ? tube : 40;
+      radialSegments = radialSegments ? radialSegments : 64;
+      tubularSegments = tubularSegments ? tubularSegments : 8;
+      p = p ? p : 2;
+      q = q ? q : 3;
+      heightScale = heightScale ? heightScale : 1;
+
+      geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
+
+    }
+
+    geometry.name = name;
+    geometry.computeBoundingSphere();
+
+    return geometry;
+
+  },
+
   createMaterial: function( type, parameters ) {
 
     var material;
@@ -258,8 +304,6 @@ Editor.prototype = {
 
     var name = parameters.name ? parameters.name : null;
 
-    // TODO: implement types
-
     if ( type == 'phong' ) {
 
       material = new THREE.MeshPhongMaterial( parameters );
@@ -675,8 +719,6 @@ Editor.prototype = {
     var deletedObjects = {};
 
     for ( var i in list ) {
-
-      // TODO: handle helpers
       
       if ( this.objects[ list[ i ].uuid ] && list[ i ] != this.scene ) {
 
@@ -894,6 +936,62 @@ Editor.prototype = {
 
   },
 
+  // Utils
+
+  updateObject: function( object, parameters ) {
+
+    parameters = parameters ? parameters : {};
+
+    if ( parameters.parent && object.parent && object.parent != parameters.parent)
+      editor.parent( object, parameters.parent );
+
+    if ( parameters.geometry && object.geometry && object.geometry != parameters.geometry) {
+      object.geometry = parameters.geometry;
+      this.updateGeometry( object.geometry );
+    }
+
+    if ( parameters.material && object.material && object.material != parameters.material)
+      object.material = parameters.material;
+
+    if ( parameters.name !== undefined ) object.name = parameters.name;
+
+    if ( parameters.position !== undefined ) object.position = parameters.position;
+    if ( parameters.rotation !== undefined ) object.rotation = parameters.rotation;
+    if ( parameters.scale !== undefined ) object.scale = parameters.scale;
+
+    if ( object.fov !== undefined && parameters.fov !== undefined ) object.fov = parameters.fov;
+    if ( object.near !== undefined && parameters.near !== undefined ) object.near = parameters.near;
+    if ( object.far !== undefined && parameters.far !== undefined ) object.far = parameters.far;
+    if ( object.intensity !== undefined && parameters.intensity !== undefined ) object.intensity = parameters.intensity;
+
+    if ( object.color && parameters.color !== undefined ) object.color.setHex( parameters.color );
+    if ( object.groundColor && parameters.groundColor !== undefined ) object.groundColor.setHex( parameters.groundColor );
+
+    if ( object.distance !== undefined && parameters.distance !== undefined ) object.distance = parameters.distance;
+    if ( object.angle !== undefined && parameters.angle !== undefined ) object.angle = parameters.angle;
+    if ( object.exponent !== undefined && parameters.exponent !== undefined ) object.exponent = parameters.exponent;
+    if ( object.visible !== undefined && parameters.visible !== undefined ) object.visible = parameters.visible;
+    
+    if ( parameters.userData !== undefined ) {
+
+      try {
+
+        object.userData = JSON.parse( parameters.userData );
+
+      } catch ( error ) {
+
+       console.log( error );
+
+      }
+
+    };
+
+    if ( object.updateProjectionMatrix ) object.updateProjectionMatrix();
+
+    signals.objectChanged.dispatch( object );
+
+  },
+
   updateMaterials: function( list ) {
 
     list = list ? list : this.list( 'material' );
@@ -918,62 +1016,37 @@ Editor.prototype = {
 
   },
 
-  remakeGeometry: function( geometry, parameters ) {
-
-    // TODO: document
+  updateGeometry: function( geometry, parameters ) {
 
     parameters = parameters ? parameters : {};
 
     var uuid = geometry.uuid;
-    var name = parameters.name ? parameters.name : geometry.name;
+    var name = geometry.name;
 
-    var width = parameters.width ? parameters.width : null;
-    var height = parameters.height ? parameters.height : null;
-    var depth = parameters.depth ? parameters.depth : null;
-    var widthSegments = parameters.widthSegments ? parameters.widthSegments : null;
-    var heightSegments = parameters.heightSegments ? parameters.heightSegments : null;
-    var depthSegments = parameters.depthSegments ? parameters.depthSegments : null;
-    var radialSegments = parameters.radialSegments ? parameters.radialSegments : null;
-    var tubularSegments = parameters.tubularSegments ? parameters.tubularSegments : null;
-    var radius = parameters.radius ? parameters.radius : null;
-    var radiusTop = parameters.radiusTop ? parameters.radiusTop : null;
-    var radiusBottom = parameters.radiusBottom ? parameters.radiusBottom : null;
-    var phiStart = parameters.phiStart ? parameters.phiStart : null;
-    var phiLength = parameters.phiLength ? parameters.phiLength : null;
-    var thetaStart = parameters.thetaStart ? parameters.thetaStart : null;
-    var thetaLength = parameters.thetaLength ? parameters.thetaLength : null;
-    var tube = parameters.tube ? parameters.tube : null;
-    var arc = parameters.arc ? parameters.arc : null;
-    var detail = parameters.detail ? parameters.detail : null;
-    var p = parameters.p ? parameters.p : null;
-    var q = parameters.q ? parameters.q : null;
-    var heightScale = parameters.heightScale ? parameters.heightScale : null;
-    var openEnded = parameters.openEnded ? parameters.openEnded : false;
+    if ( geometry instanceof THREE.PlaneGeometry )
+      geometry = this.createGeometry( 'plane', parameters );
 
     if ( geometry instanceof THREE.CubeGeometry )
-      editor.geometries[uuid] = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
+      geometry = this.createGeometry( 'cube', parameters );
 
     if ( geometry instanceof THREE.CylinderGeometry )
-      editor.geometries[uuid] = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded );
-
-    if ( geometry instanceof THREE.IcosahedronGeometry )
-      editor.geometries[uuid] = new THREE.IcosahedronGeometry( radius, detail );
-
-    if ( geometry instanceof THREE.PlaneGeometry )
-      editor.geometries[uuid] = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
+      geometry = this.createGeometry( 'cylinder', parameters );
 
     if ( geometry instanceof THREE.SphereGeometry )
-      editor.geometries[uuid] = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength );
+      geometry = this.createGeometry( 'sphere', parameters );
+
+    if ( geometry instanceof THREE.IcosahedronGeometry )
+      geometry = this.createGeometry( 'icosahedron', parameters );
 
     if ( geometry instanceof THREE.TorusGeometry )
-      editor.geometries[uuid] = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
+      geometry = this.createGeometry( 'torus', parameters );
 
     if ( geometry instanceof THREE.TorusKnotGeometry )
-      editor.geometries[uuid] = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
+      geometry = this.createGeometry( 'torusknot', parameters );
 
-    editor.geometries[uuid].computeBoundingSphere();
-    editor.geometries[uuid].uuid = uuid;
-    editor.geometries[uuid].name = name;
+    geometry.computeBoundingSphere();
+    geometry.uuid = uuid;
+    geometry.name = name;
 
     for ( var i in editor.objects ) {
 
@@ -984,7 +1057,7 @@ Editor.prototype = {
         delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
         object.geometry.dispose();
 
-        object.geometry = editor.geometries[uuid];
+        object.geometry = geometry;
 
         signals.objectChanged.dispatch( object );
 

editor/js/Sidebar.Attributes.js

@@ -0,0 +1,302 @@
+Sidebar.Attributes = function ( signals ) {
+
+  var scope = this;
+  var object;
+  var param = {};
+
+  var primaryParams = [
+    'name',
+    'parent',
+    'geometry',
+    'material',
+    'position',
+    'rotation',
+    'scale',
+    'width',
+    'height',
+    'depth',
+    'widthSegments',
+    'heightSegments',
+    'depthSegments',
+    'radialSegments',
+    'tubularSegments',
+    'radius',
+    'radiusTop',
+    'radiusBottom',
+    'phiStart',
+    'phiLength',
+    'thetaStart',
+    'thetaLength',
+    'tube',
+    'arc',
+    'detail',
+    'p',
+    'q',
+    'heightScale',
+    'openEnded',
+    'color',
+    'groundColor',
+    'ambient',
+    'emissive',
+    'specular',
+    'reflectivity',
+    'shininess',
+    'intensity',
+    'opacity',
+    'transparent',
+    'metal',
+    'wireframe',
+    'visible',
+    'userData'
+  ];
+  
+  var secondaryParams = [
+    'castShadow',
+    'receiveShadow',
+    'useQuaternion',
+    'fog',
+    'depthTest',
+    'depthWrite',
+    'dynamic'
+  ];
+
+  var integerParams = [
+    'widthSegments',
+    'heightSegments',
+    'depthSegments',
+    'radialSegments',
+    'tubularSegments'
+  ];
+
+  var container = new UI.Panel();
+
+  var group1 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' );
+  var group2 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' ).setOpacity( 0.5 );
+  var group3 = new UI.Panel().setBorderTop( '1px solid #ccc' ).setPadding( '10px' ).setOpacity( 0.25 );//.setDisplay( 'none' ); 
+
+  container.add( group1, group2, group3 );
+
+  signals.objectChanged.add( function ( changed ) {
+      
+    if ( object === changed ) updateUI();
+
+  } );
+
+  signals.selected.add( function ( selected ) {
+      
+    var selected = editor.listSelected();
+    object = ( selected.length ) ? selected[0] : null;
+
+    createUI();
+    updateUI();
+
+  } );
+
+  function createUI() {
+
+    param = {};
+
+    while ( group1.dom.hasChildNodes() ) group1.dom.removeChild( group1.dom.lastChild );
+    while ( group2.dom.hasChildNodes() ) group2.dom.removeChild( group2.dom.lastChild );
+    while ( group3.dom.hasChildNodes() ) group3.dom.removeChild( group3.dom.lastChild );
+
+    if ( object ) {
+
+      for ( var i in primaryParams ) addElement( primaryParams[i], group1 );
+
+      for ( var i in secondaryParams ) addElement( secondaryParams[i], group2 );
+
+      for ( var key in object ) addElement( key, group3 );
+
+    }
+
+
+  }
+
+  function addElement( key, parent ) {
+
+    if ( object[ key ] !== undefined && param[ key ] === undefined ) {
+
+      if ( typeof object[ key ] === 'string' ) {
+
+        param[ key ] = new UI.ParamString( key ).onChange( updateParam );
+        parent.add( param[ key ] );
+
+      } else if ( typeof object[ key ] === 'boolean' ) {
+
+        param[ key ] = new UI.ParamBool( key ).onChange( updateParam );
+        parent.add( param[ key ] );
+
+      } else if ( typeof object[ key ] === 'number' ) {
+
+        if ( integerParams.indexOf( key ) != -1 )
+          param[ key ] = new UI.ParamInteger( key ).onChange( updateParam );
+
+        else
+          param[ key ] = new UI.ParamFloat( key ).onChange( updateParam );
+        
+        parent.add( param[ key ] );
+
+      } else if ( object[ key ] instanceof THREE.Vector3 ) {
+
+        var hasLock = ( key === 'scale' ) ? true : false;
+        param[ key ] = new UI.ParamVector3( key, hasLock ).onChange( updateParam );
+        parent.add( param[ key ] );
+
+      } else if ( object[ key ] instanceof THREE.Color ) {
+
+        param[ key ] = new UI.ParamColor( key ).onChange( updateParam );
+        parent.add( param[ key ] );
+
+      } else if ( key === 'parent' ) {
+
+        param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
+        param[ key ].name.setColor( '#0080f0' ).onClick( function(){  editor.select( editor.objects[ param[ key ].getValue() ] ) } );
+        parent.add( param[ key ] );
+
+      } else if ( key === 'geometry' ) {
+
+        param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
+        param[ key ].name.setColor( '#0080f0' ).onClick( function(){  editor.select( editor.geometries[ param[ key ].getValue() ] ) } );
+        parent.add( param[ key ] );
+
+      } else if ( key == 'material' ) {
+
+        param[ key ] = new UI.ParamSelect( key ).onChange( updateParam );
+        param[ key ].name.setColor( '#0080f0' ).onClick( function(){  editor.select( editor.materials[ param[ key ].getValue() ] ) } );
+        parent.add( param[ key ] );
+
+      } else if ( key == 'userData' ) {
+
+        param[ key ] = new UI.ParamJson( key ).onChange( updateParam );
+        parent.add( param[ key ] );
+
+      }
+
+    }
+         
+  }
+
+  function updateUI() {
+
+    if ( object ) {
+
+      for ( var key in object ) {
+
+        if ( typeof object[ key ] === 'string' ) param[ key ].setValue( object[ key ] );
+
+        else if ( typeof object[ key ] === 'boolean' ) param[ key ].setValue( object[ key ] );
+
+        else if ( typeof object[ key ] === 'number' ) param[ key ].setValue( object[ key ] );
+
+        else if ( object[ key ] instanceof THREE.Vector3 ) param[ key ].setValue( object[ key ] );
+
+        else if ( object[ key ] instanceof THREE.Color ) param[ key ].setValue( object[ key ] );
+
+        else if ( object[ key ] && key === 'parent' ) {
+
+          var options = {};
+          for ( var uuid in editor.objects ) if ( object.uuid != uuid ) options[ uuid ] = editor.objects[ uuid ].name;
+          param[ key ].setOptions( options );
+          if ( object.parent !== undefined ) param[ key ].setValue( object.parent.uuid );
+
+        } else if ( object[ key ] && key === 'geometry' ) {
+
+          var options = {};
+          for ( var uuid in editor.geometries ) if ( object.uuid != uuid ) options[ uuid ] = editor.geometries[ uuid ].name;
+          param[ key ].setOptions( options );
+          if ( object.geometry !== undefined ) param[ key ].setValue( object.geometry.uuid );
+
+        } else if ( object[ key ] && key === 'material' ) {
+
+          var options = {};
+          for ( var uuid in editor.materials ) if ( object.uuid != uuid ) options[ uuid ] = editor.materials[ uuid ].name;
+          param[ key ].setOptions( options );
+          if ( object.material !== undefined ) param[ key ].setValue( object.material.uuid );
+
+        } else if ( key == 'userData' ) {
+
+          try {
+
+            param[ key ].setValue( JSON.stringify( object.userData, null, '  ' ) );
+
+          } catch ( error ) {
+
+            console.log( error );
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  function updateParam( event ) {
+
+    var key = event.srcElement.name;
+
+    if ( typeof object[ key ] === 'string' ) object[ key ] = param[ key ].getValue();
+
+    else if ( typeof object[ key ] === 'boolean' ) object[ key ] = param[ key ].getValue();
+
+    else if ( typeof object[ key ] === 'number' ) object[ key ] = param[ key ].getValue();
+
+    else if ( object[ key ] instanceof THREE.Color ) object[ key ].setHex( param[ key ].getValue() );
+
+    else if ( object[ key ] instanceof THREE.Vector3 ) object[ key ].copy( param[ key ].getValue() );
+
+    else if ( key === 'parent' ) {
+
+      if ( param[ key ].getValue() != object.uuid )
+        editor.parent( object, editor.objects[ param[ key ].getValue() ] );
+
+    } else if ( key === 'geometry' ) {
+
+      if ( param[ key ].getValue() != object.geometry.uuid )
+        object.geometry = editor.geometries[ param[ key ].getValue() ];
+
+    } else if ( key === 'material' ) {
+
+      if ( param[ key ].getValue() != object.material.uuid )
+        object.material = editor.materials[ param[ key ].getValue() ];
+
+    } else if ( key === 'userData' ) {
+
+      try {
+
+        object.userData = JSON.parse( param[ key ].getValue() );
+
+      } catch ( error ) {
+
+        console.log( error );
+
+      }
+
+    }
+
+    if ( object instanceof THREE.Object3D ) {
+
+      signals.objectChanged.dispatch( object );
+
+    } else if ( object instanceof THREE.Geometry ) {
+
+      var geoParams = {};
+      for ( var i in param ) geoParams[ i ] = param[ i ].getValue();
+      editor.updateGeometry( object, geoParams );
+
+    } else if ( object instanceof THREE.Material ) {
+
+      signals.materialChanged.dispatch( object );
+
+    }
+
+    signals.sceneChanged.dispatch( editor.scene );
+
+  }
+
+  return container;
+
+}

editor/js/Sidebar.Geometry.CubeGeometry.js

@@ -1,86 +0,0 @@
-Sidebar.Geometry.CubeGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// width
-
-	var widthRow = new UI.Panel();
-	var width = new UI.Number( geometry.width ).onChange( update );
-
-	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
-	widthRow.add( width );
-
-	container.add( widthRow );
-
-	// height
-
-	var heightRow = new UI.Panel();
-	var height = new UI.Number( geometry.height ).onChange( update );
-
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightRow.add( height );
-
-	container.add( heightRow );
-
-	// depth
-
-	var depthRow = new UI.Panel();
-	var depth = new UI.Number( geometry.depth ).onChange( update );
-
-	depthRow.add( new UI.Text( 'Depth' ).setWidth( '90px' ).setColor( '#666' ) );
-	depthRow.add( depth );
-
-	container.add( depthRow );
-
-	// widthSegments
-
-	var widthSegmentsRow = new UI.Panel();
-	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
-
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	widthSegmentsRow.add( widthSegments );
-
-	container.add( widthSegmentsRow );
-
-	// heightSegments
-
-	var heightSegmentsRow = new UI.Panel();
-	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
-
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightSegmentsRow.add( heightSegments );
-
-	container.add( heightSegmentsRow );
-
-	// depthSegments
-
-	var depthSegmentsRow = new UI.Panel();
-	var depthSegments = new UI.Integer( geometry.depthSegments ).setRange( 1, Infinity ).onChange( update );
-
-	depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	depthSegmentsRow.add( depthSegments );
-
-	container.add( depthSegmentsRow );
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				width: width.getValue(),
-				height: height.getValue(),
-				depth: depth.getValue(),
-				widthSegments: widthSegments.getValue(),
-				heightSegments: heightSegments.getValue(),
-				depthSegments: depthSegments.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -1,86 +0,0 @@
-Sidebar.Geometry.CylinderGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// radiusTop
-
-	var radiusTopRow = new UI.Panel();
-	var radiusTop = new UI.Number( geometry.radiusTop ).onChange( update );
-
-	radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusTopRow.add( radiusTop );
-
-	container.add( radiusTopRow );
-
-	// radiusBottom
-
-	var radiusBottomRow = new UI.Panel();
-	var radiusBottom = new UI.Number( geometry.radiusBottom ).onChange( update );
-
-	radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusBottomRow.add( radiusBottom );
-
-	container.add( radiusBottomRow );
-
-	// height
-
-	var heightRow = new UI.Panel();
-	var height = new UI.Number( geometry.height ).onChange( update );
-
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightRow.add( height );
-
-	container.add( heightRow );
-
-	// radialSegments
-
-	var radialSegmentsRow = new UI.Panel();
-	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
-
-	radialSegmentsRow.add( new UI.Text( 'Radius segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	radialSegmentsRow.add( radialSegments );
-
-	container.add( radialSegmentsRow );
-
-	// heightSegments
-
-	var heightSegmentsRow = new UI.Panel();
-	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
-
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightSegmentsRow.add( heightSegments );
-
-	container.add( heightSegmentsRow );
-
-	// openEnded
-
-	var openEndedRow = new UI.Panel();
-	var openEnded = new UI.Checkbox( geometry.openEnded ).onChange( update );
-
-	openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ).setColor( '#666' ) );
-	openEndedRow.add( openEnded );
-
-	container.add( openEndedRow );
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				radiusTop: radiusTop.getValue(),
-				radiusBottom: radiusBottom.getValue(),
-				height: height.getValue(),
-				radialSegments: radialSegments.getValue(),
-				heightSegments: heightSegments.getValue(),
-				openEnded: openEnded.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -1,43 +0,0 @@
-Sidebar.Geometry.IcosahedronGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// radius
-
-	var radiusRow = new UI.Panel();
-	var radius = new UI.Number( geometry.radius ).onChange( update );
-
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusRow.add( radius );
-
-	container.add( radiusRow );
-
-	// detail
-
-	var detailRow = new UI.Panel();
-	var detail = new UI.Integer( geometry.detail ).setRange( 0, Infinity ).onChange( update );
-
-	detailRow.add( new UI.Text( 'Detail' ).setWidth( '90px' ).setColor( '#666' ) );
-	detailRow.add( detail );
-
-	container.add( detailRow );
-
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				radius: radius.getValue(),
-				detail: detail.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -1,65 +0,0 @@
-Sidebar.Geometry.PlaneGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// width
-
-	var widthRow = new UI.Panel();
-	var width = new UI.Number( geometry.width ).onChange( update );
-
-	widthRow.add( new UI.Text( 'Width' ).setWidth( '90px' ).setColor( '#666' ) );
-	widthRow.add( width );
-
-	container.add( widthRow );
-
-	// height
-
-	var heightRow = new UI.Panel();
-	var height = new UI.Number( geometry.height ).onChange( update );
-
-	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightRow.add( height );
-
-	container.add( heightRow );
-
-	// widthSegments
-
-	var widthSegmentsRow = new UI.Panel();
-	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
-
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	widthSegmentsRow.add( widthSegments );
-
-	container.add( widthSegmentsRow );
-
-	// heightSegments
-
-	var heightSegmentsRow = new UI.Panel();
-	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
-
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightSegmentsRow.add( heightSegments );
-
-	container.add( heightSegmentsRow );
-
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				width: width.getValue(),
-				height: height.getValue(),
-				widthSegments: widthSegments.getValue(),
-				heightSegments: heightSegments.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -1,98 +0,0 @@
-Sidebar.Geometry.SphereGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// radius
-
-	var radiusRow = new UI.Panel();
-	var radius = new UI.Number( geometry.radius ).onChange( update );
-
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusRow.add( radius );
-
-	container.add( radiusRow );
-
-	// widthSegments
-
-	var widthSegmentsRow = new UI.Panel();
-	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
-
-	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	widthSegmentsRow.add( widthSegments );
-
-	container.add( widthSegmentsRow );
-
-	// heightSegments
-
-	var heightSegmentsRow = new UI.Panel();
-	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
-
-	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	heightSegmentsRow.add( heightSegments );
-
-	container.add( heightSegmentsRow );
-
-	// phiStart
-
-	var phiStartRow = new UI.Panel();
-	var phiStart = new UI.Number( geometry.phiStart ).onChange( update );
-
-	phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ).setColor( '#666' ) );
-	phiStartRow.add( phiStart );
-
-	container.add( phiStartRow );
-
-	// phiLength
-
-	var phiLengthRow = new UI.Panel();
-	var phiLength = new UI.Number( geometry.phiLength ).onChange( update );
-
-	phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ).setColor( '#666' ) );
-	phiLengthRow.add( phiLength );
-
-	container.add( phiLengthRow );
-
-	// thetaStart
-
-	var thetaStartRow = new UI.Panel();
-	var thetaStart = new UI.Number( geometry.thetaStart ).onChange( update );
-
-	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ).setColor( '#666' ) );
-	thetaStartRow.add( thetaStart );
-
-	container.add( thetaStartRow );
-
-	// thetaLength
-
-	var thetaLengthRow = new UI.Panel();
-	var thetaLength = new UI.Number( geometry.thetaLength ).onChange( update );
-
-	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ).setColor( '#666' ) );
-	thetaLengthRow.add( thetaLength );
-
-	container.add( thetaLengthRow );
-
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				radius: radius.getValue(),
-				widthSegments: widthSegments.getValue(),
-				heightSegments: heightSegments.getValue(),
-				phiStart: phiStart.getValue(),
-				phiLength: phiLength.getValue(),
-				thetaStart: thetaStart.getValue(),
-				thetaLength: thetaLength.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -1,75 +0,0 @@
-Sidebar.Geometry.TorusGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// radius
-
-	var radiusRow = new UI.Panel();
-	var radius = new UI.Number( geometry.radius ).onChange( update );
-
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusRow.add( radius );
-
-	container.add( radiusRow );
-
-	// tube
-
-	var tubeRow = new UI.Panel();
-	var tube = new UI.Number( geometry.tube ).onChange( update );
-
-	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
-	tubeRow.add( tube );
-
-	container.add( tubeRow );
-
-	// radialSegments
-
-	var radialSegmentsRow = new UI.Panel();
-	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
-
-	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	radialSegmentsRow.add( radialSegments );
-
-	container.add( radialSegmentsRow );
-
-	// tubularSegments
-
-	var tubularSegmentsRow = new UI.Panel();
-	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
-
-	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	tubularSegmentsRow.add( tubularSegments );
-
-	container.add( tubularSegmentsRow );
-
-	// arc
-
-	var arcRow = new UI.Panel();
-	var arc = new UI.Number( geometry.arc ).onChange( update );
-
-	arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ).setColor( '#666' ) );
-	arcRow.add( arc );
-
-	container.add( arcRow );
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				radius: radius.getValue(),
-				tube: tube.getValue(),
-				radialSegments: radialSegments.getValue(),
-				tubularSegments: tubularSegments.getValue(),
-				arc: arc.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -1,98 +0,0 @@
-Sidebar.Geometry.TorusKnotGeometry = function ( signals, geometry ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPaddingTop( '10px' );
-
-	// radius
-
-	var radiusRow = new UI.Panel();
-	var radius = new UI.Number( geometry.radius ).onChange( update );
-
-	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
-	radiusRow.add( radius );
-
-	container.add( radiusRow );
-
-	// tube
-
-	var tubeRow = new UI.Panel();
-	var tube = new UI.Number( geometry.tube ).onChange( update );
-
-	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
-	tubeRow.add( tube );
-
-	container.add( tubeRow );
-
-	// radialSegments
-
-	var radialSegmentsRow = new UI.Panel();
-	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
-
-	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	radialSegmentsRow.add( radialSegments );
-
-	container.add( radialSegmentsRow );
-
-	// tubularSegments
-
-	var tubularSegmentsRow = new UI.Panel();
-	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
-
-	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
-	tubularSegmentsRow.add( tubularSegments );
-
-	container.add( tubularSegmentsRow );
-
-	// p
-
-	var pRow = new UI.Panel();
-	var p = new UI.Number( geometry.p ).onChange( update );
-
-	pRow.add( new UI.Text( 'P' ).setWidth( '90px' ).setColor( '#666' ) );
-	pRow.add( p );
-
-	container.add( pRow );
-
-	// q
-
-	var qRow = new UI.Panel();
-	var q = new UI.Number( geometry.q ).onChange( update );
-
-	pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ).setColor( '#666' ) );
-	pRow.add( q );
-
-	container.add( qRow );
-
-	// heightScale
-
-	var heightScaleRow = new UI.Panel();
-	var heightScale = new UI.Number( geometry.heightScale ).onChange( update );
-
-	pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ).setColor( '#666' ) );
-	pRow.add( heightScale );
-
-	container.add( heightScaleRow );
-
-
-	//
-
-	function update() {
-
-		editor.remakeGeometry( geometry,
-			{
-				radius: radius.getValue(),
-				tube: tube.getValue(),
-				radialSegments: radialSegments.getValue(),
-				tubularSegments: tubularSegments.getValue(),
-				p: p.getValue(),
-				q: q.getValue(),
-				heightScale: heightScale.getValue()
-			}
-		);
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Geometry.js

@@ -1,187 +0,0 @@
-Sidebar.Geometry = function ( signals ) {
-
-	var geometryClasses = {
-
-		"CircleGeometry": THREE.CircleGeometry,
-		"ConvexGeometry": THREE.ConvexGeometry,
-		"CubeGeometry": THREE.CubeGeometry,
-		"CylinderGeometry": THREE.CylinderGeometry,
-		"ExtrudeGeometry": THREE.ExtrudeGeometry,
-		"IcosahedronGeometry": THREE.IcosahedronGeometry,
-		"LatheGeometry": THREE.LatheGeometry,
-		"OctahedronGeometry": THREE.OctahedronGeometry,
-		"ParametricGeometry": THREE.ParametricGeometry,
-		"PlaneGeometry": THREE.PlaneGeometry,
-		"PolyhedronGeometry": THREE.PolyhedronGeometry,
-		"ShapeGeometry": THREE.ShapeGeometry,
-		"SphereGeometry": THREE.SphereGeometry,
-		"TetrahedronGeometry": THREE.TetrahedronGeometry,
-		"TextGeometry": THREE.TextGeometry,
-		"TorusGeometry": THREE.TorusGeometry,
-		"TorusKnotGeometry": THREE.TorusKnotGeometry,
-		"TubeGeometry": THREE.TubeGeometry,
-		"Geometry": THREE.Geometry
-
-	};
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setDisplay( 'none' );
-	container.setPadding( '10px' );
-
-	var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
-	container.add( objectType );
-	container.add( new UI.Break(), new UI.Break() );
-
-	// name
-
-	var geometryNameRow = new UI.Panel();
-	var geometryName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-
-	geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
-	geometryNameRow.add( geometryName );
-
-	container.add( geometryNameRow );
-
-	// vertices
-
-	var geometryVerticesRow = new UI.Panel();
-	var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
-
-	geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
-	geometryVerticesRow.add( geometryVertices );
-
-	container.add( geometryVerticesRow );
-
-	// faces
-
-	var geometryFacesRow = new UI.Panel();
-	var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
-
-	geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
-	geometryFacesRow.add( geometryFaces );
-
-	container.add( geometryFacesRow );
-
-	// parameters
-
-	var parameters;
-
-	//
-
-	var geometry = null;
-
-	function update() {
-
-		if ( geometry ) {
-
-			geometry.name = geometryName.getValue();
-
-		}
-
-	}
-
-	signals.selected.add( function ( selected ) {
-
-		var selected = editor.listSelected( 'geometry' );
-		geometry = ( selected.length ) ? selected[0] : null;
-
-		if ( geometry ) {
-
-			container.setDisplay( 'block' );
-
-			objectType.setValue( getGeometryInstanceName( geometry ) );
-
-			updateFields( geometry );
-
-			//
-
-			if ( parameters !== undefined ) {
-
-				container.remove( parameters );
-				parameters = undefined;
-
-			}
-
-			if ( geometry instanceof THREE.PlaneGeometry ) {
-
-				parameters = new Sidebar.Geometry.PlaneGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.CubeGeometry ) {
-
-				parameters = new Sidebar.Geometry.CubeGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.CylinderGeometry ) {
-
-				parameters = new Sidebar.Geometry.CylinderGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.SphereGeometry ) {
-
-				parameters = new Sidebar.Geometry.SphereGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.IcosahedronGeometry ) {
-
-				parameters = new Sidebar.Geometry.IcosahedronGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.TorusGeometry ) {
-
-				parameters = new Sidebar.Geometry.TorusGeometry( signals, geometry );
-				container.add( parameters );
-
-			} else if ( geometry instanceof THREE.TorusKnotGeometry ) {
-
-				parameters = new Sidebar.Geometry.TorusKnotGeometry( signals, geometry );
-				container.add( parameters );
-
-			}
-
-			update();
-
-		} else {
-
-			geometry = null;
-
-			container.setDisplay( 'none' );
-
-		}
-
-	} );
-
-	signals.objectChanged.add( function ( object ) {
-
-		if ( object && object.geometry ) {
-
-			updateFields( object.geometry );
-
-		}
-
-	} );
-
-	//
-
-	function updateFields( geometry ) {
-
-		geometryName.setValue( geometry.name );
-		geometryVertices.setValue( geometry.vertices.length );
-		geometryFaces.setValue( geometry.faces.length );
-
-	}
-
-	function getGeometryInstanceName( geometry ) {
-
-		for ( var key in geometryClasses ) {
-
-			if ( geometry instanceof geometryClasses[ key ] ) return key;
-
-		}
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Material.js

@@ -1,658 +0,0 @@
-Sidebar.Material = function ( signals ) {
-
-    var materialClasses = {
-
-		'LineBasicMaterial': THREE.LineBasicMaterial,
-		'LineDashedMaterial': THREE.LineDashedMaterial,
-		'MeshBasicMaterial': THREE.MeshBasicMaterial,
-		'MeshDepthMaterial': THREE.MeshDepthMaterial,
-		'MeshFaceMaterial': THREE.MeshFaceMaterial,
-		'MeshLambertMaterial': THREE.MeshLambertMaterial,
-		'MeshNormalMaterial': THREE.MeshNormalMaterial,
-		'MeshPhongMaterial': THREE.MeshPhongMaterial,
-		'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
-		'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
-		'ShaderMaterial': THREE.ShaderMaterial,
-		'Material': THREE.Material
-
-	};
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setDisplay( 'none' );
-	container.setPadding( '10px' );
-
-	container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
-	container.add( new UI.Break(), new UI.Break() );
-
-	// name
-
-	var materialNameRow = new UI.Panel();
-	var materialName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-
-	materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialNameRow.add( materialName );
-
-	container.add( materialNameRow );
-
-	// class
-
-	var materialClassRow = new UI.Panel();
-	var materialClass = new UI.Select().setOptions( {
-
-		'LineBasicMaterial': 'LineBasicMaterial',
-		'LineDashedMaterial': 'LineDashedMaterial',
-		'MeshBasicMaterial': 'MeshBasicMaterial',
-		'MeshDepthMaterial': 'MeshDepthMaterial',
-		'MeshFaceMaterial': 'MeshFaceMaterial',
-		'MeshLambertMaterial': 'MeshLambertMaterial',
-		'MeshNormalMaterial': 'MeshNormalMaterial',
-		'MeshPhongMaterial': 'MeshPhongMaterial'
-
-	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-
-	materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialClassRow.add( materialClass );
-
-	container.add( materialClassRow );
-
-	// color
-
-	var materialColorRow = new UI.Panel();
-	var materialColor = new UI.Color().onChange( update );
-
-	materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialColorRow.add( materialColor );
-
-	container.add( materialColorRow );
-
-	// ambient
-
-	var materialAmbientRow = new UI.Panel();
-	var materialAmbient = new UI.Color().onChange( update );
-
-	materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialAmbientRow.add( materialAmbient );
-
-	container.add( materialAmbientRow );
-
-	// emissive
-
-	var materialEmissiveRow = new UI.Panel();
-	var materialEmissive = new UI.Color().onChange( update );
-
-	materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialEmissiveRow.add( materialEmissive );
-
-	container.add( materialEmissiveRow );
-
-	// specular
-
-	var materialSpecularRow = new UI.Panel();
-	var materialSpecular = new UI.Color().onChange( update );
-
-	materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialSpecularRow.add( materialSpecular );
-
-	container.add( materialSpecularRow );
-
-	// shininess
-
-	var materialShininessRow = new UI.Panel();
-	var materialShininess = new UI.Number( 30 ).onChange( update );
-
-	materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialShininessRow.add( materialShininess );
-
-	container.add( materialShininessRow );
-
-	// map
-
-	var materialMapRow = new UI.Panel();
-	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-
-	materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialMapRow.add( materialMapEnabled );
-	materialMapRow.add( materialMap );
-
-	container.add( materialMapRow );
-
-	// light map
-
-	var materialLightMapRow = new UI.Panel();
-	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialLightMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-
-	materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialLightMapRow.add( materialLightMapEnabled );
-	materialLightMapRow.add( materialLightMap );
-
-	container.add( materialLightMapRow );
-
-	// bump map
-
-	var materialBumpMapRow = new UI.Panel();
-	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialBumpMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
-
-	materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialBumpMapRow.add( materialBumpMapEnabled );
-	materialBumpMapRow.add( materialBumpScale );
-	materialBumpMapRow.add( materialBumpMap );
-
-	container.add( materialBumpMapRow );
-
-	// normal map
-
-	var materialNormalMapRow = new UI.Panel();
-	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialNormalMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-
-	materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialNormalMapRow.add( materialNormalMapEnabled );
-	materialNormalMapRow.add( materialNormalMap );
-
-	container.add( materialNormalMapRow );
-
-	// specular map
-
-	var materialSpecularMapRow = new UI.Panel();
-	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialSpecularMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-
-	materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialSpecularMapRow.add( materialSpecularMapEnabled );
-	materialSpecularMapRow.add( materialSpecularMap );
-
-	container.add( materialSpecularMapRow );
-
-	// env map
-
-	var materialEnvMapRow = new UI.Panel();
-	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
-	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
-
-
-	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialEnvMapRow.add( materialEnvMapEnabled );
-	materialEnvMapRow.add( materialReflectivity );
-	materialEnvMapRow.add( materialEnvMap );
-
-	container.add( materialEnvMapRow );
-
-	// opacity
-
-	var materialOpacityRow = new UI.Panel();
-	var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
-
-	materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialOpacityRow.add( materialOpacity );
-
-	container.add( materialOpacityRow );
-
-	// transparent
-
-	var materialTransparentRow = new UI.Panel();
-	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
-
-	materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ).setColor( '#666' ) );
-	materialTransparentRow.add( materialTransparent );
-
-	container.add( materialTransparentRow );
-
-	// wireframe
-
-	var materialWireframeRow = new UI.Panel();
-	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' ).setColor( '#666' ) );
-	materialWireframeRow.add( materialWireframe );
-	materialWireframeRow.add( materialWireframeLinewidth );
-
-	container.add( materialWireframeRow );
-
-	//
-
-	var material = null;
-	var selectedHasUvs = false;
-
-	function update() {
-
-		var textureWarning = false;
-
-		// var selected = editor.list( 'selected' )[0];
-		// material = ( editor.materials[ selected.uuid ] ) ? selected : null;
-
-		if ( material ) {
-
-			material.name = materialName.getValue();
-
-			if ( material instanceof materialClasses[ materialClass.getValue() ] == false ) {
-
-				material = new materialClasses[ materialClass.getValue() ]();
-
-			}
-
-			if ( material.color !== undefined ) {
-
-				material.color.setHex( materialColor.getHexValue() );
-
-			}
-
-			if ( material.ambient !== undefined ) {
-
-				material.ambient.setHex( materialAmbient.getHexValue() );
-
-			}
-
-			if ( material.emissive !== undefined ) {
-
-				material.emissive.setHex( materialEmissive.getHexValue() );
-
-			}
-
-			if ( material.specular !== undefined ) {
-
-				material.specular.setHex( materialSpecular.getHexValue() );
-
-			}
-
-			if ( material.shininess !== undefined ) {
-
-				material.shininess = materialShininess.getValue();
-
-			}
-
-			if ( material.map !== undefined ) {
-
-				var mapEnabled = materialMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.map = mapEnabled ? materialMap.getValue() : null;
-					material.needsUpdate = true;
-					// TODO: update all buffers with this material
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( mapEnabled ) textureWarning = true;
-
-				}
-
-			}
-
-			/*
-			if ( material.lightMap !== undefined ) {
-
-				var lightMapEnabled = materialLightMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
-					material.needsUpdate = true;
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( lightMapEnabled ) textureWarning = true;
-
-				}
-
-			}
-			*/
-
-			if ( material.bumpMap !== undefined ) {
-
-				var bumpMapEnabled = materialBumpMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
-					material.bumpScale = materialBumpScale.getValue();
-					material.needsUpdate = true;
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( bumpMapEnabled ) textureWarning = true;
-
-				}
-
-			}
-
-			if ( material.normalMap !== undefined ) {
-
-				var normalMapEnabled = materialNormalMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
-					material.needsUpdate = true;
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( normalMapEnabled ) textureWarning = true;
-
-				}
-
-			}
-
-			if ( material.specularMap !== undefined ) {
-
-				var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
-					material.needsUpdate = true;
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( specularMapEnabled ) textureWarning = true;
-
-				}
-
-			}
-
-			if ( material.envMap !== undefined ) {
-
-				var envMapEnabled = materialEnvMapEnabled.getValue() === true;
-
-				if ( selectedHasUvs )  {
-
-					material.envMap = envMapEnabled ? materialEnvMap.getValue() : null;
-					material.reflectivity = materialReflectivity.getValue();
-					material.needsUpdate = true;
-					selected.geometry.buffersNeedUpdate = true;
-					selected.geometry.uvsNeedUpdate = true;
-
-				} else {
-
-					if ( envMapEnabled ) textureWarning = true;
-
-				}
-
-			}
-
-			if ( material.opacity !== undefined ) {
-
-				material.opacity = materialOpacity.getValue();
-
-			}
-
-			if ( material.transparent !== undefined ) {
-
-				material.transparent = materialTransparent.getValue();
-
-			}
-
-			if ( material.wireframe !== undefined ) {
-
-				material.wireframe = materialWireframe.getValue();
-
-			}
-
-			if ( material.wireframeLinewidth !== undefined ) {
-
-				material.wireframeLinewidth = materialWireframeLinewidth.getValue();
-
-			}
-
-			updateRows();
-
-			signals.materialChanged.dispatch( material );
-
-		}
-
-		if ( textureWarning ) {
-
-			console.warn( "Can't set texture, model doesn't have texture coordinates" );
-
-		}
-
-	};
-
-	function updateRows() {
-
-		var properties = {
-			'color': materialColorRow,
-			'ambient': materialAmbientRow,
-			'emissive': materialEmissiveRow,
-			'specular': materialSpecularRow,
-			'shininess': materialShininessRow,
-			'map': materialMapRow,
-			'lightMap': materialLightMapRow,
-			'bumpMap': materialBumpMapRow,
-			'normalMap': materialNormalMapRow,
-			'specularMap': materialSpecularMapRow,
-			'envMap': materialEnvMapRow,
-			'opacity': materialOpacityRow,
-			'transparent': materialTransparentRow,
-			'wireframe': materialWireframeRow
-
-		};
-
-		for ( var property in properties ) {
-
-			properties[ property ].setDisplay( material[ property ] !== undefined ? '' : 'none' );
-
-		}
-
-	};
-
-	function getMaterialInstanceName( material ) {
-
-		for ( var key in materialClasses ) {
-
-			if ( material instanceof materialClasses[ key ] ) return key;
-
-		}
-
-	}
-
-	// events
-
-	signals.selected.add( function ( selected ) {
-
-		var selected = editor.listSelected( 'material' );
-		material = ( selected.length ) ? selected[0] : null;
-
-		if ( material ) {
-
-			// selected = object;
-			// selectedHasUvs = object.geometry.faceVertexUvs[ 0 ].length > 0;
-
-			container.setDisplay( '' );
-
-			// var material = object.material;
-
-			materialName.setValue( material.name );
-			materialClass.setValue( getMaterialInstanceName( material ) );
-
-			if ( material.color !== undefined ) {
-
-				materialColor.setValue( '#' + material.color.getHexString() );
-
-			}
-
-			if ( material.ambient !== undefined ) {
-
-				materialAmbient.setValue( '#' + material.ambient.getHexString() );
-
-			}
-
-			if ( material.emissive !== undefined ) {
-
-				materialEmissive.setValue( '#' + material.emissive.getHexString() );
-
-			}
-
-			if ( material.specular !== undefined ) {
-
-				materialSpecular.setValue( '#' + material.specular.getHexString() );
-
-			}
-
-			if ( material.shininess !== undefined ) {
-
-				materialShininess.setValue( material.shininess );
-
-			}
-
-			if ( material.map !== undefined ) {
-
-				// if ( selectedHasUvs ) {
-
-					if ( material.map !== null ) {
-
-						materialMapEnabled.setValue( true );
-						materialMap.setValue( material.map );
-
-					} else {
-
-						materialMapEnabled.setValue( false );
-
-					}
-
-				// } else {
-
-				// 	console.warn( "Can't set texture, model doesn't have texture coordinates" );
-
-				// }
-
-			}
-
-			/*
-			if ( material.lightMap !== undefined ) {
-
-				if ( material.lightMap !== null ) {
-
-					materialLightMapEnabled.setValue( true );
-					materialLightMap.setValue( material.lightMap );
-
-				} else {
-
-					materialLightMapEnabled.setValue( false );
-
-				}
-
-			}
-			*/
-
-			if ( material.bumpMap !== undefined ) {
-
-				if ( material.bumpMap !== null ) {
-
-					materialBumpMapEnabled.setValue( true );
-					materialBumpMap.setValue( material.bumpMap );
-					materialBumpScale.setValue( material.bumpScale );
-
-				} else {
-
-					materialBumpMapEnabled.setValue( false );
-					materialBumpScale.setValue( 1 );
-
-				}
-
-			}
-
-			if ( material.normalMap !== undefined ) {
-
-				if ( material.normalMap !== null ) {
-
-					materialNormalMapEnabled.setValue( true );
-					materialNormalMap.setValue( material.normalMap );
-
-				} else {
-
-					materialNormalMapEnabled.setValue( false );
-
-				}
-
-			}
-
-			if ( material.specularMap !== undefined ) {
-
-				if ( material.specularMap !== null ) {
-
-					materialSpecularMapEnabled.setValue( true );
-					materialSpecularMap.setValue( material.specularMap );
-
-				} else {
-
-					materialSpecularMapEnabled.setValue( false );
-
-				}
-
-			}
-
-			if ( material.envMap !== undefined ) {
-
-				if ( material.envMap !== null ) {
-
-					materialEnvMapEnabled.setValue( true );
-					materialEnvMap.setValue( material.envMap );
-					materialReflectivity.setValue( material.reflectivity );
-
-				} else {
-
-					materialEnvMapEnabled.setValue( false );
-
-				}
-
-			}
-
-			if ( material.opacity !== undefined ) {
-
-				materialOpacity.setValue( material.opacity );
-
-			}
-
-			if ( material.transparent !== undefined ) {
-
-				materialTransparent.setValue( material.transparent );
-
-			}
-
-			if ( material.wireframe !== undefined ) {
-
-				materialWireframe.setValue( material.wireframe );
-
-			}
-
-			if ( material.wireframeLinewidth !== undefined ) {
-
-				materialWireframeLinewidth.setValue( material.wireframeLinewidth );
-
-			}
-
-			updateRows();
-
-			update();
-
-		} else {
-
-			// selected = null;
-			// selectedHasUvs = false;
-
-			container.setDisplay( 'none' );
-
-		}
-
-	} );
-
-	return container;
-
-}

editor/js/Sidebar.Object3D.js

@@ -1,621 +0,0 @@
-Sidebar.Object3D = function ( signals ) {
-
-	var container = new UI.Panel();
-	container.setBorderTop( '1px solid #ccc' );
-	container.setPadding( '10px' );
-	container.setDisplay( 'none' );
-
-	var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
-	container.add( objectType );
-	container.add( new UI.Break(), new UI.Break() );
-
-	// name
-
-	var objectNameRow = new UI.Panel();
-	var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectNameRow.add( objectName );
-	container.add( objectNameRow );
-
-	// parent
-
-	var objectParentRow = new UI.Panel();
-	var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	var parentLabel = new UI.Text( 'Parent' ).setWidth( '90px' ).setColor( '#0080f0' );
-	parentLabel.onClick( function(){  editor.select( editor.objects[ objectParent.getValue() ] ) } );
-	objectParentRow.add( parentLabel );
-	objectParentRow.add( objectParent );
-	container.add( objectParentRow );
-
-	// geometry
-
-	var objectGeometryRow = new UI.Panel();
-	var objectGeometry = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	var geometryLabel = new UI.Text( 'Geometry' ).setWidth( '90px' ).setColor( '#0080f0' );
-	geometryLabel.onClick( function(){  editor.select( editor.geometries[ objectGeometry.getValue() ] ) } );
-	objectGeometryRow.add( geometryLabel );
-	objectGeometryRow.add( objectGeometry );
-	container.add( objectGeometryRow );
-
-	// material
-
-	var objectMaterialRow = new UI.Panel();
-	var objectMaterial = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	var materialLabel = new UI.Text( 'Material' ).setWidth( '90px' ).setColor( '#0080f0' );
-	materialLabel.onClick( function(){  editor.select( editor.materials[ objectMaterial.getValue() ] ) } );
-	objectMaterialRow.add( materialLabel );
-	objectMaterialRow.add( objectMaterial );
-	container.add( objectMaterialRow );
-
-	// position
-
-	var objectPositionRow = new UI.Panel();
-	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' ).setColor( '#666' ) );
-	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
-	container.add( objectPositionRow );
-
-	// rotation
-
-	var objectRotationRow = new UI.Panel();
-	var objectRotationX = new UI.Number().setWidth( '50px' ).onChange( update );
-	var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
-	var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
-	objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
-	container.add( objectRotationRow );
-
-	// scale
-
-	var objectScaleRow = new UI.Panel();
-	var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
-	var objectScaleX = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleX );
-	var objectScaleY = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleY );
-	var objectScaleZ = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleZ );
-	objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectScaleRow.add( objectScaleLock );
-	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
-
-	container.add( objectScaleRow );
-
-	// fov
-
-	var objectFovRow = new UI.Panel();
-	var objectFov = new UI.Number().onChange( update );
-	objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectFovRow.add( objectFov );
-	container.add( objectFovRow );
-
-	// near
-
-	var objectNearRow = new UI.Panel();
-	var objectNear = new UI.Number().onChange( update );
-	objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectNearRow.add( objectNear );
-	container.add( objectNearRow );
-
-	// far
-
-	var objectFarRow = new UI.Panel();
-	var objectFar = new UI.Number().onChange( update );
-	objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectFarRow.add( objectFar );
-	container.add( objectFarRow );
-
-	// intensity
-
-	var objectIntensityRow = new UI.Panel();
-	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
-	objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectIntensityRow.add( objectIntensity );
-	container.add( objectIntensityRow );
-
-	// color
-
-	var objectColorRow = new UI.Panel();
-	var objectColor = new UI.Color().onChange( update );
-	objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectColorRow.add( objectColor );
-	container.add( objectColorRow );
-
-	// ground color
-
-	var objectGroundColorRow = new UI.Panel();
-	var objectGroundColor = new UI.Color().onChange( update );
-	objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectGroundColorRow.add( objectGroundColor );
-	container.add( objectGroundColorRow );
-
-	// distance
-
-	var objectDistanceRow = new UI.Panel();
-	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
-	objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectDistanceRow.add( objectDistance );
-	container.add( objectDistanceRow );
-
-	// angle
-
-	var objectAngleRow = new UI.Panel();
-	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI / 2 ).onChange( update );
-	objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectAngleRow.add( objectAngle );
-	container.add( objectAngleRow );
-
-	// exponent
-
-	var objectExponentRow = new UI.Panel();
-	var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
-	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectExponentRow.add( objectExponent );
-	container.add( objectExponentRow );
-
-	// visible
-
-	var objectVisibleRow = new UI.Panel();
-	var objectVisible = new UI.Checkbox().onChange( update );
-	objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectVisibleRow.add( objectVisible );
-	container.add( objectVisibleRow );
-
-	// user data
-
-	var objectUserDataRow = new UI.Panel();
-	var objectUserData = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
-	objectUserData.onKeyUp( function () {
-
-		try {
-
-			JSON.parse( objectUserData.getValue() );
-			objectUserData.setBorderColor( '#ccc' );
-			objectUserData.setBackgroundColor( '' );
-
-		} catch ( error ) {
-
-			objectUserData.setBorderColor( '#f00' );
-			objectUserData.setBackgroundColor( 'rgba(255,0,0,0.25)' );
-
-		}
-
-	} );
-
-	objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectUserDataRow.add( objectUserData );
-
-	container.add( objectUserDataRow );
-
-	//
-
-	var object = null;
-
-	var scene = editor.scene;
-
-	//
-
-	function updateScaleX() {
-
-		if ( objectScaleLock.getValue() === true ) {
-
-			var scale = objectScaleX.getValue() / object.scale.x;
-
-			objectScaleY.setValue( objectScaleY.getValue() * scale );
-			objectScaleZ.setValue( objectScaleZ.getValue() * scale );
-
-		}
-
-		update();
-
-	}
-
-	function updateScaleY() {
-
-		if ( objectScaleLock.getValue() === true ) {
-
-			var scale = objectScaleY.getValue() / object.scale.y;
-
-			objectScaleX.setValue( objectScaleX.getValue() * scale );
-			objectScaleZ.setValue( objectScaleZ.getValue() * scale );
-
-		}
-
-		update();
-
-	}
-
-	function updateScaleZ() {
-
-		if ( objectScaleLock.getValue() === true ) {
-
-			var scale = objectScaleZ.getValue() / object.scale.z;
-
-			objectScaleX.setValue( objectScaleX.getValue() * scale );
-			objectScaleY.setValue( objectScaleY.getValue() * scale );
-
-		}
-
-		update();
-
-	}
-
-	function update() {
-
-		if ( object ) {
-
-			object.name = objectName.getValue();
-
-			if ( object.parent !== undefined ) {
-
-				var newParentUuid = objectParent.getValue();
-
-				if ( object.parent.uuid !== newParentUuid && object.uuid !== newParentUuid ) {
-
-					var parent = editor.objects[newParentUuid];
-
-					if ( parent === undefined ) {
-
-						parent = scene;
-
-					}
-
-					parent.add( object );
-
-					signals.sceneChanged.dispatch( scene );
-
-				}
-
-			}
-
-
-			if ( object.geometry !== undefined ) {
-
-				var newGeometryUUid = objectGeometry.getValue();
-
-				if ( object.geometry.uuid !== newGeometryUUid && object.uuid !== newGeometryUUid ) {
-
-					object.geometry = editor.geometries[newGeometryUUid];
-
-					// TODO: Update Geometry;
-
-					signals.objectChanged.dispatch( object );
-
-				}
-
-			}
-
-			if ( object.material !== undefined ) {
-
-				var newMaterialUUid = objectMaterial.getValue();
-
-				if ( object.material.uuid !== newMaterialUUid && object.uuid !== newMaterialUUid ) {
-
-					object.material = editor.materials[newMaterialUUid];
-
-					signals.objectChanged.dispatch( object );
-
-				}
-
-			}
-
-			object.position.x = objectPositionX.getValue();
-			object.position.y = objectPositionY.getValue();
-			object.position.z = objectPositionZ.getValue();
-
-			object.rotation.x = objectRotationX.getValue();
-			object.rotation.y = objectRotationY.getValue();
-			object.rotation.z = objectRotationZ.getValue();
-
-			object.scale.x = objectScaleX.getValue();
-			object.scale.y = objectScaleY.getValue();
-			object.scale.z = objectScaleZ.getValue();
-
-			if ( object.fov !== undefined ) {
-
-				object.fov = objectFov.getValue();
-				object.updateProjectionMatrix();
-
-			}
-
-			if ( object.near !== undefined ) {
-
-				object.near = objectNear.getValue();
-
-			}
-
-			if ( object.far !== undefined ) {
-
-				object.far = objectFar.getValue();
-
-			}
-
-			if ( object.intensity !== undefined ) {
-
-				object.intensity = objectIntensity.getValue();
-
-			}
-
-			if ( object.color !== undefined ) {
-
-				object.color.setHex( objectColor.getHexValue() );
-
-			}
-
-			if ( object.groundColor !== undefined ) {
-
-				object.groundColor.setHex( objectGroundColor.getHexValue() );
-
-			}
-
-			if ( object.distance !== undefined ) {
-
-				object.distance = objectDistance.getValue();
-
-			}
-
-			if ( object.angle !== undefined ) {
-
-				object.angle = objectAngle.getValue();
-
-			}
-
-			if ( object.exponent !== undefined ) {
-
-				object.exponent = objectExponent.getValue();
-
-			}
-
-			object.visible = objectVisible.getValue();
-
-			try {
-
-				object.userData = JSON.parse( objectUserData.getValue() );
-
-			} catch ( error ) {
-
-				console.log( error );
-
-			}
-
-			signals.objectChanged.dispatch( object );
-
-		}
-
-	}
-
-	function updateRows() {
-
-		var properties = {
-			'parent': objectParentRow,
-			'geometry': objectGeometryRow,
-			'material': objectMaterialRow,
-			'fov': objectFovRow,
-			'near': objectNearRow,
-			'far': objectFarRow,
-			'intensity': objectIntensityRow,
-			'color': objectColorRow,
-			'groundColor': objectGroundColorRow,
-			'distance' : objectDistanceRow,
-			'angle' : objectAngleRow,
-			'exponent' : objectExponentRow
-		};
-
-		for ( var property in properties ) {
-
-			properties[ property ].setDisplay( object[ property ] !== undefined ? '' : 'none' );
-
-		}
-
-	}
-
-	function updateTransformRows() {
-
-		if ( object instanceof THREE.Light || ( object instanceof THREE.Object3D && object.userData.targetInverse ) ) {
-
-			objectRotationRow.setDisplay( 'none' );
-			objectScaleRow.setDisplay( 'none' );
-
-		} else {
-
-			objectRotationRow.setDisplay( '' );
-			objectScaleRow.setDisplay( '' );
-
-		}
-
-	}
-
-	function getObjectInstanceName( object ) {
-
-		var objects = {
-
-			'Scene': THREE.Scene,
-			'PerspectiveCamera': THREE.PerspectiveCamera,
-			'AmbientLight': THREE.AmbientLight,
-			'DirectionalLight': THREE.DirectionalLight,
-			'HemisphereLight': THREE.HemisphereLight,
-			'PointLight': THREE.PointLight,
-			'SpotLight': THREE.SpotLight,
-			'Mesh': THREE.Mesh,
-			'Object3D': THREE.Object3D
-
-		};
-
-		for ( var key in objects ) {
-
-			if ( object instanceof objects[ key ] ) return key;
-
-		}
-
-	}
-
-	// events
-
-	signals.sceneChanged.add( function () {
-
-
-
-	} );
-
-	signals.selected.add( function ( selected ) {
-			
-		var selected = editor.listSelected( 'object' );
-		object = ( selected.length ) ? selected[0] : null;
-
-		updateUI();
-
-	} );
-
-	signals.objectChanged.add( function ( changedObject ) {
-
-		if ( object === changedObject ) updateUI();
-
-	} );
-
-	function updateUI() {
-
-		if ( !object ) {
-
-			container.setDisplay( 'none' );
-			return;
-
-		}
-
-		container.setDisplay( 'block' );
-
-		objectType.setValue( getObjectInstanceName( object ) );
-
-		var allObjects = {};
-		var allGeometries = {};
-		var allMaterials = {};
-
-		for ( var uuid in editor.objects ) {
-
-			if ( object.uuid != uuid ) allObjects[ uuid ] = editor.objects[ uuid ].name;
-
-		}
-
-		for ( var uuid in editor.geometries ) {
-
-			allGeometries[ uuid ] = editor.geometries[ uuid ].name;
-
-		}
-
-		for ( var uuid in editor.materials ) {
-
-			allMaterials[ uuid ] = editor.materials[ uuid ].name;
-
-		}
-
-		objectParent.setOptions( allObjects );
-		objectGeometry.setOptions( allGeometries );
-		objectMaterial.setOptions( allMaterials );
-
-		if ( object.parent !== undefined ) {
-
-			objectParent.setValue( object.parent.uuid );
-
-		}
-
-		if ( object.geometry !== undefined ) {
-
-			objectGeometry.setValue( object.geometry.uuid );
-
-		}
-
-		if ( object.material !== undefined ) {
-
-			objectMaterial.setValue( object.material.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 );
-		objectRotationY.setValue( object.rotation.y );
-		objectRotationZ.setValue( object.rotation.z );
-
-		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.setValue( '#' + object.color.getHexString() );
-
-		}
-
-		if ( object.groundColor !== undefined ) {
-
-			objectGroundColor.setValue( '#' + object.groundColor.getHexString() );
-
-		}
-
-		if ( object.distance !== undefined ) {
-
-			objectDistance.setValue( object.distance );
-
-		}
-
-		if ( object.angle !== undefined ) {
-
-			objectAngle.setValue( object.angle );
-
-		}
-
-		if ( object.exponent !== undefined ) {
-
-			objectExponent.setValue( object.exponent );
-
-		}
-
-		objectVisible.setValue( object.visible );
-
-		try {
-
-			objectUserData.setValue( JSON.stringify( object.userData, null, '  ' ) );
-
-		} catch ( error ) {
-
-			console.log( error );
-
-		}
-
-		objectUserData.setBorderColor( '#ccc' );
-		objectUserData.setBackgroundColor( '' );
-
-		updateRows();
-		updateTransformRows();
-
-	}
-
-	return container;
-
-}

editor/js/Sidebar.Selected.js

@@ -1,11 +0,0 @@
-Sidebar.Selected = function ( signals ) {
-
-  var container = new UI.Panel();
-
-  container.add( new Sidebar.Object3D( signals ) );
-  container.add( new Sidebar.Geometry( signals ) );
-  container.add( new Sidebar.Material( signals ) );
-
-  return container;
-
-}

editor/js/Sidebar.js

@@ -1,12 +1,12 @@
 var Sidebar = function ( editor, signals ) {
 
-	var container = new UI.Panel();
+	var container = new UI.Panel().setWidth('300px');
 	container.setPosition( 'absolute' );
 	container.setClass( 'sidebar' );
 
 	container.add( new Sidebar.Renderer( signals ) );
   container.add( new Sidebar.Outliner( signals ) );
-  container.add( new Sidebar.Selected( signals ) );
+  container.add( new Sidebar.Attributes( signals ) );
   container.add( new Sidebar.Animation( signals ) );
 
 	return container;

editor/js/Viewport.js

@@ -171,6 +171,7 @@ var Viewport = function ( editor, signals ) {
 
 		if ( object.geometry !== undefined ) {
 
+			selectionBox.visible = true;
 			selectionBox.update( object );
 			transformControls.update();
 
@@ -221,9 +222,7 @@ var Viewport = function ( editor, signals ) {
 
 		if ( object && object !== scene ) {
 
-			selectionBox.visible = true;
 			transformControls.attach( object );
-
 			updateHelpers( object );
 
 		}
@@ -249,6 +248,7 @@ var Viewport = function ( editor, signals ) {
 	signals.objectChanged.add( function ( object ) {
 
 		updateHelpers( object );
+		transformControls.update();
 		updateInfo();
 		render();
 

editor/js/libs/ui.js

@@ -675,10 +675,14 @@ UI.Number = function ( number ) {
 
 	var onChange = function ( event ) {
 
+
+
 		var number = parseFloat( dom.value );
 
 		if ( isNaN( number ) === false ) {
 
+		  dom.oldValue = dom.newValue;
+		  dom.newValue = number;
 			dom.value = number;
 
 		}

editor/js/libs/ui.three.js

@@ -1,8 +1,321 @@
-// Texture
+// String
+
+UI.ParamString = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.string = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
+	this.string.dom.name = name;
+
+	row.add( this.name, this.string );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamString.prototype = Object.create( UI.Panel.prototype );
+
+
+UI.ParamString.prototype.setValue = function ( value ) {
+
+	this.string.setValue( value );
+
+};
+
+
+UI.ParamString.prototype.getValue = function ( value ) {
+
+	return this.string.getValue( value );
+
+};
+
+// Integer
+
+UI.ParamInteger = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.integer = new UI.Integer();
+	this.integer.dom.name = name;
+	
+	row.add( this.name, this.integer );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamInteger.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamInteger.prototype.setValue = function ( value ) {
+
+	this.integer.setValue( value );
+
+};
+
+UI.ParamInteger.prototype.getValue = function () {
+
+	return this.integer.getValue();
+
+};
+
+// Float
+
+UI.ParamFloat = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.float = new UI.Number();
+	this.float.dom.name = name;
+	
+	row.add( this.name, this.float );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamFloat.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamFloat.prototype.setValue = function ( value ) {
+
+	this.float.setValue( value );
+
+};
+
+UI.ParamFloat.prototype.getValue = function () {
+
+	return this.float.getValue();
+
+};
+
+// Bool
+
+UI.ParamBool = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' ).setPosition( 'relative' ).setLeft( '25px' );
+	this.bool = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '10px' );
+	this.bool.dom.name = name;
+
+	row.add( this.name, this.bool );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamBool.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamBool.prototype.setValue = function ( value ) {
+
+	this.bool.setValue( value );
+
+};
+
+
+UI.ParamBool.prototype.getValue = function () {
+
+	return this.bool.getValue();
+
+};
+
+// Vector3
+
+UI.ParamVector3 = function ( name, scaleLock ) {
+
+  UI.Panel.call( this );
+
+  scaleLock = scaleLock ? scaleLock : false;
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+
+	this.x = new UI.Number().setWidth( '50px' ).onChange( setYZ );
+	this.y = new UI.Number().setWidth( '50px' ).onChange( setXZ );
+	this.z = new UI.Number().setWidth( '50px' ).onChange( setXY );
+	this.x.dom.name = name;
+	this.y.dom.name = name;
+	this.z.dom.name = name;
+	
+	row.add( this.name, this.x, this.y, this.z );
+
+	if ( scaleLock ) {
+	
+		this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
+		row.add( this.scaleLock );
+
+	}
+
+	this.add( row );
+
+	function setYZ( event ) {
+
+		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
+
+			var scale = event.srcElement.value / event.srcElement.oldValue;
+			scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
+			scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
+
+		}
+
+	}
+
+	function setXZ( event ) {
+
+		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
+
+			var scale = event.srcElement.value / event.srcElement.oldValue;
+			scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
+			scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
+
+		}
+
+	}
+
+	function setXY( event ) {
+
+		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
+
+			var scale = event.srcElement.value / event.srcElement.oldValue;
+			scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
+			scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
+
+		}
+
+	}
+
+	return this;
+
+};
+
+UI.ParamVector3.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamVector3.prototype.setValue = function ( value ) {
+
+	this.x.setValue( value.x );
+	this.y.setValue( value.y );
+	this.z.setValue( value.z );
+
+};
+
+
+UI.ParamVector3.prototype.getValue = function () {
+
+	return new THREE.Vector3( this.x.getValue(), this.y.getValue(), this.z.getValue() );
+
+};
+
+// Color
+
+UI.ParamColor = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.color = new UI.Color();
+	this.color.dom.name = name;
+	
+	row.add( this.name, this.color );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamColor.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamColor.prototype.setValue = function ( color ) {
+
+	this.color.setValue( '#' + color.getHexString() );
+
+};
+
+
+UI.ParamColor.prototype.getValue = function () {
+
+	return this.color.getHexValue();
+
+};
+
+// Select
+
+UI.ParamSelect = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	this.onChangeCallback;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.select = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
+	this.select.dom.name = name;
+
+	row.add( this.name, this.select );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamSelect.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamSelect.prototype.setValue = function ( value ) {
+
+	this.select.setValue( value );
+
+};
+
+
+UI.ParamSelect.prototype.getValue = function ( value ) {
+
+	return this.select.getValue( value );
+
+};
+
+UI.ParamSelect.prototype.setOptions = function ( value ) {
+
+	this.select.setOptions( value );
+
+};
+
+
+// Texture 
 
 UI.Texture = function ( position ) {
 
-    UI.Element.call( this );
+  UI.Element.call( this );
 
 	var scope = this;
 
@@ -95,7 +408,6 @@ UI.Texture.prototype.onChange = function ( callback ) {
 
 };
 
-
 // CubeTexture
 
 UI.CubeTexture = function ( position ) {
@@ -164,3 +476,50 @@ UI.CubeTexture.prototype.onChange = function ( callback ) {
 	return this;
 
 };
+
+// Json
+
+UI.ParamJson = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+	this.json = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' ).setColor( '#444' ).setFontSize( '12px' );
+	this.json.dom.name = name;
+	this.json.onKeyUp( function () {
+		try {
+			JSON.parse( scope.json.getValue() );
+			scope.json.setBorderColor( '#ccc' );
+			scope.json.setBackgroundColor( '' );
+		} catch ( error ) {
+			scope.json.setBorderColor( '#f00' );
+			scope.json.setBackgroundColor( 'rgba(255,0,0,0.25)' );
+		}
+	} );
+	
+	row.add( this.name, this.json );
+	this.add( row );
+
+	return this;
+
+};
+
+UI.ParamJson.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamJson.prototype.setValue = function ( value ) {
+
+	this.json.setValue( value );
+
+};
+
+
+UI.ParamJson.prototype.getValue = function () {
+
+	return this.json.getValue();
+
+};
+

src/extras/geometries/CylinderGeometry.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ) {
+THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded ) {
 
 	THREE.Geometry.call( this );
 
@@ -10,7 +10,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 	this.radiusBottom = radiusBottom = radiusBottom !== undefined ? radiusBottom : 20;
 	this.height = height = height !== undefined ? height : 100;
 
-	this.radiusSegments = radiusSegments = radiusSegments || 8;
+	this.radialSegments = radialSegments = radialSegments || 8;
 	this.heightSegments = heightSegments = heightSegments || 1;
 
 	this.openEnded = openEnded = openEnded !== undefined ? openEnded : false;
@@ -27,9 +27,9 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 		var v = y / heightSegments;
 		var radius = v * ( radiusBottom - radiusTop ) + radiusTop;
 
-		for ( x = 0; x <= radiusSegments; x ++ ) {
+		for ( x = 0; x <= radialSegments; x ++ ) {
 
-			var u = x / radiusSegments;
+			var u = x / radialSegments;
 
 			var vertex = new THREE.Vector3();
 			vertex.x = radius * Math.sin( u * Math.PI * 2 );
@@ -51,7 +51,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 	var tanTheta = ( radiusBottom - radiusTop ) / height;
 	var na, nb;
 
-	for ( x = 0; x < radiusSegments; x ++ ) {
+	for ( x = 0; x < radialSegments; x ++ ) {
 
 		if ( radiusTop !== 0 ) {
 
@@ -98,7 +98,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 
 		this.vertices.push( new THREE.Vector3( 0, heightHalf, 0 ) );
 
-		for ( x = 0; x < radiusSegments; x ++ ) {
+		for ( x = 0; x < radialSegments; x ++ ) {
 
 			var v1 = vertices[ 0 ][ x ];
 			var v2 = vertices[ 0 ][ x + 1 ];
@@ -125,7 +125,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 
 		this.vertices.push( new THREE.Vector3( 0, - heightHalf, 0 ) );
 
-		for ( x = 0; x < radiusSegments; x ++ ) {
+		for ( x = 0; x < radialSegments; x ++ ) {
 
 			var v1 = vertices[ y ][ x + 1 ];
 			var v2 = vertices[ y ][ x ];

src/extras/geometries/TubeGeometry.js

@@ -11,14 +11,14 @@
  * http://www.cs.indiana.edu/pub/techreports/TR425.pdf
  */
 
-THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, debug ) {
+THREE.TubeGeometry = function( path, segments, radius, radialSegments, closed, debug ) {
 
 	THREE.Geometry.call( this );
 
 	this.path = path;
 	this.segments = segments || 64;
 	this.radius = radius || 1;
-	this.radiusSegments = radiusSegments || 8;
+	this.radialSegments = radialSegments || 8;
 	this.closed = closed || false;
 
 	if ( debug ) this.debug = new THREE.Object3D();
@@ -83,9 +83,9 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d
 
 		}
 
-		for ( j = 0; j < this.radiusSegments; j++ ) {
+		for ( j = 0; j < this.radialSegments; j++ ) {
 
-			v = j / this.radiusSegments * 2 * Math.PI;
+			v = j / this.radialSegments * 2 * Math.PI;
 
 			cx = -this.radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside.
 			cy = this.radius * Math.sin( v );
@@ -105,20 +105,20 @@ THREE.TubeGeometry = function( path, segments, radius, radiusSegments, closed, d
 
 	for ( i = 0; i < this.segments; i++ ) {
 
-		for ( j = 0; j < this.radiusSegments; j++ ) {
+		for ( j = 0; j < this.radialSegments; j++ ) {
 
 			ip = ( this.closed ) ? (i + 1) % this.segments : i + 1;
-			jp = (j + 1) % this.radiusSegments;
+			jp = (j + 1) % this.radialSegments;
 
 			a = this.grid[ i ][ j ];		// *** NOT NECESSARILY PLANAR ! ***
 			b = this.grid[ ip ][ j ];
 			c = this.grid[ ip ][ jp ];
 			d = this.grid[ i ][ jp ];
 
-			uva = new THREE.Vector2( i / this.segments, j / this.radiusSegments );
-			uvb = new THREE.Vector2( ( i + 1 ) / this.segments, j / this.radiusSegments );
-			uvc = new THREE.Vector2( ( i + 1 ) / this.segments, ( j + 1 ) / this.radiusSegments );
-			uvd = new THREE.Vector2( i / this.segments, ( j + 1 ) / this.radiusSegments );
+			uva = new THREE.Vector2( i / this.segments, j / this.radialSegments );
+			uvb = new THREE.Vector2( ( i + 1 ) / this.segments, j / this.radialSegments );
+			uvc = new THREE.Vector2( ( i + 1 ) / this.segments, ( j + 1 ) / this.radialSegments );
+			uvd = new THREE.Vector2( i / this.segments, ( j + 1 ) / this.radialSegments );
 
 			this.faces.push( new THREE.Face4( a, b, c, d ) );
 			this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc, uvd ] );