Ru果你曾在网页上kan到雨滴顺着屏幕滑落、雪花轻盈旋转的场景，一定会惊叹于它们背后那层kan不见的技术——GPU 粒子系统。今天我把这套「从零到可用」的方案拆解成几个小章节，让你在几分钟内把雨雪搬进自己的 Three.js 项目里。

传统的 THREE.Points 或者基于 Canvas 的粒子往往受限于 CPU 计算，数千颗粒子Yi经够呛。GPU 天生擅长并行运算，借助 InstancedMesh 与自定义 Shader，你Ke以一次性渲染几万甚至上十万颗粒子，而帧率仍保持在 60fps 左右。

geng妙的是这套方案只需要一次 Draw Call——也就是说无论是雨滴还是雪花，dou共享同一个几何体和材质，只是属性数据在显存里批量存放。

InstancedMesh：一次创建大量实例，.count 动态控制渲染数量。

Shader：所有运动逻辑dou写进 GLSL，CPU 只喂时间戳和相机坐标。

低分辨率 FBO：为雨滴折射准备模糊背景，大幅削减纹理采样成本。

Billboard技巧：让每片雪花永远面向摄像机，提升真实感。

雨滴比雪花细长得多，需要额外的折射效果来模拟水面的光泽。下面分三步完成：

const MAX_COUNT = 20000;                     // Zui大雨滴数
const geometry = new THREE.PlaneGeometry; // 长条形平面
const material = new THREE.ShaderMaterial({
    vertexShader   : rainVert,
    fragmentShader : rainFrag,
    transparent    : true,
    depthWrite      : false,
});
const rainMesh = new THREE.InstancedMesh;
rainMesh.instanceMatrix.setUsage;
scene.add;

小贴士：这里把 .instanceMatrix 标记为动态geng新，可随时增删实例而不必重新创建 Mesh。

// 为每个实例预留属性
const aOffset   = new Float32Array; // xyz 偏移
const aSpeed    = new Float32Array;     // 垂直坠落速度
const aSwayFreq = new Float32Array;     // 摆动频率
const aSwayAmp  = new Float32Array;     // 摆动幅度
for{
    const idx3 = i*3;
    aOffset   = -0.5)*200; // X
    aOffset = Math.random*100 + 50;   // Y 起始高度
    aOffset = -0.5)*200; // Z
    aSpeed      = 0.6 + Math.random*0.4;
    aSwayFreq   = 0.5 + Math.random*1.5;
    aSwayAmp    = 0.02 + Math.random*0.04;
}
geometry.setAttribute);
geometry.setAttribute);
geometry.setAttribute);
geometry.setAttribute);

// rainVert.glsl
uniform float uTime;
uniform vec3 uCamPos;
attribute vec3 aOffset;
attribute float aSpeed;
attribute float aSwayFreq;
attribute float aSwayAmp;
varying vec2 vUv;
void main{
    vec3 pos = aOffset;
    // 时间偏移，实现不断掉落 & 循环回到顶部
    float tY   = mod;
    pos.y      = tY - 60.0;
    // 横向摆动，模拟风吹
    pos.x += sin * aSwayAmp;
    pos.z += cos * aSwayAmp;
    // 广告牌：让平面总是正对相机
    vec4 mvPos   = modelViewMatrix * vec4;
`   mvPos.xyz += position * instanceScale; // instanceScale 为自定义缩放属性，可选
`   gl_Position= projectionMatrix * mvPos;
`   vUv       = uv;
}

注意：这里使用了 mod 把 Y 坐标限制在 区间，实现「无限循环」而不产生跳帧。

// rainFrag.glsl
uniform sampler2D uBgTex;      // 背景模糊纹理
uniform float uRefractFactor; 
varying vec2 vUv;
void main{
    // 简单模拟圆柱形水滴法线
`   vec2 ndc     = gl_FragCoord.xy / resolution.xy * 2.0 - 1.0;
`   vec3 normal  = normalize*uRefractFactor,
`                                 *uRefractFactor,
`                                 1.0));
`   vec2 refractUV= vUv + normal.xy * uRefractFactor;
`   vec4 bgColor= texture2D;
`   // 高光叠加，让水珠geng亮眼
`   float spec= pow),0.),20.);
`   gl_FragColor=vec4,bgColor.a);
}

渲染顺序：

先把场景渲染到一张低分辨率的 FBO，得到模糊背景纹理；

再把雨滴实例化渲染出来并把 FBO 的纹理传入片元着色器Zuo折射采样；

整个过程只占两次 Draw Call，性Neng开销极低。

相比雨滴，雪花geng倾向于「柔软」与「漂浮」。我们仍然沿用 InstancedMesh，但在顶点中加入随机旋转与尺寸，使每片雪花dou有独一无二的姿态。

const SNOW_MAX=30000;
const snowGeo=new THREE.PlaneGeometry;
snowGeo.rotateX;               // 平面水平放置
// 随机颜色、大小、旋转速率...
const offset=new Float32Array;
const speed=new Float32Array;
const rotSpd=new Float32Array;
for{
 const i3=i*3;
 offset= -0.5)*150;
 offset= Math.random*80+20;
 offset= -0.5)*150;
 speed= 0.15+Math.random*0.25;
 rotSpd= -0.5)*2*Math.PI*0.05;
}
snowGeo.setAttribute);
snowGeo.setAttribute);
snowGeo.setAttribute);
. 顶点着色器：随风摇摆 & 相机对齐 
// snowVert.glsl
uniform float uTime;
uniform vec3 uCamPos;
attribute vec3 aOffset;
attribute float aSpeed;
attribute float aRotSpd;
varying float vAlpha;
void main{
     vec3 p=aOffset;
     // 下落循环
     p.y=mod -40.; 
     // 风吹水平漂移
     p.x+=sin * .8 ;
     p.z+=cos * .8 ;
     // 广告牌：让每片雪花面对相机，同时加入自转动画
     mat4 modelView=modelViewMatrix *
                    translate *
                    rotateZ;
     gl_Position=projectionMatrix*modelView*vec4;
     // 随距离衰减透明度
     float dist=length;
     vAlpha=smoothstep;
}

. Fragment 着色器：圆形渐隐 
// snowFrag.glsl
varying float vAlpha;
void main{
      float d=length);
      float alpha=smoothstep;          // 边缘柔化
      gl_FragColor=vec4;
}

`whiteColor` Ke以通过 uniform 动态调节，让夜晚场景出现微蓝或暖黄的光晕。
性Neng优化要点 📈 

技术点 
推荐Zuo法 

InstancedMesh 大批量渲染 
一次性创建Zui大实例数，用 `mesh.count` 控制实际绘制量；禁用 frustumCulling 防止因包围盒错误导致闪烁。
Lod‑FBO 背景采样 
仅为雨滴准备 ~30% 分辨率纹理；若场景宽高变化记得重新生成 FBO。
Smoothstep 衰减 
在顶点/片元里根据相机距离渐变透明度，可显著降低远处粒子负担。
Spherical Billboard 
让所有平面始终朝向摄像机，无需额外矩阵乘法，只需一次视图矩阵乘积。
AABB 包围盒关闭 
InstancedMesh 默认开启包围盒检测，对大量细碎粒子反而拖慢 CPU，直接 `mesh.frustumCulled=false;` 即可。
DPI 自适应 
移动端视网膜屏幕像素密度高，用 `renderer.getPixelRatio` 调整 FBO 大小，以免占满显存。


完整示例代码 🚀 

// 基础 Three.js 环境 -------------------------------------------------
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
let scene,newCamera,newRenderer;
// 初始化...
function init{
　　scene=new THREE.Scene;
　　camera=new THREE.PerspectiveCamera(60,
　　　　window.innerWidth/window.innerHeight,
　　　　0.1,1000);
　　camera.position.set;
　　renderer=new THREE.WebGLRenderer;
　　renderer.setSize(window.innerWidth,
　　　　window.innerHeight);
　　document.body.appendChild;
　　new OrbitControls(camera,
　　　　renderer.domElement);
// 添加地面、灯光等...

}
// 雨天管理类 ---------------------------------------------------------
class RainManager{
    constructor{
        this.scene=scene; this.camera=camera;
        this.MAX=20000;
        this._init;
    }
_init{
    const geo=new THREE.PlaneGeometry;
    const mat=new THREE.ShaderMaterial({
        vertexShader : rainVert,
        fragmentShader : rainFrag,
        uniforms:{
            uTime:{value:0},
            uCamPos:{value:new THREE.Vector3},
            uBgTex:{value:null},
            uRefractFactor:{value:.025},
            resolution:{value:new THREE.Vector2}
        },
        transparent:true,
        depthWrite:false});
    this.mesh=new THREE.InstancedMesh;
    this.mesh.instanceMatrix.setUsage;
    this.scene.add;
    // ……属性缓冲区同前文……
}
update{
  this.mesh.material.uniforms.uTime.value+=delta;
  this.mesh.material.uniforms.uCamPos.value.copy;
  this.mesh.material.uniforms.resolution.value.set(
     this.renderer.getSize).x,
     this.renderer.getSize).y );
  this._renderBackground;       // 把场景渲染到低分辨率 FBO 并写入 uBgTex
}
_renderBackground{
  if{
    const w=Math.floor,
          h=Math.floor;
    this.bgFBO=new THREE.WebGLRenderTarget;
  }
  const oldTarget=this.renderer.getRenderTarget;
  this.mesh.visible=false;                       // 隐藏自己防止自我采样
  this.renderer.setRenderTarget;
  this.renderer.render;
  this.renderer.setRenderTarget;
  this.mesh.visible=true;
  this.mesh.material.uniforms.uBgTex.value=this.bgFBO.texture;
}

}
// 雪天管理类 ---------------------------------------------------------
class SnowManager{
    constructor{
       /* 与 Rain 类似，只是几何体换成方形、shader 换成 snowVert/snowFrag /
       / ... /
    }
    update{
       / geng新 uniform.uTime 与 uniform.uCamPos /
       / ... */
    }
}
// 主循环 -------------------------------------------------------------
let clock=new THREE.Clock;
let rainMgr,snowMgr;
function animate{
    const dt=clock.getDelta;
    rainMgr.update;          // Ru果想只下雨，把 snowMgr 注释掉即可 
    snowMgr.update;          // 想要两者同存，只需同时调用
renderer.render;
requestAnimationFrame;

}
// 启动 -----------------------------------------------------------------
init;
rainMgr=new RainManager;
// 若想同时出现雪，请取消注释下面这行：
snowMgr=new SnowManager;
animate;

`