Three.js粒子系统打造逼真下雨动画全攻略

为什么选择Three.js做下雨效果？

下雨动画在网页3D场景里特别能烘托氛围，从游戏背景到数据可视化都能用上。Three.js的粒子系统就像一堆微小的精灵，每个雨滴都是独立粒子，通过控制它们的运动轨迹，就能模拟出千变万化的雨景。相比传统CSS动画，Three.js能做出有深度的立体雨幕，还能实时调整雨量和风速呢！

五分钟搭建基础场景

先初始化Three.js三件套：场景、相机和渲染器。关键代码长这样：

const scene = new THREE.Scene;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true }); // 透明背景

记得加个雾效会更真实：scene.fog = new THREE.FogExp2(0x11111f, 0.002); 最后让相机俯视场景，就像从高楼看雨幕的感觉。

粒子系统造雨滴核心技术

雨滴本质是大量带纹理的粒子。先创建粒子材质和几何体：

• 材质：用THREE.PointsMaterial加载透明雨滴贴图
• 几何体：THREE.BufferGeometry生成5000个顶点坐标
• 位置随机：用Math.random让雨滴分散在屏幕外

重点在顶点着色器控制运动，这个代码片段让雨滴斜着下落：

varying float opacity;
void main {
  vec3 newPosition = position + velocity * time;
  if(newPosition.y < -50.0) newPosition.y += 100.0; // 循环下落
  gl_PointSize = 8.0;

物理效果增强真实感

加点随机波动更自然：velocity.x += (Math.random
0.5) * 0.02; 就像真实雨滴受气流影响。

让雨景活起来的视觉魔法

单有雨滴还不够！试试这些技巧：

• 地面涟漪：在地面材质加动态法线贴图，雨滴落地点泛圈圈
• 镜头雨痕：用半透明平面叠加水滴纹理，随视角移动
• 闪电特效：突然调高环境光亮度再渐变恢复

最重要的是动态光照！给场景添加平行光并开启阴影，雨滴经过光源区域时会突然变亮，瞬间就有”雨夜车灯”的戏剧感。

性能优化实战技巧

粒子数量一多就卡顿？这三招亲测有效：

1. 用InstancedMesh替代普通粒子，万滴雨也能60帧流畅跑
2. 在着色器里做碰撞检测，GPU运算比CPU循环快10倍
3. 设置粒子可见距离：material.alphaTest = 0.1; 避免渲染远处雨滴

记得加个滑块控制器，实时调整粒子数量。用户电脑差就自动降质到2000滴雨，流畅比画质更重要！

升级你的下雨动画

基础效果完成后，试试进阶玩法：

• 暴雨模式：点击按钮瞬间增加粒子密度，伴随雷声音效
• 雨伞互动：用射线检测让雨滴在伞模型表面溅射
• 四季变换：把雨滴换成雪花贴图就是暴风雪

最后加个炫酷功能：用麦克风输入控制雨量，用户对着话筒吹气，屏幕里就狂风暴雨！完整代码已经打包放在Github仓库，包含12种天气预设。