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 可视化技术分享。如需转载,请注明出处。