Three.js 柏林噪声花朵动画 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 Three.js 实现【柏林噪声花朵动画】，具体要求：

【核心特效】
- 基于柏林噪声的顶点位移
- 动态颜色变化效果
- 多种噪声参数可调

【场景与光照】
- 黑色背景配合雾效
- 半球光照明
- 二十面体几何体

【交互与控制】
- GUI 控制面板调整参数
- 实时预览效果变化

【技术要求】
- Three.js 版本
- GSAP 动画库
- lil-gui 控制面板
- 自定义 ShaderMaterial

🖼️ 效果预览

柏林噪声花朵动画

🎮 案例演示

立即体验

📖 效果拆解

层次 视觉效果 技术实现
基础 二十面体几何体 IcosahedronGeometry
核心特效 噪声驱动的顶点位移 柏林噪声 + 湍流函数
增强细节 RGB 颜色通道独立控制 余弦函数颜色计算
交互控制 参数实时调整 lil-gui 控制面板

🔧 核心技术点

1. 柏林噪声函数

完整实现经典柏林噪声算法：

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 经典柏林噪声
float cnoise(vec3 P) {
    vec3 Pi0 = floor(P);
    vec3 Pi1 = Pi0 + vec3(1.0);
    Pi0 = mod289(Pi0);
    Pi1 = mod289(Pi1);
    vec3 Pf0 = fract(P);
    vec3 Pf1 = Pf0 - vec3(1.0);

    // 计算网格点和梯度
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

    vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

    // ... 梯度计算和插值
    return 2.2 * n_xyz;
}

2. 湍流效果

叠加多层噪声创建复杂扰动：

glsl
1
2
3
4
5
6
7
8
float turbulence(vec3 p) {
    float t = -0.1;
    for (float f = 1.0; f <= 3.0; f++) {
        float power = pow(2.0, f);
        t += abs(pnoise(vec3(power * p), vec3(10.0, 10.0, 10.0)) / power);
    }
    return t;
}

3. 动态颜色计算

基于噪声值的 RGB 通道控制：

glsl
1
2
3
4
5
6
7
void main() {
    // 使用余弦函数计算各通道颜色
    float r = cos(qnoise + r_color);
    float g = cos(qnoise + g_color);
    float b = cos(qnoise + b_color);

    gl_FragColor = vec4(r, g, b, 1.0);
}

💡 调试与优化

问题类型 表现形式 解决方案
着色器编译错误 噪声函数语法错误 检查 GLSL 版本兼容性
性能问题 帧率低 减少噪声迭代次数，使用 simpler noise
颜色异常 颜色值超出范围 添加 clamp 限制颜色值
GUI 响应慢 参数调整延迟 使用 requestAnimationFrame 更新

🚀 扩展思路

变体效果 核心改动 难度
纹理混合 添加纹理采样，与噪声混合 ⭐⭐
动画预设 添加多种预设效果按钮 ⭐
顶点颜色 使用顶点颜色替代 uniform ⭐⭐
多个几何体 在场景中放置多个独立动画对象 ⭐⭐

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。