Added loading indication and "start" button to scene loader example.

examples/scene_test.html

@@ -5,7 +5,8 @@
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
-				background:#fff;
+				background:#000;
+				color:#fff;
 				padding:0;
 				margin:0;
 				overflow:hidden;
@@ -16,14 +17,57 @@
 			#info {
 				position: absolute;
 				top: 0px; width: 100%;
-				color: #000;
 				padding: 5px;
 				font-family: Monospace;
 				font-size: 13px;
 				text-align: center;
+				z-index:100;
 			}
 			
-			a { color:skyblue }
+			#progress {
+				color:red;
+				top:7em;
+				width: 100%;
+				font-size:3em;
+				font-variant:small-caps;
+				font-weight:bold;
+				position:absolute;
+				z-index:100;
+				text-align: center;
+				text-shadow: #000 0px 0px 10px;
+				display:none;
+			}
+			
+			#start {
+				color:#fff;
+				text-shadow: #000 0px 0px 2px;
+				padding:0.1em 0.3em;
+				width:3em;
+				text-align: center;
+				/*
+				font-size:0.8em;
+				-moz-box-shadow: 0px 0px 5px #000;
+				-webkit-box-shadow: 0px 0px 5px #000;
+				box-shadow: 0px 0px 5px #000;
+				*/
+				display:none;
+			}
+			
+			.enabled {
+				color: lime!important;
+				cursor:pointer;
+			}
+			
+			.enabled:hover {
+				text-shadow: #0f0 0px 0px 5px !important;
+			}
+			
+			.disabled {
+				background:gray;
+				cursor:default;
+			}
+			
+			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; }
 		</style>
@@ -34,6 +78,11 @@
 			<a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
 		</div>
 
+		<div id="progress">
+			<span id="message">Loading ...</span>
+			<center><div id="start" class="disabled">Start</div></center>
+		</div>
+		
 		<pre id="log"></pre>
 
 		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
@@ -46,7 +95,7 @@
 
 			var container,stats;
 
-			var camera, scene;
+			var camera, scene, loaded;
 			var renderer;
 
 			var mesh, zmesh, geometry;
@@ -60,18 +109,33 @@
 
 			init();
 
+			function $( id ) {
+				
+				return document.getElementById( id );
+				
+			}
+			
 			function init() {
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
+				var loadScene = createLoadScene();
+				scene  = loadScene.scene;
+				camera = loadScene.camera;
+				
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
 				container.appendChild( renderer.domElement );
 
+				$( "start" ).addEventListener( 'click', onStartClick, false );
+
+				setInterval( loop, 1000/60 );
+
 				var callback_sync = function( result ) {
 				
+					/*
 					scene = result.scene;
 					camera = result.currentCamera;
 					
@@ -80,12 +144,14 @@
 					
 					renderer.setClearColor( result.bgColor.hex, result.bgAlpha );
 					
-					setInterval( loop, 1000/60 );
+					*/
 
 				}
 				
 				var callback_async = function( result ) {
 				
+					loaded = result;
+					
 					var mat_veyron = result.geometries[ "veyron" ].materials;
 					
 					mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
@@ -95,10 +161,14 @@
 					mat_veyron[ 4 ][ 0 ] = result.materials[ "chrome" ];
 					mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
 					
+					$( "message" ).style.display = "none";
+					$( "start" ).style.display = "block";
+					$( "start" ).className = "enabled";
+					
 				}
 				
+				$( "progress" ).style.display = "block";
 				SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async );
-				
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -108,6 +178,26 @@
 
 			}
 
+			function setButtonActive( id ) {
+			
+				$( "start" ).style.backgroundColor = "green";
+					
+			}
+			
+			function onStartClick() {
+			
+				$( "progress" ).style.display = "none";
+				
+				scene = loaded.scene;
+				camera = loaded.currentCamera;
+				
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				
+				renderer.setClearColor( loaded.bgColor.hex, loaded.bgAlpha );
+				
+			}
+			
 			function onDocumentMouseMove(event) {
 
 				mouseX = ( event.clientX - windowHalfX );
@@ -115,6 +205,46 @@
 
 			}
 
+			function createLoadScene() {
+			
+				var result = {
+				
+					scene:  new THREE.Scene(),
+					camera: new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
+					
+				};
+				
+				result.camera.position.z = 100;
+				
+				var object, geometry, material, light, count = 100, range = 150;
+				
+				material = new THREE.MeshLambertMaterial( { color:0xffffff } );
+				geometry = new Cube( 5, 5, 5 );
+				
+				for( var i = 0; i < count; i++ ) {
+				
+					object = new THREE.Mesh( geometry, material );
+					object.position.x = ( Math.random() - 0.5 ) * range;
+					object.position.y = ( Math.random() - 0.5 ) * range;
+					object.position.z = ( Math.random() - 0.5 ) * range;
+					object.rotation.x = Math.random() * 6;
+					object.rotation.y = Math.random() * 6;
+					object.rotation.z = Math.random() * 6;
+					result.scene.addObject( object );
+					
+				}
+				
+				light = new THREE.PointLight( 0xffffff );
+				result.scene.addLight( light );
+
+				light = new THREE.DirectionalLight( 0x111111 );
+				light.position.x = 1;
+				result.scene.addLight( light );
+
+				return result;
+				
+			}
+			
 			function loop() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .001;
@@ -128,7 +258,7 @@
 
 			function log( text ) {
 
-				var e = document.getElementById("log");
+				var e = $("log");
 				e.innerHTML = text + "<br/>" + e.innerHTML;
 
 			}