接到智慧厂房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到55
3D大屏第一个让人尴尬的画面，是部署到客户电视上后帧率掉到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辅助开发"这件事的认知变了：它不是替你做一个项目，而是让你能把有限精力全部花在真正需要人判断的业务理解、方案设计和质量把控上。那几天反复调试到凌晨的经历让我确信，这套协作方式在后续的工业可视化项目里，会是我默认的第一选择。
