Three.js 电磁场效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个电磁场效果着色器,包含电场和磁场效果,支持场线显示,提供三种场类型可选。

🖼️ 效果预览

电磁场效果着色器

🎮 案例演示

立即体验


📖 效果拆解

层次 视觉效果 技术实现
基础 球体几何体 SphereGeometry
核心特效 电场效果 蓝色电场线和波动
增强细节 磁场环效果 从中心向外扩散的环形磁场
视觉效果 场线系统 水平、垂直和对角线场线
交互控制 场类型切换 电磁混合、纯电场、纯磁场

🔧 核心技术点

顶点着色器

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
uniform float uTime;
uniform float uElectricField;
uniform float uMagneticField;
uniform float uWaveFrequency;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;

    float electricWave = sin(position.x * 8.0 + uTime * uElectricField * 2.0) *
                       cos(position.y * 6.0 + uTime * uElectricField * 1.5) *
                       sin(position.z * 4.0 + uTime * uElectricField * 0.8);

    float magneticRing = sin(distance(position, vec3(0.0)) * 10.0 + uTime * uMagneticField * 3.0) *
                       cos(uTime * uMagneticField * 2.0);

    float fieldLines = sin(position.x * 12.0 + uTime * uWaveFrequency * 4.0) *
                     cos(position.z * 12.0 + uTime * uWaveFrequency * 4.0);

    vec3 newPosition = position + normal * (electricWave * 0.2 + magneticRing * 0.15 + fieldLines * 0.1);

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

电场效果

glsl
1
2
3
4
5
6
7
8
9
vec3 electricField(vec2 uv, float intensity) {
    vec3 electricColor = vec3(0.2, 0.6, 1.0);
    float electricLines = 0.0;
    electricLines += sin(uv.x * 20.0 + uTime * 3.0) * 0.3;
    electricLines += sin(uv.y * 15.0 + uTime * 2.5) * 0.2;
    float electricWave = sin(uv.x * 8.0 + uTime * 2.0) *
                       cos(uv.y * 6.0 + uTime * 1.5);
    return electricColor * (electricLines + electricWave) * intensity;
}

磁场环效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
vec3 magneticField(vec2 uv, float intensity) {
    vec3 magneticColor = vec3(1.0, 0.2, 0.6);
    vec2 center = vec2(0.5, 0.5);
    float dist = distance(uv, center);
    float magneticRing = sin(dist * 15.0 + uTime * 2.5) *
                       cos(uTime * 3.0);
    float magneticLines = 0.0;
    if(uShowFieldLines) {
      magneticLines += sin(atan(uv.y - 0.5, uv.x - 0.5) * 8.0 + uTime * 2.0) * 0.2;
    }
    return magneticColor * (magneticRing + magneticLines) * intensity;
}

💡 调试与优化

问题类型 表现形式 解决方案
场效果过弱 变形不明显 增大 uElectricField 或 uMagneticField 值
场线过密 画面杂乱 减小 uFieldDensity 值
性能问题 帧率下降 减少分段数
颜色过暗 效果不明显 增大 uGlowIntensity 值

🚀 扩展思路

变体效果 核心改动 难度
带电粒子运动 添加带电粒子在电磁场中的运动轨迹 ⭐⭐⭐
交互式场源 支持鼠标添加移动的场源 ⭐⭐⭐
真实物理模拟 基于洛伦兹力方程的真实物理模拟 ⭐⭐⭐
多场源系统 支持多个正负场源的叠加 ⭐⭐
教学演示模式 添加标准电磁学示意图 ⭐⭐

本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。