天天看点

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

3D管线、智慧楼宇、物联网3D、物业3D监控、物业基础设施可视化运维、三维智慧灯杆、3D灯杆、3D定位、三维室内定位、3d建筑,3d消防,消防演习模拟,3d库房,webGL,threejs,3d机房,bim管理系统

写在前面的话:

        说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下。

  前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重点定义,被朋友嘲笑一番,亏还搞了three.js 这么久,这么简单的基础知识尽然不能对答如流,原来都是假把式。着实尴尬至极,尴尬至极....

  朋友间的调侃,本是玩笑,但认真思考,不无道理。正所谓温故而知新,也是我们程序员的必须课程,不仅仅是学习利用新技术,对自己常用的老技术也要时长翻看一下,加强记忆,加深理解。

  后来我还真好好的整理总结了一下Geometry与BufferGeometry,查漏补缺,也算为时未晚也。

  一句话,这两个对象的主要区别:主要在数据结构上,BufferGeometry非常高效,主要是因为数据直接放在一个连续的GPU内存空间中,有效减少向 GPU 传输上述数据所需的开销,而three.js后期版本中的geometry最终都转化为bufferGeometry,但始终是比bufferGeomerty多了一步,而且还是从CPU的geometry对象传输到GPU的bufferGeometry对象的一个夸硬件传递过程,所以后期也不建议用geometry了。

序:

在三维机房管理系统中,我们已经可以看到很多实现3d机房的可视化管理方案,常见的功能有动力环境管理、安防监控、资产管理与运维,包括我的前面的文章也有过常规3D机房方案的介绍,可以看我前面的文章(使用webgl(three.js)创建科技版3D机房,3D机房微模块详细介绍(升级版三)—— 1)。

再很多3D机房方案中,管线管理.一直是无法切实解决的痛点。主要原因有如下几个:

1、种类繁杂,机房管线线路繁杂,光是线路类型就包括了强电,弱电走线、光纤网线、消防管线、甚至包括国防线(政策上是规避展示的)

2、施工图纸整理繁杂,涉及到各种类型的线路,施工图都来源一大堆,着实无法入手

3、建模工作量大,线路的建模,是最繁杂的,除了线路多,走势还错综复杂

那么针对上面的痛点,我们又该如何解决。

首先是素材来源问题,记得高中学过,唯物主义辨证方法论的思想,牵牛我们要牵牛鼻子,既然线路繁杂,何不挑重点先解决,数据中心这个行业,管线最关心的还是光纤网络线路,而且是只正对数据服务器的网络线路,其它什么强电弱电,甚至是机房内部的动环系统传感器走线,都不是那么重要。所以我们先提出主要矛盾。重点解决机房数据业务的网络走线即可。

然后是技术实现方面:

有三种方案选择:

  1、全程建模,通过建模的方式实现走线展示,这虽然准确,但哪有那么多的人力物力去建模,还有建模过程中,也不能确保没有遗漏与错搭。

  2、数据节点驱动:只保存每条线路的关键节点,使用代码生成的线路方式。这很大程度上减少了工作量,但是整理的工作量也不小。

  3、逻辑线路:只记住起点与经过的设备节点以及终点,自动智能化生成线路。线路不按照实际走向,只记录描述线路上设备的逻辑点位。

我们的解决方案是采用后面两种,虚实结合。

好了 闲话少叙,归入正题:

技术交流 [email protected]

交流微信:

    

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

如果你有什么要交流的心得 可邮件我

一、定义:

管道:顾名思义,就知道是指放线缆的固定建筑,有时候是铁管道,有时候是水泥管道

井:每隔一段管道就会有一个便于施工人员维护的井出现

线缆:通常情况下,是放在管道里面的粗黑粗黑的电缆。

电路:是指在线缆里面的一根一根的电线,通常一根电缆里面有几根或者十几根电路

光纤:在电路里面的光纤

二、效果与代码实现:

 1、整体园区效果,我们还是采用深色科技蓝风格(科技的主流风)。模型我们还是采用代码创建的方式,楼宇标号采用精灵模型。这里的井盖采用黄色标亮,便于识别。

 全场景实现主要代码如下:

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课
如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

View Code

2、显示地下所有管道,实现方式也比较简单,只需要隐藏上方的建筑与园区地面,把管道显现出来即可。这里可以看到一个园区渐变隐藏的效果。

代码实现:

3、井下走线方式展现,可以查看井下每条线路的信息,便于运维人员运维查看管理

主要代码逻辑:

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课
如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

 4、双击管线,查看管线内部光纤信息,快速掌握光纤走向与状态。

 5、展现所有线缆信息,标注线缆,以及点击查看线缆信息。

这里主要用精灵模型,精灵贴图的方式。

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课
如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

6、双击线缆,查看线缆内的光纤数据信息。

 7、标注井深与管深。便于施工与土建规避。知道深度,能有效辅助运维人员下井准备,而且再土建施工时,能有效规避风险,不会有挖断线缆情况发生。

 8、线缆检索。能够根据线缆属性,快熟定位查看线缆走势与信息。

 9、设备检索,端口检索,能快速定位到具体设备。查看设备信息状态,位置信息等。

主要思路:

 10、电路检索,线缆中包含很多电路,支持电路检索,能快速定位相应的电路。

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

主要代码:

由于篇幅过长,我们下节课详细描述楼层内部以及机房内部的线路方案。

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一) 使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

其它相关文章:

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课(炫酷版一)

继续阅读