Merge pull request #11727 from WestLangley/dev-examples

Examples: material.shading ==> material.flatShading

examples/js/crossfade/scenes.js

@@ -87,7 +87,7 @@ function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 
 	this.rotationSpeed = rotationSpeed;
 
-	var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
+	var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
 	this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
 	this.scene.add( this.mesh );
 

examples/js/renderers/RaytracingWorker.js

@@ -267,7 +267,7 @@ THREE.RaytracingRendererWorker = function () {
 						// the same normal can be reused for all lights
 						// (should be possible to cache even more)
 
-						computePixelNormal( normalVector, localPoint, material.shading, face, vertices );
+						computePixelNormal( normalVector, localPoint, material.flatShading, face, vertices );
 						normalVector.applyMatrix3( _object.normalMatrix ).normalize();
 
 						normalComputed = true;
@@ -397,16 +397,16 @@ THREE.RaytracingRendererWorker = function () {
 		var tmpVec2 = new THREE.Vector3();
 		var tmpVec3 = new THREE.Vector3();
 
-		return function computePixelNormal( outputVector, point, shading, face, vertices ) {
+		return function computePixelNormal( outputVector, point, flatShading, face, vertices ) {
 
 			var faceNormal = face.normal;
 			var vertexNormals = face.vertexNormals;
 
-			if ( shading === THREE.FlatShading ) {
+			if ( flatShading === true ) {
 
 				outputVector.copy( faceNormal );
 
-			} else if ( shading === THREE.SmoothShading ) {
+			} else {
 
 				// compute barycentric coordinates
 

examples/misc_controls_orbit.html

@@ -82,7 +82,7 @@
 				// world
 
 				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
-				var material =  new THREE.MeshPhongMaterial( { color:0xffffff, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 

examples/misc_controls_pointerlock.html

@@ -283,7 +283,7 @@
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
+					material = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
 
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;

examples/misc_controls_trackball.html

@@ -85,7 +85,7 @@
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
 				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
-				var material =  new THREE.MeshPhongMaterial( { color:0xffffff, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color:0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 

examples/misc_lights_test.html

@@ -71,7 +71,7 @@
 				// Spheres
 
 				geometry = new THREE.SphereGeometry( 100, 16, 8 );
-				material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: 0.5, shininess: 0 } );
+				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, overdraw: 0.5, shininess: 0 } );
 
 				for ( var i = 0; i < 30; i ++ ) {
 

examples/misc_sound.html

@@ -86,9 +86,9 @@
 
 				var sphere = new THREE.SphereGeometry( 20, 32, 16 );
 
-				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, shading: THREE.FlatShading, shininess: 0 } );
-				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, shading: THREE.FlatShading, shininess: 0 } );
-				material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, shading: THREE.FlatShading, shininess: 0 } );
+				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
+				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
+				material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );
 
 				// sound spheres
 

examples/raytracing_sandbox.html

@@ -45,7 +45,7 @@
 					specular: 0x222222,
 					shininess: 150,
 					vertexColors: THREE.NoColors,
-					shading: THREE.SmoothShading
+					flatShading: false
 				} );
 
 				var phongMaterialBox = new THREE.MeshPhongMaterial( {
@@ -53,7 +53,7 @@
 					specular: 0x111111,
 					shininess: 100,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 
 				var phongMaterialBoxBottom = new THREE.MeshPhongMaterial( {
@@ -61,7 +61,7 @@
 					specular: 0x111111,
 					shininess: 100,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 
 				var phongMaterialBoxLeft = new THREE.MeshPhongMaterial( {
@@ -69,7 +69,7 @@
 					specular: 0x111111,
 					shininess: 100,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 
 				var phongMaterialBoxRight = new THREE.MeshPhongMaterial( {
@@ -77,7 +77,7 @@
 					specular: 0x111111,
 					shininess: 100,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 
 				var mirrorMaterialFlat = new THREE.MeshPhongMaterial( {
@@ -85,7 +85,7 @@
 					specular: 0xff8888,
 					shininess: 10000,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 				mirrorMaterialFlat.mirror = true;
 				mirrorMaterialFlat.reflectivity = 1;
@@ -95,7 +95,7 @@
 					specular: 0xaaaaaa,
 					shininess: 10000,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 				mirrorMaterialFlatDark.mirror = true;
 				mirrorMaterialFlatDark.reflectivity = 1;
@@ -105,7 +105,7 @@
 					specular: 0x222222,
 					shininess: 10000,
 					vertexColors: THREE.NoColors,
-					shading: THREE.SmoothShading
+					flatShading: false
 				} );
 				mirrorMaterialSmooth.mirror = true;
 				mirrorMaterialSmooth.reflectivity = 0.3;
@@ -115,7 +115,7 @@
 					specular: 0x00ff00,
 					shininess: 10000,
 					vertexColors: THREE.NoColors,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 				glassMaterialFlat.glass = true;
 				glassMaterialFlat.reflectivity = 0.5;
@@ -125,7 +125,7 @@
 					specular: 0xffaa55,
 					shininess: 10000,
 					vertexColors: THREE.NoColors,
-					shading: THREE.SmoothShading
+					flatShading: false
 				} );
 				glassMaterialSmooth.glass = true;
 				glassMaterialSmooth.reflectivity = 0.25;

examples/webgl2_sandbox.html

@@ -81,8 +81,8 @@
 					new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
 					new THREE.MeshBasicMaterial( { map: texture1, fog: false } ),
 					new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } )
+					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ),
+					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30 } )
 
 				];
 

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -190,7 +190,6 @@
 					color: 0xffffff,
 					specular: 0x050505,
 					shininess: 50,
-					shading: THREE.SmoothShading,
 					emissive: 0x000000
 				};
 

examples/webgl_geometry_colors.html

@@ -151,8 +151,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_geometry_colors_blender.html

@@ -105,8 +105,6 @@
 
 			function createScene1( geometry, materials ) {
 
-				materials[ 0 ].shading = THREE.FlatShading;
-
 				mesh = new THREE.Mesh( geometry, materials );
 				mesh.position.x = 400;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
@@ -116,8 +114,6 @@
 
 			function createScene2( geometry, materials ) {
 
-				materials[ 0 ].shading = THREE.FlatShading;
-
 				mesh2 = new THREE.Mesh( geometry, materials );
 				mesh2.position.x = - 400;
 				mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = 250;

examples/webgl_geometry_teapot.html

@@ -135,15 +135,15 @@
 
 				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } ) ;
 
-				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x0, shading: THREE.FlatShading, side: THREE.DoubleSide } );
+				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
 
 				gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );
 
-				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, shading: THREE.SmoothShading, side: THREE.DoubleSide } );
+				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );
 
-				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, shading: THREE.SmoothShading, side: THREE.DoubleSide } );
+				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
 
-				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, shading: THREE.SmoothShading, side: THREE.DoubleSide } );
+				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
 
 				// scene itself
 				scene = new THREE.Scene();

examples/webgl_geometry_text.html

@@ -182,8 +182,8 @@
 				}
 
 				materials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
+					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
 				];
 
 				group = new THREE.Group();

examples/webgl_geometry_text_earcut.html

@@ -240,8 +240,8 @@
 				}
 
 				materials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
+					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
 				];
 
 				group = new THREE.Group();

examples/webgl_geometry_text_pnltri.html

@@ -212,8 +212,8 @@
 				}
 
 				materials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
+					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
 				];
 
 				group = new THREE.Group();

examples/webgl_interactive_cubes_gpu.html

@@ -86,7 +86,7 @@
 				var geometry = new THREE.Geometry(),
 				pickingGeometry = new THREE.Geometry(),
 				pickingMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } ),
-				defaultMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0	} );
+				defaultMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0	} );
 
 				function applyVertexColors( g, c ) {
 

examples/webgl_interactive_raycasting_points.html

@@ -247,7 +247,7 @@
 				//
 
 				var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
-				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
+				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
 				for ( var i = 0; i < 40; i++ ) {
 

examples/webgl_lights_hemisphere.html

@@ -184,7 +184,7 @@
 
 				loader.load( 'models/animated/flamingo.js', function( geometry ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, flatShading: true } );
 					var mesh = new THREE.Mesh( geometry, material );
 
 					var s = 0.35;

examples/webgl_loader_collada_kinematics.html

@@ -66,8 +66,8 @@
 
 					if ( child instanceof THREE.Mesh ) {
 
-						child.geometry.computeFaceNormals();
-						child.material.shading = THREE.FlatShading;
+						// model does not have normals
+						child.material.flatShading = true;
 
 					}
 

examples/webgl_loader_gltf2.html

@@ -184,8 +184,7 @@
 
 				if (sceneInfo.addGround) {
 					var groundMaterial = new THREE.MeshPhongMaterial({
-							color: 0xFFFFFF,
-							shading: THREE.SmoothShading
+							color: 0xFFFFFF
 						});
 					ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(512, 512), groundMaterial);
 

examples/webgl_loader_obj2.html

@@ -106,7 +106,7 @@
 
 					this.controls = null;
 
-					this.smoothShading = true;
+					this.flatShading = false;
 					this.doubleSide = false;
 
 					this.cube = null;
@@ -245,14 +245,14 @@
 					this.renderer.render( this.scene, this.camera );
 				};
 
-				OBJLoader2Example.prototype.alterSmoothShading = function () {
+				OBJLoader2Example.prototype.alterShading = function () {
 
 					var scope = this;
-					scope.smoothShading = ! scope.smoothShading;
-					console.log( scope.smoothShading ? 'Enabling SmoothShading' : 'Enabling FlatShading');
+					scope.flatShading = ! scope.flatShading;
+					console.log( scope.flatShading ? 'Enabling flat shading' : 'Enabling smooth shading');
 
 					scope.traversalFunction = function ( material ) {
-						material.shading = scope.smoothShading ? THREE.SmoothShading : THREE.FlatShading;
+						material.flatShading = scope.flatShading;
 						material.needsUpdate = true;
 					};
 					var scopeTraverse = function ( object3d ) {
@@ -304,7 +304,7 @@
 
 			// Init dat.gui and controls
 			var OBJLoader2Control = function() {
-				this.smoothShading = app.smoothShading;
+				this.flatShading = app.flatShading;
 				this.doubleSide = app.doubleSide;
 			};
 			var objLoader2Control = new OBJLoader2Control();
@@ -317,10 +317,10 @@
 			var menuDiv = document.getElementById( 'dat' );
 			menuDiv.appendChild(gui.domElement);
 			var folderQueue = gui.addFolder( 'OBJLoader2 Options' );
-			var controlSmooth = folderQueue.add( objLoader2Control, 'smoothShading' ).name( 'Smooth Shading' );
+			var controlSmooth = folderQueue.add( objLoader2Control, 'flatShading' ).name( 'Flat Shading' );
 			controlSmooth.onChange( function( value ) {
-				console.log( 'Setting smoothShading to: ' + value );
-				app.alterSmoothShading();
+				console.log( 'Setting flatShading to: ' + value );
+				app.alterShading();
 			});
 
 			var controlDouble = folderQueue.add( objLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );

examples/webgl_loader_obj2_ww.html

@@ -111,7 +111,7 @@
 
 					this.controls = null;
 
-					this.smoothShading = true;
+					this.flatShading = false;
 					this.doubleSide = false;
 					this.streamMeshes = true;
 
@@ -312,14 +312,14 @@
 					this.renderer.render( this.scene, this.camera );
 				};
 
-				WWOBJLoader2Example.prototype.alterSmoothShading = function () {
+				WWOBJLoader2Example.prototype.alterShading = function () {
 
 					var scope = this;
-					scope.smoothShading = ! scope.smoothShading;
-					console.log( scope.smoothShading ? 'Enabling SmoothShading' : 'Enabling FlatShading');
+					scope.flatShading = ! scope.flatShading;
+					console.log( scope.flatShading ? 'Enabling flat shading' : 'Enabling smooth shading');
 
 					scope.traversalFunction = function ( material ) {
-						material.shading = scope.smoothShading ? THREE.SmoothShading : THREE.FlatShading;
+						material.flatShading = scope.flatShading;
 						material.needsUpdate = true;
 					};
 					var scopeTraverse = function ( object3d ) {
@@ -408,7 +408,7 @@
 			// Init dat.gui and controls
 			var elemFileInput = document.getElementById( 'fileUploadInput' );
 			var WWOBJLoader2Control = function() {
-				this.smoothShading = app.smoothShading;
+				this.flatShading = app.flatShading;
 				this.doubleSide = app.doubleSide;
 				this.streamMeshes = app.streamMeshes;
 			};
@@ -422,10 +422,10 @@
 			var menuDiv = document.getElementById( 'dat' );
 			menuDiv.appendChild(gui.domElement);
 			var folderOptions = gui.addFolder( 'WWOBJLoader2 Options' );
-			var controlSmooth = folderOptions.add( wwObjLoader2Control, 'smoothShading' ).name( 'Smooth Shading' );
+			var controlSmooth = folderOptions.add( wwObjLoader2Control, 'flatShading' ).name( 'Flat Shading' );
 			controlSmooth.onChange( function( value ) {
-				console.log( 'Setting smoothShading to: ' + value );
-				app.alterSmoothShading();
+				console.log( 'Setting flatShading to: ' + value );
+				app.alterShading();
 			});
 
 			var controlDouble = folderOptions.add( wwObjLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );

examples/webgl_loader_ply.html

@@ -94,7 +94,7 @@
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, shading: THREE.FlatShading } );
+					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
 					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.y = - 0.2;
@@ -113,7 +113,7 @@
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, shading: THREE.FlatShading } );
+					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
 					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = - 0.2;

examples/webgl_loader_ttf.html

@@ -100,7 +100,7 @@
 				pointLight.color.setHSL( Math.random(), 1, 0.5 );
 				scene.add( pointLight );
 
-				material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
+				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				group = new THREE.Group();
 				group.position.y = 100;

examples/webgl_marchingcubes.html

@@ -313,7 +313,7 @@
 
 			"flat" :
 			{
-				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1, shading: THREE.FlatShading } ),
+				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1, flatShading: true } ),
 				h: 0, s: 0, l: 1
 			},
 

examples/webgl_materials.html

@@ -56,21 +56,21 @@
 				texture.needsUpdate = true;
 
 				materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
-				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
-				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
-				materials.push( new THREE.MeshNormalMaterial( ) );
+				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
+				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ) );
+				materials.push( new THREE.MeshNormalMaterial() );
 				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
 				//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
 
-				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
-				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: texture, transparent: true } ) );
-				materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
+				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
+				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, map: texture, transparent: true } ) );
+				materials.push( new THREE.MeshNormalMaterial( { flatShading: true } ) );
 				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
 
 				materials.push( new THREE.MeshDepthMaterial() );
 
-				materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000, shading: THREE.SmoothShading } ) );
-				materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, shading: THREE.SmoothShading, opacity: 0.9, transparent: true } ) );
+				materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000 } ) );
+				materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true } ) );
 
 				materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );
 

examples/webgl_materials_channels.html

@@ -166,7 +166,7 @@
 					normalMap: normalMap,
 					normalScale: new THREE.Vector2( 1, - 1 ),
 
-					//shading: THREE.FlatShading,
+					//flatShading: true,
 
 					side: THREE.DoubleSide
 				} );
@@ -199,7 +199,7 @@
 					normalMap: normalMap,
 					normalScale: new THREE.Vector2( 1, - 1 ),
 
-					//shading: THREE.FlatShading,
+					//flatShading: true,
 
 					side: THREE.DoubleSide
 				} );

examples/webgl_materials_envmaps_hdr.html

@@ -94,8 +94,7 @@
 					bumpScale: - 0.05,
 					color: 0xff4444,
 					metalness: 0.5,
-					roughness: 1.0,
-					shading: THREE.SmoothShading
+					roughness: 1.0
 				} );
 
 				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
@@ -111,8 +110,7 @@
 					roughnessMap: null,
 					color: 0xffffff,
 					metalness: 0.0,
-					roughness: 0.0,
-					shading: THREE.SmoothShading
+					roughness: 0.0
 				} );
 
 				var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );

examples/webgl_materials_reflectivity.html

@@ -95,7 +95,6 @@
 					opacity: 0.5,
 					side: THREE.BackSide,
 					transparent: true,
-					shading: THREE.SmoothShading,
 					envMapIntensity: 5,
 					premultipliedAlpha: true
 					// TODO: Add custom blend mode that modulates background color by this materials color.
@@ -109,7 +108,6 @@
 					opacity: 0.15,
 					side: THREE.FrontSide,
 					transparent: true,
-					shading: THREE.SmoothShading,
 					envMapIntensity: 5,
 					premultipliedAlpha: true
 				} );

examples/webgl_materials_variations_basic.html

@@ -76,7 +76,7 @@
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
+				var shininess = 50, specular = 0x333333;
 
 				var materials = [];
 
@@ -99,7 +99,6 @@
 								map: imgTexture,
 								color: diffuseColor,
 								reflectivity: beta,
-								shading: THREE.SmoothShading,
 								envMap: alpha < 0.5 ? reflectionCube : null
 							} );
 

examples/webgl_materials_variations_lambert.html

@@ -76,7 +76,7 @@
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
+				var shininess = 50, specular = 0x333333;
 
 				var materials = [];
 

examples/webgl_materials_variations_phong.html

@@ -76,7 +76,7 @@
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
+				var shininess = 50, specular = 0x333333, bumpScale = 1;
 
 				var materials = [];
 
@@ -108,7 +108,6 @@
 								specular: specularColor,
 								reflectivity: beta,
 								shininess: specularShininess,
-								shading: THREE.SmoothShading,
 								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
 							} );
 

examples/webgl_materials_variations_standard.html

@@ -101,7 +101,7 @@
 
 					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
+					var shininess = 50, specular = 0x333333, bumpScale = 1;
 
 					var materials = [];
 
@@ -130,7 +130,6 @@
 									color: diffuseColor,
 									metalness: beta,
 									roughness: 1.0 - alpha,
-									shading: THREE.SmoothShading,
 									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture						
 								} );
 

examples/webgl_materials_variations_toon.html

@@ -78,7 +78,7 @@
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
+				var shininess = 50, specular = 0x333333, bumpScale = 1;
 
 				var materials = [];
 
@@ -110,7 +110,6 @@
 								specular: specularColor,
 								reflectivity: beta,
 								shininess: specularShininess,
-								shading: THREE.SmoothShading,
 								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
 							} );
 

examples/webgl_mirror.html

@@ -127,7 +127,7 @@
 				sphereGroup.add( halfSphere );
 
 				var geometry = new THREE.IcosahedronGeometry( 5, 0 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 				smallSphere = new THREE.Mesh( geometry, material );
 				scene.add(smallSphere);
 

examples/webgl_mirror_nodes.html

@@ -229,7 +229,7 @@
 				sphereGroup.add( halfSphere );
 
 				var geometry = new THREE.IcosahedronGeometry( 5, 0 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 				smallSphere = new THREE.Mesh( geometry, material );
 				scene.add(smallSphere);
 

examples/webgl_modifier_subdivision.html

@@ -235,7 +235,7 @@
 				group.add( mesh );
 
 				var meshmaterials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } ),
 					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } )
 				];
 

examples/webgl_morphnormals.html

@@ -77,7 +77,7 @@
 						color: 0xffffff,
 						morphTargets: true,
 						vertexColors: THREE.FaceColors,
-						shading: THREE.FlatShading
+						flatShading: true
 					} );
 					var mesh = new THREE.Mesh( geometry, material );
 
@@ -103,8 +103,7 @@
 						color: 0xffffff,
 						morphTargets: true,
 						morphNormals: true,
-						vertexColors: THREE.FaceColors,
-						shading: THREE.SmoothShading
+						vertexColors: THREE.FaceColors
 					} );
 					var mesh = new THREE.Mesh( geometry, material );
 

examples/webgl_multiple_canvases_circle.html

@@ -285,8 +285,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_multiple_canvases_complex.html

@@ -209,8 +209,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_multiple_canvases_grid.html

@@ -226,8 +226,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_multiple_elements.html

@@ -140,7 +140,7 @@
 						color: new THREE.Color().setHSL( Math.random(), 1, 0.75 ),
 						roughness: 0.5,
 						metalness: 0,
-						shading: THREE.FlatShading
+						flatShading: true
 
 					} );
 

examples/webgl_multiple_renderers.html

@@ -140,8 +140,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_multiple_views.html

@@ -203,8 +203,8 @@
 
 				var materials = [
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
+					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
+					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
 
 				];
 

examples/webgl_postprocessing.html

@@ -52,7 +52,7 @@
 				scene.add( object );
 
 				var geometry = new THREE.SphereGeometry( 1, 4, 4 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 100; i ++ ) {
 

examples/webgl_postprocessing_dof.html

@@ -103,7 +103,7 @@
 
 				var textureCube = new THREE.CubeTextureLoader().load( urls );
 
-				parameters = { color: 0xff1100, envMap: textureCube, shading: THREE.FlatShading };
+				parameters = { color: 0xff1100, envMap: textureCube };
 				cubeMaterial = new THREE.MeshBasicMaterial( parameters );
 
 				singleMaterial = false;

examples/webgl_postprocessing_glitch.html

@@ -80,7 +80,7 @@
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
 
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();

examples/webgl_postprocessing_godrays.html

@@ -86,7 +86,7 @@
 
 				materialDepth = new THREE.MeshDepthMaterial();
 
-				var materialScene = new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading } );
+				var materialScene = new THREE.MeshBasicMaterial( { color: 0x000000 } );
 
 				// tree
 

examples/webgl_postprocessing_nodes.html

@@ -521,7 +521,7 @@
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );

examples/webgl_postprocessing_unreal_bloom.html

@@ -102,8 +102,7 @@
 				standardMaterial = new THREE.MeshStandardMaterial( {
 					map: null,
 					color: 0xffffff,
-					metalness: 1.0,
-					shading: THREE.SmoothShading
+					metalness: 1.0
 				} );
 
 				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );

examples/webgl_sandbox.html

@@ -91,8 +91,8 @@
 					new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true } ),
 					new THREE.MeshLambertMaterial( { map: texture2 } ),
 					new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } )
+					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ),
+					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30 } )
 
 				];
 

examples/webgl_shading_physical.html

@@ -213,7 +213,7 @@
 
 				loader.load( "models/animated/sittingBox.js", function( geometry ) {
 
-					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, shading: THREE.FlatShading } );
+					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, flatShading: true } );
 
 					var mesh = new THREE.Mesh( geometry, morphMaterial );
 

examples/webgl_shadowmap_viewer.html

@@ -105,8 +105,7 @@
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
 					shininess: 150,
-					specular: 0x222222,
-					shading: THREE.SmoothShading
+					specular: 0x222222
 				} );
 
 				torusKnot = new THREE.Mesh( geometry, material );
@@ -127,8 +126,7 @@
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,
 					shininess: 150,
-					specular: 0xffffff,
-					shading: THREE.SmoothShading
+					specular: 0x111111
 				} );
 
 				var ground = new THREE.Mesh( geometry, material );

examples/webgl_shadowmesh.html

@@ -163,7 +163,7 @@
 
 				// YELLOW PYRAMID and PYRAMID'S SHADOW
 				var pyramidGeometry = new THREE.CylinderGeometry( 0, 0.5, 2, 4 );
-				var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, shading: THREE.FlatShading, shininess: 0 } );
+				var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
 				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
 				pyramid.position.set( - 4, 1, 2 );
 				scene.add( pyramid );

examples/webgl_tonemapping.html

@@ -96,7 +96,6 @@
 					color: 0xffffff,
 					metalness: 0.9,
 					roughness: 0.8,
-					shading: THREE.SmoothShading,
 					premultipliedAlpha: true,
 					transparent: true
 				} );

examples/webvr_rollercoaster.html

@@ -165,7 +165,8 @@
 
 			var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
 			var material = new THREE.MeshLambertMaterial( {
-				color: 0xff8080, shading: THREE.FlatShading
+				color: 0xff8080,
+				//flatShading: true // Lambert does not support flat shading
 			} );
 			var mesh = new THREE.Mesh( geometry, material );
 			mesh.position.set( - 80, 10, - 70 );
@@ -176,7 +177,8 @@
 
 			var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
 			var material = new THREE.MeshLambertMaterial( {
-				color: 0x8080ff, shading: THREE.FlatShading
+				color: 0x8080ff,
+				//flatShading: true // Lambert does not support flat shading
 			} );
 			var mesh = new THREE.Mesh( geometry, material );
 			mesh.position.set( 50, 2, 30 );