阴影.mapSize和.radius

接着上节课阴影范围讲解，本节课给大家介绍阴影渲染质量的问题

前面给大家介绍过平行光阴影对象DirectionalLightShadow的阴影相机属性.camera，本节课为大家介绍该阴影对象的阴影贴图尺寸.mapSize属性和阴影半径.radius属性。

• light.shadow.mapSize阴影贴图尺寸属性(提升边缘渲染效果)
• light.shadow.radius弱化模糊阴影边缘

light.shadow.mapSize阴影贴图尺寸属性

你可以把threejs生成的光源阴影类比为前面学习过的颜色贴图.map，阴影投射到其它物体上，可以理解为阴影就像贴图一样映射到Mesh上。

// mapSize属性默认512x512
console.log('阴影默认像素',directionalLight.shadow.mapSize);

你可以尝试把.mapSize设置为比较小的值(尺寸一般2的n次方)，查看阴影渲染质量。

directionalLight.shadow.mapSize.set(128,128)

你可以尝试把阴影相机.shadow.camera的范围扩大多倍，查看阴影渲染质量变化。你可以发现渲染范围越大，阴影渲染效果越差。

directionalLight.shadow.mapSize.set(128,128)

如果你的阴影边缘不够清晰，有模糊感、锯齿感，可以适当提升.mapSize属性值。

// 如果阴影边缘锯齿感的时候，可以适当提升像素
directionalLight.shadow.mapSize.set(1024,1024);
directionalLight.shadow.mapSize.set(2048,2048);

.shadow.mapSize和.shadow.camera总结

• 在能覆盖包含阴影渲染范围的情况下，.shadow.camera的尺寸尽量小。

• 如果你增加.shadow.camera长方体尺寸范围，阴影模糊锯齿感，可以适当提升.shadow.mapSize的大小。

阴影半径.shadow.radius属性

如果你在项目中，希望阴影的边缘弱化或者说模糊化,可以通过阴影半径.shadow.radius属性设置

// 模糊弱化阴影边缘
console.log('.shadow.radius',directionalLight.shadow.radius);

适当提升.shadow.radius,你可以感到阴影边缘与非阴影区域是渐变过渡，或者说阴影边缘逐渐弱化或模糊化，没有很明显的边界感。

directionalLight.shadow.radius = 3;