Editor: Modularised Viewport.Info.

editor/css/main.css

@@ -3,7 +3,7 @@
 }
 
 body {
-	font-family: Arial, sans-serif;
+	font-family: Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	margin: 0;
 	overflow: hidden;

editor/index.html

@@ -82,6 +82,7 @@
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
+		<script src="js/Viewport.Info.js"></script>
 
 		<script>
 

editor/js/Viewport.Info.js

+Viewport.Info = function ( editor ) {
+
+	var signals = editor.signals;
+
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
+	container.setLeft( '10px' );
+	container.setBottom( '10px' );
+	container.setFontSize( '12px' );
+	container.setColor( '#fff' );
+
+	var objectsText = new UI.Text( '0' ).setMarginLeft( '6px' );
+	var verticesText = new UI.Text( '0' ).setMarginLeft( '6px' );
+	var trianglesText = new UI.Text( '0' ).setMarginLeft( '6px' );
+
+	container.add( new UI.Text( 'objects' ), objectsText, new UI.Break() );
+	container.add( new UI.Text( 'vertices' ), verticesText, new UI.Break() );
+	container.add( new UI.Text( 'triangles' ), trianglesText, new UI.Break() );
+
+	signals.sceneGraphChanged.add( function () {
+
+		update();
+
+	} );
+
+	signals.objectChanged.add( function ( object ) {
+
+		// TODO: geometryChanged
+
+		if ( object !== editor.camera ) {
+
+			update();
+
+		}
+
+	} );
+
+	//
+
+
+
+	function update() {
+
+		var scene = editor.scene;
+
+		var objects = 0, vertices = 0, triangles = 0;
+
+		for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
+
+			var object = scene.children[ i ];
+
+			object.traverseVisible( function ( object ) {
+
+				objects ++;
+
+				if ( object instanceof THREE.Mesh ) {
+
+					var geometry = object.geometry;
+
+					if ( geometry instanceof THREE.Geometry ) {
+
+						vertices += geometry.vertices.length;
+						triangles += geometry.faces.length;
+
+					} else if ( geometry instanceof THREE.BufferGeometry ) {
+
+						vertices += geometry.attributes.position.array.length / 3;
+
+						if ( geometry.attributes.index !== undefined ) {
+
+							triangles += geometry.attributes.index.array.length / 3;
+
+						} else {
+
+							triangles += geometry.attributes.position.array.length / 9;
+
+						}
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		objectsText.setValue( objects.format() );
+		verticesText.setValue( vertices.format() );
+		trianglesText.setValue( triangles.format() );
+
+	}
+
+	return container;
+
+}

editor/js/Viewport.js

@@ -5,14 +5,7 @@ var Viewport = function ( editor ) {
 	var container = new UI.Panel();
 	container.setPosition( 'absolute' );
 
-	var info = new UI.Text();
-	info.setPosition( 'absolute' );
-	info.setRight( '5px' );
-	info.setBottom( '5px' );
-	info.setFontSize( '12px' );
-	info.setColor( '#ffffff' );
-	info.setValue( 'objects: 0, vertices: 0, faces: 0' );
-	container.add( info );
+	container.add( new Viewport.Info( editor ) );
 
 	var scene = editor.scene;
 	var sceneHelpers = editor.sceneHelpers;
@@ -239,7 +232,6 @@ var Viewport = function ( editor ) {
 	signals.sceneGraphChanged.add( function () {
 
 		render();
-		updateInfo();
 
 	} );
 
@@ -325,8 +317,6 @@ var Viewport = function ( editor ) {
 
 			}
 
-			updateInfo();
-
 		}
 
 		render();
@@ -485,49 +475,6 @@ var Viewport = function ( editor ) {
 
 	//
 
-	function updateInfo() {
-
-		var objects = 0;
-		var vertices = 0;
-		var faces = 0;
-
-		scene.traverse( function ( object ) {
-
-			if ( object instanceof THREE.Mesh ) {
-
-				objects ++;
-
-				var geometry = object.geometry;
-
-				if ( geometry instanceof THREE.Geometry ) {
-
-					vertices += geometry.vertices.length;
-					faces += geometry.faces.length;
-
-				} else if ( geometry instanceof THREE.BufferGeometry ) {
-
-					vertices += geometry.attributes.position.array.length / 3;
-
-					if ( geometry.attributes.index !== undefined ) {
-
-						faces += geometry.attributes.index.array.length / 3;
-
-					} else {
-
-						faces += geometry.attributes.position.array.length / 9;
-
-					}
-
-				}
-
-			}
-
-		} );
-
-		info.setValue( 'objects: ' + objects.format() + ', vertices: ' + vertices.format() + ', faces: ' + faces.format() );
-
-	}
-
 	function updateMaterials() {
 
 		editor.scene.traverse( function ( node ) {