跳动爱心动画
🎯 提示词
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. 心形参数方程
实现经典心形曲线:
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. 颜色与边缘处理
计算心形颜色和边缘平滑:
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. 动画循环控制
实现平滑的跳动动画:
uniforms.iTime.value += 0.01;
controls.update();
renderer.render(scene, camera);
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 形状异常 |
心形变形 |
调整参数方程系数 |
| 动画卡顿 |
帧率下降 |
降低时间更新频率 |
| 颜色异常 |
颜色过暗或过亮 |
调整颜色系数 |
| 边缘锯齿 |
轮廓粗糙 |
增加 smoothstep 采样精度 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 3D 心形 |
使用 3D 参数方程 |
⭐⭐ |
| 多色心形 |
添加颜色渐变动画 |
⭐ |
| 粒子心形 |
使用粒子系统渲染 |
⭐⭐⭐ |
| 破碎效果 |
添加心形破碎动画 |
⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!