Omrawat11/Disaster-Response-Emergency-Assistant
GitHub: Omrawat11/Disaster-Response-Emergency-Assistant
RescueNet 是一个基于 React + Three.js 的灾难响应与紧急援助门户应用，提供实时 3D 地球可视化、AI 紧急情报、事件上报、避难所定位和灾难模拟等功能。
Stars: 0 | Forks: 0
# 🔴 RescueNet — 灾难响应与紧急援助门户
## 概述
RescueNet 是一个生产就绪的单页应用程序，专为实时灾难响应协调而构建。它具有实时 3D 地球仪、AI 驱动的紧急情报、实时数据滚动、多步骤事件报告、避难所定位器和灾难模拟功能——所有这些都以余烬与灰烬的视觉系统呈现，并搭配极其流畅的 WebGL 和滚动动画。
## 技术栈
| 层级 | 技术 |
|---|---|
| 框架 | React 18 + Vite 5 |
| 样式 | Tailwind CSS v3 (任意值) |
| 3D / WebGL | React Three Fiber 8.x + Three.js r165 + `@react-three/drei` 9.x + `@react-three/postprocessing` 2.x |
| 动画 | GSAP 3.12 (ScrollTrigger + ticker bridge) — **所有动画都在此处** |
| 平滑滚动 | Lenis 1.x (`lenis` npm 包) |
| 状态 | Zustand 4.x |
| 图表 | Recharts 2.x |
| 图标 | Lucide React |
| 噪声 | simplex-noise (粒子位移) |
## 快速开始
```
# 安装 dependencies
npm install
# 启动 development server
npm run dev
# 在 browser 中打开
http://localhost:5173
```
## 色彩系统
所有颜色均为 CSS 自定义属性。**无例外。不允许覆盖。**
```
:root {
--void: #06080f; /* Background — near-black, warm undertone */
--surface: #0e1018; /* Card / panel base */
--ember: #C8410A; /* PRIMARY accent — rescue red-orange */
--crimson: #7A0F0F; /* Secondary — deep threat red */
--gold: #D4A853; /* Highlight — resource / success */
--ash: #E8E0D5; /* Primary text — warm off-white */
--smoke: #5C5650; /* Muted text / disabled */
--glass: rgba(232,224,213,0.04);/* Glassmorphic surface */
--border: rgba(232,224,213,0.08);/* Card borders */
}
```
**禁止：** 任何以 `#0066`、`#00f`、`#0af`、`#4a`、`#7c3aed` 开头的十六进制颜色值，或任何蓝色 / 紫色 / 青色系。
### 灾难模拟颜色覆盖
在第 12 部分通过 `document.body.dataset.sim` 应用：
| 模拟 | `--sim-accent` | 备注 |
|---|---|---|
| 洪水 | `#2E5C6E` | 深青灰色 — 不是蓝色 |
| 野火 | `#E84B0A` | 明亮的余烬色 |
| 飓风 | `#8A7560` | 温暖的沙灰色 |
| 地震 | `#A67C2E` | 深金色 |
## 排版
| 角色 | 字体 | 粗细 | 大小 |
|---|---|---|---|
| 标题 | Space Grotesk | 700 | `clamp(2rem, 6vw, 7rem)` |
| UI 标签 | Inter | 400 / 500 | 13px – 16px |
| 数据 / 数字 | JetBrains Mono | 400 | 所有计数器、Case ID、时间戳 |
在 `index.html` 中通过 `` 从 Google Fonts 加载这三种字体。
## 文件夹结构
```
src/
├── components/
│ ├── canvas/
│ │ ├── Scene.jsx # R3F Canvas wrapper + post-processing
│ │ ├── EarthGlobe.jsx # 3D Earth sphere + atmosphere shader
│ │ ├── ParticleField.jsx # 800-particle ember/gold drift field
│ │ └── SimOverlay.jsx # Flood/Wildfire/Cyclone/Earthquake overlays
│ └── ui/
│ ├── Navbar.jsx
│ ├── CustomCursor.jsx
│ ├── ScrollProgressBar.jsx
│ ├── GlassCard.jsx
│ ├── MagneticButton.jsx
│ ├── AlertBadge.jsx
│ ├── ProgressBar.jsx
│ └── CounterStat.jsx
├── hooks/
│ ├── useSmoothScroll.js # Lenis + GSAP ticker bridge
│ ├── useTickEngine.js # 1500ms interval stat updates
│ ├── useTilt.js
│ ├── useMouseParallax.js
│ └── useCountUp.js
├── store/
│ └── disasterStore.js # Zustand: simulation, alertLevel, liveStats, alerts
├── sections/
│ ├── S00_Loading.jsx
│ ├── S01_Hero.jsx
│ ├── S02_CommandCenter.jsx
│ ├── S03_AlertSystem.jsx
│ ├── S04_DisasterMap.jsx
│ ├── S05_IncidentReport.jsx
│ ├── S06_ShelterLocator.jsx
│ ├── S07_SafetyGuidelines.jsx
│ ├── S08_EmergencyContacts.jsx
│ ├── S09_ResourceDashboard.jsx
│ ├── S10_VolunteerCenter.jsx
│ ├── S11_AIAssistant.jsx
│ ├── S12_DisasterSimulation.jsx
│ ├── S13_ResponseTimeline.jsx
│ ├── S14_MissingPersons.jsx
│ ├── S15_Donations.jsx
│ ├── S16_Checklist.jsx
│ ├── S17_RescueNetwork.jsx
│ ├── S18_NewsFeed.jsx
│ ├── S19_Analytics.jsx
│ └── S20_Footer.jsx
├── data/
│ ├── alerts.json
│ └── shelters.json
├── App.jsx
└── main.jsx
public/
└── earth.jpg # User-provided Earth texture (WebP preferred)
```
## 架构
### 核心引擎
**`useSmoothScroll.js`** — Lenis（持续时间 1.3，自定义指数缓动）桥接到 GSAP 的 ticker 中。返回 `{ lenis, scrollY, scrollProgress }`。不需要 `ScrollTrigger.scrollerProxy()`。
**`useTickEngine.js`** — 以 1500ms 间隔执行 `setInterval`。每次 tick 会对 `disasterStore` 应用随机增量：获救人数、活跃事件、避难所占用率、志愿者人数。所有部分通过 Zustand 订阅 — 无需 prop 逐层传递。
**`disasterStore.js`** — 持有 `simulation`、`alertLevel`、`liveStats` 和 `alerts[]` 的 Zustand store。
### 3D Canvas (`Scene.jsx`)
- `
标签：AI辅助, React, Syscalls, Three.js, Web前端, 应急管理系统, 灾害响应, 自定义脚本