Three.js（4）：基于Shadertoy在Three.js中实现雨、雪效果

0、原理

• 移植Shadertoy中的天气效果编写成shader；
• 基于threejs后处理方式实现相应的效果。

// 1、初始化
const mComposer = new EffectComposer(this_.mRenderer);
const renderPass = new RenderPass(this_.mScene, this_.mCamera);
const effectCopy = new ShaderPass(CopyShader);
effectCopy.renderToScreen = true;
mComposer.addPass(renderPass);
mComposer.addPass(effectCopy);

// 2、添加雨特效--RainShader为移植的shadertoy特效
const mRain = new ShaderPass(RainShader);
mRain.uniforms['iResolution'].value = new THREE.Vector2(clientWidth, clientWidth);
mComposer.addPass(mRain);

// 3、render循环渲染
if (mRain) {
   mRain.uniforms['iTime'].value += delta;
}

1、雨效果

---

2、雪效果