上一篇文章拆解了雷霆轻量化引擎的在线分享链路源模型如何经过解析归一、几何压缩、LOD 分级与坐标配准最终变成一条浏览器能打开的链接。链接解决了能打开的问题但工程协作真正发生的时刻是打开之后——施工方要在模型上找到那根碰头的管线监理要核对构件位置业主想确认幕墙分格。这篇文章接着拆后半段分享协作这一层。产品端它长什么样开发者怎么把可协作的模型查看嵌进自己的业务系统以及标注数据怎么留痕、在线评论怎么落地。全文以雷霆前端查看组件 leiting-bimnpm 包Vue3的真实接口为例代码均为示例或节选。一、分享协作的产品形态三步与一个台账先看产品层。雷霆把分享协作收敛成转码—上传—分享三步模型统一转码轻量化后上传云空间一键生成分享链接接收方浏览器打开即可查看不需要安装任何源软件或客户端。但协作不能只有发出去还要收得回来。所有对外生成的链接归集在分享记录里形成一个台账分对象建链面向业主、监理、分包分别生成独立链接、各自设定条件。修改 / 禁用 / 删除已发链接随时调整访问条件或直接收回权限有效期1 天、7 天、30 天或自定义日期到期自动失效密码保护开启后需凭密码访问同时提供两种协作模式高保密级别、仅内部流转的项目走客户端本地导出轻量化文件数据全程不上云多方对外汇报、跨单位交底走云端链接。两种模式共用同一套轻量化能力协作方看到的效果一致。这一层的关键设计在于分享记录是台账权限的生成、修改、回收都发生在服务端前端链接只是台账的一张票。这个思路同样适用于你在业务系统里集成模型协作——后面第七节展开。二、把可协作的模型查看嵌进业务系统雷霆的前端查看组件以 npm 包形式提供Vue3 应用直接集成bashnpm install leiting-bim更新到最新版npm update leiting-bimlatest组件初始化后通过 init 事件拿到 methods 对象后续所有 API 都经由它调用vuetemplateLeitingBIM v-ifshowinithandleInit:show-menutrue:globetrue//templatescript setupimport{ref}fromvue;import{LeitingBIM}fromleiting-bim;importleiting-bim/leitingbim.css;constshowref(true);letmethodsnull;functionhandleInit({methods:m}){methodsm;constfiles[{modelName:XYYX-3F-ARC(2),dbName:XYYX-3F-ARC(2),modelId:model_001,outPutPath:/OpenSourceModelConvert/output/,formData:{modelId:model_001,longitude:116.76,latitude:24.59}}];constoptions{flyTo:true,// 自动锁定模型视图loadTree:true,// 加载构件目录树loadTreeNodeDetails:true,// 加载构件详情enabledSection:true,// 开启剖切delay:2000,tilesLoad3dTiles:()console.log(模型加载完毕)};methods.addModels({files,options});}/script几个参数值得注意loadTree 与 loadTreeNodeDetails 分别加载目录树与构件详情数据对应两个 zip 资源包是否加载直接影响首屏速度按业务需要取舍delay 控制多模型加载间隔tilesLoad3dTiles 是加载完成回调后续依赖模型就绪的交互都应挂在它之后。三、构件是协作的基本单位协作场景里讨论的对象从来不是整个模型而是具体构件。leiting-bim 用 elementId modelId 双主键管理每个构件选中、高亮、飞行定位、属性查询全部围绕这对主键javascript// 监听点选协作讨论的入口methods.onSelectionChange((selected){// selected: 当前选中构件列表含 elementId / modelIdconsole.log(选中构件:,selected);});// 业务侧主动定位从工单、批注列表跳转到具体构件methods.flyToComponents({selectCpts:[{elementId:411452,modelId:model_001,rgba:{r:1.0,g:0.5,b:0.5,a:1}}]});// 高亮指定构件如标记质检问题项methods.highlightComponents([{elementId:411452,modelId:model_001,rgba:{r:1,g:0.3,b:0.3,a:1}}],{});这套交互的设计意图很明显构件 ID 是三维场景与业务数据之间的主键。质检系统发现问题挂在一个 elementId 上问题列表点一下场景飞过去、构件高亮——协作就发生在这一跳里。四、把模型数据接进业务流查看之外业务系统经常需要主动取数目录树做侧边导航构件属性写进表单或报表。组件提供三个层级的数据接口javascript// 1. 模型树组织结构楼层/专业/类型awaitmethods.loadTreeForModel(model_001);consttreemethods.getModelTree();// 2. 全量构件详情体量大按需用awaitmethods.loadModelDetails(model_001);constallmethods.getAllComponentDetails();// 3. 按主键批量查询构件信息最常用constinfosmethods.getComponentInfoList([{modelId:model_001,elementId:411452},{modelId:model_001,elementId:411453}]);实践建议目录树加载一次缓存起来构件属性用 getComponentInfoList 按需查避免一次性拉全量详情。数据接口取到的属性直接对接你的业务表单模型就成了带三维上下文的数据入口。五、在线评论把讨论挂到构件与视角上前面四节讲的都是把模型送出去、让人看得见。但协作的最后一公里是把话说清楚——过去这件事发生在模型之外截图加微信或者电话里描述你往上翻两层、靠左边那根梁同一句话在不同人的屏幕上指向的是不同位置。在线评论要解决的就是这件事让讨论与它所指的构件、所指的角度绑在一起。分享链接打开后协作方可以直接在模型上发评论。一条评论由两个锚点定位构件锚先选中某个构件再评论这条评论就属于那个构件点开评论模型定位到对应构件——复用的正是第三节那对 elementId modelId 双主键视角锚发表评论时记录当时的相机状态点开评论时镜头回到同样的位置与角度看到的就是评论人当时看到的画面。视角的读写是组件里现成的两个接口getCameraState 取当前相机状态flyToCamera 飞向指定视角两者的数据结构完全对应位置为 ECEF 坐标朝向为 heading / pitch / roll 弧度javascript// 发表评论记录当前视角与构件主键、内容一起提交constviewmethods.getCameraState();// view { position: { x, y, z }, orientation: { heading, pitch, roll } }awaitapi.post(/comments,{modelId:model_001,elementId:411452,// 针对具体构件时带上只对视角评论则留空view,// 评论视角可复现content:此处桥架与梁底存在净高冲突});// 点开一条评论先定位构件再把镜头飞回当时的视角constcommentawaitapi.get(/comments/1024);if(comment.elementId){methods.flyToComponents({selectCpts:[{elementId:comment.elementId,modelId:comment.modelId}]});}methods.flyToCamera(comment.view,1.5);这也是评论与标注的区别标注是画在画面上的图形箭头、文字框、矩形本质是几何数据组件侧用 saveAnnotations / loadAnnotations 序列化存取评论是挂在构件与视角上的结构化记录要落库、要支持回复、要在多人之间流转属于平台侧能力。产品端的浏览器分享页已经把这条链路做通了协作方发表评论分享人逐条回复意见与答复都留在同一个构件、同一个视角下不必再靠聊天记录翻找。回复是让评论成闭环的关键一步。评论是单向的意见回复把它变成一次对话谁提的、谁答的、答的是哪一处全部落在同一个锚点上。闭环的最后一步回到模型本身分享人在本机修改模型后重新轻量化、更新发布协作方再次打开链接看到的就是最新版本——不用重新要链接讨论也不会散落在多个版本里。这里有一个前提值得强调评论挂在构件主键上只有主键稳定历史评论才能在更新后的模型上继续定位到正确的构件。这也是前文强调构件主键贯穿业务的现实意义——如果每次更新都换一批 ID评论区就会退化成一堆无法定位的文字。如果你要在自己的系统里做同样的事组件侧给的是原语——构件双主键、视角读写、标注序列化评论的存储、回复关系与通知由你的业务系统承接。换句话说雷霆把能锚定、能复现、能留痕做成了接口剩下的是你的业务规则。六、协作闭环的设计建议权限在服务端能力在前端把上面几层串起来给要在自己系统里做模型分享协作的团队三条设计建议链接即令牌分享链接的本质是资源定位加访问令牌有效期、密码、禁用都应落在服务端令牌约束上前端加载前先校验禁用后立即失效分享记录是台账面向不同协作对象的每条链接独立建账回收权限只置令牌失效不必重新转码构件主键贯穿业务工单、评论、质检问题都挂在 elementId modelId 上三维场景与业务数据才有稳定的对接面。雷霆产品端的分享记录管理有效期 / 密码 / 禁用 / 删除正是这套思路的成品实现你在业务系统里集成时复用同样的结构可以少走弯路。七、能力边界leiting-bim 组件消费的是轻量化后的成果数据不解析 RVT / NWD 等源文件组件提供查看、交互、取数、标注存取等能力工单流转、审批、大屏对接等业务功能由你的系统基于接口实现雷霆不内置业务系统项目、权限、存储等后台管理属于上层管理系统不计入引擎本身评论、回复与模型更新由产品端的浏览器分享页提供组件侧提供实现同类协作所需的原语构件双主键、视角读写、标注序列化评论的存储、回复关系与业务逻辑由你的系统承接。结语分享协作的完整闭环是三层链路层让模型能被打开上一篇文章的转码与分发管控层让权限能被收回分享记录台账交互层让模型能被说清楚构件主键、视角读写、评论与回复。三层层层递进缺了哪一层协作都会断在半路。而把闭环真正合上的是最后那一步意见收回来模型改好再更新出去。