Material variation examples clean up.

examples/webgl_materials_variations_basic.html

@@ -40,7 +40,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, controls, objects = [];
+			var camera, scene, renderer, controls;
 			var particleLight;
 
 			var loader = new THREE.FontLoader();
@@ -87,23 +87,21 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
+				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-					var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
+					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
-					if( alpha >= 0.5 ) {
-						reflectionCube = null;
-					}
-
-					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
-
-						var reflectivity = beta;
-
-						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-							var diffuseColor = baseColor.clone().multiplyScalar( gamma );
+							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
 
-							var material = new THREE.MeshBasicMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
+							var material = new THREE.MeshBasicMaterial( {
+								map: imgTexture,
+								color: diffuseColor,
+								reflectivity: beta,
+								shading: THREE.SmoothShading,
+								envMap: alpha < 0.5 ? reflectionCube : null
+							} );
 
 							var mesh = new THREE.Mesh( geometry, material );
 
@@ -111,14 +109,16 @@
 							mesh.position.y = beta * 400 - 200;
 							mesh.position.z = gamma * 400 - 200;
 
-							objects.push( mesh );
-
 							scene.add( mesh );
+
 						}
+
 					}
+
 				}
 
 				function addLabel( name, location ) {
+
 					var textGeo = new THREE.TextGeometry( name, {
 
 						font: font,
@@ -133,6 +133,7 @@
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
+
 				}
 
 				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
@@ -213,14 +214,6 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-
-					object.rotation.y += 0.005;
-
-				}
-
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;

examples/webgl_materials_variations_lambert.html

@@ -40,7 +40,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, controls, objects = [];
+			var camera, scene, renderer, controls;
 			var particleLight;
 
 			var loader = new THREE.FontLoader();
@@ -87,29 +87,20 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
+				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-					var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
+					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
-					if( alpha >= 0.5 ) {
-						reflectionCube = null;
-					}
-
-					for( var beta = 0, betaIndex = 0; beta <= 1.0; beta += stepSize, betaIndex ++ ) {
-
-						var reflectivity = beta;
-
-						var side = THREE.FrontSide;
-						if( ( betaIndex % 2 ) === 0 ) {
-							side = THREE.DoubleSide;
-						}
+						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
 
-							var diffuseColor = baseColor.clone().multiplyScalar( gamma );
-
-							var material = new THREE.MeshLambertMaterial( { map: imgTexture, color: diffuseColor,
-								 reflectivity: reflectivity, envMap: reflectionCube, side: side } )
+							var material = new THREE.MeshLambertMaterial( {
+								map: imgTexture,
+								color: diffuseColor,
+								reflectivity: beta,
+								envMap: alpha < 0.5 ? reflectionCube : null
+							} );
 
 							var mesh = new THREE.Mesh( geometry, material );
 
@@ -117,14 +108,16 @@
 							mesh.position.y = beta * 400 - 200;
 							mesh.position.z = gamma * 400 - 200;
 
-							objects.push( mesh );
-
 							scene.add( mesh );
+
 						}
+
 					}
+
 				}
 
 				function addLabel( name, location ) {
+
 					var textGeo = new THREE.TextGeometry( name, {
 
 						font: font,
@@ -139,6 +132,7 @@
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
+
 				}
 
 				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
@@ -219,14 +213,6 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-
-					object.rotation.y += 0.005;
-
-				}
-
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;

examples/webgl_materials_variations_phong.html

@@ -28,7 +28,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Phong Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
 
-
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 
@@ -41,7 +40,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, controls, objects = [];
+			var camera, scene, renderer, controls;
 			var particleLight;
 
 			var loader = new THREE.FontLoader();
@@ -88,31 +87,30 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-
-				var localReflectionCube;
-
-				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
-
-					if( alphaIndex % 2 === 0 ) {
-						localReflectionCube = null;
-					}
-					else {
-						localReflectionCube = reflectionCube;
-					}
+				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
 					var specularShininess = Math.pow( 2, alpha * 10 );
 
-					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
+					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 						var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
-						var reflectivity = beta;
 
-						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 							// basic monochromatic energy preservation
-							var diffuseColor = new THREE.Color( 0, 0, gamma ).multiplyScalar( 1 - beta * 0.2 );
-
-							var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, reflectivity: reflectivity, shininess: specularShininess, shading: THREE.SmoothShading, envMap: localReflectionCube  } )
+							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 ).multiplyScalar( 1 - beta * 0.2 );
+
+							var material = new THREE.MeshPhongMaterial( {
+								map: imgTexture,
+								bumpMap: imgTexture,
+								bumpScale: bumpScale,
+								color: diffuseColor,
+								specular: specularColor,
+								reflectivity: beta,
+								shininess: specularShininess,
+								shading: THREE.SmoothShading,
+								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
+							} );
 
 							var mesh = new THREE.Mesh( geometry, material );
 
@@ -120,15 +118,16 @@
 							mesh.position.y = beta * 400 - 200;
 							mesh.position.z = gamma * 400 - 200;
 
-							objects.push( mesh );
-
 							scene.add( mesh );
+
 						}
+
 					}
-				}
 
+				}
 
 				function addLabel( name, location ) {
+
 					var textGeo = new THREE.TextGeometry( name, {
 
 						font: font,
@@ -143,6 +142,7 @@
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
+
 				}
 
 				addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
@@ -221,14 +221,6 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-
-					object.rotation.y += 0.005;
-
-				}
-
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;

examples/webgl_materials_variations_physical.html

@@ -40,7 +40,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, controls, objects = [];
+			var camera, scene, renderer, controls;
 			var particleLight;
 
 			var loader = new THREE.FontLoader();
@@ -78,25 +78,21 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
-
-					var clearCoat = 1.0 - alpha;
+				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
 					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
-						var clearCoatRoughness = 1 - beta;
-
 						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-							var reflectivity = 1 - gamma;
+							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
 
 							var material = new THREE.MeshPhysicalMaterial( {
-								color: 0x880000,
+								color: diffuseColor,
 								metalness: 0,
 								roughness: 0.5,
-								clearCoat: clearCoat,
-								clearCoatRoughness: clearCoatRoughness,
-								reflectivity: reflectivity,
+								clearCoat:  1.0 - alpha,
+								clearCoatRoughness: 1.0 - beta,
+								reflectivity: 1.0 - gamma,
 								envMap: reflectionCube
 							} );
 
@@ -106,14 +102,16 @@
 							mesh.position.y = beta * 400 - 200;
 							mesh.position.z = gamma * 400 - 200;
 
-							objects.push( mesh );
-
 							scene.add( mesh );
+
 						}
+
 					}
+
 				}
 
 				function addLabel( name, location ) {
+
 					var textGeo = new THREE.TextGeometry( name, {
 
 						font: font,
@@ -128,6 +126,7 @@
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
+
 				}
 
 				addLabel( "+clearCoat", new THREE.Vector3( -350, 0, 0 ) );
@@ -205,14 +204,6 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-
-					object.rotation.y += 0.005;
-
-				}
-
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;

examples/webgl_materials_variations_standard.html

@@ -40,7 +40,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer, controls, objects = [];
+			var camera, scene, renderer, controls;
 			var particleLight;
 
 			var loader = new THREE.FontLoader();
@@ -87,29 +87,25 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				var localReflectionCube;
+				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
-				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
+					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
-					var roughness = 1.0 - alpha;
-
-					if( alphaIndex % 2 === 0 ) {
-						localReflectionCube = null;
-					}
-					else {
-						localReflectionCube = reflectionCube;
-					}
-
-					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
-
-						var metalness = beta;
-
-						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 							// basic monochromatic energy preservation
-							var diffuseColor = new THREE.Color( gamma, 0, 0 ).multiplyScalar( 1 - 0.08 );
-
-							var material = new THREE.MeshStandardMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: localReflectionCube } )
+							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
+
+							var material = new THREE.MeshStandardMaterial( {
+								map: imgTexture,
+								bumpMap: imgTexture,
+								bumpScale: bumpScale,
+								color: diffuseColor,
+								metalness: beta,
+								roughness: 1.0 - alpha,
+								shading: THREE.SmoothShading,
+								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
+							} )
 
 							var mesh = new THREE.Mesh( geometry, material );
 
@@ -117,14 +113,16 @@
 							mesh.position.y = beta * 400 - 200;
 							mesh.position.z = gamma * 400 - 200;
 
-							objects.push( mesh );
-
 							scene.add( mesh );
+
 						}
+
 					}
+
 				}
 
 				function addLabel( name, location ) {
+
 					var textGeo = new THREE.TextGeometry( name, {
 
 						font: font,
@@ -139,6 +137,7 @@
 					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
+
 				}
 
 				addLabel( "+roughness", new THREE.Vector3( -350, 0, 0 ) );
@@ -216,14 +215,6 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-
-					object.rotation.y += 0.005;
-
-				}
-
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;