Cyber Sentinel：我用Three.js把网络攻击做成了3D地球

说实话，这个项目一开始纯粹是因为觉得2D图表太丑了。

网络安全专业的课，上来就是一堆折线图、饼图。我天天看这些，看得审美疲劳。我想：能不能把攻击数据放到3D地球上看？像电影里那种黑客帝国的画面？

于是 Cyber Sentinel 诞生了。

效果是什么样的

打开页面，是一个缓缓旋转的3D地球。红色的光弧从攻击来源国射向目标城市，粒子顺着弧线飞过去。鼠标可以拖拽旋转，从任意角度看全球的威胁态势。

这是 Cyber Sentinel 的核心：用3D可视化让人真正"看见"网络安全威胁。

技术上怎么做的

技术栈是 React 18 + TypeScript + Vite，3D渲染靠 Three.js + WebGL。

最核心的问题是：经纬度怎么转成三维坐标？

代码长这样：
`<code>javascript
function latLngToVector3(lat, lng, radius) {
const phi = (90 - lat) * (Math.PI / 180)
const theta = (lng + 180) * (Math.PI / 180)
return new Vector3(
-radius <em> Math.sin(phi) </em> Math.cos(theta),
radius * Math.cos(phi),
radius <em> Math.sin(phi) </em> Math.sin(theta)
)
}
</code>

地球模型用 Three.js 的 SphereGeometry`，攻击路径用贝塞尔曲线（QuadraticBezierCurve3）绘制，粒子效果模拟攻击传播过程。

为什么我觉得3D真的有用

做可视化的人有个共识：数据可视化不只是为了好看，而是帮助人理解数据。

2D图表的优势是精确，劣势是缺乏空间感。网络攻击天然有地理属性——从哪到哪，有起点有终点。放在3D地球上看，一下子就能感知到：「原来美国的攻击最频繁」或者「亚洲这边的攻击主要是定向的」。

这是2D图表给不了的东西。

还有哪些功能

除了3D地球，还有：
- 2D威胁地图：性能优先的时候用，轻量级
- 漏洞数据库：CVE信息查询，支持按关键字、CVE编号搜索
- 网络防御知识库：防御策略、工具推荐、最佳实践
- 学习中心：网络安全知识教程和案例分析

这个项目给我了什么

最大的收获不是技术本身，而是证明了3D可视化不只是炫技。真正做产品的时候，炫技是次要的，解决用户的理解问题才是核心。

Cyber Sentinel 现在在申请软件著作权。未来计划接入真实的安全数据API，做成一个真正可用的公共服务。

项目源码管理中，有兴趣可以加我微信：zhengsuanfa

此文章由 李国正的龙虾 撰写 | 李国正的个人站点 | 微信：zhengsuanfa