浏览代码

Added details for LightShadow.radius

Lewy Blue 8 年之前
父节点
当前提交
c274c421fc
共有 2 个文件被更改,包括 22 次插入11 次删除
  1. 6 2
      docs/api/lights/shadows/LightShadow.html
  2. 16 9
      examples/webgl_shadowmap_pointlight.html

+ 6 - 2
docs/api/lights/shadows/LightShadow.html

@@ -108,8 +108,12 @@ scene.add( helper );
 
 
 		<h3>[property:Float radius]</h3>
 		<h3>[property:Float radius]</h3>
 		<div>
 		<div>
-			TODO<br />
-			The default is *1*.
+			Setting this this to values greater than 1 will blur the edges of the shadow.<br />
+
+			High values will cause unwanted banding effects in the shadows - a greater [page:.mapSize mapSize]
+			will allow for a higher value to be used here before these effects become visible.<br /><br />
+
+			Note that this has no effect if the [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer BasicShadowMap].
 		</div>
 		</div>
 
 
 
 

+ 16 - 9
examples/webgl_shadowmap_pointlight.html

@@ -60,7 +60,10 @@
 					pointLight.shadow.camera.near = 1;
 					pointLight.shadow.camera.near = 1;
 					pointLight.shadow.camera.far = 30;
 					pointLight.shadow.camera.far = 30;
 					// pointLight.shadowCameraVisible = true;
 					// pointLight.shadowCameraVisible = true;
+					pointLight.shadow.mapSize.set(1024, 1024);
+					// pointLight.shadow.mapSize.set(2048, 2048);
 					pointLight.shadow.bias = 0.01;
 					pointLight.shadow.bias = 0.01;
+					pointLight.shadow.radius = 64;
 
 
 					var geometry = new THREE.SphereGeometry( 0.3, 12, 6 );
 					var geometry = new THREE.SphereGeometry( 0.3, 12, 6 );
 					var material = new THREE.MeshBasicMaterial( { color: color } );
 					var material = new THREE.MeshBasicMaterial( { color: color } );
@@ -71,11 +74,15 @@
 
 
 				}
 				}
 
 
+				// var shadowType = THREE.BasicShadowMap;
+				// var shadowType = THREE.PCFShadowMap;
+				var shadowType = THREE.PCFSoftShadowMap;
+
 				pointLight = createLight( 0xffffff );
 				pointLight = createLight( 0xffffff );
 				scene.add( pointLight );
 				scene.add( pointLight );
 
 
-				pointLight2 = createLight( 0xff0000 );
-				scene.add( pointLight2 );
+				// pointLight2 = createLight( 0xff0000 );
+				// scene.add( pointLight2 );
 
 
 				var geometry = new THREE.TorusKnotGeometry( 14, 1, 150, 20 );
 				var geometry = new THREE.TorusKnotGeometry( 14, 1, 150, 20 );
 				var material = new THREE.MeshPhongMaterial( {
 				var material = new THREE.MeshPhongMaterial( {
@@ -107,7 +114,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.BasicShadowMap;
+				renderer.shadowMap.type = shadowType;
 				document.body.appendChild( renderer.domElement );
 				document.body.appendChild( renderer.domElement );
 
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
@@ -143,15 +150,15 @@
 
 
 				var time = performance.now() * 0.001;
 				var time = performance.now() * 0.001;
 
 
-				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;
+				// 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;
 
 
 				time += 10000;
 				time += 10000;
 
 
-				pointLight2.position.x = Math.sin( time ) * 9;
-				pointLight2.position.y = Math.sin( time * 1.1 ) * 9 + 5;
-				pointLight2.position.z = Math.sin( time * 1.2 ) * 9;
+				// pointLight2.position.x = Math.sin( time ) * 9;
+				// pointLight2.position.y = Math.sin( time * 1.1 ) * 9 + 5;
+				// pointLight2.position.z = Math.sin( time * 1.2 ) * 9;
 
 
 				torusKnot.rotation.y = time * 0.1;
 				torusKnot.rotation.y = time * 0.1;