图像波动

Three.js 波浪动画着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
使用 Three.js 实现【波浪动画着色器】,具体要求:
【核心特效】
- 双正弦波叠加动画
- 纹理映射到波浪表面
- 实时时间驱动
【场景与光照】
- 深色背景
- 无光源(纹理自发光)
【交互与控制】
- OrbitControls 轨道控制器
【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- TextureLoader 加载纹理
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 高细分平面 | PlaneGeometry(2, 1, 128, 128) |
| 核心特效 | 波浪动画 | 双正弦函数叠加 |
| 纹理 | 图片映射 | TextureLoader 加载 flag.webp |
| 框架 | 模块化设计 | ThreeCore 基类封装 |
🔧 核心技术点
1. 波浪顶点位移
在顶点着色器中使用双正弦波实现波浪效果。
glsl
1
2
3
4
5
6
7
8
9
10
uniform float uTime;
varying vec2 vUv;
void main() {
vUv = uv;
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
// 双波浪叠加
modelPosition.z = sin((modelPosition.x + uTime) * 10.0) * 0.05;
modelPosition.z += sin((modelPosition.y + uTime) * 10.0) * 0.05;
gl_Position = projectionMatrix * viewMatrix * modelPosition;
}
2. 模块化 Three.js 框架
封装基础功能,便于复用和扩展。
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class ThreeCore {
constructor(dom, options) {
this.scene = new THREE.Scene();
this.clock = new THREE.Clock();
this.animates = {};
// ... 初始化相机、渲染器
}
animate() {
this.renderer.setAnimationLoop(() => {
this.onRenderer();
for (const key in this.animates) {
this.animates[key](this.clock.getDelta());
}
this.renderer.render(this.scene, this.camera);
});
}
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 波浪效果不明显 | 平面几乎不动 | 增加波浪幅度或频率 |
| 纹理加载失败 | 画面黑色 | 检查纹理路径 |
| 性能问题 | 高细分平面帧率下降 | 降低几何体细分或使用 LOD |
| 波浪同步 | 看起来不自然 | 使用不同的频率和相位 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 动态波浪参数 | 添加 GUI 控制波浪幅度和频率 | ⭐⭐ |
| 多图层波浪 | 使用多层平面叠加不同波浪 | ⭐⭐⭐ |
| 粒子波浪 | 将顶点替换为粒子 | ⭐⭐⭐ |
| 折射效果 | 添加水面折射模拟 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。








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