水晶生长

Three.js 水晶生长效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 Three.js 实现水晶生长效果,具体要求:
【核心特效】
- 晶格噪声生成
- 分形生长动画
- 折射效果模拟
【场景与光照】
- 纯黑色背景
- 边缘发光效果
- 内部结构细节
【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- GSAP 自动旋转动画
【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
- GSAP 动画库
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 八面体几何体 | OctahedronGeometry(2, 3) |
| 核心特效 | 晶格生长纹理 | 分形晶格噪声 |
| 增强细节 | 折射效果 | UV 扭曲 + 颜色分离 |
| 动画层 | 自动旋转 | GSAP timeline |
🔧 核心技术点
1. 晶格噪声函数
基于网格采样的噪声生成。
glsl
1
2
3
4
5
6
7
8
9
10
float latticeNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = sin(dot(i, vec2(12.9898, 78.233)));
float b = sin(dot(i + vec2(1.0, 0.0), vec2(12.9898, 78.233)));
float c = sin(dot(i + vec2(0.0, 1.0), vec2(12.9898, 78.233)));
float d = sin(dot(i + vec2(1.0, 1.0), vec2(12.9898, 78.233)));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
2. 分形晶格噪声
多层晶格噪声叠加。
glsl
1
2
3
4
5
6
7
8
9
10
11
float fractalLattice(vec2 p, float density) {
float value = 0.0;
float amplitude = 0.5;
float frequency = density;
for (int i = 0; i < 4; i++) {
value += amplitude * latticeNoise(p * frequency + time * growthSpeed);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
3. 折射效果模拟
glsl
1
2
3
4
5
6
7
vec3 refractColor(vec2 uv, float index) {
vec2 distortedUV = uv + sin(uv * 20.0 + time) * 0.01 * index;
float r = sin(distortedUV.x * 10.0 + time) * 0.5 + 0.5;
float g = sin(distortedUV.y * 10.0 + time * 1.2) * 0.5 + 0.5;
float b = sin((distortedUV.x + distortedUV.y) * 5.0 + time * 0.8) * 0.5 + 0.5;
return vec3(r, g, b) * 0.3;
}
4. 内部结构细节
glsl
1
2
float internal = sin(uv.x * 30.0 + time * 2.0) * sin(uv.y * 30.0 + time * 2.0) * 0.1;
color += internal;
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 着色器编译失败 | 黑屏或报错 | 检查 GLSL 语法和 uniform 定义 |
| 性能问题 | 帧率下降 | 减少噪声迭代次数或降低细分 |
| 晶体效果不明显 | 纹理太淡 | 调整生长速度和密度参数 |
| 动画卡顿 | 旋转不流畅 | 检查 GSAP 配置 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 多面体生长 | 使用不同的基础几何体 | ⭐ |
| 动态生长 | 添加生长动画过渡 | ⭐⭐ |
| 彩色晶体 | 添加多色折射效果 | ⭐⭐ |
| 发光晶体 | 添加自发光材质 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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