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
下落 mod 循环 mod(y + time * speed, 2.0) - 1.0
字符 随机生成 random(grid + floor(time))
拖尾 递减强度 1.0 - smoothstep(0.0, trailLength, fall)
控制 GUI 面板 7个可调参数

🔧 核心技术点

1. 字符下落

为什么需要这个技术：用 mod 函数创造无限循环的下落效果。

GLSL
1
2
float rainFlow = mod(position.y + uTime * uRainSpeed * 3.0, 2.0) - 1.0;
newPosition.y = rainFlow;

2. 字符拖尾

为什么需要这个技术：下落字符有渐变的尾迹效果。

GLSL
1
2
3
float fall = mod(grid.y + uTime * uRainSpeed * 5.0, 20.0);
float trail = 1.0 - smoothstep(0.0, uTrailLength * 5.0, fall);
charEffect = char * trail * density;

3. 随机字符

为什么需要这个技术：每个网格单元显示不同的随机值。

GLSL
1
2
3
4
float random(vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
float char = random(grid + floor(uTime * uRainSpeed * 0.5));

4. 颜色方案

为什么需要这个技术：三种经典矩阵雨配色。

GLSL
1
2
3
if(scheme == 0) return vec3(0.0, 1.0, 0.0);    // 经典绿色
else if(scheme == 1) return vec3(0.0, 0.5, 1.0); // 蓝色
else return vec3(0.8, 0.0, 1.0);                 // 紫色

💡 调试与优化

问题类型 表现形式 解决方案
拖尾过长 字符粘连 减小 uTrailLength
下落过快 动画不流畅 减小 uRainSpeed
字符过密 看不清 减小 uMatrixSize

🚀 扩展思路

变体效果 核心改动 难度
汉字雨 替换字符集 ⭐
数字雨 仅数字 ⭐
垂直管道 拖尾更明显 ⭐
3D 矩阵 多层叠加 ⭐⭐
动态背景 添加图像 ⭐⭐

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