Tweaked examples.

examples/js/ShaderSkin.js

@@ -160,6 +160,7 @@ THREE.ShaderSkin = {
 
 				"vec3 outgoingLight = vec3( 0.0 );",	// outgoing light does not have an alpha, the surface does
 				"vec4 diffuseColor = vec4( diffuse, opacity );",
+				"vec3 shadowMask = vec3( 1.0 );",
 
 				"vec4 colDiffuse = texture2D( tDiffuse, vUv );",
 				"colDiffuse.rgb *= colDiffuse.rgb;",
@@ -268,9 +269,13 @@ THREE.ShaderSkin = {
 
 				"#endif",
 
+				THREE.ShaderChunk[ "shadowmap_fragment" ],
+
+				"totalDiffuseLight *= shadowMask;",
+				"totalSpecularLight *= shadowMask;",
+
 				"outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor * diffuse ) + totalSpecularLight;",
 
-				THREE.ShaderChunk[ "shadowmap_fragment" ],
 				THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
 				THREE.ShaderChunk[ "fog_fragment" ],
 

examples/webgl_geometry_spline_editor.html

@@ -66,7 +66,7 @@
 				camera.position.z = 1000;
 				scene.add( camera );
 
-				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 				var light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
@@ -79,9 +79,9 @@
 				scene.add( light );
 				spotlight = light;
 
-				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000, 20, 20 );
+				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
-				var planeMaterial = new THREE.MeshBasicMaterial( { color: 0xeeeeee } );
+				var planeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 
 				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
 				plane.position.y = -200;

examples/webgl_loader_stl.html

@@ -165,10 +165,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x777777 ) );
+				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
-				addShadowedLight( 0.5, 1, -1, 0xffaa00, 1 );
+				addShadowedLight( 0.5, 1, -1, 0xffff99, 1 );
 
 				// renderer
 

examples/webgl_materials_bumpmap.html

@@ -65,7 +65,7 @@
 
 			var mesh;
 
-			var directionalLight, directionalLight2, pointLight, ambientLight, spotLight;
+			var spotLight;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -93,22 +93,10 @@
 
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x444444 );
-				scene.add( ambientLight );
+				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
 
-				//
-
-				pointLight = new THREE.PointLight( 0xffffff, 1.5, 1000 );
-				pointLight.color.setHSL( 0.05, 1, 0.95 );
-				pointLight.position.set( 0, 0, 600 );
-
-				scene.add( pointLight );
-
-				// shadow for PointLight
-
-				spotLight = new THREE.SpotLight( 0xffffff, 1.5 );
-				spotLight.position.set( 0.05, 0.05, 1 );
-				spotLight.color.setHSL( 0.6, 1, 0.95 );
+				spotLight = new THREE.SpotLight( 0xffffbb, 2 );
+				spotLight.position.set( 0.5, 0, 1 );
 				scene.add( spotLight );
 
 				spotLight.position.multiplyScalar( 700 );
@@ -129,36 +117,6 @@
 
 				//
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				directionalLight.position.set( 1, -0.5, 1 );
-				directionalLight.color.setHSL( 0.6, 1, 0.95 );
-				scene.add( directionalLight );
-
-				directionalLight.position.multiplyScalar( 500 );
-
-				directionalLight.castShadow = true;
-				// directionalLight.shadowCameraVisible = true;
-
-				directionalLight.shadowMapWidth = 2048;
-				directionalLight.shadowMapHeight = 2048;
-
-				directionalLight.shadowCameraNear = 200;
-				directionalLight.shadowCameraFar = 1500;
-
-				directionalLight.shadowCameraLeft = -500;
-				directionalLight.shadowCameraRight = 500;
-				directionalLight.shadowCameraTop = 500;
-				directionalLight.shadowCameraBottom = -500;
-
-				directionalLight.shadowBias = -0.005;
-
-				//
-
-				directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1.2 );
-				directionalLight2.position.set( 1, -0.5, -1 );
-				directionalLight2.color.setHSL( 0.08, 1, 0.825 );
-				scene.add( directionalLight2 );
-
 				var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
 				mapHeight.anisotropy = 4;
@@ -167,7 +125,13 @@
 				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
 				mapHeight.format = THREE.RGBFormat;
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x552811, specular: 0x333333, shininess: 25, bumpMap: mapHeight, bumpScale: 19, metal: false } );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0x552811,
+					specular: 0x222222,
+					shininess: 25,
+					bumpMap: mapHeight,
+					bumpScale: 12
+				} );
 
 				loader = new THREE.JSONLoader();
 				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } );

examples/webgl_materials_bumpmap_skin.html

@@ -71,7 +71,7 @@
 
 			var mesh, mesh2;
 
-			var directionalLight, directionalLight2;
+			var directionalLight;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -105,7 +105,9 @@
 
 				// LIGHTS
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 2.25 );
+				scene.add( new THREE.AmbientLight( 0x333344 ) );
+
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 500, - 250, 500 );
 
 				directionalLight.castShadow = true;
@@ -128,12 +130,6 @@
 
 				//
 
-				directionalLight2 = new THREE.DirectionalLight( 0x8888ff, 0.75 );
-				directionalLight2.position.set( - 500, 250, - 500 );
-				scene.add( directionalLight2 );
-
-				//
-
 				loader = new THREE.JSONLoader();
 				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function ( geometry ) {
 

examples/webgl_morphnormals.html

@@ -35,7 +35,7 @@
 			var SCREEN_HEIGHT = window.innerHeight;
 
 			var container, stats;
-			var camera, scene1, scene2, renderer;
+			var camera, scene, renderer;
 			var mixers = [];
 
 			var clock = new THREE.Clock();
@@ -58,32 +58,19 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 40, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.y = 300;
 				camera.target = new THREE.Vector3( 0, 150, 0 );
 
-				scene1 = new THREE.Scene();
-				scene2 = new THREE.Scene();
+				scene = new THREE.Scene();
 
 				//
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1.3 );
-				light.position.set( 1, 1, 1 );
-				scene1.add( light );
-
-				var light = new THREE.DirectionalLight( 0xffffff, 0.1 );
-				light.position.set( 0.25, -1, 0 );
-				scene1.add( light );
-
-				//
+				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1.3 );
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 );
-				scene2.add( light );
-
-				var light = new THREE.DirectionalLight( 0xffffff, 0.1 );
-				light.position.set( 0.25, -1, 0 );
-				scene2.add( light );
+				scene.add( light );
 
 				//
 
@@ -91,16 +78,22 @@
 				var loader = new THREE.JSONLoader();
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
+					var material = new THREE.MeshPhongMaterial( {
+						color: 0xffffff,
+						morphTargets: true,
+						vertexColors: THREE.FaceColors,
+						shading: THREE.FlatShading
+					} );
 					var mesh = new THREE.Mesh( geometry, material );
 
-					mesh.scale.set( 1.5, 1.5, 1.5 );
+					mesh.position.x = - 150;
 					mesh.position.y = 150;
+					mesh.scale.set( 1.5, 1.5, 1.5 );
 
-					scene1.add( mesh );
+					scene.add( mesh );
 
 					var mixer = new THREE.AnimationMixer( mesh );
-					mixer.addAction( new THREE.AnimationAction( geometry.animations[ 0 ] ).warpToDuration( 5 ) );
+					mixer.addAction( new THREE.AnimationAction( geometry.animations[ 0 ] ).warpToDuration( 1 ) );
 
 					mixers.push( mixer );
 
@@ -111,16 +104,23 @@
 					geometry.computeVertexNormals();
 					geometry.computeMorphNormals();
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } );
+					var material = new THREE.MeshPhongMaterial( {
+						color: 0xffffff,
+						morphTargets: true,
+						morphNormals: true,
+						vertexColors: THREE.FaceColors,
+						shading: THREE.SmoothShading
+					} );
 					var mesh = new THREE.Mesh( geometry, material );
 
-					mesh.scale.set( 1.5, 1.5, 1.5 );
+					mesh.position.x = 150;
 					mesh.position.y = 150;
+					mesh.scale.set( 1.5, 1.5, 1.5 );
 
-					scene2.add( mesh );
+					scene.add( mesh );
 
 					var mixer = new THREE.AnimationMixer( mesh );
-					mixer.addAction( new THREE.AnimationAction( geometry.animations[ 0 ] ).warpToDuration( 5 ) );
+					mixer.addAction( new THREE.AnimationAction( geometry.animations[ 0 ] ).warpToDuration( 1 ) );
 
 					mixers.push( mixer );
 
@@ -129,12 +129,6 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.sortObjects = false;
-				renderer.autoClear = false;
-
-				renderer.gammaInput = true;
-				renderer.gammaOutput = true;
-
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -190,18 +184,14 @@
 
 				var delta = clock.getDelta();
 
-   				for ( var i = 0; i < mixers.length; i ++ ) {
+				for ( var i = 0; i < mixers.length; i ++ ) {
+
 					mixers[ i ].update( delta );
 
 				}
 
 				renderer.clear();
-
-				renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
-				renderer.render( scene1, camera );
-
-				renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
-				renderer.render( scene2, camera );
+				renderer.render( scene, camera );
 
 			}