流光心

Three.js 心形曲线着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 Three.js 实现心形曲线特效,具体要求:
**核心特效**
- 使用心形参数方程生成三维心形曲线管道
- 渐变流光效果沿曲线流动
- 双层心形叠加产生深度感
- Bloom 后处理增强发光效果
**场景与光照**
- 黑色背景突出心形发光效果
- 无额外光源,完全依赖材质自发光
**交互与控制**
- OrbitControls 轨道控制器
- 可鼠标拖拽旋转查看心形
**技术要求**
- Three.js 版本 (ES Module)
- UnrealBloomPass 后处理
- 自定义 ShaderMaterial
- TubeGeometry + Curve 实现心形管道
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 心形曲线三维管道 | TubeGeometry + HeartCurve 自定义曲线类 |
| 核心特效 | 流光渐变动画 | ShaderMaterial uniforms 控制 UV 滚动 |
| 增强细节 | Bloom 发光效果 | UnrealBloomPass 后处理 |
| 叠加层 | 双心形错位叠加 | 两套材质不同颜色和时间偏移 |
🔧 核心技术点
1. 心形参数方程
为什么需要这个技术:心形曲线无法用标准几何体直接创建,必须通过参数方程在三维空间中采样生成。
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 坐标的循环滚动,创造流光效果。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
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 后处理
为什么需要这个技术:心形线条需要发光效果提升视觉冲击力。
javascript
1
2
3
4
5
6
7
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
5, // strength
1.2, // radius
0 // threshold
);
composer.addPass(bloomPass);
4. 双层叠加
为什么需要这个技术:使用两种不同颜色和时间偏移的材质叠加,创造立体感和层次感。
javascript
1
2
3
4
5
6
7
8
9
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 } // 时间偏移 0.5
});
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 心形不完整 | 曲线有缺口 | 检查参数方程 t 范围是否为 0~2π |
| 流光断层 | 流光不连续 | 调整 uFade 范围确保 smoothstep 平滑过渡 |
| Bloom 过曝 | 画面过亮失真 | 降低 UnrealBloomPass 的 strength 参数 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 跳动的心 | 在 render 循环中缩放几何体 | ⭐ |
| 彩虹流光 | 修改 uColor 为 HSL 渐变 | ⭐ |
| 3D 心形实体 | 使用 LatheGeometry 替代 TubeGeometry | ⭐⭐ |
| 粒子环绕 | 添加 Points 粒子沿心形曲线运动 | ⭐⭐ |
| 交互变形 | 鼠标位置影响心形参数 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!