Fixed examples that relied in custom LightShadows. See #7690.

examples/webgl_geometry_spline_editor.html

@@ -70,9 +70,7 @@
 				var light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
-				light.shadow.camera.near = 200;
-				light.shadow.camera.far = 2000;
-				light.shadow.camera.fov = 70;
+				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
 				light.shadow.bias = -0.000222;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;

examples/webgl_interactive_draggablecubes.html

@@ -60,11 +60,8 @@
 				light.position.set( 0, 500, 2000 );
 				light.castShadow = true;
 
-				light.shadow.camera.near = 200;
-				light.shadow.camera.far = camera.far;
-				light.shadow.camera.fov = 50;
-
-				light.shadow.bias = -0.00022;
+				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
+				light.shadow.bias = - 0.00022;
 
 				light.shadow.mapSize.width = 2048;
 				light.shadow.mapSize.height = 2048;

examples/webgl_loader_ctm.html

@@ -108,8 +108,6 @@
 				light.castShadow = true;
 				light.shadow.mapWidth = 1024;
 				light.shadow.mapHeight = 1024;
-				light.shadow.camera.fov = 45;
-				light.shadow.camera.far = 650;
 				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
 				scene.add( light );

examples/webgl_loader_gltf.html

@@ -7,7 +7,7 @@
 		<style>
 			body {
 				font-family: Monospace;
-				background-color: #EEF;
+				background-color: #222222;
 				margin: 0px;
 				overflow: hidden;
 			}
@@ -177,15 +177,15 @@
 					var directionalLight = new THREE.DirectionalLight( 0xdddddd );
 					directionalLight.position.set( 0, 0, 1 ).normalize();
 					scene.add( directionalLight );
-				
+
 					spot1   = new THREE.SpotLight( 0xffffff, 1 );
-					spot1.position.set( 100, 200, 100 );
-					spot1.target.position.set( 0, 0, 0 );
+					spot1.position.set( 10, 20, 10 );
+					spot1.angle = 0.25;
+					spot1.distance = 1024;
+					spot1.penumbra = 0.75;
 
-					if (sceneInfo.shadows) {
+					if ( sceneInfo.shadows ) {
 
-						spot1.shadow.cameraNear = 1;
-						spot1.shadow.cameraFar = 1024;
 						spot1.castShadow = true;
 						spot1.shadow.bias = 0.0001;
 						spot1.shadow.mapSize.width = 2048;
@@ -200,6 +200,7 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer({antialias:true});
+				renderer.setClearColor( 0x222222 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -217,7 +218,7 @@
 							color: 0xFFFFFF,
 							shading: THREE.SmoothShading,
 						});
-					ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(1024, 1024), groundMaterial);
+					ground = new THREE.Mesh( new THREE.PlaneBufferGeometry(512, 512), groundMaterial);
 
 					if (sceneInfo.shadows) {
 						ground.receiveShadow = true;
@@ -408,16 +409,16 @@
 					shadows:true
 				},
 				{
-					name : "Cesium Man", url : "./models/gltf/CesiumMan/%s/Cesium_Man.gltf", 
+					name : "Cesium Man", url : "./models/gltf/CesiumMan/%s/Cesium_Man.gltf",
 					 cameraPos: new THREE.Vector3(0, 3, 10),
 					 objectRotation: new THREE.Euler(0, 0, 0),
 					 addLights:true,
 					 addGround:true,
-					 shadows:true 
+					 shadows:true
 				},
-				{ 
+				{
 					name : "Cesium Milk Truck",
-					url : "./models/gltf/CesiumMilkTruck/%s/CesiumMilkTruck.gltf", 
+					url : "./models/gltf/CesiumMilkTruck/%s/CesiumMilkTruck.gltf",
 					cameraPos: new THREE.Vector3(0, 3, 10),
 					addLights:true,
 					addGround:true,

examples/webgl_loader_md2.html

@@ -97,22 +97,24 @@
 
 				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
 				light.position.set( 200, 250, 500 );
+				light.angle = 0.5;
+				light.penumbra = 0.5;
 
 				light.castShadow = true;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
-				light.shadow.camera.far = 2000;
 
 				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 				scene.add( light );
 
 				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
 				light.position.set( -100, 350, 350 );
+				light.angle = 0.5;
+				light.penumbra = 0.5;
 
 				light.castShadow = true;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
-				light.shadow.camera.far = 1000;
 
 				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 				scene.add( light );

examples/webgl_shading_physical.html

@@ -44,14 +44,11 @@
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/tween.min.js"></script>
 
 		<script src='js/libs/dat.gui.min.js'></script>
 
 		<script>
 
-			var DAY = 0;
-
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -64,8 +61,6 @@
 
 			var mixer;
 
-			var parameters, tweenDay, tweenNight;
-
 			var clock = new THREE.Clock();
 
 			var gui, shadowCameraHelper, shadowConfig = {
@@ -78,10 +73,6 @@
 
 			};
 
-			var lightingConfig = {
-				daylight: false
-			};
-
 			init();
 			animate();
 
@@ -98,7 +89,7 @@
 				// SCENE
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x00aaff, 1000, 10000 );
+				scene.fog = new THREE.Fog( 0, 1000, 10000 );
 
 				// CUBE CAMERA
 
@@ -248,36 +239,20 @@
 
 				// LIGHTS
 
-				var sunIntensity = 0.3,
-					pointIntensity = 1,
-					pointColor = 0xffaa00;
-
-				if ( DAY ) {
-
-					sunIntensity = 1;
-					pointIntensity = 0.5;
-					pointColor = 0xffffff;
-
-				}
-
 				ambientLight = new THREE.AmbientLight( 0x3f2806 );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xffaa00, pointIntensity, 5000 );
-				pointLight.position.set( 0, 0, 0 );
+				pointLight = new THREE.PointLight( 0xffaa00, 1, 5000 );
 				scene.add( pointLight );
 
-				sunLight = new THREE.SpotLight( 0xffffff, sunIntensity, 0, Math.PI/2 );
+				sunLight = new THREE.SpotLight( 0xffffff, 0.3, 0, Math.PI/2 );
 				sunLight.position.set( 1000, 2000, 1000 );
 
 				sunLight.castShadow = true;
 
+				sunLight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( shadowConfig.shadowCameraFov, 1, shadowConfig.shadowCameraNear, shadowConfig.shadowCameraFar ) );
 				sunLight.shadow.bias = shadowConfig.shadowBias;
 
-				sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
-				sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
-				sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
-
 				scene.add( sunLight );
 
 				// SHADOW CAMERA HELPER
@@ -289,7 +264,6 @@
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( scene.fog.color );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -331,13 +305,6 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				// TWEEN
-
-				parameters = { control: 0 };
-
-				tweenDay = new TWEEN.Tween( parameters ).to( { control: 1 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
-				tweenNight = new TWEEN.Tween( parameters ).to( { control: 0 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
-
 				// GUI
 
 				gui = new dat.GUI( { width: 400 } );
@@ -384,30 +351,6 @@
 
 				shadowGUI.open();
 
-				// LIGHTING
-
-				var lightingGUI = gui.addFolder( "Lighting" );
-
-				lightingGUI.add( lightingConfig, 'daylight' ).onChange( function() {
-
-					// change between day and night
-
-					if( lightingConfig.daylight === true ) {
-
-						tweenNight.stop();
-						tweenDay.start();
-
-					} else {
-
-						tweenDay.stop();
-						tweenNight.start();
-
-					};
-
-				});
-
-				lightingGUI.open();
-
 			}
 
 			//
@@ -441,7 +384,6 @@
 
 				var delta = clock.getDelta();
 
-				TWEEN.update();
 				controls.update();
 
 				if ( mixer ) {
@@ -450,14 +392,6 @@
 
 				}
 
-				scene.fog.color.setHSL( 0.63, 0.05, parameters.control );
-				renderer.setClearColor( scene.fog.color );
-
-				sunLight.intensity = parameters.control * 0.7 + 0.3;
-				pointLight.intensity = - parameters.control * 0.5 + 1;
-
-				pointLight.color.setHSL( 0.1, 0.75, parameters.control * 0.5 + 0.5 );
-
 				// render cube map
 
 				mesh.visible = false;

examples/webgl_shadowmap.html

@@ -111,9 +111,7 @@
 
 				light.castShadow = true;
 
-				light.shadow.camera.near = 1200;
-				light.shadow.camera.far = 2500;
-				light.shadow.camera.fov = 50;
+				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 1200, 2500 ) );
 				light.shadow.bias = 0.0001;
 
 				light.shadow.mapSize.width = SHADOW_MAP_WIDTH;

examples/webgl_shadowmap_performance.html

@@ -106,9 +106,7 @@
 
 				light.castShadow = true;
 
-				light.shadow.camera.near = 700;
-				light.shadow.camera.far = camera.far;
-				light.shadow.camera.fov = 50;
+				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 700, FAR ) );
 
 				light.shadow.bias = 0.0001;