介绍
之前我们做项目遇到需要做园区建筑、楼宇场景开发的模块，都是交给第三方团队去做，处理模型，再搭建三维场景，最后由前端接进大屏，这样做的问题是需要另外掏钱、且前期有不少沟通成本、后期有不少维护成本。
最近 AI 已经可以操作电脑、运行三维软件、写前端代码，也能在浏览器里检查结果。我在想AI能否完全承接第三方团队的工作，于是用这份之前项目的办公楼大厦模型试一下，它能不能把原来需要多人配合的工作串起来。
最后做出来的效果截图如下。
1. 技术路径
整个过程从 Revit 源文件开始，经过格式转换、离线处理和网页轻量化，最后形成一个可以独立运行，也能嵌入大屏的三维园区场景。
Revit 模型 是项目留下的原始 .rvt 文件，包含主体建筑的楼层、构件、材质和机电信息。ChatGPT 无法直接处理这个格式，所以源文件继续保留，不在后续脚本中改写。
IFC 通用模型 是 AI 接手的节点，它先分析模型中的楼层、构件、材质和空间关系，再决定哪些信息需要保留到网页端。
离线资产处理 负责修正工程坐标、拆分楼层、整理材质和简化几何。主体建筑同时生成近景、中景和远景三套 LOD，浏览器根据观看距离自动切换。
Web 模型资产 包括 Draco 压缩的 GLB、三套 LOD、楼层文件和构件索引。网页只加载当前需要的内容，不直接读取体量较大的原始 IFC。
Three.js 园区场景 把主体建筑和周边环境组合起来。周边道路、建筑白模和绿化根据电子地图、卫星图和模型顶视图生成，场景内再加入楼层查看、构件选择、自动旋转、车辆巡游和日夜切换。
iframe 公共 API 把三维能力整理成一组可调用的方法，用于控制镜头、楼层、巡游和日夜状态。三维场景可以独立运行，也可以被其他页面复用。
Vue 可视化大屏 通过同源 iframe 加载场景，再把业务面板和场景控制组合到一个页面中。大屏负责数据和界面，Three.js 页面负责模型渲染与交互。
2. 怎样构建园区场景
2.1 把主体模型转换成网页资产
AI 先分析.ifc文件中的楼层、构件和材质，再把工程模型和网页展示模型分开处理，网页端使用转换后的 GLB，只加载当前需要的内容。
模型在转换时还做了压缩、坐标修正和细节取舍，远处看不见的小构件不再全部渲染，建筑外观和重要信息继续保留。主体建筑还生成了三套 LOD 模型，分别用于近景、中景和远景。相机会根据观看距离自动切换，近处保留更多细节，中远距离逐步简化模型，减少浏览器的渲染压力。
完成这一步后，大厦已经可以在浏览器里稳定加载，也能继续接入楼层和构件数据。
2.2 补充园区里的其他内容
原始模型只有大厦主体，周边道路、建筑和绿化并不完整。我准备了电子地图、卫星图和模型顶视图，让 AI 根据三份参考还原园区的大致布局。
第一版道路和建筑位置有不少偏差。我用红线标出主要道路和连接关系，AI 再调整道路、周边白模、树木和路灯。道路发生变化时，生成脚本会重新检查建筑是否压到路面，减少逐个修改的工作。
园区补齐后，又加入了天空、材质、灯光和车辆。场景从一栋单独的大楼，变成了可以观看和巡游的园区。
2.3 给场景增加交互功能
场景做好以后，AI 把 BIM 数据重新接了回来。用户可以切换楼层和专业，点击构件后查看名称、类别、楼层和 GUID。
展示功能还包括自动旋转、车辆巡游、日夜切换和日照时间调节。这些功能先在独立场景里完成和验证，大屏只负责调用。
2.4 为大屏接入做好准备
三维场景没有直接写进大屏页面。我把它保留成独立页面，再通过同源 iframe 嵌入大屏。
这样做以后，模型加载、楼层查看和巡游功能只需要维护一份。场景对外提供一组公共方法，用来重置镜头、切换楼层、控制旋转、进入巡游和修改日照时间。调用方式和状态变化也整理成了文档。
3. 构建大屏界面
3.1 找参考并生成效果图
大屏开发从视觉参考开始。我先整理业务指标和页面内容，再找了一批浅色科技风大屏作为参考，让 AI 生成整体效果图。
这是codex基于我提供的UI风格、场景截图和内容要求生成的大屏效果图，主要用来确定布局、色彩和质感。里面的文字、数据和间距还不能直接用于开发。
3.2 从效果图整理成 Sketch 原型
下一步是在 Sketch 里重新整理页面结构。原型是codex + Sketch MCP 按照效果图生成的，我确定了指标卡、左右面板、中间三维区域和底部模块的尺寸，也补齐了真实文字和模拟数据。
效果图负责视觉方向，Sketch 负责尺寸和内容，三维场景负责真实交互。把三者的用途分清以后，AI 在生成页面时不容易混用参考。
3.3 从原型生成 HTML 页面
原型确认后，AI 根据 Sketch 生成 Vue 页面，把指标卡、图表、楼层导航和其他业务模块拆成组件，再把中央区域接到已经完成的三维场景。
这一阶段先让页面完整运行，再检查按钮能否控制场景、状态能否同步、iframe 重新加载后是否还能正常工作。
3.4 调整页面细节
首版页面在标准大屏分辨率下可以使用，换一个屏幕比例就会出现留白和遮挡。后来重新调整了响应式布局，并分别检查常见分辨率。
页面覆盖层还曾挡住三维场景的鼠标操作。处理后，只有按钮和面板接收点击，其他透明区域可以继续拖动模型。最后再调整文字、卡片间距、滚动列表和日夜主题。
4. 对后续大屏开发的借鉴
4.1 场景效果和交互可以复用
AI其实非常喜欢抄作业，有现成明确的目标作为参考，可以少走非常多弯路。三维场景独立以后，同一套建筑可以接入不同的大屏，楼层查看、构件选择、场景动画、室内场景、昼夜切换和车辆巡游也能继续使用，不需要跟着业务页面重写。
4.2 一套从无到有的制作流程
这次的过程可以压缩成下面几步。
- 准备 BIM 模型、地图、卫星图、业务内容和视觉参考。
- 把 Revit 模型导出成 IFC，再处理为网页资产。
- 补齐园区环境，在独立场景中完成交互。
- 提供 iframe 模式、公共方法和调用文档。
- 先生成效果图，再用 Sketch 固定页面结构。
- 根据原型生成页面，并接入三维场景。
- 通过构建、截图和实际操作反复检查结果。
AI 承担了大量模型处理、代码编写和修改工作，人负责提供资料、完成专用软件操作，并判断画面和结果是否可信。以后再做类似大屏，可以继续沿用这套流程。
5. 结尾
做完这次尝试，我最明显的感受是个人开发精力占比的急剧转变。过去需要三维团队和前端开发共同完成的工作，现在一个人借助 AI，已经可以先把整套流程跑通。写代码和处理模型依然需要时间，但它们已经成为最省心的环节。
最消耗人力的工作反而出现在需求阶段。场景要还原到什么程度，哪份参考应该优先，哪些交互值得做，什么结果才算完成，这些问题必须由人来判断。如果需求没有想清楚，AI 只会更快地把错误方案做出来。
实现成本越低，前面的判断就越重要。以后做类似项目，也许会把更多时间放在需求、参考资料和验收标准上。开发工作的重心正在从"怎么把它写出来"，转向"到底应该做什么"。