ThreeJS教程：阴影.mapSize和.radius
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
阴影.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;