diff --git a/examples/scene_test.html b/examples/scene_test.html
index 6132530f33f24853235d0d1a79869c76bf41b378..4c14056499f9438de3ce7451999f62ece3af4f17 100644
--- a/examples/scene_test.html
+++ b/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;
+ }
+
@@ -90,6 +132,11 @@
Loading ...
@@ -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 += "
[+] " + label + "
";
+ html += "
";
+
+ for( var o in objects ) {
+
+ html += o + "
";
+
+ }
+ html += "
";
+
+ 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;
+
+ }
+