Three.js 晶体矩阵生长特效

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
使用 Three.js 实现晶体矩阵生长特效,具体要求:

**核心特效**
- 三种生长模式 (径向/层状/随机)
- 晶体面折射效果
- 晶格线可视化
- 边缘发光效果
- 7个实时参数

**场景与光照**
- 深绿径向背景
- 加法混合发光
- 立方体自旋转

**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 生长速度/晶体密度/矩阵大小

**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- BoxGeometry 立方体
- 多层正弦叠加

📖 效果拆解

层次 视觉效果 技术实现
基础 晶体立方体 BoxGeometry
生长 三种正弦模式 sin + cos 组合
折射 视线反射 pow(1.0 - abs(dot), intensity)
晶格 fract 网格线 fract(pos * density)
控制 GUI 面板 7个实时参数

🔧 核心技术点

1. 三种生长模式

为什么需要这个技术:不同生长模式创造不同的晶体形态。

GLSL
1
2
3
4
5
6
7
8
9
10
if(uGrowthPattern == 0) {
    // 径向生长
    growth = sin(length(position) * 3.0 + uTime * uGrowthSpeed);
} else if(uGrowthPattern == 1) {
    // 层状生长
    growth = sin(position.y * 4.0 + uTime * uGrowthSpeed);
} else {
    // 随机生长
    growth = sin(position.x * 2.0 + position.y * 2.0 + position.z * 2.0 + uTime * uGrowthSpeed);
}

2. 晶格线效果

为什么需要这个技术:用 fract 函数创造规整的晶体格子结构。

GLSL
1
2
3
4
5
float crystalLattice(vec3 pos, float density) {
    vec3 lattice = fract(pos * density * 8.0);
    float lines = 1.0 - smoothstep(0.0, 0.05, min(min(lattice.x, lattice.y), lattice.z));
    return lines * 0.4;
}

3. 折射效果

为什么需要这个技术:模拟光线在晶体内部的折射。

GLSL
1
2
3
4
float refractionEffect(vec3 normal, vec3 viewDir, float intensity) {
    float refraction = dot(normal, viewDir);
    return pow(1.0 - abs(refraction), intensity);
}

💡 调试与优化

问题类型 表现形式 解决方案
晶格过密 细节丢失 增大 smoothstep 范围
变形过大 几何体穿插 降低 uMatrixSize
发光过强 刺眼 降低 uGlowEffect

🚀 扩展思路

变体效果 核心改动 难度
水晶球 球体几何
多晶体 添加多个几何体
生长动画 重力模拟 ⭐⭐
宝石材质 添加高光 ⭐⭐
结晶过程 分阶段生长 ⭐⭐⭐

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