用途:为 Three.js 场景加入读起来像天气的降水与天气效果,重点是雨的视锥锚定、风暴叠加、闪电雷声、暴风雪与积雪、湿地表现和音频衔接。资料建议与 threejs-landscape(地面)和 threejs-towers(可对照的物体)配合使用。
主要能力与做法: 视锥锚定:不要在原点放世界尺寸粒子盒。建立窄、深、高的体积(如 WX_W=17、WX_D=50、WX_TOP=40),每帧置于相机前方并朝向相机方向,并设置 frustumCulled = false,否则包围球会干扰。 属性数组:Float32BufferAttribute 会复制传入数组,需保留 attr.array 而不是原数组,否则会出现画面正确但不动、无报错的现象。 密度控制:按最坏情况一次性分配缓冲,用 geo.setDrawRange(0, Math.round(n * density)) 稀疏,避免切换天气时重分配造成卡顿。 风暴叠加:不写第二套粒子系统,而是在雨状态上放大参数——绘制比例、下落速度、倾斜(slant 随速度平方增长)、降低太阳与雾的远端,使风感成立。 闪电:用独立 DirectionalLight,不改时间状态;一次打击由前导与多次回击组成,各为指数衰减,配合天空色乘算与低透明度 DOM 闪光(置于排版之下、约 0.18 以下),雷声按距离延迟并降低音量,且每次打击换光源方位。 暴风雪:作为慢速包络(平静、增强、爆发、减弱)调制雪状态,离开雪状态时重置相位时钟;已落地积雪为独立变量,按慢速计时累积与融化,并让地面颜色持续变白;若表面颜色在着色器内混合,需单独 uniform 控制。 性能:仅当慢速值变化超过阈值(如 0.006)时才重新计算光照,避免每帧重光照。 湿地:降低粗糙度并少量增加金属度、低洼处加半透明水洼贴片、按雨强生成短生命周期溅水环精灵。 音频:用等功率交叉淡化把尾部折回头部实现无缝循环,天气单独增益总线,暴风雪作为叠加层而非硬切。
适用场景:Three.js 交互场景、可步行环境中的降水与风暴表现、需要远近距离感与声音同步的天气氛围。
限制与检查:资料未提供安装命令、版本要求、平台或收费信息;需自行在浏览器中验证——能追踪单滴从生成到落地、雪中两分钟后地面应更白且至少经历一次暴风雪、每次从晴朗进入雪天都应从平静开始、雷声不应与闪光同时到达、并在风暴运行时做性能分析。