电磁场效果
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现电磁场效果,具体要求:
【核心特效】
- 径向电场线
- 环形磁场线
- 正负电荷效果
【场景与光照】
- 纯黑色背景
- 自发光效果
- 闪烁动画
【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- 重置功能按钮
【技术要求】
- Three.js 最新版本
- lil-gui 控制面板
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
平面几何体 |
PlaneGeometry(6, 6, 64, 64) |
| 核心特效 |
电场线 + 磁场环 |
极坐标计算 + smoothstep |
| 增强细节 |
电荷效果 |
双点距离场 |
| 交互层 |
GUI 参数调节 |
lil-gui 动态控制 |
🔧 核心技术点
1. 电场线生成
基于极坐标创建径向电场线。
float electricFieldLines(vec2 uv, float time) {
vec2 center = vec2(0.5, 0.5);
vec2 dir = uv - center;
float angle = atan(dir.y, dir.x);
float dist = length(dir);
float radialLines = sin(angle * lineDensity + time * pulseSpeed) * 0.5 + 0.5;
radialLines *= smoothstep(0.0, 0.4, dist) * (1.0 - smoothstep(0.4, 0.8, dist));
return radialLines;
}
2. 磁场环效果
多层环形磁场叠加。
float magneticFieldRings(vec2 uv, float time) {
vec2 center = vec2(0.5, 0.5);
float dist = length(uv - center);
float rings = 0.0;
for (int i = 0; i < 3; i++) {
float radius = 0.1 + float(i) * 0.15;
float ring = smoothstep(radius - 0.02, radius, dist) *
(1.0 - smoothstep(radius, radius + 0.02, dist));
float pulse = sin(time * pulseSpeed + float(i) * 2.0) * 0.5 + 0.5;
rings += ring * pulse;
}
return rings;
}
3. 电荷效果
模拟正负电荷的场分布。
float chargeEffect(vec2 uv, float time) {
vec2 positiveCharge = vec2(0.3, 0.5);
vec2 negativeCharge = vec2(0.7, 0.5);
float positiveDist = length(uv - positiveCharge);
float negativeDist = length(uv - negativeCharge);
float positiveField = smoothstep(0.1, 0.0, positiveDist);
float negativeField = smoothstep(0.1, 0.0, negativeDist);
return (positiveField - negativeField) * 0.5 + 0.5;
}
4. 闪烁效果
float flicker = sin(time * 10.0) * 0.1 + 0.9;
color *= flicker;
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 着色器编译失败 |
黑屏或报错 |
检查 GLSL 语法和 uniform 定义 |
| 性能问题 |
帧率下降 |
减少循环迭代次数 |
| 效果不明显 |
场效果微弱 |
调整场强度参数 |
| GUI 不显示 |
控制面板缺失 |
检查 lil-gui 导入路径 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 3D 电磁场 |
将平面改为球体,添加三维场计算 |
⭐⭐⭐ |
| 粒子系统 |
使用粒子模拟电场线 |
⭐⭐⭐ |
| 交互式场 |
根据鼠标位置动态改变电荷位置 |
⭐⭐ |
| 多电荷系统 |
添加更多电荷点 |
⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!