
Three.js 晶体生长效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个晶体生长效果着色器,模拟晶体形成的动态过程,包含晶格结构和折射效果,提供三种晶体类型可选。
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 立方体几何体 | BoxGeometry |
| 核心特效 | 晶体生长动画 | 多层正弦波叠加 |
| 增强细节 | 晶格结构 | 20个晶格节点 |
| 视觉效果 | 折射效果 | 光线在晶体中的折射模拟 |
| 交互控制 | 晶体类型切换 | 钻石、蓝宝石、红宝石 |
🔧 核心技术点
顶点着色器
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
uniform float uTime;
uniform float uGrowthSpeed;
uniform float uCrystalPurity;
uniform float uRefractionIndex;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
float growth = sin(position.x * 3.0 + uTime * uGrowthSpeed) *
cos(position.y * 4.0 + uTime * uGrowthSpeed * 0.8) *
sin(position.z * 3.0 + uTime * uGrowthSpeed * 0.6);
float purity = sin(position.x * 5.0 + uTime * uCrystalPurity * 2.0) *
cos(position.z * 5.0 + uTime * uCrystalPurity * 2.0);
float refraction = sin(position.x * uRefractionIndex * 6.0) *
cos(position.y * uRefractionIndex * 8.0);
vec3 newPosition = position + normal * (growth + purity * 0.5 + refraction * 0.3) * 0.15;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
晶体生长效果
glsl
1
2
3
4
5
6
7
8
9
10
float crystalGrowth(vec2 uv, float speed) {
float growthField = 0.0;
growthField += sin(uv.x * 4.0 + uTime * 0.3) *
cos(uv.y * 6.0 + uTime * 0.5);
growthField += sin(uv.x * 6.0 + uTime * 0.7) *
cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
growthField += sin(uv.x * 8.0 + uTime * 1.1) *
cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
return growthField * speed;
}
晶格效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float crystalLattice(vec2 uv, float density) {
float latticeField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 latticePos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, latticePos);
float latticeSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
float latticeLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
float latticeIntensity = sin(latticeLife) * 0.7 + 0.3;
latticeField += exp(-dist * 45.0) * latticeIntensity * density;
}
return latticeField;
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 生长过慢 | 变形不明显 | 增大 uGrowthSpeed 值 |
| 晶格过密 | 细节糊掉 | 减小 uLatticeDensity 值 |
| 性能问题 | 帧率下降 | 减少粒子数量 (20→10) |
| 颜色过暗 | 效果不明显 | 增大 uGlowIntensity 值 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 真实折射 | 使用折射贴图实现更真实的折射 | ⭐⭐ |
| 晶簇生成 | 多个晶体聚集的效果 | ⭐⭐ |
| 温度梯度 | 模拟不同温度下的晶体形态 | ⭐⭐ |
| 缺陷模拟 | 添加晶体缺陷效果 | ⭐⭐ |
| 矿物博物馆 | 多种矿物晶体组合场景 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







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