背景

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

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

方案设计

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

三维设备建模

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

模型导入

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

image

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

image image image

管道编辑

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

image

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

image 管道动画

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

1.gif

场景布局仿真

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

实时数据对接

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

image
image image

三维场景展示

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

image
场景二
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B2&uuid=db9c7a00-afa2-11eb-9115-859f18cccd8d
image
场景三
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B3&uuid=e079bf10-afa2-11eb-9115-859f18cccd8d
image
场景四
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B4&uuid=e74343c0-afa2-11eb-9115-859f18cccd8d
image.png
场景五
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B5&uuid=ed8dad60-afa22021-07-13-11eb-9115-859f18cccd8d
image
场景六
http://47.98.50.153:4001/preview.html?owner=root&id=%E6%B5%81%E7%A8%8B6&uuid=f3ace850-afa2-11eb-9115-859f18cccd8d
image

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