three.js添加坐标涟漪

要在three.js中添加坐标涟漪效果，你可以使用ShaderMaterial和CustomShader来实现。以下是一个简单的示例代码：

首先，创建一个平面几何体和一个自定义的着色器材质：

// 创建平面几何体
var geometry = new THREE.PlaneGeometry(10, 10);

// 创建自定义的着色器材质
var material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0.0 }, // 用于控制涟漪效果的时间变量
    amplitude: { value: 1.0 }, // 涟漪的振幅
    frequency: { value: 1.0 } // 涟漪的频率
  },
  vertexShader: `
    uniform float time;
    uniform float amplitude;
    uniform float frequency;
    
    void main() {
      vec3 pos = position;
      pos.z += sin(time * frequency + position.x) * amplitude;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置涟漪的颜色
    }
  `
});

// 创建网格对象并添加到场景中
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

然后，在每帧渲染循环中更新着色器材质的uniform变量：

function animate() {
  // 更新时间变量
  material.uniforms.time.value += 0.1;

  renderer.render(scene, camera);

  requestAnimationFrame(animate);
}

animate();

在这个示例中，顶点着色器中的`pos.z`根据时间和顶点的x位置进行变化，创建涟漪效果。你可以根据需要调整振幅和频率来控制涟漪的强度和速度。在片段着色器中，我们只简单地将颜色设置为红色，你可以根据需求修改为你喜欢的颜色。

希望这可以帮助到你！