Editor: Modularised BufferGeometry.

editor/index.html

@@ -62,8 +62,10 @@
 		<script src="js/Sidebar.Renderer.js"></script>
 		<script src="js/Sidebar.Scene.js"></script>
 		<script src="js/Sidebar.Object3D.js"></script>
-		<script src="js/Sidebar.Geometry.js"></script>
 		<script src="js/Sidebar.Animation.js"></script>
+		<script src="js/Sidebar.Geometry.js"></script>
+		<script src="js/Sidebar.Geometry.Geometry.js"></script>
+		<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -0,0 +1,60 @@
+Sidebar.Geometry.BufferGeometry = function ( signals ) {
+
+	var container = new UI.Panel();
+
+	// vertices
+
+	var verticesRow = new UI.Panel();
+	var vertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
+
+	verticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
+	verticesRow.add( vertices );
+
+	container.add( verticesRow );
+
+	// faces
+
+	var facesRow = new UI.Panel();
+	var faces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
+
+	facesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );
+	facesRow.add( faces );
+
+	container.add( facesRow );
+
+	//
+
+	var update = function ( object ) {
+
+		var geometry = object.geometry;
+
+		if ( geometry instanceof THREE.BufferGeometry ) { 
+
+			container.setDisplay( 'block' );
+
+			vertices.setValue( geometry.attributes.position.array.length / 3 );
+
+			if ( geometry.attributes.index !== undefined ) {
+
+				faces.setValue( geometry.attributes.index.array.length / 3 );
+
+			} else {
+
+				faces.setValue( geometry.attributes.position.array.length / 9 );
+
+			}
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	};
+
+	signals.objectSelected.add( update );
+	signals.objectChanged.add( update );
+
+	return container;
+
+}

editor/js/Sidebar.Geometry.Geometry.js

@@ -0,0 +1,51 @@
+Sidebar.Geometry.Geometry = function ( signals ) {
+
+	var container = new UI.Panel();
+
+	// vertices
+
+	var verticesRow = new UI.Panel();
+	var vertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
+
+	verticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
+	verticesRow.add( vertices );
+
+	container.add( verticesRow );
+
+	// faces
+
+	var facesRow = new UI.Panel();
+	var faces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
+
+	facesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );
+	facesRow.add( faces );
+
+	container.add( facesRow );
+
+	//
+
+	var update = function ( object ) {
+
+		var geometry = object.geometry;
+
+		if ( geometry instanceof THREE.Geometry ) { 
+
+			container.setDisplay( 'block' );
+
+			vertices.setValue( geometry.vertices.length );
+			faces.setValue( geometry.faces.length );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	};
+
+	signals.objectSelected.add( update );
+	signals.objectChanged.add( update );
+
+	return container;
+
+}

editor/js/Sidebar.Geometry.js

@@ -5,7 +5,8 @@ Sidebar.Geometry = function ( editor ) {
 	var container = new UI.CollapsiblePanel();
 	container.setDisplay( 'none' );
 
-	container.addStatic( new UI.Text().setValue( 'GEOMETRY' ) );
+	var geometryType = new UI.Text().setTextTransform( 'uppercase' );
+	container.addStatic( geometryType );
 	container.add( new UI.Break() );
 
 	// uuid
@@ -40,35 +41,13 @@ Sidebar.Geometry = function ( editor ) {
 
 	container.add( geometryNameRow );
 
-	// class
+	// geometry
 
-	var geometryTypeRow = new UI.Panel();
-	var geometryType = new UI.Text().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
+	container.add( new Sidebar.Geometry.Geometry( signals ) );
 
-	geometryTypeRow.add( new UI.Text( 'Type' ).setWidth( '90px' ) );
-	geometryTypeRow.add( geometryType );
+	// buffergeometry
 
-	container.add( geometryTypeRow );
-
-	// vertices
-
-	var geometryVerticesRow = new UI.Panel();
-	var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
-
-	geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
-	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' ) );
-	geometryFacesRow.add( geometryFaces );
-
-	container.add( geometryFacesRow );
+	container.add( new Sidebar.Geometry.BufferGeometry( signals ) );
 
 	// parameters
 
@@ -89,8 +68,10 @@ Sidebar.Geometry = function ( editor ) {
 
 			geometryType.setValue( editor.getGeometryType( object.geometry ) );
 
-			updateFields( geometry );
+			geometryUUID.setValue( geometry.uuid );
+			geometryName.setValue( geometry.name );
 
+			//
 
 			if ( parameters !== undefined ) {
 
@@ -152,36 +133,6 @@ Sidebar.Geometry = function ( editor ) {
 	signals.objectSelected.add( build );
 	signals.objectChanged.add( build );
 
-	//
-
-	function updateFields( geometry ) {
-
-		geometryUUID.setValue( geometry.uuid );
-		geometryName.setValue( geometry.name );
-
-		if ( geometry instanceof THREE.Geometry ) {
-
-			geometryVertices.setValue( geometry.vertices.length );
-			geometryFaces.setValue( geometry.faces.length );
-
-		} else if ( geometry instanceof THREE.BufferGeometry ) {
-
-			geometryVertices.setValue( geometry.attributes.position.array.length / 3 );
-
-			if ( geometry.attributes.index !== undefined ) {
-
-				geometryFaces.setValue( geometry.attributes.index.array.length / 3 );
-
-			} else {
-
-				geometryFaces.setValue( geometry.attributes.position.array.length / 9 );
-
-			}
-
-		}
-
-	}
-
 	return container;
 
 }

editor/js/Sidebar.Material.js

@@ -134,7 +134,7 @@ Sidebar.Material = function ( editor ) {
 	// uniforms
 
 	var materialUniformsRow = new UI.Panel();
-	var materialUniforms = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' );
+	var materialUniforms = new UI.TextArea().setWidth( '150px' ).setHeight( '80px' );
 	materialUniforms.setValue( '' ).onChange( update );
 
 	materialUniformsRow.add( new UI.Text( 'Uniforms' ).setWidth( '90px' ) );
@@ -145,7 +145,7 @@ Sidebar.Material = function ( editor ) {
 	// vertex shader
 
 	var materialVertexShaderRow = new UI.Panel();
-	var materialVertexShader = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' );
+	var materialVertexShader = new UI.TextArea().setWidth( '150px' ).setHeight( '80px' );
 	materialVertexShader.setValue( 'void main() {\n\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}' ).onChange( update );
 
 	materialVertexShaderRow.add( new UI.Text( 'Vertex Shader' ).setWidth( '90px' ) );
@@ -156,7 +156,7 @@ Sidebar.Material = function ( editor ) {
 	// fragment shader
 
 	var materialFragmentShaderRow = new UI.Panel();
-	var materialFragmentShader = new UI.TextArea().setWidth( '150px' ).setHeight( '40px' );
+	var materialFragmentShader = new UI.TextArea().setWidth( '150px' ).setHeight( '80px' );
 	materialFragmentShader.setValue( 'void main() {\n\tgl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n}' ).onChange( update );
 
 	materialFragmentShaderRow.add( new UI.Text( 'Fragment Shader' ).setWidth( '90px' ) );