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 参数控制

🖼️ 效果预览

Three.js 自然现象着色器

🎮 案例演示

立即体验


📖 效果拆解

层次 视觉效果 技术实现
基础 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;
}

💡 调试与优化

问题类型 表现形式 解决方案
闪电过于频繁 闪烁效果过强 增加闪电触发的阈值
波浪不自然 波形过于规则 增加更多频率成分
极光带不连贯 极光断裂 增加带状函数的重叠

🚀 扩展思路

  1. 天气系统:添加雨、雪、雾等多种天气
  2. 日出日落:模拟太阳的动态变化
  3. 月相变化:展示月亮圆缺的循环
  4. 潮汐效果:结合月亮轨道模拟潮汐
  5. 自然灾害:模拟龙卷风、海啸等大型自然现象

©️ 版权声明

*本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。