# 3D 降水量演示 · 网站版

总网站首页：https://xiaofeixianglab.top/

指定实验：https://xiaofeixianglab.top/#lab=rainfall

独立打开：https://xiaofeixianglab.top/降水量3D演示/index.html

# 3D 降雨强度演示

双击 **降雨量3D演示.html** 即可打开，推荐使用 Chrome、Edge 或 Safari。所有依赖均已内置，离线可运行，无需安装或联网。

- 左上角「逐时曲线 / 降水等级」：切换两种演示模式，切换不会改动已保存的逐时数据。
- 「降水等级」模式：下方选择微量降雨、小雨、中雨、大雨、暴雨、大暴雨或特大暴雨，雨滴密度、速度、雨丝长度、溅水和水面亮度共同变化。
- 默认进入「大暴雨」界面，并尝试自动开启雨声。右上角「关闭雨声」可随时静音，音量滑杆调整总音量。
- 雨声为离线合成的立体声，由连续雨幕、水面低频声及随机溅落声组成。若浏览器拦截自动播放，界面显示「点击画面播放雨声」，首次点击画面或操作控件后自动启动。
- 暂停动画时雨声同步淡出，切换到后台时静音。逐时曲线模式的声音按全天平均雨强变化。
- 坐标文字采用固定像素大小的屏幕标注，随三维坐标移动但始终正对屏幕；侧向视角刻度过密时自动省略部分时间标签，避免重叠。
- 拖动空白画面：旋转 3D 视角。
- 滚动鼠标滚轮 / 触控板：缩放。
- 双击画面或按 R：恢复默认视角。
- 右上角调节图标或按 E：打开逐时降雨数据编辑。
- 在折线图上拖动：修改对应小时的数据；也可直接输入数值。
- 右上角齿轮：显示或隐藏坐标、播放或暂停、镜头巡游、调整亮度和速度、全屏。
- 空格：播放 / 暂停。Esc：关闭面板。
- 鼠标移到雨幕上：查看对应小时的降雨强度。
- 手机 / 平板：单指旋转，双指缩放。

数据在浏览器允许本地存储时自动保存。默认值根据参考视频中可读的编辑面板重建，24:00 在画面中未展示，采用 1.2 mm/h 的延续值；它们是演示数据，不是已核验的气象观测数据。纵轴随数据范围调整，单位为毫米/小时。

## 等级口径

这里按 24 小时累计降水量 R 分级，不把 24 小时累计量当作逐小时雨强。微量降雨作为额外的教学档位。

| 等级 | 24 小时累计降水量 |
| --- | --- |
| 微量降雨 | 0 < R < 0.1 mm |
| 小雨 | 0.1 ≤ R < 10 mm |
| 中雨 | 10 ≤ R < 25 mm |
| 大雨 | 25 ≤ R < 50 mm |
| 暴雨 | 50 ≤ R < 100 mm |
| 大暴雨 | 100 ≤ R < 250 mm |
| 特大暴雨 | R ≥ 250 mm |

等级场景用于对比雨势强弱，粒子密度、运动速度和音色是教学视觉化参数，不代表由日累计量唯一确定的真实瞬时降雨过程。

## 文件

- `降雨量3D演示.html`：可独立复制、离线运行的单文件成品。
- `index.html`、`style.css`、`app.js`、`weather.js`、`rain-audio.js`、`vendor/`：便于后续修改的源文件；运行 index.html 时需一起保留。
- `reference/`：参考视频抽帧，保留用于后续对照。
- 原始 MP4：原样保留。

这是根据视频重建的实时 WebGL 场景。雨丝、水面微光、涟漪、坐标、数据编辑与镜头操作均为可运行效果；参考视频未提供原始工程，所以粒子分布、材质算法及镜头轨迹并非原始源码的逐像素复制。

渲染库：Three.js（MIT），许可见 `vendor/LICENSE-three.txt`。

修改源文件后，运行 `python3 build.py` 重新生成离线单文件。运行 `node --test tests/weather.test.cjs` 检查等级边界、效果递增和 24 小时积分。