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 编辑整理,如需转载,请注明出处。