基于 threejs-skills 技能链的智慧工厂数字孪生大屏生成：任务实现分析
简介
本文基于一次用户与 AI Agent 的完整协作记录，分析借助 threejs-skills 技能包（CloudAI-X/threejs-skills）从一条需求描述出发，生成可交互智慧工厂数字孪生大屏并导出 4K 演示视频的全过程。与手写代码的开发方式不同，本次实现的核心路径是技能链驱动：Agent 安装技能包后，按需求自动组合其中的建模、视觉、交互与导出子技能，产出约 970 个 JS 文件的工程，并在无独立 GPU 的软件渲染环境下完成 3840×2160 / 60 fps 视频导出。文章还原任务目标、技能链路、技术实现与运行方式，给出结果核验数据，并附本次使用的原始提示词及其专业化优化版本。
关键字
AI Agent；threejs-skills；技能链；Three.js；数字孪生；程序化建模；提示词工程；Playwright；逐帧渲染；ffmpeg
1 任务目标
本次协作围绕两条指令展开：先安装技能包，再依据一张参考界面图提出完整需求。归纳后的任务目标如下：
| 维度 | 要求 |
|---|---|
| 视觉还原 | 以参考图为依据：暗底、荧光黄绿（#C6F542）斜切科技风、中文界面 |
| 三维场景 | 机械臂、传送带、检测站、AGV、立体货架；优先加载 GLB 模型，缺失时程序化建模 |
| 动态演示 | 总览 → 漫游 → 机械臂抓取 → 在线检测 → AGV 配送的分镜时间轴，各分页画面有区分 |
| 数据联动 | 3D 标签投影遮挡、高亮线框面板、模拟数据标注 |
| 光效 | Bloom 辉光、管线流光、检测扫描、线框、呼吸光 |
| 交互 | 旋转、缩放、设备选择、分页切换、重置、自动演示 |
| 交付 | 可交互网页及资源、4K 视频（约 25–30s，3840×2160）、关键画面预览、结构与导出规格说明 |
2 技能链路还原
2.1 技能包结构
通过 GitHub 安装 CloudAI-X/threejs-skills 至用户级技能目录后，得到一组面向 Three.js 开发的子技能，覆盖从场景搭建到成片导出的完整环节：
| 技能环节 | 作用 | 在本任务中的效果 |
|---|---|---|
| 技能安装 | 按 GitHub 仓库将技能包落入 ~/.workbuddy/skills/ |
获得 13 个 threejs 子技能供按需加载 |
| 场景与建模 | 参数化几何体拼装设备、材质工厂、灯光环境 | 六类设备全部程序化建成，未依赖外部 GLB |
| 视觉特效 | 后处理与着色器方案 | Bloom 辉光、管线流光、扫描幕、呼吸光全部落地 |
| 数据联动 | 时间驱动的 UI 图表与 3D 标签遮挡 | KPI/折线/环形/条形图随模拟数据实时变化 |
| 导出 | 自动化逐帧渲染与视频合成管线 | 软件渲染下产出 4K/60fps 成片 |
2.2 技能之外的配套工具
技能链并非孤立工作，任务中还调用了环境内的其他能力：
- 图像生成：按需求生成 16:9 与 9:16 两张封面背景图，与参考界面同风格（暗底荧光绿、预留标题留白）；
- ffmpeg：帧序列重编码与 4K 上采样；
- 本地静态服务器：解决浏览器对 ES Module 的协议限制，支撑网页交付。
3 技术实现
3.1 架构与时间轴驱动
工程按职责拆分为场景（scene）、设备（devices）、材质（materials）、着色器（shaders）、后处理（postfx）、标签（labels）、数据（data）、UI（ui）、导演（director）与主入口（main）十个模块。全系统由单一时间参数 t 驱动：window.SIM.setFrame(t) 先推进设备动画与 AGV 运动，再同步导演机位、UI 数据、标签遮挡与后处理输出。交互模式由 requestAnimationFrame 推进 t，导出模式由外部逐帧注入，两者共享同一状态推进逻辑——这保证了"交互画面即视频画面"。
3.2 程序化建模与布局约束
设备均为参数化几何体拼装：六轴机械臂（腰座 + 六级关节链 + 夹爪 + 软管）、传送带、带龙门架与发光扫描幕的检测站、含举升台与激光雷达的 AGV、多层立体货架、外围发光管线。布局遵循"运动净空先行"原则：AGV 取矩形闭环（x∈[-13,13], z∈[-11,11]），货架外移至 x=±17，传送带限 x∈[-9,9]，管线沿 x=±19 外环贴地敷设，静态几何与运动路径在设计期即无交叠。
3.3 视觉与数据体系
金属材质依赖环境反射，初始化时经 RoomEnvironment + PMREMGenerator 生成环境贴图，配合 ACES Filmic 色调映射；后处理采用 UnrealBloomPass（strength 0.55 / radius 0.6 / threshold 0.9）。数据侧，KPI、产线节拍、能耗结构、工序负荷均为时间函数（如 KPI(t)），百分比指标按基数比例设置振幅并封顶，保证数值始终处于合理区间；UI 层用 Canvas 2D 逐帧重绘四类图表，3D 标签经屏幕投影定位并做遮挡测试，HUD 与标签层以 z-index 分层避免相互覆盖。
3.4 逐帧导出管线
导出基于 Playwright 驱动本机 Chrome，以 SwiftShader 软件渲染并注入反节流参数；逐帧调用 setFrame(t) 后以 JPEG（quality 88）截图。为保证长任务稳定，每 90 帧主动重启浏览器并跳过磁盘上已有的有效帧实现断点续渲。1680 帧（28s × 60fps）渲染完成后，以 image2 序列输入 ffmpeg，经 Lanczos 上采样与锐化重编码为 4K：
ffmpeg -y -framerate 60 -i frames_seq/f%05d.jpg \
-vf "scale=3840:2160:flags=lanczos,unsharp=3:3:0.6:3:3:0.0" \
-c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart factory_twin_4k.mp4
4 原始提示词与优化
4.1 原始提示词
本次协作用户先后给出两条原始提示词，原样记录如下：
https://github.com/CloudAI-X/threejs-skills 安装这个技能
请以我上传的参考界面图为主要视觉依据，使用 Three.js Skills，制作可交互的
智慧工厂数字孪生大屏，并导出4K演示视频。要求包括：
1. 视觉还原：暗底荧光黄绿（#C6F542）斜切科技风，中文界面；
2. Skill组合：按需组合技能包内的建模、视觉、交互、导出能力；
3. 三维场景：机械臂、传送带、检测站、AGV、货架，优先GLB否则程序化建模；
4. 动态演示：总览→漫游→机械臂抓取→检测→AGV配送，各分页画面有区别；
5. 数据联动：标签投影遮挡、高亮线框面板、模拟数据标注；
6. 光效：Bloom、流光、扫描、线框、呼吸光；
7. 交互：旋转、缩放、选择、分页切换、重置、自动演示；
8. 交付：网页+资源+视频（约25-30秒，3840×2160）+关键画面预览
+推断结构/模型来源/导出规格说明。
4.2 优化后的专业提示词
原始提示词已具备完整的要素清单，但在验收标准、环境约束与迭代策略上留有空白。优化版本将隐性预期显式化，可直接复用于同类任务：
# 任务：生成可交互数字孪生大屏并导出4K演示视频
## 输入
- 参考视觉图：{{reference_image}}（视觉风格唯一依据）
- 技能包：threejs-skills（已安装，含建模/特效/交互/导出子技能）
## 硬性要求
1. 视觉：暗底 + 荧光黄绿 #C6F542 斜切科技风，界面全中文；
2. 场景：机械臂、传送带、检测站、AGV、立体货架五类设备；
优先加载GLB，无资产时程序化建模，禁止占位灰色方块；
3. 布局约束：设备坐标设计期即保证AGV运动路径与静态几何零交叠；
4. 数据：KPI/折线/能耗/负荷全部为时间函数，百分比数值封顶合理区间；
3D标签带投影与遮挡测试，不遮挡HUD；
5. 镜头：按"总览→漫游→机械臂→检测→AGV→总览"组织28s导演时间轴，
分镜切换时同步高亮对应导航页签；
6. 交付网页必须经HTTP可访问（ES Module受file://协议限制）。
## 导出规格
- 分辨率3840×2160、60fps、时长约28s、H.264/yuv420p；
- 若本机无GPU：采用1080p逐帧渲染+ffmpeg Lanczos上采样，
帧序列以image2方式输入（声明-framerate），禁止concat计时；
- 长任务需支持断点续渲与定期进程重启。
## 验收标准
- 逐项对照上表自检并输出核对清单；
- 成片抽帧核验：数值完整、无几何穿插、标签不压字；
- 附结构说明、模型来源、实际导出规格三份说明。
两版对比：优化版补充了变量占位符 {{reference_image}} 以支持场景复用，将"导出规格"从一句话扩为含软件渲染降级策略与计时陷阱规避的可执行约束，并新增"验收标准"节使 Agent 可自检闭环——这些正是本次对话中靠多轮人工反馈才补齐的信息。
5 运行与使用
交互大屏：项目内含零依赖静态服务器，启动后浏览器访问即可。
cd factory-twin
node serve.mjs # 启动服务（默认端口 8124）
# 浏览器打开 http://localhost:8124/index.html
操作方式：左键拖拽旋转、滚轮缩放、点击设备选中联动面板、底部页签切换三个分页、一键重置与自动演示。
4K 导出：一条命令完成逐帧渲染与合成，中断后重跑自动续接。
node export.mjs video --w 1920 --h 1080 --fps 60 --sec 28 --out factory_twin_4k.mp4
6 结果与讨论
6.1 交付结果
| 交付物 | 实测规格 |
|---|---|
| 可交互大屏 | 三页导航、全程序化建模、Bloom/流光/扫描/呼吸光齐全、数据实时变化 |
factory_twin_4k.mp4 |
3840×2160 / 60 fps / 1680 帧 / 28.0 s / H.264 yuv420p / 约 64 MB |
| 封面图 | 16:9（1536×1024）与 9:16（1024×1536）各一张，与参考风格一致 |
| 说明文档 | 结构推断、模型来源（无外部 GLB）、导出规格 |
成片抽帧核验：KPI 数字完整（良品率 98.8%、OEE 89.2%，未越界）、AGV 全环线运行无几何穿插、3D 标签不遮挡文字、六段分镜按 0/4/9/15/20/26s 准确切换。
6.2 讨论
从技能链视角看，本次任务有三点值得沉淀：
- 提示词的信息密度决定迭代次数。首轮需求已含要素清单，但未写明环境约束（无 GPU、ES Module 协议限制）与导出计时细节，这部分缺口在协作过程中通过反馈逐步补齐。4.2 节的优化提示词将同类信息前置，理论上可将多轮反馈压缩为一轮。
- 技能链的价值在组合而非单项。单个子技能解决局部问题，而"单一时间轴驱动"这类跨模块架构约束是成片与交互画面一致的关键——这类约束目前仍需 Agent 在任务中自行确立，提示词中显式写出可显著提高一次通过率。
- 资源受限环境的降级路径应成为标准动作。"1080p 逐帧渲染 + 上采样 + 断点续渲 + 定期重启"的组合使无 GPU 环境也能产出 4K 成片，该策略对任何逐帧导出类任务通用。
7 结论
本次协作验证了"技能包 + 环境工具链"生成复杂三维可视化交付物的可行性：从安装 threejs-skills 到产出可交互大屏与 4K 演示视频，全程未引入外部模型资产与专用渲染硬件。经验层面，将环境约束、降级策略与验收标准写入提示词，是把多轮人工反馈转化为一次成型的关键；技能链负责执行细节，提示词负责架构约束，二者分工清晰后，同类数字孪生任务可按 4.2 节模板直接复用。