3D雷达锥体 - Cesium兼容版

一直没找到有类似的 源码。有幸借大神的 源码改了下。

一、整体功能概述

这段代码基于 WebGL + GLSL 着色器 实现了一个可交互的 3D 雷达锥体效果，核心是通过数学计算（圆锥面求交、螺旋臂算法）在 GPU 层面渲染动态扫描效果，同时支持鼠标 / 触摸拖拽旋转视角、参数实时调节，还预留了 Cesium 集成接口。

二、核心流程拆解

1. 初始化与参数绑定（页面加载阶段）

• 参数定义：先声明雷达的核心参数（臂数、转速、锥角、亮度、色系、螺旋圈数），并设置默认值。

• 控件绑定 ：通过bind函数把 HTML 中的滑块 / 下拉框和参数关联，当用户操作控件时，实时更新参数值并同步显示到页面上。

  javascript

  运行

  // 比如拖动"臂数"滑块，会触发回调更新arms变量，同时更新页面上显示的数值
  bind('arms',   v => arms = v);

2. Canvas 与 WebGL 环境搭建

• Canvas 适配：设置 Canvas 尺寸自适应，监听窗口大小变化并重新调整尺寸。
• WebGL 上下文创建：获取 WebGL 绘图上下文，若不支持则提示错误。

3. 着色器程序（核心渲染逻辑）

WebGL 通过顶点着色器 (VS) 和片元着色器 (FS) 实现 GPU 加速渲染：

• 顶点着色器（VS）：非常简单，仅绘制一个 "全屏四边形"（覆盖整个 Canvas），为片元着色器提供基础画布。
• 片元着色器（FS） ：这是雷达效果的核心，包含关键步骤：
  1. 坐标转换：将屏幕像素坐标转为归一化的 UV 坐标，构建相机视角的光线方向。
  2. 圆锥面求交（coneHit 函数）：用解析几何方法计算 "相机发出的光线" 与 "3D 圆锥面" 的交点，确定哪些像素属于雷达锥体。
  3. 螺旋臂计算（spiralOnSurface 函数）：基于交点的 3D 坐标，计算螺旋臂的相位、宽度和亮度蒙版，实现 "扫描臂" 效果。
  4. 颜色与光照：根据色系参数、深度衰减、菲涅尔效果（边缘提亮）计算最终像素颜色，让雷达有立体感和光效。

4. 交互控制（鼠标 / 触摸拖拽）

• 监听鼠标按下 / 移动 / 松开（或触摸）事件，通过拖拽的偏移量更新 3D 场景的旋转角度（rotX/rotY），实现视角旋转，同时限制俯仰角防止翻转。

5. 渲染循环（动画核心）

• 用requestAnimationFrame实现 60 帧 / 秒的实时渲染：
  1. 每次循环更新 Canvas 实际尺寸（适配设备像素比）。
  2. 将最新的参数（时间、臂数、转速、旋转角度等）传递给着色器的 uniform 变量。
  3. 调用gl.drawArrays绘制全屏四边形，触发片元着色器执行，渲染一帧雷达效果。
  4. 循环往复，形成动态扫描动画。

6. Cesium 集成预留

• 暴露window.RadarCone对象，提供修改雷达参数的接口（如setArms/setSpeed），方便后续嵌入 Cesium 三维地球场景中使用。

源码：3D雷达锥体-Cesium兼容版资源-CSDN下载