水厂流程三维场景可视化解决方案

简介: 水厂流程三维场景可视化解决方案

背景


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


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


方案设计


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


该方案主要从上述问题出发,分为以下几个步骤,如下:


三维设备建模


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


模型导入


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


微信图片_20220425140506.png


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


微信图片_20220425140509.png


微信图片_20220425140713.png


微信图片_20220425140717.png


管道编辑


细心的朋友会发现上边没有对管道进行建模,主要是考虑到水厂场景管道较多,而且交叉形状多样,粗细不一,颜色也多样,也不像设备那样固定,那怎么实现哪?


     分析了场景的各种因素,最终我们研究了一种智能管道的编辑,可以灵活的对管道进行创建编辑。主要功能如下:


      打点编辑:编辑模式下,管道编辑可通过鼠标左键移动,改变当前正在编辑管道的位置编辑控制点,鼠标双击结束管道生成。



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


微信图片_20220425140518.png

管道动画


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


微信图片_20220425140521.gif

1.gif


场景布局仿真


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


实时数据对接


水厂内的设备支持通过实时数据展示,配置方便快捷。


使用三维编辑器的实时数据源管理功能,可对接客户的接口地址,根据平台数据格式,绑定到设备上,进行数据实时呈现。


微信图片_20220425140525.png


微信图片_20220425140528.png



微信图片_20220425140531.png


三维场景展示


水厂流程三维可视化场景编辑预览后的效果如下:

场景一

http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B1&uuid=5c152700-af1b-11eb-9115-859f18cccd8d


微信图片_20220425140535.png


场景二


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


微信图片_20220425140539.png


场景三


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


微信图片_20220425140541.png


场景四


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


微信图片_20220425140544.pngimage.png


场景五


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


微信图片_20220425140548.png


场景六


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


微信图片_20220425140550.png

相关文章
|
3天前
|
数据可视化 前端开发 数据挖掘
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
|
10月前
|
数据可视化 定位技术
GIS空间分析 三维分析3 要素三维可视化
在本文中,我们使用ArcScene软件三维化了图层要素,并分析了要素间的关系,这对决策有着很重要的作用🎈🎈🎈
117 0
|
数据可视化
视觉可视化分析与设计
Visualization Analysis & Design
86 0
|
数据可视化 JavaScript 前端开发
Mars3D三维可视化平台
Mars3D三维可视化平台
Mars3D三维可视化平台
|
监控
构建三维一体立体化监控,看这一篇就够了!
如果你需要搭建一套能够立体化监控你的应用及业务,出现问题及时告警的监控体系,这篇文章应该是你所需要的!
465 0
构建三维一体立体化监控,看这一篇就够了!
|
数据可视化 安全 图形学
实时云渲染技术应用之三维可视化部署
实时云渲染技术是以上两个方案的升级方案,该方案是纯B/S架构,将三维可视化、UE\Unity模型放置在服务器上,通过云渲染软件系统流化出可以在手机、电脑、平板、智慧屏等设备上可以直接访问的URL地址。程序运行是在云端服务器上,本地设备无需提供任何算力,用户也不需安装任何插件,而且在网络OK的情况下在任何设备任何地点(办公室、家里等)都可随时打开。在模型建设的阶段也可以选择多种引擎,无论是精美度更高的UE5还是unity、3dmax 或者其他设计软件都是OK的。因为云流化的原理其实不改变程序的指令执行过程,而是把整个执行过程画面以视频流的方式传回给用户终端设备。
379 0
实时云渲染技术应用之三维可视化部署
|
传感器 存储 JSON
智慧养殖,三维可视化解决方案
智慧养殖,三维可视化解决方案
474 0
智慧养殖,三维可视化解决方案
|
运维 监控 数据可视化
基于WebGL的三维交通监控可视化技术应用(实践版) ThingJS
互联网技术为交通行业的可视化带来了多样性的发展。从传统的二维平面变形图、二维SVG矢量图到如今的SVG三维矢量技术、BIM技术、GIS+BIM技术、 WebGL技术,甚至连AR、VR、MR等虚拟现实技术,也开始应用于交通领域的可视化发展方面。
基于WebGL的三维交通监控可视化技术应用(实践版) ThingJS
|
存储 数据可视化 物联网
完善三维城市建模之开发视角,10万场景资源+用户样例 3D 地图 可视化 ThingJS
关键技术涉及计算机图形技术、3S技术(包括遥感(RS)、全球定位系统(GPS)、地理信息系统(GIS))以及大规模存储技术。
完善三维城市建模之开发视角,10万场景资源+用户样例 3D 地图 可视化 ThingJS
|
存储 消息中间件 监控
二维火监控平台的构建和探索
在阿里云栖开发者沙龙时序数据库技术专场上,二维火监控平台负责人董兵林为大家介绍了二维火监控平台构建的背景,构建过程和未来展望,向大家展示了如何快速实现一套自研的APM平台,并且如何在技术选型中进行一些取舍。
2301 0