Merge pull request #8401 from Mugen87/dev

Examples: Cleanup

examples/index.html

@@ -333,9 +333,9 @@
 
 		function selectFile( file ) {
 
-			if ( selected !== null ) links[ selected ].className = 'link';
+			if ( selected !== null ) links[ selected ].classList.remove( 'selected' );
 
-			links[ file ].className = 'link selected';
+			links[ file ].classList.add( 'selected' );
 
 			window.location.hash = file;
 			viewer.focus();

examples/webgl_animation_skinning_morph.html

@@ -121,18 +121,17 @@
 
 				light.castShadow = true;
 
-				light.shadowMapWidth = 1024;
-				light.shadowMapHeight = 1024;
+				light.shadow.mapSize.width = 1024;
+				light.shadow.mapSize.heigth = 1024;
 
 				var d = 390;
 
-				light.shadowCameraLeft = -d;
-				light.shadowCameraRight = d;
-				light.shadowCameraTop = d * 1.5;
-				light.shadowCameraBottom = -d;
+				light.shadow.camera.left = -d;
+				light.shadow.camera.right = d;
+				light.shadow.camera.top = d * 1.5;
+				light.shadow.camera.bottom = -d;
 
-				light.shadowCameraFar = 3500;
-				//light.shadowCameraVisible = true;
+				light.shadow.camera.far = 3500;
 
 				// RENDERER
 
@@ -160,8 +159,6 @@
 				var loader = new THREE.JSONLoader();
 				loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
 
-					console.log( 'materials', materials );
-
 					createScene( geometry, materials, 0, FLOOR, -300, 60 )
 
 					// GUI

examples/webgl_geometry_spline_editor.html

@@ -70,12 +70,12 @@
 				var light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
-				light.shadowCameraNear = 200;
-				light.shadowCameraFar = 2000;
-				light.shadowCameraFov = 70;
-				light.shadowBias = -0.000222;
-				light.shadowMapWidth = 1024;
-				light.shadowMapHeight = 1024;
+				light.shadow.camera.near = 200;
+				light.shadow.camera.far = 2000;
+				light.shadow.camera.fov = 70;
+				light.shadow.bias = -0.000222;
+				light.shadow.mapSize.width = 1024;
+				light.shadow.mapSize.height = 1024;
 				scene.add( light );
 				spotlight = light;
 

examples/webgl_interactive_draggablecubes.html

@@ -60,14 +60,14 @@
 				light.position.set( 0, 500, 2000 );
 				light.castShadow = true;
 
-				light.shadowCameraNear = 200;
-				light.shadowCameraFar = camera.far;
-				light.shadowCameraFov = 50;
+				light.shadow.camera.near = 200;
+				light.shadow.camera.far = camera.far;
+				light.shadow.camera.fov = 50;
 
-				light.shadowBias = -0.00022;
+				light.shadow.bias = -0.00022;
 
-				light.shadowMapWidth = 2048;
-				light.shadowMapHeight = 2048;
+				light.shadow.mapSize.width = 2048;
+				light.shadow.mapSize.height = 2048;
 
 				scene.add( light );
 

examples/webgl_interactive_raycasting_points.html

@@ -160,7 +160,7 @@
 				}
 
 				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
-				geometry.addDrawCall( 0, indices.length );
+				geometry.addGroup( 0, indices.length );
 
 				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.Points( geometry, material );

examples/webgl_loader_md2_control.html

@@ -105,14 +105,17 @@
 				light.position.set( 200, 450, 500 );
 
 				light.castShadow = true;
-				light.shadowMapWidth = 1024;
-				light.shadowMapHeight = 512;
-				light.shadowCameraNear = 100;
-				light.shadowCameraFar = 1200;
-				light.shadowCameraTop = 350;
-				light.shadowCameraBottom = -350;
-				light.shadowCameraRight = 1000;
-				light.shadowCameraLeft = -1000;
+
+				light.shadow.mapSize.width = 1024;
+				light.shadow.mapSize.height = 512;
+
+				light.shadow.camera.near = 100;
+				light.shadow.camera.far = 1200;
+
+				light.shadow.camera.left = -1000;
+				light.shadow.camera.right = 1000;
+				light.shadow.camera.top = 350;
+				light.shadow.camera.bottom = -350;
 
 				scene.add( light );
 				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );

examples/webgl_loader_ply.html

@@ -150,21 +150,20 @@
 				scene.add( directionalLight );
 
 				directionalLight.castShadow = true;
-				// directionalLight.shadowCameraVisible = true;
 
 				var d = 1;
-				directionalLight.shadowCameraLeft = -d;
-				directionalLight.shadowCameraRight = d;
-				directionalLight.shadowCameraTop = d;
-				directionalLight.shadowCameraBottom = -d;
+				directionalLight.shadow.camera.left = -d;
+				directionalLight.shadow.camera.right = d;
+				directionalLight.shadow.camera.top = d;
+				directionalLight.shadow.camera.bottom = -d;
 
-				directionalLight.shadowCameraNear = 1;
-				directionalLight.shadowCameraFar = 4;
+				directionalLight.shadow.camera.near = 1;
+				directionalLight.shadow.camera.far = 4;
 
-				directionalLight.shadowMapWidth = 1024;
-				directionalLight.shadowMapHeight = 1024;
+				directionalLight.shadow.mapSize.width = 1024;
+				directionalLight.shadow.mapSize.height = 1024;
 
-				directionalLight.shadowBias = -0.005;
+				directionalLight.shadow.bias = -0.005;
 
 			}
 

examples/webgl_loader_stl.html

@@ -204,21 +204,20 @@
 				scene.add( directionalLight );
 
 				directionalLight.castShadow = true;
-				// directionalLight.shadowCameraVisible = true;
 
 				var d = 1;
-				directionalLight.shadowCameraLeft = -d;
-				directionalLight.shadowCameraRight = d;
-				directionalLight.shadowCameraTop = d;
-				directionalLight.shadowCameraBottom = -d;
+				directionalLight.shadow.camera.left = -d;
+				directionalLight.shadow.camera.right = d;
+				directionalLight.shadow.camera.top = d;
+				directionalLight.shadow.camera.bottom = -d;
 
-				directionalLight.shadowCameraNear = 1;
-				directionalLight.shadowCameraFar = 4;
+				directionalLight.shadow.camera.near = 1;
+				directionalLight.shadow.camera.far = 4;
 
-				directionalLight.shadowMapWidth = 1024;
-				directionalLight.shadowMapHeight = 1024;
+				directionalLight.shadow.mapSize.width = 1024;
+				directionalLight.shadow.mapSize.height = 1024;
 
-				directionalLight.shadowBias = -0.005;
+				directionalLight.shadow.bias = -0.005;
 
 			}
 

examples/webgl_loader_utf8.html

@@ -96,20 +96,19 @@
 				scene.add( directionalLight );
 
 				directionalLight.castShadow = true;
-				// directionalLight.shadowCameraVisible = true;
 
-				directionalLight.shadowMapWidth = 2048;
-				directionalLight.shadowMaHeight = 2048;
+				directionalLight.shadow.mapSize.width = 2048;
+				directionalLight.shadow.mapSize.height = 2048;
 
 				var d = 150;
 
-				directionalLight.shadowCameraLeft = -d * 1.2;
-				directionalLight.shadowCameraRight = d * 1.2;
-				directionalLight.shadowCameraTop = d;
-				directionalLight.shadowCameraBottom = -d;
+				directionalLight.shadow.camera.left = -d * 1.2;
+				directionalLight.shadow.camera.right = d * 1.2;
+				directionalLight.shadow.camera.top = d;
+				directionalLight.shadow.camera.bottom = -d;
 
-				directionalLight.shadowCameraNear = 200;
-				directionalLight.shadowCameraFar = 500;
+				directionalLight.shadow.camera.near = 200;
+				directionalLight.shadow.camera.far = 500;
 
 
 				// RENDERER

examples/webgl_materials_bumpmap.html

@@ -101,17 +101,16 @@
 				scene.add( spotLight );
 
 				spotLight.castShadow = true;
-				// spotLight.shadowCameraVisible = true;
 
-				spotLight.shadowMapWidth = 2048;
-				spotLight.shadowMapHeight = 2048;
+				spotLight.shadow.mapSize.width = 2048;
+				spotLight.shadow.mapSize.height = 2048;
 
-				spotLight.shadowCameraNear = 200;
-				spotLight.shadowCameraFar = 1500;
+				spotLight.shadow.camera.near = 200;
+				spotLight.shadow.camera.far = 1500;
 
-				spotLight.shadowCameraFov = 40;
+				spotLight.shadow.camera.fov = 40;
 
-				spotLight.shadowBias = -0.005;
+				spotLight.shadow.bias = -0.005;
 
 				//
 

examples/webgl_materials_bumpmap_skin.html

@@ -111,20 +111,19 @@
 				directionalLight.position.set( 500, 0, 500 );
 
 				directionalLight.castShadow = true;
-				//directionalLight.shadowCameraVisible = true;
 
-				directionalLight.shadowMapWidth = 2048;
-				directionalLight.shadowMapHeight = 2048;
+				directionalLight.shadow.mapSize.width = 2048;
+				directionalLight.shadow.mapSize.height = 2048;
 
-				directionalLight.shadowCameraNear = 200;
-				directionalLight.shadowCameraFar = 1500;
+				directionalLight.shadow.camera.near = 200;
+				directionalLight.shadow.camera.far = 1500;
 
-				directionalLight.shadowCameraLeft = -500;
-				directionalLight.shadowCameraRight = 500;
-				directionalLight.shadowCameraTop = 500;
-				directionalLight.shadowCameraBottom = -500;
+				directionalLight.shadow.camera.left = -500;
+				directionalLight.shadow.camera.right = 500;
+				directionalLight.shadow.camera.top = 500;
+				directionalLight.shadow.camera.bottom = -500;
 
-				directionalLight.shadowBias = -0.005;
+				directionalLight.shadow.bias = -0.005;
 
 				scene.add( directionalLight );
 

examples/webgl_materials_cubemap_dynamic.html

@@ -169,21 +169,16 @@
 				spotLight.target.position.set( 0, 0, 0 );
 				spotLight.castShadow = true;
 
-				spotLight.shadowCameraNear = 100;
-				spotLight.shadowCameraFar = camera.far;
-				spotLight.shadowCameraFov = 50;
+				spotLight.shadow.camera.near = 100;
+				spotLight.shadow.camera.far = camera.far;
+				spotLight.shadow.camera.fov = 50;
 
-				spotLight.shadowBias = -0.00125;
-				spotLight.shadowMapWidth = SHADOW_MAP_WIDTH;
-				spotLight.shadowMapHeight = SHADOW_MAP_HEIGHT;
+				spotLight.shadow.bias = -0.00125;
+				spotLight.shadow.mapSize.width = SHADOW_MAP_WIDTH;
+				spotLight.shadow.mapSize.height = SHADOW_MAP_HEIGHT;
 
 				scene.add( spotLight );
 
-				directionalLight2 = new THREE.PointLight( 0xff9900, 0.25 );
-				directionalLight2.position.set( 0.5, -1, 0.5 );
-				//directionalLight2.position.normalize();
-				//scene.add( directionalLight2 );
-
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );

examples/webgl_shadowmap.html

@@ -111,16 +111,13 @@
 
 				light.castShadow = true;
 
-				light.shadowCameraNear = 1200;
-				light.shadowCameraFar = 2500;
-				light.shadowCameraFov = 50;
+				light.shadow.camera.near = 1200;
+				light.shadow.camera.far = 2500;
+				light.shadow.camera.fov = 50;
+				light.shadow.bias = 0.0001;
 
-				//light.shadowCameraVisible = true;
-
-				light.shadowBias = 0.0001;
-
-				light.shadowMapWidth = SHADOW_MAP_WIDTH;
-				light.shadowMapHeight = SHADOW_MAP_HEIGHT;
+				light.shadow.mapSize.width = SHADOW_MAP_WIDTH;
+				light.shadow.mapSize.height = SHADOW_MAP_HEIGHT;
 
 				scene.add( light );
 

examples/webgl_shadowmap_performance.html

@@ -106,16 +106,14 @@
 
 				light.castShadow = true;
 
-				light.shadowCameraNear = 700;
-				light.shadowCameraFar = camera.far;
-				light.shadowCameraFov = 50;
+				light.shadow.camera.near = 700;
+				light.shadow.camera.far = camera.far;
+				light.shadow.camera.fov = 50;
 
-				//light.shadowCameraVisible = true;
+				light.shadow.bias = 0.0001;
 
-				light.shadowBias = 0.0001;
-
-				light.shadowMapWidth = SHADOW_MAP_WIDTH;
-				light.shadowMapHeight = SHADOW_MAP_HEIGHT;
+				light.shadow.mapSize.width = SHADOW_MAP_WIDTH;
+				light.shadow.mapSize.height = SHADOW_MAP_HEIGHT;
 
 				scene.add( light );
 

examples/webgl_shadowmap_viewer.html

@@ -76,10 +76,10 @@
 				spotLight.penumbra = 0.3;
 				spotLight.position.set( 10, 10, 5 );
 				spotLight.castShadow = true;
-				spotLight.shadowCameraNear = 8;
-				spotLight.shadowCameraFar = 30;
-				spotLight.shadowMapWidth = 1024;
-				spotLight.shadowMapHeight = 1024;
+				spotLight.shadow.camera.near = 8;
+				spotLight.shadow.camera.far = 30;
+				spotLight.shadow.mapSize.width = 1024;
+				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
 				scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
@@ -88,14 +88,14 @@
 				dirLight.name = 'Dir. Light';
 				dirLight.position.set( 0, 10, 0 );
 				dirLight.castShadow = true;
-				dirLight.shadowCameraNear = 1;
-				dirLight.shadowCameraFar = 10;
-				dirLight.shadowCameraRight = 15;
-				dirLight.shadowCameraLeft = - 15;
-				dirLight.shadowCameraTop	= 15;
-				dirLight.shadowCameraBottom = - 15;
-				dirLight.shadowMapWidth = 1024;
-				dirLight.shadowMapHeight = 1024;
+				dirLight.shadow.camera.near = 1;
+				dirLight.shadow.camera.far = 10;
+				dirLight.shadow.camera.right = 15;
+				dirLight.shadow.camera.left = - 15;
+				dirLight.shadow.camera.top	= 15;
+				dirLight.shadow.camera.bottom = - 15;
+				dirLight.shadow.mapSize.width = 1024;
+				dirLight.shadow.mapSize.height = 1024;
 				scene.add( dirLight );
 
 				scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );