Cleaned up Camaro example code a bit.

examples/webgl_lights_deferred_arealights.html

@@ -225,16 +225,87 @@
 			function initObjects() {
 
 				var loader = new THREE.BinaryLoader();
-				loader.load( "obj/box/box.js", function( geometry, materials ) {
+				loader.load( "obj/box/box.js", function ( geometry, materials ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffaa55, specular: 0x888888, shininess: 10 } ) );
-					object.position.x = 0;
-					object.position.y = 0;
+					var material = new THREE.MeshPhongMaterial( { color: 0xffaa55, specular: 0x888888, shininess: 10 } );
+					var object = new THREE.Mesh( geometry, material );
 					object.scale.multiplyScalar( 2 );
 					scene.add( object );
 
 				} );
 
+				/*
+				var loader = new THREE.BinaryLoader();
+				loader.load( "obj/veyron/VeyronNoUv_bin.js", function ( geometry ) {
+
+					var r = "textures/cube/Bridge2/";
+					var urls = [
+						r + "posx.jpg", r + "negx.jpg",
+						r + "posy.jpg", r + "negy.jpg",
+						r + "posz.jpg", r + "negz.jpg"
+					];
+
+					var textureCube = THREE.ImageUtils.loadTextureCube( urls );
+					textureCube.format = THREE.RGBFormat;
+
+					var materials = [
+						// tires + inside
+						new THREE.MeshLambertMaterial( {
+							color: 0x050505
+						} ),
+						// wheels + extras chrome
+						new THREE.MeshLambertMaterial( {
+							color: 0xffffff,
+							envMap: textureCube
+						} ),
+						// back / top / front torso
+						new THREE.MeshLambertMaterial( {
+							color: 0x000000,
+							ambient: 0x000000,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.15
+						} ),
+						// glass
+						new THREE.MeshLambertMaterial( {
+							color: 0x101046,
+							envMap: textureCube,
+							opacity: 0.25,
+							transparent: true
+						} ),
+						// sides torso
+						new THREE.MeshLambertMaterial( {
+							color: 0xffffff,
+							envMap: textureCube
+						} ),
+						// engine
+						new THREE.MeshLambertMaterial( {
+							color: 0xffffff,
+							envMap: textureCube
+						} ),
+						// backlights
+						new THREE.MeshLambertMaterial( {
+							color: 0xff0000,
+							opacity: 0.5,
+							transparent: true
+						} ),
+						// backsignals
+						new THREE.MeshLambertMaterial( {
+							color: 0xffbb00,
+							opacity: 0.5,
+							transparent: true
+						} )
+					];
+
+					var object = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
+					object.position.y = 5;
+					object.rotation.y = Math.PI / 4;
+					object.scale.multiplyScalar( 0.1 );
+					scene.add( object );
+
+				} );
+				*/
+
 			}
 
 

examples/webgl_materials_cars_camaro.html

@@ -115,26 +115,109 @@
 
 				var camaroMaterials = {
 
-					body: [],
-					chrome: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
-					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
-					glass: new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, combine: THREE.MixOperation, reflectivity: 0.25, transparent: true } ),
-					tire: new THREE.MeshLambertMaterial( { color: 0x050505 } ),
-					interior: new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
-					black: new THREE.MeshLambertMaterial( { color: 0x000000 } )
-
-				}
-
-				camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
-				camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
-				camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-
-				camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
-				camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
-				camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
+					body: {
+
+						Orange: new THREE.MeshLambertMaterial( {
+							color: 0xff6600,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.3
+						} ),
+
+						Blue: new THREE.MeshLambertMaterial( {
+							color: 0x226699,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.3
+						} ),
+
+						Red: new THREE.MeshLambertMaterial( {
+							color: 0x660000,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Black: new THREE.MeshLambertMaterial( {
+							color: 0x000000,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						White: new THREE.MeshLambertMaterial( {
+							color: 0xffffff,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Carmine: new THREE.MeshPhongMaterial( {
+							color: 0x770000,
+							specular: 0xffaaaa,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} ),
+
+						Gold: new THREE.MeshPhongMaterial( {
+							color: 0xaa9944,
+							specular: 0xbbaa99,
+							shininess: 50,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} ),
+
+						Bronze: new THREE.MeshPhongMaterial( {
+							color: 0x150505,
+							specular: 0xee6600,
+							shininess: 10,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Chrome: new THREE.MeshPhongMaterial( {
+							color: 0xffffff,
+							specular:0xffffff,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} )
+
+					},
+
+					chrome: new THREE.MeshLambertMaterial( {
+						color: 0xffffff,
+						envMap: textureCube
+					} ),
+
+					darkchrome: new THREE.MeshLambertMaterial( {
+						color: 0x444444,
+						envMap: textureCube
+					} ),
+
+					glass: new THREE.MeshBasicMaterial( {
+						color: 0x223344,
+						envMap: textureCube,
+						opacity: 0.25,
+						combine: THREE.MixOperation,
+						reflectivity: 0.25,
+						transparent: true
+					} ),
+
+					tire: new THREE.MeshLambertMaterial( {
+						color: 0x050505
+					} ),
+
+					interior: new THREE.MeshPhongMaterial( {
+						color: 0x050505,
+						shininess: 20
+					} ),
+
+					black: new THREE.MeshLambertMaterial( {
+						color: 0x000000
+					} )
+
+				};
 
 				var loader = new THREE.BinaryLoader();
 				loader.load( "obj/camaro/CamaroNoUv_bin.js", function( geometry ) { createScene( geometry, camaroMaterials ) } );
@@ -157,25 +240,20 @@
 
 			}
 
-			function $( id ) { return document.getElementById( id ) }
-
-
 			function createButtons( materials, faceMaterial ) {
 
-				var i, src = "", parent = $( "buttons" );
-
-				for( i = 0; i < materials.length; i ++ ) {
+				var buttons = document.getElementById( "buttons" );
 
-					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
-
-				}
+				for ( var key in materials ) {
 
-				parent.innerHTML = src;
+					var button = document.createElement( 'button' );
+					button.textContent = key;
+					button.addEventListener( 'click', function ( event ) {
 
-				for( i = 0; i < materials.length; i ++ ) {
+						faceMaterial.materials[ 0 ] = materials[ this.textContent ];
 
-					$( "m" + i ).counter = i;
-					$( "m" + i ).addEventListener( 'click', function() { faceMaterial.materials[ 0 ] = materials[ this.counter ][ 1 ] }, false );
+					}, false );
+					buttons.appendChild( button );
 
 				}
 
@@ -185,7 +263,7 @@
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
-				m.materials[ 0 ] = materials.body[ 0 ][ 1 ]; // car body
+				m.materials[ 0 ] = materials.body[ "Orange" ]; // car body
 				m.materials[ 1 ] = materials.chrome; // wheels chrome
 				m.materials[ 2 ] = materials.chrome; // grille chrome
 				m.materials[ 3 ] = materials.darkchrome; // door lines

examples/webgl_materials_cars_camaro_crosseyed.html

@@ -126,26 +126,109 @@
 
 				var camaroMaterials = {
 
-					body: [],
-					chrome: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
-					darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
-					glass: new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, combine: THREE.MixOperation, reflectivity: 0.25, transparent: true } ),
-					tire: new THREE.MeshLambertMaterial( { color: 0x050505 } ),
-					interior: new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
-					black: new THREE.MeshLambertMaterial( { color: 0x000000 } )
-
-				}
-
-				camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
-				camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
-				camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-
-				camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
-				camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
-				camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
-				camaroMaterials.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
+					body: {
+
+						Orange: new THREE.MeshLambertMaterial( {
+							color: 0xff6600,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.3
+						} ),
+
+						Blue: new THREE.MeshLambertMaterial( {
+							color: 0x226699,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.3
+						} ),
+
+						Red: new THREE.MeshLambertMaterial( {
+							color: 0x660000,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Black: new THREE.MeshLambertMaterial( {
+							color: 0x000000,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						White: new THREE.MeshLambertMaterial( {
+							color: 0xffffff,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Carmine: new THREE.MeshPhongMaterial( {
+							color: 0x770000,
+							specular: 0xffaaaa,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} ),
+
+						Gold: new THREE.MeshPhongMaterial( {
+							color: 0xaa9944,
+							specular: 0xbbaa99,
+							shininess: 50,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} ),
+
+						Bronze: new THREE.MeshPhongMaterial( {
+							color: 0x150505,
+							specular: 0xee6600,
+							shininess: 10,
+							envMap: textureCube,
+							combine: THREE.MixOperation,
+							reflectivity: 0.5
+						} ),
+
+						Chrome: new THREE.MeshPhongMaterial( {
+							color: 0xffffff,
+							specular:0xffffff,
+							envMap: textureCube,
+							combine: THREE.MultiplyOperation
+						} )
+
+					},
+
+					chrome: new THREE.MeshLambertMaterial( {
+						color: 0xffffff,
+						envMap: textureCube
+					} ),
+
+					darkchrome: new THREE.MeshLambertMaterial( {
+						color: 0x444444,
+						envMap: textureCube
+					} ),
+
+					glass: new THREE.MeshBasicMaterial( {
+						color: 0x223344,
+						envMap: textureCube,
+						opacity: 0.25,
+						combine: THREE.MixOperation,
+						reflectivity: 0.25,
+						transparent: true
+					} ),
+
+					tire: new THREE.MeshLambertMaterial( {
+						color: 0x050505
+					} ),
+
+					interior: new THREE.MeshPhongMaterial( {
+						color: 0x050505,
+						shininess: 20
+					} ),
+
+					black: new THREE.MeshLambertMaterial( {
+						color: 0x000000
+					} )
+
+				};
 
 				var loader = new THREE.BinaryLoader();
 				loader.load( "obj/camaro/CamaroNoUv_bin.js", function( geometry ) { createScene( geometry, camaroMaterials ) } );
@@ -168,25 +251,20 @@
 
 			}
 
-			function $( id ) { return document.getElementById( id ) }
-
-
 			function createButtons( materials, faceMaterial ) {
 
-				var i, src = "", parent = $( "buttons" );
-
-				for( i = 0; i < materials.length; i ++ ) {
+				var buttons = document.getElementById( "buttons" );
 
-					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
-
-				}
+				for ( var key in materials ) {
 
-				parent.innerHTML = src;
+					var button = document.createElement( 'button' );
+					button.textContent = key;
+					button.addEventListener( 'click', function ( event ) {
 
-				for( i = 0; i < materials.length; i ++ ) {
+						faceMaterial.materials[ 0 ] = materials[ this.textContent ];
 
-					$( "m" + i ).counter = i;
-					$( "m" + i ).addEventListener( 'click', function() { faceMaterial.materials[ 0 ] = materials[ this.counter ][ 1 ] }, false );
+					}, false );
+					buttons.appendChild( button );
 
 				}
 
@@ -196,7 +274,7 @@
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
-				m.materials[ 0 ] = materials.body[ 0 ][ 1 ]; // car body
+				m.materials[ 0 ] = materials.body[ "Orange" ]; // car body
 				m.materials[ 1 ] = materials.chrome; // wheels chrome
 				m.materials[ 2 ] = materials.chrome; // grille chrome
 				m.materials[ 3 ] = materials.darkchrome; // door lines