three.js源码翻译-DirectionalLightShadow.js

three.js源码翻译-DirectionalLightShadow.js

说明

DirectionalLightShadow类是方向光的阴影，DirectionalLightShadow的创建可以在DirectionalLight的源码翻译部分看到，总体来说就是创建了一个正交摄像机传到LightShadow中来，但是一般默认值创建出的阴影很模糊，各种不行，需要具体的设置各个参数来创建出一个清晰的阴影。

源码位置及翻译

源码位置

src/light/DirectionalLightShadow.js

源码翻译

/**
 * 方向光的阴影，基本上就是传了一个正交摄像机
 *
 */
function DirectionalLightShadow( ) {

	LightShadow.call( this, new OrthographicCamera( - 5, 5, 5, - 5, 0.5, 500 ) );

}

DirectionalLightShadow.prototype = Object.assign( Object.create( LightShadow.prototype ), {

	constructor: DirectionalLightShadow

} );

示例及案例

创建

let directionLight = new THREE.DirectionalLight(0xffffff) 
directionLight.position.set(0, 100, 50);
directionLight.castShadow = true;
directionLight.shadow.camera.top = 64;
directionLight.shadow.camera.bottom = -64;
directionLight.shadow.camera.left = 64;
directionLight.shadow.camera.right = -64;
scene.add(directionLight);

注意的点

• 主要的点就是创建出的默认阴影效果不行，需要具体的传值来设置阴影。
• 需要将光源的.castShadow设置为true，同时需要将接受阴影的mesh的.receiveShadow设置为true，然后还有渲染器中的.shadowMap.enabled也要设置为true。表格如下

操作物体/属性	光源(eg:THREE.DirectionalLight)	接受阴影的物体(THREE.Mesh)	渲染器(THREE.WebGLRenderer)
.castShadow	✅ Yes
.receiveShadow		✅ Yes
.shadowMap.enabled			✅ Yes