Three.js 阴影与光照工程实战：ShadowMap 调参、接触阴影与性能取舍

Three.js 阴影与光照工程实战：ShadowMap 调参、接触阴影与性能取舍

真实感渲染里，阴影往往是最先暴露问题的环节：锯齿、漏光、接触面发黑、移动端掉帧。

本文从工程视角梳理 Three.js 阴影系统的常见配置与取舍。

一、开启阴影的最小闭环

renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;directionalLight.castShadow=true;directionalLight.shadow.mapSize.set(2048,2048);directionalLight.shadow.camera.near=0.5;directionalLight.shadow.camera.far=50;mesh.castShadow=true;mesh.receiveShadow=true;

二、三大高频问题

1）阴影锯齿

提高 mapSize 或使用软阴影类型；注意 mapSize 与性能的线性关系。

2）投影相机范围过大

正交相机范围过大等于浪费分辨率。应让 shadow camera 尽量贴合场景包围体。

3）接触阴影不真实

仅靠 ShadowMap 往往不够，可叠加 AO/SSAO 或烘焙贴图作为补充。

三、性能策略

• 移动端优先降低 mapSize，其次减少 castShadow 物体数量
• 静态物体可烘焙阴影到贴图，运行时关闭动态阴影
• 多光源时谨慎全开 castShadow，优先主方向光

四、结语

阴影调参本质是分辨率、范围与帧率的三角权衡。把 shadow camera 范围收紧，往往比盲目加 mapSize 更有效。