魔法漩涡

Three.js 魔法漩涡特效 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 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 编辑整理,如需转载,请注明出处。







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