🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
使用 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
14
15
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
20
21
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 函数的复杂度
颜色不协调 整体视觉效果差 调整蓝色系配色比例

🚀 扩展思路

  1. 扫描线效果:添加旋转的雷达扫描线
  2. 目标轨迹:添加历史轨迹显示
  3. 多雷达叠加:多个雷达同时显示
  4. 3D雷达:扩展到3D球形雷达
  5. 敌我识别:不同颜色区分目标类型

©️ 版权声明

本文由 Three.js 技术提供支持,示例源码来源于 public/threeExamples/shader/radar-shader.html,仅供学习交流使用。