
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 可视化技术分享。如需转载,请注明出处。







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