Editor: Added PlaneGeometry and CubeGeometry parameters panel.

editor/index.html

@@ -103,6 +103,8 @@
 		<script src="js/ui/Sidebar.Scene.js"></script>
 		<script src="js/ui/Sidebar.Object3D.js"></script>
 		<script src="js/ui/Sidebar.Geometry.js"></script>
+		<script src="js/ui/Sidebar.Geometry.PlaneGeometry.js"></script>
+		<script src="js/ui/Sidebar.Geometry.CubeGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/ui/Sidebar.Material.js"></script>
 		<script src="js/ui/Viewport.js"></script>

editor/js/ui/Menubar.Add.js

@@ -29,8 +29,6 @@ Menubar.Add = function ( signals ) {
 		var heightSegments = 1;
 
 		var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
-		geometry.name = 'Plane ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Plane ' + mesh.id;
 
@@ -57,8 +55,6 @@ Menubar.Add = function ( signals ) {
 		var depthSegments = 1;
 
 		var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
-		geometry.name = 'Cube ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Cube ' + mesh.id;
 
@@ -83,8 +79,6 @@ Menubar.Add = function ( signals ) {
 		var openEnded = false;
 
 		var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
-		geometry.name = 'Cylinder ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Cylinder ' + mesh.id;
 
@@ -105,8 +99,6 @@ Menubar.Add = function ( signals ) {
 		var heightSegments = 16;
 
 		var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
-		geometry.name = 'Sphere ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Sphere ' + mesh.id;
 
@@ -126,8 +118,6 @@ Menubar.Add = function ( signals ) {
 		var detail = 2;
 
 		var geometry = new THREE.IcosahedronGeometry ( radius, detail );
-		geometry.name = 'Icosahedron ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Icosahedron ' + mesh.id;
 
@@ -150,8 +140,6 @@ Menubar.Add = function ( signals ) {
 		var arc = Math.PI * 2;
 
 		var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
-		geometry.name = 'Torus ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'Torus ' + mesh.id;
 
@@ -176,8 +164,6 @@ Menubar.Add = function ( signals ) {
 		var heightScale = 1;
 
 		var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
-		geometry.name = 'TorusKnot ' + geometry.id;
-
 		var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
 		mesh.name = 'TorusKnot ' + mesh.id;
 

editor/js/ui/Sidebar.Geometry.CubeGeometry.js

@@ -0,0 +1,94 @@
+Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPaddingTop( '10px' );
+
+	var geometry = object.geometry;
+
+	// 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() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.CubeGeometry(
+			width.getValue(),
+			height.getValue(),
+			depth.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue(),
+			depthSegments.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

editor/js/ui/Sidebar.Geometry.PlaneGeometry.js

@@ -0,0 +1,73 @@
+Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPaddingTop( '10px' );
+
+	var geometry = object.geometry;
+
+	// 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() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.PlaneGeometry(
+			width.getValue(),
+			height.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

editor/js/ui/Sidebar.Geometry.TorusGeometry.js

@@ -72,6 +72,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 			tubularSegments.getValue(),
 			arc.getValue()
 		);
+
 		object.geometry.computeBoundingSphere();
 
 		signals.objectChanged.dispatch( object );

editor/js/ui/Sidebar.Geometry.js

@@ -92,9 +92,7 @@ Sidebar.Geometry = function ( signals ) {
 
 			objectType.setValue( getGeometryInstanceName( object.geometry ) );
 
-			geometryName.setValue( object.geometry.name );
-			geometryVertices.setValue( object.geometry.vertices.length );
-			geometryFaces.setValue( object.geometry.faces.length );
+			updateFields( selected );
 
 			//
 
@@ -105,7 +103,17 @@ Sidebar.Geometry = function ( signals ) {
 
 			}
 
-			if ( selected instanceof THREE.TorusGeometry ) {
+			if ( selected instanceof THREE.PlaneGeometry ) {
+
+				parameters = new Sidebar.Geometry.PlaneGeometry( signals, object );
+				container.add( parameters );
+
+			} else if ( selected instanceof THREE.CubeGeometry ) {
+
+				parameters = new Sidebar.Geometry.CubeGeometry( signals, object );
+				container.add( parameters );
+
+			} else if ( selected instanceof THREE.TorusGeometry ) {
 
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );
 				container.add( parameters );
@@ -122,6 +130,26 @@ Sidebar.Geometry = function ( signals ) {
 
 	} );
 
+	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 ) {