Refactor example: webgl_shading_physical

examples/webgl_shading_physical.html

@@ -64,11 +64,11 @@
 
 			var mixer;
 
-			var parameters, tweenDirection, tweenDay, tweenNight;
+			var parameters, tweenDay, tweenNight;
 
 			var clock = new THREE.Clock();
 
-			var gui, shadowConfig = {
+			var gui, shadowCameraHelper, shadowConfig = {
 
 				shadowCameraVisible: false,
 				shadowCameraNear: 750,
@@ -78,6 +78,10 @@
 
 			};
 
+			var lightingConfig = {
+				daylight: false
+			}
+
 			init();
 			animate();
 
@@ -102,18 +106,18 @@
 
 				// TEXTURES
 
-				var textureSquares = THREE.ImageUtils.loadTexture( "textures/patterns/bright_squares256.png" );
+				var textureSquares = new THREE.TextureLoader().load( "textures/patterns/bright_squares256.png" );
 				textureSquares.repeat.set( 50, 50 );
 				textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
 				textureSquares.magFilter = THREE.NearestFilter;
 				textureSquares.format = THREE.RGBFormat;
 
-				var textureNoiseColor = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
+				var textureNoiseColor = new THREE.TextureLoader().load( "textures/disturb.jpg" );
 				textureNoiseColor.repeat.set( 1, 1 );
 				textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
 				textureNoiseColor.format = THREE.RGBFormat;
 
-				var textureLava = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
+				var textureLava = new THREE.TextureLoader().load( "textures/lava/lavatile.jpg" );
 				textureLava.repeat.set( 6, 2 );
 				textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
 				textureLava.format = THREE.RGBFormat;
@@ -128,7 +132,7 @@
 						path + 'pz' + format, path + 'nz' + format
 					];
 
-				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
+				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
 				// GROUND
 
@@ -150,18 +154,6 @@
 
 				// MATERIALS
 
-				var shader = THREE.ShaderLib[ "cube" ];
-				shader.uniforms[ "tCube" ].texture = cubeCamera.renderTarget;
-				shader.uniforms[ "tFlip" ].value = 1;
-
-				var materialCube = new THREE.ShaderMaterial( {
-
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: shader.uniforms
-
-				} );
-
 				var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
 				var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
 				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget } );
@@ -279,16 +271,20 @@
 
 				sunLight.castShadow = true;
 
-				sunLight.shadowBias = -0.0002;
+				sunLight.shadow.bias = shadowConfig.shadowBias;
 
-				sunLight.shadowCameraNear = 750;
-				sunLight.shadowCameraFar = 4000;
-				sunLight.shadowCameraFov = 30;
-
-				sunLight.shadowCameraVisible = false;
+				sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
+				sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
+				sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
 
 				scene.add( sunLight );
 
+				// SHADOW CAMERA HELPER
+
+				shadowCameraHelper = new THREE.CameraHelper( sunLight.shadow.camera );
+				shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
+				scene.add( shadowCameraHelper );
+
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -333,100 +329,96 @@
 				// EVENTS
 
 				window.addEventListener( 'resize', onWindowResize, false );
-				document.addEventListener( 'keydown', onKeyDown, false );
 
 				// TWEEN
 
 				parameters = { control: 0 };
 
-				tweenDirection = -1;
-
 				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();
+				gui = new dat.GUI( { width: 400 } );
 
-				shadowGUI = gui.addFolder( "Shadow" );
+				// SHADOW
 
-    			shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {
+				var shadowGUI = gui.addFolder( "Shadow" );
 
-					sunLight.shadowCameraVisible = shadowConfig.shadowCameraVisible;
+    		shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {
+
+					shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
 
 				});
 
 				shadowGUI.add( shadowConfig, 'shadowCameraNear', 1, 1500 ).onChange( function() {
 
-					sunLight.shadowCamera.near = shadowConfig.shadowCameraNear;
-					sunLight.shadowCamera.updateProjectionMatrix();
+					sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
+					sunLight.shadow.camera.updateProjectionMatrix();
+					shadowCameraHelper.update();
 
 				});
 
 				shadowGUI.add( shadowConfig, 'shadowCameraFar', 1501, 5000 ).onChange( function() {
 
-					sunLight.shadowCamera.far = shadowConfig.shadowCameraFar;
-					sunLight.shadowCamera.updateProjectionMatrix();
+					sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
+					sunLight.shadow.camera.updateProjectionMatrix();
+					shadowCameraHelper.update();
 
 				});
 
 				shadowGUI.add( shadowConfig, 'shadowCameraFov', 1, 120 ).onChange( function() {
 
-					sunLight.shadowCamera.fov = shadowConfig.shadowCameraFov;
-					sunLight.shadowCamera.updateProjectionMatrix();
+					sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
+					sunLight.shadow.camera.updateProjectionMatrix();
+					shadowCameraHelper.update();
 
 				});
 
 				shadowGUI.add( shadowConfig, 'shadowBias', -0.01, 0.01 ).onChange( function() {
 
-					sunLight.shadowBias = shadowConfig.shadowBias;
+					sunLight.shadow.bias = shadowConfig.shadowBias;
 
 				});
 
 				shadowGUI.open();
 
-			}
+				// LIGHTING
 
-			//
+				var lightingGUI = gui.addFolder( "Lighting" );
 
-			function onWindowResize( event ) {
+				lightingGUI.add( lightingConfig, 'daylight' ).onChange( function() {
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+					// change between day and night
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				controls.handleResize();
-
-			}
-
-			//
+					if( lightingConfig.daylight === true ) {
 
-			function onKeyDown ( event ) {
+						tweenNight.stop();
+						tweenDay.start();
 
-				switch ( event.keyCode ) {
+					} else {
 
-					case 78: /*N*/
+						tweenDay.stop();
+						tweenNight.start();
 
-						if ( tweenDirection == 1 ) {
+					};
 
-							tweenDay.stop();
-							tweenNight.start();
+				});
 
-							tweenDirection = -1;
+				lightingGUI.open();
 
-						} else {
+			}
 
-							tweenNight.stop();
-							tweenDay.start();
+			//
 
-							tweenDirection = 1;
+			function onWindowResize( event ) {
 
-						}
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-					break;
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				}
+				controls.handleResize();
 
 			}