基于threejs系统流向与数据展示 |
您所在的位置：网站首页 › threejs流水渲染 › 基于threejs系统流向与数据展示 |
基于threejs系统流向与数据展示
|
系统流向与数据展示
示例描述与操作指南应用场景示例效果展示实现步骤第一步 根据选定的构件获取相应的系统所属组别的构件列表第二步 获取模型的系统类别和对应系统下的构件列表第三步 添加流向箭头和三维字体
示例描述与操作指南
系统流向与数据展示示例，用于展示管道水流水压信息，并对管道水流信息进行监管。通过调用获取模型系统树列表，将当前模型的系统信息提取并展示出来，并在界面上模拟水流动态效果与水压数据实时监控。用户可以将完整代码直接下载下来后，将模型id和用户个人账户devcode替换上去，即可展示自有模型。 应用场景此类将管道IoT数据直接展示在BIM模型上的示例，能够更加直观完整的看到全局数据，有利于更完整的进行全局的监管与维护。将建筑信息模型与IoT信息关联起来，是BIM模型的二次开发核心的应用之一。利用模型的空间性进行信息的管理与展示，可以避免原有运维管理数据量大，信息对应不直观，无法直观查看等一系列问题。 示例效果展示
根据选定的构件id,利用数据接口获取相应的系统所属组别的构件列表。 // 数据接口: 根据systemgroup的id获取相应的systemgroup的内容 const fetchComponentSystemGroup = (filekey,componentId) => { return fetch(`${op.host}/models/${filekey}/components/${componentId}/systemgroup?devcode=${devcode}`) .then(response => response.json()) } 第二步 获取模型的系统类别和对应系统下的构件列表根据数据接口获取模型的系统分组，再根据每个组别的id利用数据接口去获取对应组别的构件id列表。 // 数据接口，获取模型里系统类别为IFCSYSTEM的系统的各个系统名称 const getComponentBySystem = (id) => { return fetch(`${op.host}/models/${id}/components/IFCSYSTEM?devcode=${devcode}`) .then(response => response.json()) .then(result => { const promiseArray = []; let systermComponents = result.data; const promise1 = fetchComponentSystemGroup(id,systermComponents[5].key) .then(result=>{ systemComponents1 = result.data; }); const promise2 = fetchComponentSystemGroup(id,systermComponents[1].key) .then(result=>{ systemComponents2 = result.data; }); const promise3 = fetchComponentSystemGroup(id,systermComponents[4].key) .then(result=>{ systemComponents3 = result.data; }); const promise4 = fetchComponentSystemGroup(id,systermComponents[0].key) .then(result=>{ systemComponents4 = result.data; }); const promise5 = fetchComponentSystemGroup(id,systermComponents[3].key) .then(result=>{ systemComponents5 = result.data; }); const promise6 = fetchComponentSystemGroup(id,systermComponents[2].key) .then(result=>{ systemComponents6 = result.data; }); promiseArray.push(promise1,promise2,promise3,promise4,promise5,promise6); return Promise.all(promiseArray); }); } 第三步 添加流向箭头和三维字体根据获取模型的对应的组别的构件列表，添加对应的流向箭头和三维字体。 // 监听模型加载完成 viewer3D.getViewerImpl(). modelManager. addEventListener(BIMWINNER.BOS3D.EVENTS.ON_LOAD_COMPLETE, function (event) { scene.add(textMark); // 模型加载完成后，将箭头的父级对象添加进场景，便于管理 addAllSystemText(); // 添加场景里的三维字体 backToOrigin(); // 加载完模型后 移除按钮的禁点功能 changeSystemColor(); // 加载完模型后，将模型的各个系统管道的颜色和材质进行调整 viewer3D.flyTo(mainView); // 加载完模型后，场景飞跃到上面设置好的视角 newCreateSystem1Arrow(); // 创建系统1的所有的箭头 newCreateSystem2Arrow(); // 创建系统2的所有的箭头 newCreateSystem3Arrow(); // 创建系统3的所有的箭头 newCreateSystem4Arrow(); // 创建系统4的所有的箭头 newCreateSystem5Arrow(); // 创建系统5的所有的箭头 newCreateSystem6Arrow(); // 创建系统6的所有的箭头 });下载完整代码 |
【本文地址】
今日新闻 |
推荐新闻 |