Three.js 着色器方块动画

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用 Three.js 实现几何方块动画特效，具体要求：

**核心特效**
- Raymarching 渲染方块集合
- 多层方块围绕中心旋转
- 无限重复空间
- 发光累积效果

**场景与光照**
- 全屏 PlaneGeometry
- 无传统光照，纯 shader 发光
- 累积发光感

**交互与控制**
- 无控制器，纯动画展示

**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 全屏
- Raymarching + SDF

📖 效果拆解

层次 视觉效果 技术实现
基础 全屏 shader PlaneGeometry
方块 SDF 距离场 sdBox 函数
动画 多方块协同 sin/cos 时间驱动
空间 无限重复 mod(pos, 4.) - 2.

🔧 核心技术点

1. 方块 SDF

为什么需要这个技术：用有符号距离场定义方块形状。

GLSL
1
2
3
4
float sdBox( vec3 p, vec3 b ) {
    vec3 q = abs(p) - b;
    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

2. 方块集合动画

为什么需要这个技术：多个方块在不同位置以不同相位运动。

GLSL
1
2
3
4
5
6
7
8
9
float box_set(vec3 pos, float iTime) {
    vec3 pos_origin = pos;
    pos.y += sin(gTime * 0.4) * 2.5;
    float box1 = box(pos, 2. - abs(sin(gTime * 0.4)) * 1.5);
    pos = pos_origin;
    pos.x += sin(gTime * 0.4) * 2.5;
    float box3 = box(pos, 2. - abs(sin(gTime * 0.4)) * 1.5);
    // ...
}

3. 无限重复空间

为什么需要这个技术：用 mod 函数创造无限延伸的空间感。

GLSL
1
pos = mod(pos - 2., 4.) - 2.;

4. 发光累积

为什么需要这个技术：Raymarching 过程中累积发光量。

GLSL
1
2
3
4
5
6
7
for (int i = 0; i < 99; i++) {
    float d = map(pos, iTime);
    d = max(abs(d), 0.01);
    ac += exp(-d * 23.);
    t += d * 0.55;
}
col = vec3(ac * 0.02);

💡 调试与优化

问题类型 表现形式 解决方案
性能问题 帧率低 减少迭代次数
发光过强 过曝 降低 ac 系数
动画抖动 不流畅 调整步进系数

🚀 扩展思路

变体效果 核心改动 难度
球体替换 改 sdSphere ⭐
颜色渐变 添加调色板 ⭐
隧道效果 改变 camera ⭐⭐
反射效果 添加光线反射 ⭐⭐
3D 视角 改全屏为立方体 ⭐⭐⭐

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