GUI: Fixed delay between render of sceneHelpers and scene. Auto-select imported object.

gui/index.html

@@ -29,8 +29,9 @@
 
 		<script type="text/javascript" src="js/UI.js"></script>
 		<script type="text/javascript" src="js/ui/Viewport.js"></script>
-		<script type="text/javascript" src="js/ui/SideBar.js"></script>
-		<script type="text/javascript" src="js/ui/SideBar.Properties.js"></script>
+		<script type="text/javascript" src="js/ui/Sidebar.js"></script>
+		<script type="text/javascript" src="js/ui/Sidebar.Outliner.js"></script>
+		<script type="text/javascript" src="js/ui/Sidebar.Properties.js"></script>
 		<script type="text/javascript" src="js/ui/MenuBar.js"></script>
 
 		<script>
@@ -54,7 +55,7 @@
 			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( viewport.dom );
 
-			var sidebar = new SideBar( signals );
+			var sidebar = new Sidebar( signals );
 			sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
 			sidebar.setTop( '32px' );
 			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
@@ -90,6 +91,7 @@
 							loader.parse( xml, function ( collada ) {
 
 								signals.objectAdded.dispatch( collada.scene );
+								signals.objectSelected.dispatch( collada.scene );
 
 							} );
 
@@ -104,6 +106,7 @@
 							var mesh = new THREE.Mesh( geometry, material );
 
 							signals.objectAdded.dispatch( mesh );
+							signals.objectSelected.dispatch( mesh );
 
 							break;
 
@@ -114,6 +117,7 @@
 							var object = loader.parse( contents );
 
 							signals.objectAdded.dispatch( object );
+							signals.objectSelected.dispatch( object );
 
 							break;
 
@@ -127,15 +131,12 @@
 
 							var loader = new THREE.VTKLoader();
 
-							console.log( loader );
-
 							var geometry = loader.parse( contents );
 							var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 							var mesh = new THREE.Mesh( geometry, material );
 
-							console.log( mesh );
-
 							signals.objectAdded.dispatch( mesh );
+							signals.objectSelected.dispatch( mesh );
 
 							break;
 
@@ -155,6 +156,7 @@
 			var mesh = new THREE.Mesh( geometry, material );
 
 			signals.objectAdded.dispatch( mesh );
+			signals.objectSelected.dispatch( mesh );
 
 			//
 

gui/js/ui/Sidebar.Outliner.js

@@ -0,0 +1,15 @@
+Sidebar.Outliner = function ( signals ) {
+
+	var selected = null;
+
+	var container = new UI.Panel();
+	container.setPadding( '8px' );
+	container.setBorderTop( '1px solid #ccc' );
+
+	container.add( new UI.Text().setText( 'OUTLINER' ).setColor( '#666' ) );
+
+	container.add( new UI.Break(), new UI.Break() );
+
+	return container;
+
+}

gui/js/ui/SideBar.Properties.js → gui/js/ui/Sidebar.Properties.js

@@ -1,4 +1,4 @@
-var Properties = function ( signals ) {
+Sidebar.Properties = function ( signals ) {
 
 	var selected = null;
 

gui/js/ui/SideBar.js → gui/js/ui/Sidebar.js

@@ -1,10 +1,13 @@
-var SideBar = function ( signals ) {
+var Sidebar = function ( signals ) {
 
 	var container = new UI.Panel( 'absolute' );
 	container.setWidth( '300px' ).setHeight( '100%' );
 	container.setBackgroundColor( '#eee' );
 
-	var properties = new Properties( signals );
+	var outliner = new Sidebar.Outliner( signals );
+	container.add( outliner );
+
+	var properties = new Sidebar.Properties( signals );
 	container.add( properties );
 
 	return container;

gui/js/ui/Viewport.js

@@ -193,6 +193,7 @@ var Viewport = function ( signals ) {
 
 	var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, clearColor: 0xaaaaaa, clearAlpha: 1 } );
 	renderer.autoClear = false;
+	renderer.autoUpdateScene = false;
 	container.dom.appendChild( renderer.domElement );
 
 	animate();
@@ -208,6 +209,8 @@ var Viewport = function ( signals ) {
 
 	function render() {
 
+		scene.updateMatrixWorld()
+
 		renderer.clear();
 		renderer.render( sceneHelpers, camera );
 		renderer.render( scene, camera );