如何在Three.js中通过顶点着色器从平面几何体中心生成波浪？

一、圆形波浪顶点着色器实现 #

你的思路方向是对的，核心是计算每个顶点到平面中心的距离，结合时间生成环形扩散的波浪效果。具体实现如下：

修改后的顶点着色器代码：

varying vec2 vUv;
varying float vElevation;
uniform float uTime;

void main(){
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  
  // 计算顶点相对平面中心的偏移与距离
  vec2 centerOffset = uv - vec2(0.5);
  float distanceToCenter = length(centerOffset);
  
  // 生成环形波浪：通过距离+时间控制sin函数，参数可调整波浪密度、速度、振幅
  float elevation = sin(distanceToCenter * 20.0 - uTime * 3.0) * 0.1;
  modelPosition.y += elevation;

  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;

  gl_Position = projectedPosition;

  vUv = uv;
  vElevation = elevation;
}

参数调整说明：

• 20.0：控制环形波浪的密度，数值越大波浪环越多
• 3.0：控制波浪扩散速度，数值越大波浪向外移动越快
• 0.1：控制波浪的起伏高度，数值越大波浪振幅越高

二、顶点/片元着色器基础学习资源 #

• Three.js官方文档：重点研读ShaderMaterial章节，明确uniform（全局变量）、varying（顶点-片元传递变量）的核心作用，以及着色器的基础执行流程
• GLSL核心概念：掌握两个着色器的分工：
  • 顶点着色器：负责计算每个顶点的最终位置，可通过varying变量将顶点相关数据（如高度、UV）传递给片元着色器
  • 片元着色器：负责为每个像素填充颜色，接收顶点着色器传递的varying变量，也可通过uniform接收外部传入的全局参数（如时间、纹理）
• Three.js官方示例：参考webgl_shaders_water、webgl_shaders_basic这类内置示例，拆解实际场景中的着色器逻辑

三、片元着色器颜色映射补充 #

你通过vElevation传递高度值的思路完全可行，片元着色器中可直接用该值实现颜色随高度变化的效果：

varying float vElevation;

void main(){
  // 将高度值映射为蓝到白的渐变，参数可按需调整
  vec3 color = mix(vec3(0.2, 0.4, 0.8), vec3(1.0), vElevation * 5.0 + 0.5);
  gl_FragColor = vec4(color, 1.0);
}

内容的提问来源于stack exchange，提问作者Jovan Borkovic