电磁场效果

🎯 提示词

PROMPT
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. 电场线生成

基于极坐标创建径向电场线。

GLSL
1
2
3
4
5
6
7
8
9
10
11
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. 磁场环效果

多层环形磁场叠加。

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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. 电荷效果

模拟正负电荷的场分布。

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
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. 闪烁效果

GLSL
1
2
float flicker = sin(time * 10.0) * 0.1 + 0.9;
color *= flicker;

💡 调试与优化

问题类型 表现形式 解决方案
着色器编译失败 黑屏或报错 检查 GLSL 语法和 uniform 定义
性能问题 帧率下降 减少循环迭代次数
效果不明显 场效果微弱 调整场强度参数
GUI 不显示 控制面板缺失 检查 lil-gui 导入路径

🚀 扩展思路

变体效果 核心改动 难度
3D 电磁场 将平面改为球体,添加三维场计算 ⭐⭐⭐
粒子系统 使用粒子模拟电场线 ⭐⭐⭐
交互式场 根据鼠标位置动态改变电荷位置 ⭐⭐
多电荷系统 添加更多电荷点 ⭐⭐

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