three.js 实现波纹效果

要实现波纹效果，可以使用three.js中的ShaderMaterial和RenderTarget来实现。以下是一个基本的实现步骤：

1. 创建一个PlaneGeometry作为波纹的基础网格。

const geometry = new THREE.PlaneGeometry(10, 10, 32, 32);

2. 创建两个RenderTarget，一个用于渲染当前帧，一个用于存储上一帧的波纹效果。

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.RGBFormat
});

const renderTargetPrev = renderTarget.clone();

3. 创建一个ShaderMaterial，并将渲染目标传递给Shader中。

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uTexturePrev: { value: renderTargetPrev.texture }
  },
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

4. 创建一个RenderPass，并将其加入到Composer中。

const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

5. 创建一个ShaderPass，用于更新波纹效果。

const wavePass = new THREE.ShaderPass({
  uniforms: {
    uTexturePrev: { value: renderTargetPrev.texture },
    uSpeed: { value: 0.1 },
    uTime: { value: 0 }
  },
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('waveShader').textContent
});

composer.addPass(wavePass);

6. 在Animate循环中更新Shader中的uTime和uTexturePrev。

function animate() {
  requestAnimationFrame(animate);

  material.uniforms.uTime.value += 0.1;
  wavePass.uniforms.uTime.value += 0.1;
  wavePass.uniforms.uTexturePrev.value = renderTargetPrev.texture;

  composer.render();
}

7. 最后，在Shader中实现波纹效果。这里提供一个基本的Shader代码：

uniform sampler2D uTexturePrev;
uniform float uSpeed;
uniform float uTime;

varying vec2 vUv;

void main() {
  vec4 color = texture2D(uTexturePrev, vUv - vec2(0.0, uTime * uSpeed));
  gl_FragColor = color;
}

这份Shader代码实现了一个基本的向下滚动的波纹效果，可以根据需要进行修改。完整的代码可以参考以下链接：

https://codepen.io/tamak/pen/RwPQJQm