获课地址：xingkeit.top/7640/

在Web3D这个领域摸索了几年，我有一个越来越强烈的感受：Three.js入门不难，但想做出“像那么回事”的效果，最难搞定的永远是阴影。

光照可以靠多打几盏补，模型可以靠贴图遮丑，但阴影不行。阴影做得假，整个场景的立体感、真实感瞬间崩塌。偏偏阴影又是Three.js里参数最多、最绕、最容易踩坑的部分。直到看了凯子哥关于Three.js阴影的干货分享，我才真正理清了这里面的门道。

阴影的痛点：为什么开了阴影反而更假？

很多初学Three.js的人都有过这样的经历：按照文档开了阴影，结果要么阴影没出来，要么出来了但边缘锯齿严重，要么整个场景突然卡成PPT。于是得出结论——Three.js阴影不好用。

其实不是不好用，是没调对。

凯子哥在分享里一针见血地指出：Three.js的阴影实现是基于阴影映射（shadow mapping）的，这套机制本身不复杂，但影响最终效果的因素太多了——光源角度、阴影贴图分辨率、近裁面远裁面、偏差值调整……任何一个参数没设对，出来的阴影要么失踪，要么漂移，要么糊成一片。

参数调优的本质：在性能和效果之间找平衡

做Web3D和做离线渲染最大的不同，就是永远要算一笔账：视觉效果和渲染性能怎么平衡。

凯子哥讲阴影调优，最让我受益的一点是他始终带着“性能意识”。比如讲阴影贴图分辨率，他不只是说“调高就更清晰”，而是会告诉你：分辨率每提高一倍，显存占用和计算量是翻着倍往上涨的。移动端什么场景用512，桌面端什么场景用1024，什么场景需要用2048还得配合CSM，全都拆开讲透。

再比如阴影偏差（shadow bias）的调整。这个参数很多人要么忽略，要么乱调。调小了出现阴影痼影（shadow acne），模型上全是条纹；调大了出现彼得潘现象（Peter Panning），阴影和模型分离。凯子哥用一个简单的示意场景，把这两种现象的产生原因和调整思路演示得清清楚楚。看完你就知道，遇到条纹该调哪几个参数，遇到阴影飘了又该动哪里。

实用技巧：让阴影真正服务于场景

理论讲清楚了，凯子哥的干货里最值钱的，是那些在实际项目中打磨出来的实用技巧。

比如多光源场景的阴影处理。很多人图省事，场景里打四五盏光源全开阴影，结果性能崩了不说，阴影方向乱成一团。凯子哥的建议是：主光源开阴影，辅助光源只照明不投影，必要时用假的阴影贴图（baked shadow）来补细节。这一套组合拳下来，效果没降，帧率上去了。

再比如半透明物体的阴影。Three.js默认的阴影映射对半透明物体支持不好，出来的阴影是实心的，非常假。凯子哥分享了一种变通方案：用平面代理模型模拟阴影范围，配合自定义着色器调整透明度。虽然不是完美解法，但在大多数项目里够用了。

还有动态场景的阴影更新。角色走来走去，阴影要跟着动，但每帧更新所有阴影的计算量太大。凯子哥讲了几种优化策略：根据距离分级更新、只更新动起来的物体、用静态阴影结合动态细节……这些都是在实际项目里踩过坑才能总结出来的经验。

调试思维：遇到问题知道从哪下手

看凯子哥的分享，还有一个很深的感受：他教的不是死参数，而是调试的思路。

阴影出问题了，第一步看什么？第二步查什么？第三步调什么？他给你画了一条清晰的路径。比如阴影没渲染出来，先看光源有没有开启castShadow，再看接收阴影的物体有没有开启receiveShadow，再看光源的shadow相机范围有没有覆盖到物体，最后才是调贴图大小和偏差值。

这套调试流程捋下来，你再遇到阴影问题就不会慌，一步一步排查，总能找到症结。这种“授人以渔”的讲法，比单纯给几个参数组合要值钱得多。

写在最后：阴影是3D世界的灵魂

我一直觉得，阴影是3D世界里最有“灵魂”的东西。它不像模型和贴图那样直观可见，但它默默地定义了物体之间的空间关系、光线方向、时间氛围。阴影做好了，场景就活了。

凯子哥这套Three.js阴影的干货，把从原理到参数、从基础实现到进阶优化的整个知识体系串了起来。对于正在学习Three.js、或者做项目被阴影困扰的朋友来说，绝对值得花时间好好看一遍。

毕竟，在Web3D这个领域，能遇到愿意把踩过的坑、试过的参数、总结的方法都掏心窝子讲给你听的人，不容易。