水流效果

Three.js 水流效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用 Three.js 实现水流效果着色器,具体要求:
**核心特效**
- 多层波浪叠加
- 涟漪扩散效果
- 泡沫闪烁效果
- 三色渐变混合
**场景与光照**
- 深蓝径向背景
- 加法混合发光
- 平面水平旋转
**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 颜色/速度/波浪/涟漪
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 5x5
- 改进 Perlin 噪声
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 水面平面 | PlaneGeometry |
| 波浪 | sin * cos 叠加 | 多频率组合 |
| 涟漪 | 径向 sin 波 | sin(dist * 8.0) |
| 泡沫 | 高频 sin 闪烁 | sin(x * 15.0) |
| 控制 | GUI 面板 | 10个参数 |
🔧 核心技术点
1. 改进 Perlin 噪声
为什么需要这个技术:更自然的噪声用于水面细节。
glsl
1
2
3
4
5
6
7
8
9
10
float improvedNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
2. 多层波浪叠加
为什么需要这个技术:创造自然流动的水面效果。
glsl
1
2
vWave = sin(position.x * uWaveFrequency + uTime * uFlowSpeed) *
cos(position.y * uWaveFrequency * 0.8 + uTime * uFlowSpeed * 0.7);
3. 涟漪扩散效果
为什么需要这个技术:模拟水滴落入水面产生的涟漪。
glsl
1
2
float rippleDist = length(position.xy);
vRipple = sin(rippleDist * 8.0 - uTime * uRippleSpeed) * 0.5 + 0.5;
4. 三色渐变
为什么需要这个技术:水深到水浅再到高光的颜色过渡。
glsl
1
2
3
4
float colorMix1 = (vWave * 0.5 + 0.5);
float colorMix2 = vRipple;
vec3 colorA = mix(uColor1, uColor2, colorMix1);
vec3 colorB = mix(colorA, uColor3, colorMix2);
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 波浪过激 | 水面失控 | 减小 uWaveHeight |
| 涟漪过密 | 画面闪烁 | 减小 uRippleSpeed |
| 泡沫过多 | 细节丢失 | 减小 uFoam |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 河流效果 | 流向动画 | ⭐ |
| 水面倒影 | 反射纹理 | ⭐⭐ |
| 雨滴效果 | 随机涟漪 | ⭐ |
| 水下气泡 | 粒子上升 | ⭐⭐ |
| 瀑布效果 | 泡沫+速度 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!