波涛海浪

Three.js 海洋波浪效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用 Three.js 实现【海洋波浪效果】,具体要求:
【核心特效】
- 双层波浪系统(大波+小波)
- Perlin噪声驱动的细浪
- 深度颜色渐变
- 雾化效果
【场景与光照】
- 雾效背景
- 无光源(自发光效果)
【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节波浪参数
【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- Perlin噪声函数
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 高细分平面 | PlaneGeometry(12, 12, 512, 512) |
| 核心特效 | 大波动画 | 双正弦函数叠加 |
| 增强细节 | 细浪效果 | Perlin噪声迭代 |
| 颜色 | 深度渐变 | 基于高度混合颜色 |
| 氛围 | 雾效 | Three.js Fog |
🔧 核心技术点
1. 双层波浪系统
结合大波和小波实现真实的海洋效果。
glsl
1
2
3
4
5
6
7
8
9
10
11
// 大波 - 正弦函数
float elevation = sin(modelPosition.x * uBigWavesFrequency.x + uTime * uBigWaveSpeed)
* sin(modelPosition.z * uBigWavesFrequency.y + uTime * uBigWaveSpeed)
* uBigWavesElevation;
// 小波 - Perlin噪声迭代
for(float i = 1.0; i <= 10.0; i++) {
elevation -= abs(cnoise(vec3(modelPosition.xz * uSmallWavesFrequency * i,
uTime * uSmallWavesSpeed))
* uSmallWavesElevation / i);
if(i >= uSmallWavesIterations) break;
}
2. Perlin噪声实现
经典的 3D Perlin 噪声函数。
glsl
1
2
3
4
5
6
7
8
9
10
float cnoise(vec3 P) {
vec3 Pi0 = floor(P);
vec3 Pi1 = Pi0 + vec3(1.0);
Pi0 = mod(Pi0, 289.0);
Pi1 = mod(Pi1, 289.0);
vec3 Pf0 = fract(P);
vec3 Pf1 = Pf0 - vec3(1.0);
// ... 完整的噪声计算
return 2.2 * n_xyz;
}
3. 深度颜色渐变
根据波浪高度混合深度色和表面色。
glsl
1
2
float mixStrength = (vElevation + uColorOffset) * uColorMultiplier;
vec3 color = mix(uDepthColor, uSurfaceColor, mixStrength);
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 波浪效果不明显 | 平面几乎不动 | 增大 uBigWavesElevation 值 |
| 性能问题 | 高细分平面帧率下降 | 降低几何体细分或减少噪声迭代 |
| 颜色过渡不自然 | 色块明显 | 调整 uColorOffset 和 uColorMultiplier |
| 雾效异常 | 画面被雾遮挡 | 调整雾的近远裁剪距离 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 泡沫效果 | 在波峰添加泡沫粒子 | ⭐⭐⭐ |
| 反射效果 | 添加环境映射 | ⭐⭐⭐ |
| 光照反射 | 添加 PBR 材质属性 | ⭐⭐⭐ |
| 海岸线 | 添加沙滩和海浪拍打效果 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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