3D 环形十字互通交通仿真系统

一个纯前端课程级 3D 交通仿真项目。系统基于 React + Three.js 在浏览器中展示地面十字路口、东西向高架主线和四角环形/弧形匝道，支持自动车辆流、fixed/adaptive 红绿灯、车辆跟车与停车、实时 HUD 和参数控制面板。

技术栈

Vite
React
TypeScript
Three.js
@react-three/fiber
@react-three/drei
Zustand

功能特性

地面层：东西向、南北向十字主路，包含直行、左转、右转路线、停止线、导向线和路口控制区。
高架层：东西向双向高架主线，包含桥面、护栏、桥墩和明显的高度层次。
匝道层：四角简化环形/弧形匝道，支持地面上桥和高架下地面。
路网模型：使用 RoadGraph / Lane / Route 抽象，车辆沿 lane points 连续移动，可跨多个 lane 切换。
车辆动力学：支持加速、制动、前车安全距离、红灯停车、黄灯谨慎通行、匝道低速、高架高速。
信号控制：保留 fixed 和 adaptive 模式，高架和多数匝道不受地面信号灯控制。
数据面板：显示车辆总数、通过数、平均等待时间、四方向队列、地面/高架/匝道车辆数。
控制面板：开始/暂停、重置、信号模式、流量倍率、仿真速度、调试线、车辆路径、斜视角/俯视角/高架视角。

环形十字互通说明

当前版本是简化版 clover / loop interchange：

地面仍保留一个受控十字路口；
高架主线以东西向穿过路口上方；
四角布置弧形匝道，形成可展示的互通结构；
重点实现“地面能上桥，桥上能下地面”，而不是追求完整高速互通的所有转向关系。

道路层次

ground：地面道路，包含十字路口、左转、右转和匝道接入口。主路口受红绿灯控制。
overpass：高架主线，默认常绿，不受地面信号灯控制，速度限制较高。
ramp：连接地面和高架的匝道，使用三维曲线采样点，具有上坡/弯道/下坡形态，速度限制低于高架。

运行方式

npm install
npm run dev

构建检查：

npm run build

项目结构

traffic-overpass-sim/
├── docs/
│   ├── architecture.md
│   ├── road-network.md
│   └── signal-control.md
├── public/
│   └── models/
├── src/
│   ├── components/
│   │   ├── CameraControls.tsx
│   │   ├── ControlPanel.tsx
│   │   ├── HUD.tsx
│   │   ├── Overpass.tsx
│   │   ├── RoadNetwork.tsx
│   │   ├── RoadSurface.tsx
│   │   ├── Scene.tsx
│   │   ├── TrafficLight.tsx
│   │   └── VehicleMesh.tsx
│   ├── simulation/
│   │   ├── metrics.ts
│   │   ├── roadGraph.ts
│   │   ├── routes.ts
│   │   ├── simulationEngine.ts
│   │   ├── trafficSignals.ts
│   │   ├── types.ts
│   │   ├── vehicleDynamics.ts
│   │   └── vehicleFactory.ts
│   ├── store/
│   │   └── useSimulationStore.ts
│   └── utils/
│       ├── math.ts
│       └── path.ts
├── package.json
├── vite.config.ts
└── tsconfig.json

文档

验证截图可放在项目根目录，文件名建议使用 verify-*.png。这些截图已被 .gitignore 忽略，不会污染提交。

可扩展方向

增加双车道换道、匝道汇入让行和更真实的 IDM 跟驰模型。
为左转增加独立保护相位，加入行人相位与公交优先。
将路网定义抽离为 JSON 配置，支持可视化编辑。
使用低模 GLTF 车辆和道路设施替代简化几何体。
增加拥堵热力图、平均速度、吞吐量曲线和信号优化策略对比。