Added support for cube textures and background color to scene loader.

Also made car prettier and showed how to modify the scene after loading.

examples/scene_test.html

@@ -56,15 +56,19 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			document.addEventListener('mousemove', onDocumentMouseMove, false);
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 			init();
 
-
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.domElement.style.position = "relative";
+				container.appendChild( renderer.domElement );
 
 				var callback = function( result ) {
 				
@@ -73,17 +77,28 @@
 					
 					camera.aspect = window.innerWidth / window.innerHeight;
 					camera.updateProjectionMatrix();
-
-					setInterval(loop, 1000/60);
+					
+					renderer.setClearColor( result.bgColor.hex, result.bgAlpha );
+					
+					setInterval( loop, 1000/60 );
 
 				}
 				
-				SceneUtils.loadScene( "scenes/test_scene.js", callback );
+				var callback_async = function( result ) {
+				
+					var mat_veyron = result.geometries[ "veyron" ].materials;
+					
+					mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
+					mat_veyron[ 1 ][ 0 ] = result.materials[ "chrome" ];
+					mat_veyron[ 2 ][ 0 ] = result.materials[ "darkerchrome" ];
+					mat_veyron[ 3 ][ 0 ] = result.materials[ "glass" ];
+					mat_veyron[ 4 ][ 0 ] = result.materials[ "chrome" ];
+					mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
+					
+				}
+				
+				SceneUtils.loadScene( "scenes/test_scene.js", callback, callback_async );
 				
-				renderer = new THREE.WebGLRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				renderer.domElement.style.position = "relative";
-				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';

examples/scenes/test_scene.js

@@ -13,7 +13,7 @@ var scene = {
 
 	"cube2" : {
 		"geometry" : "cube",
-		"materials": [ "basic_black" ],
+		"materials": [ "basic_white" ],
 		"position" : [ 0, 0, 0 ],
 		"rotation" : [ 0, -0.3, 0 ],
 		"scale"	   : [ 2, 2, 2 ],
@@ -149,12 +149,7 @@ var scene = {
 	"veyron": {
 		"type": "bin_mesh",
 		"url" : "obj/veyron/VeyronNoUv_bin.js"
-	},
-
-	"TextureCube": {
-		"type": "ascii_mesh",
-		"url" : "obj/textureTest/textureTest_baked.js"
-	},
+	}
 	
 	
 },
@@ -180,6 +175,11 @@ var scene = {
 		"type": "MeshBasicMaterial",
 		"parameters": { color: 0x000000, wireframe: true } 
 	},
+
+	"basic_white": {
+		"type": "MeshBasicMaterial",
+		"parameters": { color: 0xffffff, wireframe: true } 
+	},
 	
 	"basic_blue": {
 		"type": "MeshBasicMaterial",
@@ -211,6 +211,26 @@ var scene = {
 		"parameters": { color:0x000000, specular: 0xaa5500 } 
 	},
 	
+	"chrome": {
+		"type": "MeshLambertMaterial",
+		"parameters": { color: 0xffffff, env_map: "textureCube" }
+	},
+
+	"darkerchrome": {
+		"type": "MeshLambertMaterial",
+		"parameters": { color: 0x222222, env_map: "textureCube" }
+	},
+	
+	"glass": {
+		"type": "MeshLambertMaterial",
+		"parameters": { color: 0x101046, env_map: "textureCube", opacity: 0.25 }
+	},
+
+	"interior": {
+		"type": "MeshLambertMaterial",
+		"parameters": { color: 0x050505 }
+	},
+	
 	"face": {
 		"type": "MeshFaceMaterial",
 		"parameters": {}
@@ -218,6 +238,21 @@ var scene = {
 	
 },
 
+"textures": 
+{
+	
+	"textureCube": {
+		"url": [ "textures/cube/SwedishRoyalCastle/px.jpg",
+				 "textures/cube/SwedishRoyalCastle/nx.jpg",		
+				 "textures/cube/SwedishRoyalCastle/py.jpg",
+				 "textures/cube/SwedishRoyalCastle/ny.jpg",
+				 "textures/cube/SwedishRoyalCastle/pz.jpg",
+				 "textures/cube/SwedishRoyalCastle/nz.jpg"
+				]
+	}
+	
+},
+
 "cameras":
 {
 	"cam1": {
@@ -273,13 +308,21 @@ var scene = {
 		"type"    : "exp2",
 		"color"   : [1,1,1],
 		"density" : 0.005,
+	},
+	
+	"black": {
+		"type"    : "exp2",
+		"color"   : [0,0,0],
+		"density" : 0.005,
 	}
 },
 	
 "defaults" : 
 {
-	"camera": "cam1",
-	"fog"	: "exponential"
+	"bgcolor" : [0,0,0],
+	"bgalpha" : 1,
+	"camera"  : "cam1",
+	"fog"	  : "black"
 }
 
 };

src/extras/SceneUtils.js

@@ -1,12 +1,16 @@
 var SceneUtils = {
 	
-	loadScene : function( url, callback ) {
+	loadScene : function( url, callback, callback_final ) {
 
-		var dg, dm, dd, dl, dc, df, f,
-			g, o, m, l, p, c, t,
-			geometry, material, camera, fog, materials,
-			loader, callback_model,
-			worker = new Worker( url );
+		var dg, dm, dd, dl, dc, df, dt,
+			g, o, m, l, p, c, t, f, tt, pp,
+			geometry, material, camera, fog, 
+			texture, images,
+			materials,
+			loader, worker;
+			
+		worker = new Worker( url );
+		loader = new THREE.Loader();
 
 		worker.onmessage = function( event ) {
 
@@ -59,7 +63,17 @@ var SceneUtils = {
 			
 			function create_callback( id ) {
 				
-				return function( geo ) { handle_mesh( geo, id ); }
+				return function( geo ) {
+					
+					handle_mesh( geo, id );
+					async_counter -= 1;
+					if( async_counter == 0 ) {
+						
+						callback_final( result );
+						
+					}
+					
+				}
 				
 			}
 			
@@ -70,6 +84,7 @@ var SceneUtils = {
 				scene: new THREE.Scene(),
 				geometries: {},
 				materials: {},
+				textures: {},
 				objects: {},
 				cameras: {},
 				lights: {},
@@ -77,10 +92,23 @@ var SceneUtils = {
 			
 			};
 			
-			loader = new THREE.Loader();
 			
 			// geometries	
 			
+			var async_counter = 0;
+			
+			for( dg in data.geometries ) {
+				
+				g = data.geometries[ dg ];
+				
+				if ( g.type == "bin_mesh" || g.type == "ascii_mesh" ) {
+					
+					async_counter += 1;
+					
+				}
+				
+			}
+			
 			for( dg in data.geometries ) {
 				
 				g = data.geometries[ dg ];
@@ -126,12 +154,44 @@ var SceneUtils = {
 				
 			}
 
+			// textures
+			
+			for( dt in data.textures ) {
+				
+				tt = data.textures[ dt ];
+				
+				if( tt.url instanceof Array ) {
+					
+					images = ImageUtils.loadArray( tt.url );
+					texture = new THREE.Texture( images );
+					
+				}
+				else {
+					
+					texture = ImageUtils.loadTexture( tt.url );
+					
+				}
+				
+				result.textures[ dt ] = texture;
+				
+			}
+			
 			// materials
 			
 			for( dm in data.materials ) {
 				
 				m = data.materials[ dm ];
 				
+				for( pp in m.parameters ) {
+					
+					if ( pp == "env_map" || pp == "map" ) {
+						
+						m.parameters[ pp ] = result.textures[ m.parameters[ pp ] ];
+						
+					}
+					
+				}
+				
 				material = new THREE[ m.type ]( m.parameters );
 				result.materials[ dm ] = material;
 				
@@ -231,6 +291,12 @@ var SceneUtils = {
 				
 			}
 			
+			c = data.defaults.bgcolor;
+			result.bgColor = new THREE.Color();
+			result.bgColor.setRGB( c[0], c[1], c[2] );
+			
+			result.bgColorAlpha = data.defaults.bgalpha;
+			
 			callback( result );
 
 		};