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 实现心形曲线特效,具体要求:

**核心特效**
- 使用心形参数方程生成三维心形曲线管道
- 渐变流光效果沿曲线流动
- 双层心形叠加产生深度感
- 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 编辑整理,如需转载,请注明出处。