扭曲

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 加载纹理
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 平面纹理 | 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 编辑整理,如需转载,请注明出处。







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