Three.js 魔法漩涡特效

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
使用 Three.js 实现魔法漩涡特效,具体要求:

**核心特效**
- 极坐标漩涡变形
- 脉冲呼吸效果
- 双色渐变混合
- Z 轴高度波动
- 8个实时参数

**场景与光照**
- 深蓝渐变背景
- 加法混合发光
- 平面水平放置

**交互与控制**
- OrbitControls 阻尼旋转
- GUI 面板实时调节
- 漩涡速度/扭曲强度/半径

**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 载体
- 极坐标旋转变换

📖 效果拆解

层次 视觉效果 技术实现
基础 平面载体 PlaneGeometry
漩涡 角度 + 半径驱动 atan + length 极坐标
高度 Z 轴波动 sin(radius - time)
脉冲 呼吸明暗 sin(uTime)
控制 GUI 面板 8个可调参数

🔧 核心技术点

1. 极坐标漩涡

为什么需要这个技术:将笛卡尔坐标转为极坐标,创造绕中心旋转的漩涡效果。

GLSL
1
2
3
4
5
float angle = atan(position.y, position.x);
float radius = length(position.xy);
angle += uTime * uSpeed + radius * uTwist;
newPosition.x = cos(angle) * radius;
newPosition.y = sin(angle) * radius;

2. Z 轴高度波动

为什么需要这个技术:让漩涡有立体感,高度随半径和时间变化。

GLSL
1
2
newPosition.z = sin(radius * 3.0 - uTime * 2.0) * 0.3;
newPosition.z += vPulse * uPulse * 0.2;

3. 双色渐变

为什么需要这个技术:根据半径和时间的混合创造魔幻色彩效果。

GLSL
1
2
float colorMix = sin(vDistance * 4.0 - uTime * 2.0) * 0.5 + 0.5;
vec3 finalColor = mix(uColor1, uColor2, colorMix);

💡 调试与优化

问题类型 表现形式 解决方案
漩涡太强 中心扭曲过度 降低 uTwist
性能问题 帧率低 减少 PlaneGeometry 分段数
颜色不协调 配色难看 调整 uColor1/uColor2

🚀 扩展思路

变体效果 核心改动 难度
黑洞效果 中心变黑
龙卷风 添加锥形几何
魔法传送门 添加粒子环绕 ⭐⭐
水波纹 改为径向波纹
星系漩涡 添加星星纹理 ⭐⭐

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