AI辅助开发智慧厂房3D大屏：从CAD到上线的极速实践

接到智慧厂房3D大屏这个需求时客户手里只有一张老旧的CAD平面图、一段产线监控视频以及一堆散落在Excel里的设备台账。按我以往的干法这种项目从现场调研到能演示的版本至少要三周。但这次我换了一套打法用GPT-Image-2.5负责视觉设计资产的生产用GPT-6 Astra负责需求拆解、代码生成和问题排查硬是把从调研、设计、开发到数据打通上线的完整链路压到了七八天。这篇文章不打算吹这两个模型有多神而是想把这套链路里每个环节怎么用、卡在哪、怎么绕过去原原本本讲给你听。1. 调研不靠问你想要什么靠给客户选项1.1 我的AI调研拆解法传统智慧厂房大屏项目的调研通常是拉着客户开两三次会翻一遍设备台账再到现场拍几百张照片。这套流程本身没有错问题在于效率极低客户往往说不清自己到底想要什么只知道别人家的大屏很好看、很有科技感。这次我在调研阶段就把GPT-6 Astra拉进了工作流。第一步不是让它生成内容而是让它帮我整理问题域。我把从客户那里拿到的设备台账、产线清单、历史告警记录以及一次两小时的会议录音转写稿一起丢给它给的指令是从这份材料里提取出这个厂房三维可视化项目必须覆盖的业务对象包含设备、产线、空间区域、数据指标、告警类型输出一份结构化清单并标注信息来源。它返回的清单基本完整一楼是注塑车间和原料仓二楼是装配线和检测线设备按编号分布在18个工位需要展示的指标包括OEE、设备状态、温湿度、能耗、告警状态。更关键的是它把客户在会议里提到的模糊表达比如想看设备异常要关心产能达成率映射成了可视化里具体的交互动作点击设备后弹出详情面板、产线OEE低于阈值时自动高亮。这一步看起来简单实际帮我把需求文档的初稿直接生成了后面再人工微调省掉了一天半的整理时间。调研环节里AI能做的核心事情不是替你做判断而是把所有杂乱的原始材料先变成结构化的半成品。给你的判断提供素材把你从读材料里解放出来去思考这个需求合理吗那个指标真的能取到数吗这类真正重要的问题。1.2 让视觉风格从说不清变成选得出大屏项目里最让人头疼的一句话就是要科技感。每个客户都会说但没人能说清楚什么叫科技感。过去我只能靠过往案例截图去试探往往来回两轮客户还不满意。这次我用GPT-Image-2.5直接生成了六张风格完全不同的整体视觉参考图深蓝底配青色数据流、暗黑底配金色线条、浅灰底配白色卡片、带裸眼3D透视感的HUD风格、蜂窝网格质感、以及偏新闻报道式的简洁大屏风。生成时会指定画面内容和风格词比如industrial control room large screen, dark blue theme, cyan glowing data stream, multiple charts, 3D factory model in center, ultra wide 16:9。六张图一次性让客户勾选不到半小时客户就圈定了深蓝底配青色科技感这个方向。后面所有UI配色、3D场景光照、材质风格都围绕这个锚点推进不再需要反复试错。这一步真正的价值是降低了客户的决策成本。给人一个空白文档问要什么风格他答不上来给人六张视觉方案问倾向哪张他能秒回。GPT-Image-2.5在这里不是充当最终设计师而是充当视觉提案生成器用最低成本把模糊需求缩窄成明确方向。2. 3D资产生产GPT-Image-2.5真正有用的四个出口2.1 输出一厂房场景的俯视底图与布局参考三维大屏最常见的搭建方式是用Three.js或者Unity做一个厂房鸟瞰场景里面放置车间、设备、传送带。这里最大的工作量不在建模本身而在空间布局——设备该放在哪、车间边界在哪、通道多宽。做准了业务人员一看就认得出这是自己的厂房做偏了整屏都变玩具。我按CAD图纸把厂房边界和关键设备坐标整理成一份简化的平面布局描述投给GPT-Image-2.5生成一张俯视示意图要求top-down view of a factory floor plan, clean lines, marked equipment positions, industrial style。生成结果虽然不能直接用作精确底图但作为空间参考非常有用从图上我能快速判断设备的相对位置关系是否合理还能拿它和CAD叠加做视觉校准。更实际的做法是把它贴在半透明平面上作为开发期的占位底图等最终坐标确认后再替换。这样前端开发和客户确认布局可以并行不用等精确模型。2.2 输出二无缝贴图与材质纹理3D场景里占比最大的不是模型数量而是材质贴图。地面、墙面、天花板、设备外壳、通道标识都需要纹理。自己用PS画费时费力去素材站找又往往风格不统一。GPT-Image-2.5在这种铺量需求上特别合适。我用的固定套路是给足约束seamless tileable industrial concrete floor texture, dark gray, subtle wear marks, 4k, pbr base color, no shadows, no highlights。这里最关键的两个限制词是seamless tileable和no shadows no highlights——前者保证贴图平铺时接缝不穿帮后者保证生成的是PBR流程里的底色图Base Color而不是一张带光照的成品图因为引擎里会重新计算光照贴图里带死阴影会显得很假。生成后我会在代码里把纹理的wrapS和wrapT设为RepeatWrapping再根据实际厂房尺寸设置贴图重复次数。比如地面面积是120米乘60米贴图单张是4米乘4米就设repeat为30和15。这样得到的地面既有细节又不至于让每个纹理单元太小导致远处闪烁。墙面、设备外壳也走同样的流程整套场景的材质风格一下子就统一了。2.3 输出三天空盒和环境光素材工业大屏场景如果直接用默认背景色画面会显得很平。加一层环境贴图能让金属设备高光和地面反射更自然。Three.js里可以用CubeTextureLoader加载天空盒但素材库里的天空盒大多是自然风景放在厂房场景里反而出戏。我让GPT-Image-2.5生成厂房内部风格的环境贴图提示词类似industrial interior 360 panorama, dark modern factory, soft blue ambient light, slight haze, hdr equirectangular。把生成的2:1全景图作为equirectangular贴图配合three.js的scene.environment使用既能给模型提供环境反射又不会喧宾夺主。这一招让场景质感的提升非常明显而且成本几乎为零。2.4 输出四大屏UI的装饰与图标3D大屏的外围UI包括标题栏、边框、分割线、科技感背景纹理、设备状态图标也是视觉呈现的一部分。这些素材用代码硬画工作量不小从素材站下载风格又零散。GPT-Image-2.5同样能批量产出。这一步我会要求app UI icon set, line style, cyan and blue gradient, industrial factory equipment icons, white background, grid layout。生成后手动切图或者直接在CSS里配合使用。需要提醒的是AI生成的图标在细节上偶尔会有瑕疵所以关键位置的图标我会挑出来人工修一下装饰性的素材直接商用没问题。这类零散工作看着不起眼但它们恰恰是过去最容易被低估、最拖慢进度的部分。2.5 图像资产进入3D引擎的正确姿势AI生图拿到的是像素3D引擎需要的是纹理、材质、几何体。这条鸿沟必须处理清楚否则生成得再好看也用不上。我的通用处理流程是三步第一步检查尺寸和比例大屏需要的贴图至少2K重点材质用4K生成分辨率不够时先用放大工具处理第二步确认导出格式引擎里常用的是JPG/PNG/WEBP透明素材必须用PNG第三步在引擎里挂载到对应材质通道粗糙度、金属度这些属性要在引擎侧手动调不要指望AI生成图直接带过来。建立好这套流程后GPT-Image-2.5产出的图像资产才能真正进入开发管线否则永远只是好看的图片。3. GPT-6 Astra的代码产出方式和大多数人想象的不一样3.1 先建场景骨架再谈业务3D大屏项目的代码很多人一上来就想让AI生成整个大屏页面这其实是错误用法。场景里的业务千差万别AI生成的东西只能是个拼凑的空壳改起来成本更高。我的做法是先让它生成一个干净的Three.js场景骨架场景、相机、渲染器、轨道控制器、基础光照、自适应窗口缩放。当时给GPT-6 Astra的提示词是这样设计的你是一个熟悉Three.js和前端工程化的开发者。请用TypeScript生成一个Three.js场景初始化模块要求 1. 导出createScene函数初始化Scene、PerspectiveCamera、WebGLRenderer 2. 开启阴影映射设置合适的gamma输出 3. 加入一组基础灯光包括环境光和方向光 4. 窗口resize时自适应 5. 提供addMesh、addGroup等辅助方法方便业务模块向场景添加对象 6. 导出scene、camera、renderer实例便于外部控制它给的代码基本能直接用只有几个地方需要微调阴影贴图尺寸默认值偏小、忘记设置renderer.outputColorSpace这类是版本相关的细节补上即可。这一步把整个项目的技术基座快速打好了后面的业务代码在这个骨架上填结构非常清晰。直接用AI生成完整业务页面不是不行而是后续每次变更都要让AI理解已有的全部上下文多轮对话的维护成本非常高。先建骨架、再填业务每个模块都是独立的、可局部更新的AI才能持续发挥作用。3.2 把交互和动画拆成小任务喂给模型场景代码稳定之后剩下的交互、动画、数据联动我都是按功能点拆成独立任务交给GPT-6 Astra。比如给设备增加告警闪烁效果实现点击设备弹出信息面板让传送带上的方块按速度参数移动。每个任务单独一轮对话明确输入、输出和边界条件。举一个具体的例子。厂房里有一条传送带需要在上面循环移动货物模型。提示词里我给出了约束场景里有一个传送带模型group货物是沿X轴移动的立方体。 请写一个MoveOnBelt类参数包括beltGroup传送带分组、speed移动速度、distance传送带长度。 当货物超出distance时回到初始位置形成循环。 要求动画在requestAnimationFrame循环中更新不额外引入tween库。AI生成的类直接可用而且因为约束足够细没有出现重新加载模型依赖第三方库这类跑偏的情况。这种小任务式的用法AI的产出质量明显高于一次性生成整个项目因为它只需要解决一个明确定义的局部问题。3.3 数据中间层与类型定义大屏代码里最枯燥、最容易出错的是数据接口层和后端约定字段、做类型定义、清洗异常数据。这块过去要手写大量模板代码现在交给GPT-6 Astra效率极高。我把后端给的接口文档通常是一段Swagger JSON直接贴给AI让它生成TypeScript类型定义和对应的请求函数。提示词大概是这样根据这个API定义生成TypeScript interface和fetch封装超时时间设为8秒错误统一抛出自定义异常。生成的代码稍作整理就可用。更实用的是我让它基于设备数据字段生成一个把原始数据翻译成前端视图模型的converter函数把设备编码映射成场景对象ID、把状态枚举值映射成颜色值。这类胶水代码正是AI最擅长的也是耗费人力的重灾区。3.4 代码验证的闭环很多用AI写代码的人拿到代码就直接粘贴出错后又回头抱怨AI不行。真实情况是生成代码必须有一个验证闭环。我的流程是先让GPT-6 Astra写代码再让它写一段对应的单测或者自检清单然后在本地跑起来看报错把报错信息原样贴给它让它解释并修复。有一次它生成的代码里出现了Three.js新版已废弃的BufferGeometry属性访问方式运行后控制台直接报错。我把报错堆栈贴回去它立刻指出是版本兼容问题并给出了升级写法。这样反复两三轮代码就稳定了。整个开发过程里AI更像是一个随叫随到的结对程序员而不是一次性交付完整项目的外包团队。代码最终还是由你把关但每个环节的效率都提升了一到两倍。4. 数据闭环才是智慧的命门4.1 三种数据接入方式怎么选3D大屏做得再好看如果不接真实数据就只是一个昂贵的PPT。智慧厂房的数据来源五花八门这次客户现场主要有三类设备PLC通过OPC UA网关上报、环境传感器走MQTT推送、MES系统的关键指标走HTTP API。面对这三种数据源我一开始也不确定要不要全部硬接。对比下来我最终选了分级接入的思路设备状态和告警走MQTT实时推送因为这类数据要求秒级响应适合大屏上做闪烁、动画提醒MES指标走HTTP API轮询因为产量、OEE这类数据30秒更新一次就够轮询实现简单、也足够可靠OPC UA这类工业协议没有直接暴露给前端而是由后端的中间服务去采集再转成WebSocket/MQTT消息推给前端。这样做的好处是前端只需要面对两种简单的数据通道不需要处理复杂的工业协议稳定性高很多。4.2 数据驱动的3D联动设计数据进来之后怎么让3D场景动起来是这个项目的核心体验。我的联动逻辑设计成三层设备状态层运行中显示绿色脉冲光待机显示黄色常亮故障显示红色闪烁。设备上方的标签牌显示实时温度、转速、OEE等参数。告警联动层当某台设备上报故障时相机自动飞行到该设备附近视角平滑拉近同时屏幕右侧弹出告警详情卡片并播放一条警示音。统计图表层底部面板展示产线趋势图、能耗占比、告警统计所有图表数据跟随同一份数据源更新保证各屏数据一致。通信格式上后端推送的消息保持精简前端每收到一条消息就更新对应场景对象的状态。为了让AI生成的数据解析函数更合理我特意在提示词里说明消息格式为设备维度主键是deviceId并附上样例JSON。AI生成的解析函数里包含了对缺失字段的默认值处理这个细节在前期开发很有用因为调试期经常有设备离线、字段为空的情况。4.3 从假数据到真设备的切换为了不让开发流程卡在等后端接口上我先让GPT-6 Astra生成了一个模拟数据服务按照真实的MQTT消息格式每2秒推送一批设备状态、每5秒推送一次OEE数据。前端开发全程对着模拟数据跑界面效果和交互逻辑都调得差不多了再切换成真实的数据源地址。切换那天难免还是出了一些状况。真实设备的数据频率远高于模拟数据最猛的时候一秒来了几十条告警消息页面直接出现卡顿。这个问题的根源不在AI代码而在设计时没考虑高频消息合并每来一条消息就更新一次DOM和Three.js对象浏览器受不了。解决办法是在前端加了一层批处理缓冲把100毫秒内的消息合并成一批统一更新状态卡顿立刻消失。这个经验教会我一件事真实设备和模拟数据的最大区别不在数据内容而在数据节奏。5. 上线前夜性能、坐标、多屏三场硬仗5.1 性能优化帧率从25到553D大屏第一个让人尴尬的画面是部署到客户电视上后帧率掉到25fps以下鼠标转动场景都带拖影。排查后发现主要问题集中在三处设备节点数量过多但每个都是独立Mesh场景里重复创建了多份纹理以及UI层和渲染层在同一个更新循环里频繁调用React setState。针对第一个问题我用Three.js的InstancedMesh来渲染厂房里大量结构相同的机柜和货架把几千个Mesh实例合并成几次DrawCall性能立刻上来。针对第二点我检查发现GPT-Image-2.5生成的贴图没有做好缓存部分重复材质被反复加载改为全局纹理缓存后内存占用明显下降。针对第三点我把交互数据更新从React状态管理里移到了渲染循环外用直接操作DOM的方式更新图表减少不必要的React render。三轮优化做完帧率稳定在55fps左右场景旋转流畅。这个过程中GPT-6 Astra帮了不少忙它准确指出了InstancedMesh的API用法和参数省去了翻文档的时间。5.2 CAD坐标与3D场景的转换3D大屏里的设备位置客户是要拿来和真实产线对标的。一开始我按照CAD图上的绝对坐标直接换算Three.js里的位置结果设备密度和间距比例失调镜头拉近后明显感觉到车间比例不对。问题出在CAD图纸的坐标系和图纸比例尺处理上。后来我建立了一个简单的转换层先确定厂房在Three.js中的基准点原点和整体缩放比然后写一个cadToScene(x, y)函数把CAD坐标的米制数值统一乘以缩放系数并加上基准点偏移。这个函数放在独立的工具模块里所有设备位置都通过它换算而不是散落在各处手动算。另外对于CAD里可能出现的旋转和镜像方向我以现场照片和视频里的设备朝向为准逐个做了校正。这套转换逻辑做好之后客户看到场景的第一反应是这就是我们车间——那一刻我知道这些坐标值蒙对了。5.3 多屏与部署兼容项目最终要在客户中控室的三块屏幕上展示中间主屏显示3D场景左右两块副屏显示数据报表和视频监控。多屏环境下前端不能用同一个窗口实例三块屏实际上是三个页面。这就要解决两个问题数据同步和操作联动。数据同步相对简单三个页面连同一个数据服务订阅同一批Topic自然保持一致。操作联动稍微麻烦一点在主屏上点击设备时副屏要对应该设备展示详细报表。我的方案是用浏览器localStorage的事件监听来传递跨页面的操作消息辅以BroadcastChannel做兜底简单可靠。部署上我选了Nginx静态托管所有资源走CDN缓存并针对大屏老旧的Windows主机做了浏览器GPU加速校验页面启动时检测WebGL支持情况不支持就提示更新显卡驱动或者切换Chrome。6. 复盘这次实践让我重写了prompt笔记6.1 对GPT-6 Astra的几点新认知项目收尾后回看我最想分享的不是AI写的某一串代码而是和GPT-6 Astra协作的方法论。这次实践让我彻底重写了以前的prompt笔记有几点认知变化挺大。第一给角色不如给约束。过去我总会写你是一个资深Three.js工程师后来发现这句话价值有限真正影响输出质量的是需求边界、输入输出格式、不许依赖什么库。AI不需要角色认同需要的是清晰的作业指令。第二复杂任务拆成多轮比一次性堆需求可靠得多。把一个完整大屏拆成骨架、交互、数据、图表多个模块逐个对话每个模块的质量都能稳定在可控范围。一次对话里挤十个需求AI往往顾此失彼。第三代码生成后的验证闭环不能省。让AI自己解释代码、自己提报错、自己写测试用例能发现很多表面看不到的问题。用AI写代码的本质是把它当成一个高响应速度的初级工程师你要做的不是拒绝它而是给它搭一套自我校验机制。6.2 一段可以复用的prompt框架我在项目里反复使用的prompt框架整理出来大概是这个结构场景描述当前项目背景和技术栈以及本模块在整个系统中的位置。 任务明确本次要完成的具体事情越小越好。 输入给出这段代码需要的输入数据样例或数据结构。 约束列出必须遵守的限制比如不依赖第三方库、使用TypeScript、兼容Chrome 120、性能要求等。 输出约定产出物的形式和标准比如生成模块文件、给出调用示例、附带单测。 验收告诉它如何自测或者让它输出自检清单。举个实际例子让AI写一个能耗趋势图表模块时我会写场景智慧厂房大屏技术栈是Vue3 ECharts 5 TypeScript。 任务实现一个能耗趋势折线图组件数据来自useEnergyData返回的最近24小时采集数据。 输入数据格式为{time: string, energy: number}数组时间间隔1小时。 约束组件不直接发请求数据由父组件传入无数据时展示空状态随窗口宽度自适应使用组合式API。 输出生成EnergyTrendChart.vue文件并给出在父组件中的调用代码。 验收自查是否处理了数据为空、时间轴格式化、tooltip展示三项输出自检清单。这套框架用下来AI产出的代码基本贴着我想要的方向走返工率大幅降低。GPT-Image-2.5和GPT-6 Astra在智慧厂房3D大屏这条链路上一个是视觉资产的快速生成器一个是代码和逻辑的加速器两者配合把过去按周计的项目周期缩短到按天计。更重要的收获是我对AI辅助开发这件事的认知变了它不是替你做一个项目而是让你能把有限精力全部花在真正需要人判断的业务理解、方案设计和质量把控上。那几天反复调试到凌晨的经历让我确信这套协作方式在后续的工业可视化项目里会是我默认的第一选择。