背景

最近有客户咨询我们三维可视化编辑器,说看到我们三维可视化编辑器做的案例,也想实现自己水厂净水处理流程这块的可视化展示。想通过这种真实的三维可视化展示,进行线上销售,以便成交更多的客户,减少疫情对自己的影响。通过沟通交流,客户提出了几个难题,想让我们根据他们的水厂场景图片,做一些三维可视化场景的demo。客户把具体问题难点列了出来如下:

  • 水厂过滤模型能不能建模实现三维效果;
  • 整个水厂场景的过虑流程能不能复现;
  • 水厂设备的实时数据能否对接显示;
  • 水厂内的管道多,形状复杂,不通过建模的方式,能不能随便改变方向编辑,并进行管道连接。

方案设计

根据客户的上述需求,我们开始审查我们自己编辑器能否实现上述的这些问题,最终经过讨论,设计了一套实现方案,最终完成各场景的效果。下边就简单的给分享下这个实现方案,因此方案为demo,后期开发效果会进一步进行优化。如果你也有更好建议,可以联系我们进行技术的碰撞和交流。
该方案主要从上述问题出发,分为以下几个步骤,如下:

三维设备建模

首先我们设计先使用专业建模工具,进行水厂设备进行建模。建模设备如滤池、沉淀池、吸水井、地面、清水池、反冲风机、反冲风机、送水泵、送水泵房等设备。

模型导入

创建好的模型,在编辑器中导入,预览查看,给模型备注相关信息。

导入后的模型,可在左树进行查看,并可以拖拽到场景进行编辑。

管道编辑

细心的朋友会发现上边没有对管道进行建模,主要是考虑到水厂场景管道较多,而且交叉形状多样,粗细不一,颜色也多样,也不像设备那样固定,那怎么实现哪?
分析了场景的各种因素,最终我们研究了一种智能管道的编辑,可以灵活的对管道进行创建编辑。主要功能如下:
打点编辑:编辑模式下,管道编辑可通过鼠标左键移动,改变当前正在编辑管道的位置编辑控制点,鼠标双击结束管道生成。

  • 三维方向变换:管道模型可通过坐标切换按钮,实现管道的三维编辑。
  • 管道拐点连接:管道打点可生产拐点,设置管道属性为透明可以进行拐点连接。
  • 管道属性设置:选中管道,通过面板,可设置管道的基本属性,如管道的颜色,粗细,描述等。

管道动画

管道编辑好后,使用贴图,改变管道样式,并设置开启管道动画。管道的动画支持流动方向的设置。

场景布局仿真

根据场景布局图,将各种设备通过拖拽的方式,调整位置,大小,旋转,批量增加,复制等基本设置,实现最终的三维效果。

实时数据对接

水厂内的设备支持通过实时数据展示,配置方便快捷。
使用三维编辑器的实时数据源管理功能,可对接客户的接口地址,根据平台数据格式,绑定到设备上,进行数据实时呈现。


三维场景展示

水厂流程三维可视化场景编辑预览后的效果如下:
场景一
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B1&uuid=5c152700-af1b-11eb-9115-859f18cccd8d

场景二
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B2&uuid=db9c7a00-afa2-11eb-9115-859f18cccd8d

场景三
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B3&uuid=e079bf10-afa2-11eb-9115-859f18cccd8d

场景四
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B4&uuid=e74343c0-afa2-11eb-9115-859f18cccd8d

场景五
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B5&uuid=ed8dad60-afa2-11eb-9115-859f18cccd8d

场景六
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B6&uuid=f3ace850-afa2-11eb-9115-859f18cccd8d

如果对可视化感兴趣,可以和我交流,微信541002349. 另外关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。

水厂流程三维场景可视化解决方案相关推荐

  1. 三维组态可视化解决方案

    HTML5 WebGL 在三维中的应用,已经发展的如火如荼,使其在三维组态(工业控制)方面也变得简单易行! 三维组态软件提高了工业控制的管理效率,让工业控制的资源管理.风险管控得到很大的改善. 传统的 ...

  2. 计算机可视化仿真技术opengl,基于OpenGL的三维场景可视化仿真

    摘要: 随着计算机可视化技术的发展,计算机可视化应用的领域不断地拓宽,广泛地应用在科学计算.人工智能仿真.三维图形的制作方面等领域.可视化是计算机技术应用的热门领域,而这个热门领域的核心都集中在三维真 ...

  3. 油田系统三维布局可视化解决方案

    最近和一家公司在谈一个项目合作,他们公司主要是做油田相关设备的,比如油罐车.压力车.泵车等. 我的印象中只要和石油相关的企业,就感觉和钱挨得好近,

  4. 【商迪3D】详谈3d物联网工业数字可视化三维仿真技术解决方案

    一:项目方案介绍 商迪3D工业网物联网3d可视化解决方案是结合3D物联网利用三维仿真.数字映射.人工智能和大数据等技术,在三维仿真世界使用三维建模技术对真实场景进行一比一高度仿真还原.通过3D数字可视 ...

  5. Web3D水厂:数字孪生智慧水务三维WebGL可视化管理系统

    建设背景 伴随着城市的发展趋势,各水司供水半经扩张,管网更为繁杂,成本和操作难度系数大幅度提高.安全性,高品质,高效率供水服务项目的急切要求和阶梯水价政策的执行,对水司经营明确提出了高规定.智慧水务云 ...

  6. webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案——第五课

    webgl(three.js)实现室内定位,楼宇bim.实时定位三维可视化解决方案--第五课 参考文章: (1)webgl(three.js)实现室内定位,楼宇bim.实时定位三维可视化解决方案--第 ...

  7. EasyEarth三维可视化解决方案——智慧园区

    EasyEarth三维可视化解决方案--智慧园区 参考文章: (1)EasyEarth三维可视化解决方案--智慧园区 (2)https://www.cnblogs.com/EasyEarth/p/11 ...

  8. 三维场景轻量化展示解决方案

    三维场景轻量化展示解决方案 效果展示 先看效果再讲架构

  9. 园区3D可视化三维展示系统解决方案

    5G浪潮的到来加速了数字化发展,3d园区可视化数字孪生综合管理平台可将数字园区的人口.经济.应急等服务进行3D数字化.网络化,实现优化管理决策支持和可视化管理.商迪3D通过3D地理信息系统.数字孪生和 ...

  10. 【3D商城】三维场景搭建与开发流程

    [3D商城]三维场景搭建与开发流程 创建一个场景组件 安装 threejs 创建Base3d.js 初始化场景 初始化相机 初始化渲染器 添加环境的纹理 创建一个场景组件 在views中创建一个场景组 ...

最新文章

  1. 【Python进阶】_JSON
  2. python id()函数(返回对象在内存地址中的唯一标识)
  3. android中变量作用域,在 Android 和 Hilt 中限定作用域
  4. java数值精度问题
  5. Android之SwipeRefreshLayout下拉刷新组件
  6. Redies安装,修配置,设置密码,
  7. Matlab K均值图像分割
  8. 前端毕业设计:Nodejs+Vue菜鸟驿站仓库管理系统的设计与实现
  9. Win10连接上了wifi但是打开浏览器显示网络异常,诊断网络发现错误“远程计算机或者设备将不接受连接
  10. windows 任务相关 删除任务
  11. CSS样式自动换行(总结)
  12. linux 查看硬盘空间
  13. 备份计算机软件,PickMeApp(软件备份还原)
  14. java模拟转账_事务-模拟银行用户转账
  15. 2005年乔布斯stanford演讲全文
  16. LCD段码式液晶屏-duty与bias的工作原理
  17. 设计 | 分享5个好用的PPT模板网站
  18. 电子组装行业MES解决方案
  19. 博弈——悼念512汶川大地震遇难同胞——选拔志愿者(巴什博弈)
  20. java注释量统计代码实现

热门文章

  1. Qt/C++编写的项目作品34-雷达模拟仿真工具(雨田哥作品)
  2. 九、数据仓库详细介绍(元数据)
  3. C# .net 填充无效,无法被移除 微信小程序解密失败的解决办法
  4. Elasticsearch个人心得笔记(四)
  5. 创建一个手机类 定义属性名称、型号、颜色、价格, 并定义打电话和听音乐的功能。在测试类中创建对象进行测试。
  6. 【I-intern】2021年,留学生如何回国找到好工作?
  7. idea推送git仓库被拒绝如何解决
  8. 因为够懒,所以我严守单一职责
  9. 1-byte array(byte[], boolean[])图片导致的内存过大
  10. 上海海事大学计算机应用成绩,上海海事大学《计算机应用能力水平》考试大纲.doc...