AI测试记录

请使用原生 JavaScript + Three.js 制作一个可运行的“银河战略地图”Demo。

视觉上类似科幻太空战略游戏。

银河包含：
- 10,000 个恒星系统
- 多条旋臂
- 星云
- 银河中心
- 不同颜色恒星

性能：
- 恒星不能分别创建 Mesh
- 使用 InstancedMesh / Points / Shader 中合理的方案
- 支持 Level of Detail
- 大尺度视图保持流畅

交互：
- OrbitControls
- 鼠标 hover 恒星时显示名称
- 点击恒星：
  - 摄像机平滑飞过去
  - 从银河视图切换到恒星系统视图
- 再次缩小时回到银河视图

恒星系统：
- 恒星
- 3~8 个行星
- 程序化轨道
- 行星公转
- 行星自转
- 随机卫星

战略系统：
- 随机生成 5 个文明
- 文明占领不同恒星
- 使用不同颜色显示势力范围
- 相邻恒星之间生成航线
- 使用 Dijkstra/A* 计算两个恒星之间最短航线
- 点击两个恒星后显示路径

视觉：
- 星空
- Bloom
- 星云 Shader
- 恒星 Shader
- 银河尘埃
- 摄像机动画

架构：
请拆分：
GalaxyGenerator
StarRenderer
GalaxyCamera
SolarSystem
CivilizationSystem
PathfindingSystem
InteractionManager
PostProcessingManager

要求：
1. 先给出架构设计。
2. 给出核心数据结构。
3. 分析性能瓶颈。
4. 再写完整代码。
5. 不允许用伪代码替代核心逻辑。
6. 如果单文件过长，可以拆成多个 JS module，但所有文件必须完整输出。

额外要求：
假设目标机器是 Apple M 系列和主流 PC，解释如何尽量保持 60 FPS。

请直接完成当前 Next.js 项目中的页面：

```text
src/app/[locale]/ai-lab/tests/x.tsx
```

不要新建项目，不要修改与该页面无关的业务代码。

## 目标

制作一个高质量、可交互的 GIS 可视化页面，用于直观展示和比较：

* 墨卡托投影 Mercator / Web Mercator
* 高斯-克吕格投影 Gauss-Krüger / Transverse Mercator

你可以自由选择最合适的前端技术方案，包括但不限于：

* Three.js
* Canvas / SVG
* D3
* Cesium
* MapLibre
* proj4
* 项目现有的组件和依赖

优先复用当前项目已有技术栈。

## 页面要求

页面应该具有较强的视觉表现力，类似一个现代化的：

**Projection Lab / 地图投影实验室**

核心是可视化和交互，而不是大量文字说明。

至少需要体现：

* 同一份地理数据在两种投影下的不同表现
* 经纬网
* 地图轮廓
* 墨卡托投影高纬度地区的形变
* 高斯投影的中央经线
* 高斯投影离中央经线越远形变越明显
* 中央经线可调整，并真正重新计算投影
* 鼠标或交互点的经纬度与投影后坐标
* 至少一种能够直观表现投影形变的交互方式

可以自行加入你认为有价值的功能，例如：

* Tissot 变形圆
* 投影动画
* 2D / 3D 切换
* 城市定位
* 距离比较
* Split / Overlay 对比
* 投影参数调节
* 坐标转换
* 图表

不要求全部实现，请自行判断哪些功能最能提升页面质量。

## GIS 正确性

这是重要评分项。

不要：

* 用 CSS 拉伸冒充地图投影
* 用两张静态图片进行比较
* 把 Gauss-Krüger 简单等同于 UTM
* 让两个投影实际上使用相同坐标
* 忽略高斯投影的中央经线

投影应由程序真实计算。

## UI

请检查当前项目已有页面和组件风格，并保持一致。

希望页面具有：

* 专业 GIS / 科研可视化风格
* 大面积可视化区域
* 良好的信息层级
* 流畅动画与交互
* 良好的桌面端响应式体验

不要做成普通后台管理页面。

## 工程要求

开始前先阅读当前项目结构、package.json 和目标页面附近的代码。

允许：

* 修改该 TSX 页面
* 为该页面新增少量必要组件或工具文件
* 在确有必要时增加依赖

不要进行无关重构。

完成后自行运行项目已有的 lint / typecheck / build 等检查，并修复由你的修改产生的问题。

## 工作方式

不要只告诉我应该怎么实现。

直接读取当前代码仓库并完成页面。

请充分发挥你的前端设计、GIS、数学可视化和工程能力，自行决定具体实现方案。