Three.js 漩涡扭曲特效

📋 AI 提示词

prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用 Three.js 实现图像漩涡扭曲特效,具体要求:

**核心特效**
- 中心漩涡旋转效果
- 旋转强度随距离衰减
- 局部区域强扭曲
- 纹理采样重映射

**场景与光照**
- DirectionalLight 方向光
- 纹理贴图作为输入源

**交互与控制**
- lil-gui 控制面板
- 可调 radius 和 uzuStrength
- OrbitControls 自由旋转

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

🖼️ 效果预览

Three.js 漩涡扭曲特效

🎮 案例演示

立即体验


📖 效果拆解

层次 视觉效果 技术实现
基础 平面纹理 PlaneGeometry + 纹理
核心特效 漩涡扭曲 中心旋转坐标映射
衰减 边缘不变 距离 / radius 衰减
控制 GUI 参数 fRadius, fUzuStrength

🔧 核心技术点

1. 漩涡旋转计算

为什么需要这个技术:像素绕中心旋转,旋转角度随距离中心的距离增大而减小。

glsl
1
2
3
4
float uzu = min(max(1.0 - (len / fRadius), 0.0), 1.0) * fUzuStrength;
float x = pos.x * cos(uzu) - pos.y * sin(uzu);
float y = pos.x * sin(uzu) + pos.y * cos(uzu);
vec2 retPos = (vec2(x, y) + vCenter) / vScreenSize;

2. 旋转衰减

为什么需要这个技术:中心处旋转最强,边缘处保持原样。

glsl
1
2
3
4
5
if (len >= fRadius) {
    gl_FragColor = texture2D(tDiffuse, vUv);
    return;
}
float uzu = (1.0 - len / fRadius) * fUzuStrength;

3. GUI 实时控制

为什么需要这个技术:允许用户动态调整漩涡效果参数。

javascript
1
2
gui.add(cubeMaterial.uniforms['fRadius'], 'value', 1.0, 1000.0).step(1.0).name('radius');
gui.add(cubeMaterial.uniforms['fUzuStrength'], 'value', -4.0, 4.0).step(0.1).name('uzuStrength');

💡 调试与优化

问题类型 表现形式 解决方案
图像撕裂 采样偏移过大 降低 fUzuStrength
性能问题 帧率下降 降低纹理分辨率
黑色边缘 坐标越界 添加边界检查

🚀 扩展思路

变体效果 核心改动 难度
反向漩涡 负的 uzuStrength
多漩涡 多个中心点叠加 ⭐⭐
动态纹理 VideoTexture
3D 扭曲 顶点着色器变形 ⭐⭐
鱼眼效果 广角扭曲 ⭐⭐⭐

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