Added very simple user interface for checking what's inside the scene (in scene loader example).

Click on small [+] in the upper left corner.

examples/scene_test.html

@@ -83,6 +83,48 @@
 			a { color:red }
 			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
+			
+			#scene_explorer {
+				background:transparent;
+				color:#fff;
+				width:200px;
+				position:absolute;
+				text-align:left;
+				top:0px;
+				z-index:200;
+				overflow:auto;
+			}
+			
+			#section_exp {
+				background:rgba(0,0,50,0.5);
+				padding:0.5em 0;
+				display:none;
+			}
+			
+			#scene_explorer h3 { 
+				font-size:1em;
+				padding:0;
+				margin:0;
+				color:orange;
+			}
+			
+			#scene_explorer a {
+				color:#555;
+				font-weight:bold;
+				text-decoration:none;
+				font-size:1.2em;
+				font-family:Monospace;
+			}
+			#scene_explorer a:hover {
+				background:#555;
+				color:rgba(0,0,50,1);
+			}
+			
+			.part {
+				display:none;
+				padding:0 0 0.5em 2em;
+			}
+			
 		</style>
 	</head>
 
@@ -90,6 +132,11 @@
 		<div id="info">
 			<a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
 		</div>
+		
+		<div id="scene_explorer">
+			<a id="plus_exp" href="#">[+]</a>
+			<div id="section_exp"></div>
+		</div>
 
 		<div id="progress">
 			<span id="message">Loading ...</span>
@@ -173,6 +220,8 @@
 					
 					*/
 
+					refreshSceneView( result );
+					
 				}
 				
 				var callback_async = function( result ) {
@@ -193,6 +242,8 @@
 					$( "start" ).style.display = "block";
 					$( "start" ).className = "enabled";
 					
+					refreshSceneView( result );
+					
 				}
 				
 				$( "progress" ).style.display = "block";
@@ -201,8 +252,11 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
+				stats.domElement.style.right = '0px';
 				stats.domElement.style.zIndex = 100;
 				container.appendChild( stats.domElement );
+				
+				$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
 
 			}
 
@@ -291,6 +345,79 @@
 
 			}
 
+			// Scene explorer user interface
+			
+			function toggle( id ) {
+				
+				var scn = $( "section_" + id ).style,
+					btn = $( "plus_" + id );
+				
+				if ( scn.display == "block" ) {
+				
+					scn.display = "none";
+					btn.innerHTML = "[+]";
+					
+				}
+				else {
+					
+					scn.display = "block";
+					btn.innerHTML = "[-]";
+					
+				}
+					
+			}
+			
+			function createToggle( label ) { return function() { toggle( label ) } };
+			
+			function refreshSceneView( result ) {
+				
+				$( "section_exp" ).innerHTML = generateSceneView( result );
+
+				var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
+				
+				for ( var i = 0; i < config.length; i++ )
+					$( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
+
+			}
+			
+			function generateSection( label, id, objects ) {
+				
+				var html = "";
+				
+				html += "<h3><a id='plus_" + id + "' href='#'>[+]</a> " + label + "</h3>";
+				html += "<div id='section_" + id + "' class='part'>";
+				
+				for( var o in objects ) {
+				
+					html += o + "<br/>";
+					
+				}
+				html += "</div>";
+				
+				return html;
+			
+			}
+			
+			function generateSceneView( result ) {
+				
+				var config = [
+				[ "Objects",    "obj", result.objects ],
+				[ "Geometries", "geo", result.geometries ],
+				[ "Materials",  "mat", result.materials ],
+				[ "Textures",   "tex", result.textures ],
+				[ "Lights",     "lit", result.lights ],
+				[ "Cameras",    "cam", result.cameras ]
+				];
+				
+				var html = "";
+				
+				for ( var i = 0; i < config.length; i++ )
+					html += generateSection( config[i][0], config[i][1], config[i][2] );
+
+				return html;
+				
+			}
+
 		</script>
 
 	</body>