Three.js基础之阴影

在 Three.js 中， 所有阴影的基类都是 Three.LightShadow，请注意：不能直接去实例化 LightShadow， 平时真正去创建的阴影， 都是该类的子类

 阴影类型，目前一共三种

阴影类型                                        阴影名称                        解释说明

PointLightShadow                        点光源阴影                        对应 PointLight 光源

DirectionalLightShadow                平行光阴影                        对应 DirectionalLight 光源

SpotLightShadow                           聚光灯阴影                        对应 SpotLight

• DirectionalLightShadow 只能使用 OrthographiCamera， 镜头来计算阴影， 无法在 PerspectiveCamera 镜头下使用，因为 PerspectiveCamera 的光线是平行的
• 你无需创建阴影实例， 阴影实例是由灯光内部创建的

阴影贴图：默认情况下 Three.js 使用阴影贴图来绘制阴影

1. 所谓贴图， 你可以想象成 “一层层窗户纸”，假设有一个窗户， 你可以一层一层的粘贴不同透明度的窗户纸，每一层窗户纸都会叠加到之前的那一层， 最终窗户纸所呈现的效果是所有窗户纸最终合并后一块呈现的

阴影的实际渲染过程

• 一个灯光，渲染出一份 20 个阴影对象，每多一个可产生阴影的光源，阴影对象， 则需要多渲染一次场景， 阴影的渲染需要大量的计算和性能
• 降低阴影所需性能的解决办法： 可以有多个灯光， 但只有一个平行光可产生阴影。使用 光照贴图 或 环境光照遮挡贴图，来预先计算离线照明的效果。使用 假阴影， 添加一个平面放到物体下方的地面上， 同时赋予一个看着像阴影的纹理图片材质
• 对于大多数 游戏场景来说， 人物脚下的阴影都是采用 假阴影 的策略， 一般 人们是可以接受这种假阴影， 这种假阴影对性能的提升非常大
• 阴影视锥 变大， 实际渲染中会发现 物体在地面上的阴影变得不够光滑， 有类似马赛克的块状效果，阴影贴图尺寸为 512 * 512， 当灯光中阴影镜头视锥范围越大，所需要对应的阴影贴图尺寸也要越大， 当视锥特别大而阴影贴图尺寸并不足够大时就会产生这种块状阴影。最简单的做法就是不要让视锥范围调整的过大， 让视锥可覆盖物体但又不是特别大，这才是我们该做的。事实上是视锥和阴影贴图尺寸，越合适，越贴近阴影渲染的效果越好
• 渲染器中 ‘ renderer.capabilities.maxTextureSize ’  的值就是渲染器可支持的贴图最大尺寸
• 影子的明暗度， 我们无法直接修改，但是可以通过给场景中添加一个半球环境光，让场景整体更加亮一些， 从而影子也就变得淡了一些 renderer.physicallyCorrectLights = true