✈️ 我把一架波音 787-9 拆开放进了大屏（九大总成点选联动，在线直接玩）

在线预览：https://fanhuayishiy.github.io/ai-demo/boeing-787-digital-twin/dist/

开源地址：https://github.com/fanhuayishiy/ai-demo （MIT，合集仓库，本项目在 boeing-787-digital-twin/ 目录）

当初的要求是这句：「帮我做一个波音飞机的3D爆炸图和拆解图的大屏，旁边要有一些大屏图表和面板。用尽你的全部能力和资源，把它做到最好看、最精致、最吸引人」

成品是一块深色航空工程大屏：中间一架以 787-9 为外形参考的三维飞机，左边是档案和总成列表，右边是健康度、动力和传感网络面板，底下横着三张图表。飞机是真三维几何，不是背景图。

能玩什么

• 顶部三个页签换中间区域：飞机总览 / 结构拆解 / 系统监测。
• 中间下方三个视图按钮：整机视图 / 爆炸视图 / 剖面视图。「拆解程度」滑块连续调，旁边的播放键跑一段可暂停的往复演示。
• 左侧「结构总成」九项：机首与驾驶舱、复合材料机身、左右翼总成、左右侧发动机、尾翼与尾段、客舱与地板梁、起落架系统。点一项，飞机上对应部件高亮并联动详情，鼠标悬停也联动。
• 镜头预设四个：透视 / 俯视 / 侧视 / 前视，另有自动旋转、部件标注、坐标网格三个开关，也可以直接拖动旋转、滚轮缩放。
• 点「起飞」或「降落」，中间切到三维跑道：抬轮、拉平、起落架向内折叠收入机腹，镜头跟随，支持暂停和拖进度。
• 右上角全屏，工具栏「导出视图」存 PNG，「查看结构检测报告」导出 JSON。

几个值得放大看的地方

• 机身是参数化截面生成的：舷窗、翼型机翼、翼梢、尾翼、双发动机、风扇叶片、起落架各自是独立几何。
• 剖面模式切开后不是空壳：座椅背屏、小桌板、安全带、行李架、阅读灯、厨房柜体都在，机身下方还有 24 个下层货柜。
• 聚焦机首会揭开上壳，露出双驾驶座、操纵盘、脚蹬、油门杆、中央控制台和五块静态示意仪表屏，返回整机自动恢复外观。风挡是 787 的四窗布局：两块前风挡加两块侧窗。
• 标注会自动避让。材料构成图例（复合材料、铝合金、钛合金、钢及其他）能点也能用键盘选，圆环中央读数跟着变。
• 右侧面板的读数全是模拟数据：结构健康度、机翼应变、发动机 N1 与 EGT、传感网络在线数。它不是波音官方软件，几何是参数化示意，不连接真实飞机，也不能用于维护、适航或工程决策——页脚那行「示意模型 · 模拟监测数据 · 非工程用途」是认真的。

技术栈

React 19 + Three.js 0.180 + Recharts 3 + Vite 7。字体、依赖和三维模型都随项目本地提供，运行时不依赖外部图片或模型 CDN，也不调第三方数据接口。

本地跑起来

git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/boeing-787-digital-twin
npm install
npm run dev          # http://localhost:5173

关于「旁边要有一些大屏图表和面板」

这半句决定了它不是纯 3D demo。README 里记了验证口径：真实 WebGL 画布像素检查、三种模式、镜头、部件详情、报告和图片下载，再加 1920、1366、390px 三档布局边界检查：

https://github.com/fanhuayishiy/ai-demo/blob/main/boeing-787-digital-twin/README.md

关于这个合集

同一个仓库里还有一批 AI 辅助生成的交互式前端作品，全部 MIT 开源、全部带在线预览：可探索的家庭 3D 空间、热泵洗烘一体机 3D 爆炸拆解、实时 3D 幼儿园、日式街角便利店微缩沙盘、含氢综合能源数字孪生、三坊七巷真实地图导览、体素深夜拉面摊、夕空飞行……

觉得有点意思，可以点个 Star：https://github.com/fanhuayishiy/ai-demo