⚡ 我把一座含氢能源园区搬进了浏览器（五类能流实时算守恒，在线直接玩）

在线预览 ：fanhuayishiy.github.io/ai-demo/hyd...

开源地址 ：github.com/fanhuayishi... （MIT，合集仓库，本项目在 hydrogen-energy-system/ 目录）

当初的提示词里有一句要求挺硬：「重点保证清晰的工业建模、发光流线动效、真实能量守恒逻辑、深色科技质感」。难的是「真实能量守恒逻辑」这半句------它不是一个把随机数画成曲线的看板，而是一座会自己把电、热、冷、氢四本账算平的园区。

能玩什么

程序化生成的深蓝园区，10 台设备从光伏阵列、风机、PEM 电解槽一路排到储氢罐、燃料电池、热电联产、热泵与制冷机组。拖动环绕、滚轮缩放、右键平移，工具栏另有自动环绕、俯视视角与视角复位。
选设备有三个入口：点三维模型、点悬浮标签、用侧栏下拉框。选中后右侧看实时参数，每秒刷新。
底部一排按钮切能流图层：电、热、冷、氢、天然气，也可一键全部。粒子方向跟着能流走，功率归零就停；电网那条连线会按买电卖电方向反转。
右侧拖辐照度、风速、环境温度，以及电 / 热 / 冷三个负荷滑块（0--160%），松手就重算；晴朗、多云、夜间是一键预设。
仿真速度 1× / 10× / 60×，用来看储氢罐一整天的充放走势。暂停会同时冻结库存积分、趋势曲线和管线粒子，但仍可改参数重算稳态。
「能量拓扑」看转换链，「运行记录」能导出 CSV。

守恒是硬约束。「能量平衡」面板下面有一行全站能量残差，不是装饰：电、热、冷、氢各自列等式，全站输入输出也要对上。
冷量按物理口径算------它是从用户侧移走的热量，不是新增能量，所以冷凝排热里包含移走的冷量与制冷驱动能量；热泵输出高于耗电的部分单独计入环境吸热。
设备参数带约束：光伏 900 kWp、温度系数 −0.4%/°C；风机 600 kW，3 m/s 切入、12 m/s 额定、25 m/s 切出，区间内走立方功率曲线；电解槽吃可再生余量的 90%，净 LHV 效率 68%、其余 32% 是散热。
储氢罐按 33.33 kWh/kg 折算，容量 4,000 kWh、初始 62%，不允许超充也不允许透支。电、热、冷基准需求 620 / 560 / 420 kW。
时间处理挺克制：每次刷新最多计入 2 秒，进后台不补算；重置气象与负荷会保留储氢库存。
模型测试覆盖 135 组气象 / 负荷组合与四种库存状态共 540 组，外加空满罐、风机切出、24 小时连续运行。

Three.js 0.160.1 + TypeScript 5.9.3 + esbuild。能源仿真是一个独立纯函数模块，三维场景只消费它的输出。依赖与字体全部打进 assets/，运行时不接 CDN 或远程模型。

bash 复制代码

git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/hydrogen-energy-system
npm ci
npm run dev          # http://localhost:5173

README 把四本账的等式逐条列了出来，也写清边界：稳态功率分配加动态储氢，不模拟启停滞后、管网压降与气体状态方程；三维管线是拓扑示意，不是施工配管图；数值是本地仿真，不是现场遥测。想核对口径看这份：

同一个仓库里还有一批 AI 辅助生成的交互式前端作品，全部 MIT 开源、全部带在线预览：可交互家庭 3D 空间、日式街角便利店微缩沙盘、波音 787-9 结构数字孪生大屏、热泵洗烘一体机 3D 爆炸拆解、单 HTML 文件的智慧校园大屏、仓储运营中心、分布式智能消防沙盘......

觉得有点意思，可以点个 Star：github.com/fanhuayishi...