🔢 数字矩阵效果

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用 Three.js 实现【数字矩阵效果】，具体要求：

【核心特效】
- 数字字符随机生成
- 数字雨垂直下落动画
- 发光效果增强视觉冲击
- 深度渐变效果

【场景与光照】
- 黑色背景突出矩阵效果
- 无额外光源（自发光）

【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调整颜色、速度、密度、发光强度
- GSAP 旋转动画

【技术要求】
- Three.js r150+
- ShaderMaterial 自定义着色器
- GSAP 动画库

📖 效果拆解

层次 视觉效果 技术实现
基础 立方体几何体 BoxGeometry(4, 4, 4)
核心特效 数字字符生成 伪随机函数 + step 函数
增强细节 数字雨动画 多层正弦函数叠加
视觉效果 发光效果 smoothstep + 指数函数
交互 参数调整 GUI 控制 uniform 变量

🔧 核心技术点

1. 伪随机数生成

基于坐标的确定性随机函数：

GLSL
1
2
3
float random(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

为什么这样写：使用经典的 Hash 函数，通过正弦和点积生成可重复的伪随机数。

2. 字符生成

根据网格位置生成随机字符：

GLSL
1
2
3
4
5
float char(vec2 uv, float seed) {
    vec2 grid = floor(uv * charDensity);
    float charValue = random(grid + seed);
    return step(0.9, charValue);
}

为什么这样写：只保留随机值大于 0.9 的位置作为字符，控制字符密度。

3. 数字雨效果

多层雨滴叠加创造深度感：

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
float matrixRain(vec2 uv, float time) {
    float rain = 0.0;
    for (int i = 0; i < 3; i++) {
        float layer = float(i) * 0.3;
        float speed = rainSpeed * (1.0 + layer * 0.5);
        float yOffset = fract(uv.y + time * speed + layer);
        float head = smoothstep(0.0, 0.1, yOffset) * smoothstep(0.2, 0.1, yOffset);
        float tail = smoothstep(0.0, 0.3, yOffset) * (1.0 - smoothstep(0.5, 0.8, yOffset));
        rain += (head + tail * 0.3) * (1.0 - layer * 0.5);
    }
    return rain;
}

为什么这样写：

  • 三层雨滴叠加，每层速度和透明度不同
  • 头部使用两个 smoothstep 创建尖锐的前沿
  • 尾部逐渐衰减，模拟拖尾效果

4. GSAP 旋转动画

外部动画库控制几何体旋转：

JAVASCRIPT
1
2
3
4
5
6
7
gsap.to(_primitive.rotation, {
    x: Math.PI * 2,
    y: Math.PI * 2,
    duration: 15,
    repeat: -1,
    ease: "none"
});

为什么这样写：GSAP 提供流畅的动画控制，ease: "none" 确保匀速旋转。

💡 调试与优化

问题类型 表现形式 解决方案
字符过于密集 画面杂乱 增大 charDensity 值或降低 threshold
雨滴不明显 下落效果弱 增大 rainSpeed 值
发光过强 画面刺眼 降低 glowIntensity 值
性能问题 帧率下降 减少迭代次数或降低几何体分段数

🚀 扩展思路

变体效果 核心改动 难度
中文汉字 修改字符生成逻辑，使用汉字纹理 ⭐⭐⭐
颜色变化 添加时间控制的颜色渐变 ⭐⭐
交互响应 添加鼠标位置影响雨滴方向 ⭐⭐
3D矩阵 将效果应用到3D空间 ⭐⭐⭐

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