雷达着色器

Three.js 雷达着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现**雷达着色器**,具体要求:
【核心特效】
- 多层雷达圆环叠加
- 动态扫描线和十字标记
- 三角形方向标记
- 动态圆点标记
【场景与光照】
- 深色背景
- 俯视视角 (相机 y=800)
- OrbitControls 轨道控制器
- 自定义着色器实现复杂图案
【交互与控制】
- OrbitControls 鼠标拖拽旋转
- 鼠标滚轮缩放
- 自动播放动画
【技术要求】
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial 实现多种图形
- GLSL 距离函数和图案组合
- 实时动画更新
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 2D平面图案 | 片元着色器绘制所有元素 |
| 核心特效 | 多层圆环组合 | 5个同心圆环不同半径 |
| 增强细节 | 三角形和十字标记 | SMOOTH/RS 宏函数 |
| 动态元素 | 旋转圆点标记 | bip1/bip2 函数 |
🔧 核心技术点
1. 圆环绘制函数
为什么需要这个技术:使用距离函数绘制精确的圆环图案。
glsl
1
2
3
4
5
float circle(vec2 uv, vec2 center, float radius, float width)
{
float r = length(uv - center);
return SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);
}
2. 三角形标记
为什么需要这个技术:绘制雷达上的三角形方向标记。
glsl
1
2
3
4
5
6
7
8
float triangles(vec2 uv, vec2 center, float radius)
{
vec2 d = uv - center;
return RS(-8.0, 0.0, d.x-radius) * (1.0-smoothstep( 7.0+d.x-radius,9.0+d.x-radius, abs(d.y)))
+ RS( 0.0, 8.0, d.x+radius) * (1.0-smoothstep( 7.0-d.x-radius,9.0-d.x-radius, abs(d.y)))
+ RS(-8.0, 0.0, d.y-radius) * (1.0-smoothstep( 7.0+d.y-radius,9.0+d.y-radius, abs(d.x)))
+ RS( 0.0, 8.0, d.y+radius) * (1.0-smoothstep( 7.0-d.y-radius,9.0-d.y-radius, abs(d.x)));
}
3. 动态圆点标记
为什么需要这个技术:创建随机运动的圆点模拟雷达上的移动目标。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
float bip1(vec2 uv, vec2 center)
{
return SMOOTH(length(uv - center),3.0);
}
float bip2(vec2 uv, vec2 center)
{
float r = length(uv - center);
float R = 8.0+mod(87.0*iTime, 80.0);
return (0.5-0.5*cos(30.0*iTime)) * SMOOTH(r,5.0)
+ SMOOTH(6.0,r)-SMOOTH(8.0,r)
+ smoothstep(max(8.0,R-20.0),R,r)-SMOOTH(R,r);
}
#define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))
4. 颜色组合
为什么需要这个技术:将多个图形元素组合成完整的雷达图像。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void main() {
vec2 c = vec2(iResolution.x / 2.0, iResolution.y / 2.0);
vec3 finalColor;
finalColor = vec3( 0.3*_cross(uv, c, 240.0) );
finalColor += ( circle(uv, c, 100.0, 1.0)
+ circle(uv, c, 165.0, 1.0) ) * blue1;
finalColor += circle3(uv, c, 313.0, 4.0) * blue1;
finalColor += triangles(uv, c, 315.0 + 30.0*sin(iTime)) * blue2;
if( length(uv-c) < 240.0 )
{
vec2 p = 130.0*MOV(1.3,1.0,1.0,1.4,3.0+0.1*iTime);
finalColor += bip1(uv, c+p) * vec3(1,1,1);
p = 130.0*MOV(0.9,-1.1,1.7,0.8,-2.0+sin(0.1*iTime)+0.15*iTime);
finalColor += bip1(uv, c+p) * vec3(1,1,1);
p = 50.0*MOV(1.54,1.7,1.37,1.8,sin(0.1*iTime+7.0)+0.2*iTime);
finalColor += bip2(uv,c+p) * red;
}
gl_FragColor = vec4( finalColor, 1.0 );
}
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 图形模糊 | 圆环边缘不清晰 | 调整 SMOOTH 宏的过渡范围 |
| 动画卡顿 | 圆点运动不流畅 | 简化 MOV 函数的复杂度 |
| 颜色不协调 | 整体视觉效果差 | 调整蓝色系配色比例 |
🚀 扩展思路
- 扫描线效果:添加旋转的雷达扫描线
- 目标轨迹:添加历史轨迹显示
- 多雷达叠加:多个雷达同时显示
- 3D雷达:扩展到3D球形雷达
- 敌我识别:不同颜色区分目标类型
©️ 版权声明
*本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。








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