自然现象着色器

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 实现**自然现象着色器效果**,具体要求:
【核心特效】
- 五种自然现象:海洋波浪、云层流动、火焰燃烧、极光效果、闪电效果
- 基于物理的动态模拟
- 多种噪声和波形叠加
- 实时可切换的现象类型
【场景与光照】
- 深蓝色背景 (#0a0a2a → #1a1a3a 径向渐变)
- OrbitControls 自由视角控制
- 自定义着色器实现自然效果
【交互与控制】
- OrbitControls 鼠标拖拽旋转
- 鼠标滚轮缩放
- GUI 面板切换现象类型、调节参数
【技术要求】
- Three.js 版本 (ES Module)
- 自定义顶点着色器实现五种自然现象
- 自定义片元着色器实现颜色和细节
- lil-gui 参数控制
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 3D平面几何体 | PlaneGeometry (14×14, 512×512分段) |
| 核心特效 | 五种自然现象 | 顶点着色器实现波形和变形 |
| 增强细节 | 颜色渐变和发光 | 片元着色器根据现象类型着色 |
| 交互控制 | 类型切换和参数调节 | GUI 控制所有 uniforms |
🔧 核心技术点
1. 海洋波浪模拟
为什么需要这个技术:模拟海浪的周期性波动和随机性。
glsl
1
2
3
4
5
6
7
float oceanWaves(vec2 pos) {
float wave1 = sin(pos.x * 3.0 + uTime * uWindSpeed) * 0.5;
float wave2 = sin(pos.y * 2.0 + uTime * uWindSpeed * 1.3) * 0.3;
float wave3 = sin((pos.x + pos.y) * 4.0 + uTime * uWindSpeed * 0.7) * 0.2;
float noise = sin(pos.x * 8.0 + pos.y * 6.0 + uTime * 2.0) * 0.1;
return (wave1 + wave2 + wave3 + noise) * uWaveHeight;
}
2. 云层流动模拟
为什么需要这个技术:模拟大气中云层的柔和流动和形态变化。
glsl
1
2
3
4
5
6
7
8
9
float cloudMovement(vec2 pos) {
float cloud = 0.0;
cloud += sin(pos.x * 2.0 + uTime * uWindSpeed) * 0.4;
cloud += sin(pos.y * 1.5 + uTime * uWindSpeed * 0.8) * 0.3;
cloud += sin((pos.x + pos.y) * 6.0 + uTime * 1.5) * 0.2;
cloud += sin(pos.x * 10.0 - pos.y * 8.0 + uTime * 2.0) * 0.1;
cloud = (cloud + 1.0) * 0.5;
return cloud;
}
3. 火焰燃烧模拟
为什么需要这个技术:模拟火焰的跳动和上升效果。
glsl
1
2
3
4
5
6
7
8
float fireEffect(vec2 pos) {
float fire = (1.0 - pos.y) * 2.0;
float turbulence = sin(pos.x * 8.0 + uTime * 3.0) * 0.3;
turbulence += sin(pos.x * 12.0 + uTime * 4.0) * 0.2;
turbulence += sin(pos.x * 16.0 + uTime * 5.0) * 0.1;
float rise = uTime * 2.0 - pos.y * 3.0;
return (fire + turbulence) * sin(rise) * uFireIntensity;
}
4. 极光效果模拟
为什么需要这个技术:模拟地球极光的带状流动和发光效果。
glsl
1
2
3
4
5
6
7
8
9
10
11
float auroraEffect(vec2 pos) {
float aurora = 0.0;
for(int i = 0; i < 3; i++) {
float bandPosition = float(i) * 0.3 - 0.3;
float band = sin((pos.x + bandPosition) * 6.0 + uTime * uAuroraSpeed) * 0.5;
band = exp(-abs(pos.y - band) * 10.0);
aurora += band;
}
aurora *= sin(pos.y * 4.0 + uTime * 0.5) * 0.5 + 0.5;
return aurora;
}
5. 闪电效果模拟
为什么需要这个技术:模拟雷暴中的随机闪电放电。
glsl
1
2
3
4
5
6
7
8
9
10
11
float lightningEffect(vec2 pos) {
float lightning = 0.0;
float lightningChance = sin(uTime * uLightningFrequency * 10.0);
if(lightningChance > 0.8) {
float mainBolt = exp(-abs(pos.x) * 20.0);
float branch1 = exp(-abs(pos.x - 0.2) * 30.0) * 0.5;
float branch2 = exp(-abs(pos.x + 0.2) * 30.0) * 0.5;
lightning = (mainBolt + branch1 + branch2) * (1.0 - pos.y);
}
return lightning;
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 闪电过于频繁 | 闪烁效果过强 | 增加闪电触发的阈值 |
| 波浪不自然 | 波形过于规则 | 增加更多频率成分 |
| 极光带不连贯 | 极光断裂 | 增加带状函数的重叠 |
🚀 扩展思路
- 天气系统:添加雨、雪、雾等多种天气
- 日出日落:模拟太阳的动态变化
- 月相变化:展示月亮圆缺的循环
- 潮汐效果:结合月亮轨道模拟潮汐
- 自然灾害:模拟龙卷风、海啸等大型自然现象
©️ 版权声明
*本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







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