Simplified PointLight shadows example.

examples/webgl_shadowmap_pointlight.html

@@ -35,10 +35,9 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var camera, scene, renderer, clock, stats;
+			var camera, scene, renderer, stats;
 			var dirLight, pointLight;
-			var pointLightParent;
-			var torusKnot, cube, cube2, cube3, cube4;
+			var torusKnot;
 			var cubeMaterial;
 			var wallMaterial;
 			var ground;
@@ -59,28 +58,35 @@
 			function initScene() {
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 0, 15, 35 );
+				camera.position.set( 0, 10, 40 );
 
 				scene = new THREE.Scene();
 
 				// Lights
+
 				var ambient = new THREE.AmbientLight( 0x404040 );
 				scene.add( ambient );
 
 				pointLight = new THREE.PointLight( 0xffffff );
-				pointLight.position.set( 0, 11, 4 );
 				pointLight.castShadow = true;
 				pointLight.shadowCameraNear = 1;
 				pointLight.shadowCameraFar = 30;
 				pointLight.shadowDarkness = 0.5;
-				pointLight.shadowCameraVisible = true;
+				// pointLight.shadowCameraVisible = true;
 				pointLight.shadowMapWidth = 2048;
 				pointLight.shadowMapHeight = 1024;
-				pointLight.shadowBias = 0.1;
-				pointLight.name = 'Point Light';
+				pointLight.shadowBias = 0.01;
 				scene.add( pointLight );
 
-				/*dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				var geometry = new THREE.SphereGeometry( 0.3, 32, 32 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+				var sphere = new THREE.Mesh( geometry, material );
+				sphere.castShadow = false;
+				sphere.receiveShadow = false;
+				pointLight.add( sphere );
+
+				/*
+				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				dirLight.position.set( 0, 50, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadowCameraNear = 1;
@@ -93,42 +99,18 @@
 				dirLight.shadowCameraVisible = true;
 				dirLight.shadowMapWidth = 1024;
 				dirLight.shadowMapHeight = 1024;
-				dirLight.name = 'Dir. Light';
-				scene.add( dirLight );*/
+				scene.add( dirLight );
+				*/
 
 				cubeMaterial = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
-					shininess: 150,
-					specular: 0x222222,
-					shading: THREE.SmoothShading,
+					shininess: 50,
+					specular: 0x222222
 				} );
 
-				var cubeGeometry = new THREE.BoxGeometry( 3, 3, 3 );
-				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
-				cube.name = "cube 1";
-				cube.position.set( 8, 3, 6 );
-				cube.castShadow = true;
-				cube.receiveShadow = true;
-				scene.add( cube );
-
-				cube2 = new THREE.Mesh( cubeGeometry, cubeMaterial );
-				cube2.name = "cube 2";
-				cube2.position.set( -8, 3, 4 );
-				cube2.castShadow = true;
-				cube2.receiveShadow = true;
-				scene.add( cube2 );
-
-				cube3 = new THREE.Mesh( cubeGeometry, cubeMaterial );
-				cube3.name = "cube 3";
-				cube3.position.set( -4, 15, -6 );
-				cube3.castShadow = true;
-				cube3.receiveShadow = true;
-				scene.add( cube3 );
-
-				var torusGeometry =  new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
+				var torusGeometry =  new THREE.TorusKnotGeometry( 14, 1, 150, 20 );
 				torusKnot = new THREE.Mesh( torusGeometry, cubeMaterial );
-				torusKnot.scale.multiplyScalar( 1 / 18 );
-				torusKnot.position.set( -1, 3, -4 );
+				torusKnot.position.set( 0, 5, 0 );
 				torusKnot.castShadow = true;
 				torusKnot.receiveShadow = true;
 				scene.add( torusKnot );
@@ -142,7 +124,6 @@
 
 				var wallGeometry = new THREE.BoxGeometry( 10, 0.15, 10 );
 				ground = new THREE.Mesh( wallGeometry, wallMaterial );
-				ground.name = "ground";
 				ground.scale.multiplyScalar( 3 );
 				ground.castShadow = false;
 				ground.receiveShadow = true;
@@ -150,7 +131,6 @@
 				ground.position.set( 0, -5, 0 );
 
 				var ceiling = new THREE.Mesh( wallGeometry, wallMaterial );
-				ceiling.name = "ceiling";
 				ceiling.scale.multiplyScalar( 3 );
 				ceiling.castShadow = false;
 				ceiling.receiveShadow = true;
@@ -158,7 +138,6 @@
 				ceiling.position.set( 0, 24, 0 );
 
 				var wall = new THREE.Mesh( wallGeometry, wallMaterial );
-				wall.name = "left wall";
 				wall.scale.multiplyScalar( 3 );
 				wall.castShadow = false;
 				wall.receiveShadow = true;
@@ -167,7 +146,6 @@
 				wall.rotation.z = Math.PI / 2;
 
 				wall = new THREE.Mesh( wallGeometry, wallMaterial );
-				wall.name = "right wall";
 				wall.scale.multiplyScalar( 3 );
 				wall.castShadow = false;
 				wall.receiveShadow = true;
@@ -176,7 +154,6 @@
 				wall.rotation.z = Math.PI / 2;
 
 				wall = new THREE.Mesh( wallGeometry, wallMaterial );
-				wall.name = "back wall";
 				wall.scale.multiplyScalar( 3 );
 				wall.castShadow = false;
 				wall.receiveShadow = true;
@@ -185,28 +162,16 @@
 				wall.rotation.y = Math.PI / 2;
 				wall.rotation.z = Math.PI / 2;
 
-				/*wall = new THREE.Mesh( wallGeometry, wallMaterial );
-				wall.name = "front wall";
+				/*
+				wall = new THREE.Mesh( wallGeometry, wallMaterial );
 				wall.scale.multiplyScalar( 3 );
 				wall.castShadow = false;
 				wall.receiveShadow = true;
 				scene.add( wall );
 				wall.position.set( 0, 10, 14 );
 				wall.rotation.y = Math.PI / 2;
-				wall.rotation.z = Math.PI / 2;*/
-
-				var sphereGeometry = new THREE.SphereGeometry( 1, 32, 32 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-				var sphere = new THREE.Mesh( sphereGeometry, material );
-				sphere.castShadow = false;
-				sphere.receiveShadow = false;
-				sphere.position.set( 0, 11, 4 );
-				scene.add( sphere );
-
-				pointLightParent = new THREE.Object3D();
-				pointLightParent.add( pointLight );
-				pointLightParent.add( sphere );
-				scene.add( pointLightParent );
+				wall.rotation.z = Math.PI / 2;
+				*/
 
 			}
 
@@ -220,11 +185,9 @@
 
 				// Mouse control
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 2, 0 );
+				controls.target.set( 0, 10, 0 );
 				controls.update();
 
-				clock = new THREE.Clock();
-
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.right = '0px';
@@ -237,6 +200,7 @@
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
+
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -252,26 +216,20 @@
 			function renderScene() {
 
 				renderer.render( scene, camera );
+
 			}
 
 			function render() {
 
-				var delta = clock.getDelta();
-
-				pointLightParent.rotation.y += delta * 2;
-				renderScene();
+				var time = performance.now() * 0.001;
 
-				cube.rotation.x += 0.25 * delta;
-				cube.rotation.y += 2 * delta;
-				cube.rotation.z += 1 * delta;
+				pointLight.position.x = Math.sin( time ) * 9;
+				pointLight.position.y = Math.sin( time * 1.1 ) * 9 + 5;
+				pointLight.position.z = Math.sin( time * 1.2 ) * 9;
 
-				cube2.rotation.x += 0.25 * delta;
-				cube2.rotation.y += 2 * delta;
-				cube2.rotation.z += 1 * delta;
+				renderScene();
 
-				cube3.rotation.x += 0.25 * delta;
-				cube3.rotation.y += 2 * delta;
-				cube3.rotation.z += 1 * delta;
+				torusKnot.rotation.y = time * 0.1;
 
 			}