Three.js 心形曲线着色器
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用 Three.js 实现心形曲线特效,具体要求:
**核心特效**
- 使用心形参数方程生成三维心形曲线管道
- 渐变流光效果沿曲线流动
- 双层心形叠加产生深度感
- Bloom 后处理增强发光效果
**场景与光照**
- 黑色背景突出心形发光效果
- 无额外光源,完全依赖材质自发光
**交互与控制**
- OrbitControls 轨道控制器
- 可鼠标拖拽旋转查看心形
**技术要求**
- Three.js 版本 (ES Module)
- UnrealBloomPass 后处理
- 自定义 ShaderMaterial
- TubeGeometry + Curve 实现心形管道
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
心形曲线三维管道 |
TubeGeometry + HeartCurve 自定义曲线类 |
| 核心特效 |
流光渐变动画 |
ShaderMaterial uniforms 控制 UV 滚动 |
| 增强细节 |
Bloom 发光效果 |
UnrealBloomPass 后处理 |
| 叠加层 |
双心形错位叠加 |
两套材质不同颜色和时间偏移 |
🔧 核心技术点
1. 心形参数方程
为什么需要这个技术:心形曲线无法用标准几何体直接创建,必须通过参数方程在三维空间中采样生成。
class HeartCurve extends THREE.Curve {
constructor(scale = 1) {
super();
this.scale = scale;
}
getPoint(a, optionalTarget = new THREE.Vector3()) {
const t = a * Math.PI * 2;
const tx = 16 * Math.pow(Math.sin(t), 3);
const ty = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
const tz = 0;
return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
}
}
2. 流光 shader
为什么需要这个技术:通过 mod 函数实现 UV 坐标的循环滚动,创造流光效果。
uniform float uTime;
uniform float uSpeed;
uniform vec2 uFade;
void main() {
float v = vUv.x;
float s = -uTime * uSpeed;
float d = mod(v + s, 1.0);
if(d > uFade.y) discard;
float alpha = smoothstep(uFade.x, uFade.y, d);
gl_FragColor = vec4(uColor, alpha);
}
3. Bloom 后处理
为什么需要这个技术:心形线条需要发光效果提升视觉冲击力。
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
5,
1.2,
0
);
composer.addPass(bloomPass);
4. 双层叠加
为什么需要这个技术:使用两种不同颜色和时间偏移的材质叠加,创造立体感和层次感。
const material1 = getMaterial({
uColor: { value: new THREE.Color('pink') },
uTime: { value: 0 },
uFade: { value: new THREE.Vector2(0, 0.5) }
});
const material2 = getMaterial({
uColor: { value: new THREE.Color('#00BFFF') },
uTime: { value: 0.5 }
});
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 心形不完整 |
曲线有缺口 |
检查参数方程 t 范围是否为 0~2π |
| 流光断层 |
流光不连续 |
调整 uFade 范围确保 smoothstep 平滑过渡 |
| Bloom 过曝 |
画面过亮失真 |
降低 UnrealBloomPass 的 strength 参数 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 跳动的心 |
在 render 循环中缩放几何体 |
⭐ |
| 彩虹流光 |
修改 uColor 为 HSL 渐变 |
⭐ |
| 3D 心形实体 |
使用 LatheGeometry 替代 TubeGeometry |
⭐⭐ |
| 粒子环绕 |
添加 Points 粒子沿心形曲线运动 |
⭐⭐ |
| 交互变形 |
鼠标位置影响心形参数 |
⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!