以「四川省成都市天府国际机场(TFU)」为参考的网页版机场数字孪生,运行时零依赖、零构建。双击 index.html 即可运行(同目录 sim.js 仿真内核、fx.js 后期光影合成器,three.js 由 CDN 加载,需联网)。
- 「神鸟展翅」双航站楼:T1/T2 呈 V 形对称展开、波浪起伏屋顶,与天府「神鸟驮日」总体构型一致
- 太阳神鸟金饰:金沙遗址出土的成都市标 / 天府机场文化图腾,按实景铺在中央 GTC 圆厅屋顶(中心 12 道旋转日芒、外圈 4 只逆时针环飞神鸟,canvas 程序化绘制)
- 中轴塔台:立于航站区中央 GTC 之后,带红色航障灯
- 02L / 02R 平行跑道 + 东侧横风跑道:对应天府「两纵一横」跑道构型(横风跑道为远景装饰,不参与调度)
- 主基地航司:川航(3U)占比最高,辅以成都航 EU、西藏航 TV 等;进港城市为飞往成都的全国航线
# 方式一:直接双击 index.html
# 方式二:本地静态服务器
npx serve .
# 方式三:部署
# 整个文件夹拖到 Vercel / Netlify,或 push 到 GitHub Pages 即上线同一份航班时刻表(固定随机种子 20260611),两个独立仿真实例并行推进,对比两种跑道/机位调度算法:
| 基线 FCFS | 智能调度 | |
|---|---|---|
| 跑道分工 | 刚性(02L 专进 / 02R 专离) | 双跑道动态均衡 |
| 跑道关闭 | 原地排队等待重开 | 自动改道滑行 |
| 机位分配 | 按编号取第一个空闲 | 滑入距离最短优先 |
3D 画面只渲染当前选中的算法视图;右侧 KPI 面板两列实时对比(绿色 = 占优)。
渲染管线由 fx.js 自实现(仅用核心 three、运行时零额外依赖、仍可双击运行):
- 昼夜循环:太阳随虚拟时钟划过天空,大气散射式连续渐变(晨光 / 正午 / 黄金时刻 / 日落 / 星夜);平行光与可见太阳同步真实日位,阴影方向随太阳走;月亮置于太阳对侧、星空随入夜渐显
- 太阳软阴影(PCFSoft):飞机、航站楼、塔台投影到停机坪与地面
- Bloom 泛光 + 移轴景深 + FXAA + ACES 色调:跑道灯 / 信标 / 频闪 / 太阳神鸟金饰发光晕,高光柔化、画面呈精致缩微模型质感(ACES 默认轻度开启以调和深空配色)
- 精细机型:翼下双发、驾驶舱风挡、客舱舷窗带;左红 / 右绿翼尖航行灯、白色频闪、防撞信标、起降灯,起飞爬升拖出世界空间凝结尾迹(脱机飘散渐隐)
- 玻璃幕墙环境反射:GTC 圆厅与两翼幕墙菲涅尔天空反射,随昼夜 / 雷暴实时变化
- 动态天气环境(顶栏选择器:🌦️自动 / 晴 / 阴 / 雨 / 雷暴 / 雾 / 雪,平滑过渡):默认「自动」按虚拟时刻随机演化(晨雾多发、午后易雷暴);风场统一驱动雨丝倾斜 / 云层漂移 / 风向袋;雷暴含锯齿闪电折线 + 联动关闭 02R;各天气联动雾浓度与湿地面镜面反光
- 相机:右下角预设机位(总览 / 塔台俯瞰 / 02R 进近端 / 正俯视,平滑过渡)+「🎯 跟随」选中飞机运镜
- 停机坪生活:登机廊桥随登机对接 / 推出收回、地服车辆(行李拖车 / 客梯 / GPU 电源车)+ 地勤、机位引导线与机位号
- 机坪 & 进近灯光:高杆泛光灯、PAPI 坡度灯、跑道阈值斑马线 / 跑道号 / 接地带标线、进近顺序闪灯(兔子灯)、随风 / 雷暴摆动的风向袋
- 远景与空中:环绕远山、城市天际线(夜间万家灯火)、停车场车阵、飘动旗杆、塔台旋转雷达、白天飞鸟群与高空盘旋直升机
- 右上角昼夜按钮三态:🕐 自动(跟随时钟)/ ☀️ 固定白天 / 🌙 固定夜间
- 基础实景:航站楼前双向接驳车、步道行人、塔台航障灯、停机坪机位环、带修剪条纹的草地与远景树丛
- 道面材质:程序化沥青 / 混凝土纹理 + 法线微起伏 + 接地带轮胎胶痕(全 canvas 生成)
- 飞机涂装:成排客舱舷窗(夜间发光)、川航红腰线、引擎进气整流锥
- 运动真实化:空中转弯压坡度(盘旋呈倾侧圆周)、平滑抬前轮 / 接地拉飘
- 太阳光柱(God rays):太阳在画面且地平线之上时的径向光晕
- SSAO 环境光遮蔽(实验,默认关):
AEROTWIN_FX.cfg.ssao.enabled=true; AEROTWIN_FX.apply()
后期参数可在浏览器控制台实时微调:
AEROTWIN_FX.cfg.bloom.strength = 1.2; AEROTWIN_FX.apply()
- 触控:单指拖拽旋转、双指捏合缩放、轻点选机;桌面端鼠标拖拽 + 滚轮缩放、点击选机(统一 Pointer 事件)
- 可收展面板:各信息面板右上角
▾一键收起 / 展开;小屏默认收起「航班列表」「塔台事件」以腾出 3D 视野 - 顶栏与各面板按屏宽自适应缩放、重排(≤1024 平板、≤760 手机断点)
- 开 60×,让流量跑到 20+ 架活动航班
- 顶栏天气选择器切到「⛈️ 雷暴」——阴云、雨幕、闪电随之而来,并联动关闭 02R(也可试 🌫️雾 / ❄️雪 等其他天气)
- 切换两个视图对比:FCFS 的离场航班在 02R 等待端排长队,智能调度改道 02L 混合运行
- 看右侧「已离场 / 盘旋等待 / 准点率」三项指标在 5 分钟雷暴期间分叉
「仿真 / 渲染」解耦,仿真内核已抽出为独立文件 sim.js(纯逻辑、零依赖、浏览器与 Node 通用):
- 仿真内核
sim.js(createSim/stepSim/stepFlight):纯逻辑,虚拟时钟驱动, 航班生命周期状态机(盘旋→进近→着陆→滑入→登机→推出→滑出→等待→起飞), 跑道互斥锁 + 机位资源池,滑行道同向跟车间隔(防同道叠机),固定步长子步进防止高倍速状态穿越。 自带极简Vec3,不依赖 three.js - 渲染层(
index.html):three.js 场景是仿真状态的纯投影,每帧同步位置/航向/俯仰, 视图切换时整体重建飞机网格;昼夜循环与雷暴可视化按「当日时刻 / 雷暴强度」连续插值光照; 经典<script src="sim.js">引入内核,仍可双击运行、运行时零依赖 - 后期光影
fx.js:核心 three 自实现的轻量合成器(全屏 ShaderPass + RenderTarget 乒乓), Bloom / 移轴景深 / FXAA / ACES 色调(默认轻度,调和深空配色);着色器异常时优雅回退为直接渲染,绝不致黑屏 - UI 层:4Hz 快照刷新,与渲染帧率解耦
仿真内核为纯函数、易于测试,使用 Node 内置测试器(零 npm 依赖):
npm test # 等价于 node --test覆盖:确定性(同种子逐位一致)、活性(全航班最终离场、无死锁)、资源互斥不变量(跑道不双占 / 机位不超发 / 无锁泄漏)、滑行道同向跟车间隔、A/B 结论(滑入距离、雷暴排空)与 KPI 基准。
- 仿真内核迁入 Web Worker,主线程纯渲染
- 滑行道升级为图结构 + A* 寻路:路口/汇入口精确排序与离港物理排队(当前已实现同车道同向跟车间隔防叠机,路口级排序仍待图模型)
- 离场排序优化(CPS 约束位置交换)替代简单均衡
- 接入真实时刻表 JSON + 延误级联甘特图
字体配色:深空底 #070b14 + 小龙虾红 #ff5347。