跳动爱心动画

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用 Three.js 实现【跳动爱心动画】,具体要求:

【核心特效】
- 2D 心形参数方程
- 跳动动画效果
- 暖色调渐变

【场景与光照】
- 暖色调背景渐变
- 平面几何体
- 无光源(纯着色器效果)

【交互与控制】
- OrbitControls 视角控制
- 自动播放动画

【技术要求】
- Three.js 版本
- 自定义 ShaderMaterial

📖 效果拆解

层次 视觉效果 技术实现
基础 平面几何体 PlaneGeometry
核心特效 心形形状 参数方程 + 距离场
增强细节 跳动动画 时间驱动的缩放变形
氛围营造 背景渐变 颜色混合

🔧 核心技术点

1. 心形参数方程

实现经典心形曲线:

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
void main(void) {
    vec2 p = (vUv - 0.5) * 2.0;
    
    // 计算背景颜色 - 暖色调渐变
    vec3 bcol = vec3(1.0, 0.8, 0.7 - 0.07 * p.y) * 
              (1.0 - 0.25 * length(p));
    
    // 动画时间控制
    float tt = mod(iTime, 1.5) / 1.5;
    float ss = pow(tt, 0.2) * 0.5 + 0.5;
    ss = 1.0 + ss * 0.5 * sin(tt * 6.2831 * 3.0 + p.y * 0.5) * exp(-tt * 4.0);
    p *= vec2(0.5, 1.5) + ss * vec2(0.5, -0.5);
    
    // 心形形状计算
    p.y -= 0.25;
    float a = atan(p.x, p.y) / 3.141593;
    float r = length(p);
    float h = abs(a);
    float d = (13.0 * h - 22.0 * h * h + 10.0 * h * h * h) / (6.0 - 5.0 * h);
}

2. 颜色与边缘处理

计算心形颜色和边缘平滑:

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
// 颜色计算
float s = 0.75 + 0.75 * p.x;
s *= 1.0 - 0.4 * r;
s = 0.3 + 0.7 * s;
s *= 0.5 + 0.5 * pow(1.0 - clamp(r / d, 0.0, 1.0), 0.1);

// 形状颜色 - 暖色调
vec3 hcol = vec3(1.0, 0.4 * r, 0.3) * s;

// 混合背景色和形状色
vec3 col = mix(bcol, hcol, smoothstep(-0.01, 0.01, d - r));

gl_FragColor = vec4(col, 1.0);

3. 动画循环控制

实现平滑的跳动动画:

JAVASCRIPT
1
2
3
4
5
6
7
8
// 更新时间变量,驱动动画
uniforms.iTime.value += 0.01;

// 更新控制器状态
controls.update();

// 渲染场景
renderer.render(scene, camera);

💡 调试与优化

问题类型 表现形式 解决方案
形状异常 心形变形 调整参数方程系数
动画卡顿 帧率下降 降低时间更新频率
颜色异常 颜色过暗或过亮 调整颜色系数
边缘锯齿 轮廓粗糙 增加 smoothstep 采样精度

🚀 扩展思路

变体效果 核心改动 难度
3D 心形 使用 3D 参数方程 ⭐⭐
多色心形 添加颜色渐变动画
粒子心形 使用粒子系统渲染 ⭐⭐⭐
破碎效果 添加心形破碎动画 ⭐⭐⭐

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