
Three.js 流体动力学效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个流体动力学效果着色器,包含流动、湍流和涡旋效果,支持流速、粘度调节,提供三种流体类型可选。
🖼️ 效果预览
🎮 案例演示
效果描述
这是一个模拟流体动力学效果的视觉效果,通过多层流动场、湍流和涡旋效果创造逼真的流体动画。
效果特性
- 多层流动场:3层不同频率的流动叠加
- 湍流效果:20个动态湍流点
- 涡旋系统:极坐标涡旋流动
- 粘度模拟:不同粘度影响流动特性
- 三种流体类型:水、油、熔岩可选
参数调节
| 参数 | 默认值 | 范围 | 说明 |
|---|---|---|---|
| 流速 | 0.8 | 0.1-1.2 | 流体流动的速度 |
| 粘度 | 0.6 | 0.1-1.0 | 流体的粘度 |
| 湍流强度 | 0.7 | 0.1-1.0 | 湍流的剧烈程度 |
| 发光强度 | 1.2 | 0.1-1.8 | 流体发光强度 |
| 波动频率 | 0.8 | 0.1-0.9 | 波动的频率 |
| 显示涡旋 | true | boolean | 是否显示涡旋效果 |
核心代码解析
顶点着色器
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uFlowSpeed;
uniform float uViscosity;
uniform float uWaveFrequency;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
// 流体流动效果
float flow = sin(position.x * 3.0 + uTime * uFlowSpeed) *
cos(position.y * 4.0 + uTime * uFlowSpeed * 0.8) *
sin(position.z * 3.0 + uTime * uFlowSpeed * 0.6);
// 粘度效果
float viscosity = sin(position.x * 5.0 + uTime * uViscosity * 2.0) *
cos(position.z * 5.0 + uTime * uViscosity * 2.0);
// 波动频率
float wave = sin(position.x * uWaveFrequency * 6.0) *
cos(position.y * uWaveFrequency * 8.0);
vec3 newPosition = position + normal * (flow + viscosity * 0.5 + wave * 0.3) * 0.15;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
流体流动效果
glsl
1
2
3
4
5
6
7
8
9
10
11
float fluidFlow(vec2 uv, float speed) {
float flowField = 0.0;
// 多层流体流动
flowField += sin(uv.x * 4.0 + uTime * 0.3) *
cos(uv.y * 6.0 + uTime * 0.5);
flowField += sin(uv.x * 6.0 + uTime * 0.7) *
cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
flowField += sin(uv.x * 8.0 + uTime * 1.1) *
cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
return flowField * speed;
}
湍流效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float turbulence(vec2 uv, float intensity) {
float turbField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 turbPos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, turbPos);
float turbSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
float turbLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
float turbIntensity = sin(turbLife) * 0.7 + 0.3;
turbField += exp(-dist * 45.0) * turbIntensity * intensity;
}
return turbField;
}
涡旋效果
glsl
1
2
3
4
5
6
7
8
9
10
float vortices(vec2 uv, float intensity) {
if(!uShowVortices) return 0.0;
float vortexField = 0.0;
// 涡旋流动
float angle = atan(uv.y - 0.5, uv.x - 0.5);
float radius = distance(uv, vec2(0.5, 0.5));
vortexField += sin(angle * 8.0 + uTime * 2.0) *
cos(radius * 12.0 - uTime * 1.5) * intensity;
return vortexField;
}
Uniforms
javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
uTime: { value: 0.0 },
uFlowSpeed: { value: 0.8 },
uViscosity: { value: 0.6 },
uTurbulence: { value: 0.7 },
uGlowIntensity: { value: 1.2 },
uWaveFrequency: { value: 0.8 },
uFluidType: { value: 0 },
uShowVortices: { value: true }
}
技术亮点
- 多层流动系统:3层不同频率的流动叠加创造复杂流体
- 湍流粒子:20个湍流点创造局部的湍流效果
- 极坐标涡旋:使用atan和distance创造螺旋涡旋
- 粘度模拟:粘度参数影响波的传播速度
- 类型颜色:三种流体类型具有独特的颜色
调试技巧
- 流速调节:高流速创造更活跃的流体效果
- 粘度影响:高粘度创造更平滑的流动
- 湍流数量:减少湍流计算点可提升性能
- 涡旋开关:复杂场景可关闭涡旋提升性能
- 流体类型:水流体适合清澈效果,油流体适合粘稠效果
扩展方向
- 流体交互:添加物体与流体的交互
- 多流体混合:实现不同流体混合效果
- 流体溅泼:添加溅泼粒子效果
- 流体容器:添加容器边界约束
- 流体物理:添加真实流体物理模拟
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







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