ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl

光伏逆变器建筑设计工具

背景

最近有不同行业的客户咨询我司能不能提供一种解决方案,可以快速实现三维建筑效果,能快速响应市场需要,满足投标、交付、技术服务、厂房建设等需求。客户主要行业领域为新能源光伏逆变器铺设、房地产建筑、工厂厂房等三维建筑领域。
首先我们对他们的需求进行了分析,发现他们的共同需求是三维建筑,他们都想使用简单快速的编辑方式实现三维建筑,然后是业务需求。最终我们决定根据他们的需求,做一个简单的设计工具来实现三维建筑,然后再依次添加他们额外的业务需求。下边就简单的介绍下我们设计工具技术的尝试,如果你有更好的意见和思路可以一起沟通交流,共勉。

工具技术与实践

该设计工具使用的技术是我司自主研发的TWaver 2D和TWaver 3D技术,该技术可以查看我司官网:https://www.servasoft.com/

地图资源集成

该设计工具实现了2D和3D地图的加载,支持Google Map、Ding Map、Streetlamp、Capable和高德地图的加载。这个功能主要是使用TWaver 2D、3D技术,该功能主要是支持新能源光伏板需求的地图加载和截取功能。

三维建筑编辑

三维建筑的实现是通过在平面上打点,然后点击3D转换功能,生成三维建筑,可旋转预览三维建筑场景。

0.1 技术实现

技术是通过计算所有顶点和连线得到屋顶轮廓图。点击轮廓的边缘部分,程序会寻找离该点最近的边(如果点与边的距离>15px将不会生效),然后找到点到这条边的垂足,作为屋脊的起始点。用同样的方式创建屋脊的结束点(绿色线段为屋脊线)。

三维效果是通过将顶点在二维坐标系中的y坐标,作为三维坐标系中的z坐标,再根据屋顶高度和围墙高度,分别给顶点加上y坐标,就得到了所有顶点的三维坐标。然后再将六个顶点,按照a-b-e-f,f-e-c-d两个面生成屋顶,然后根据a,b,c,d生成围墙,就拿到了房屋模型的面,把这些多边形的面用Ear cut算法切割成三角面,然后把面的信息和顶点的信息,传入Heatwave的3d引擎,就生成了如下图模型。

三维模型生成了,但是看着建筑灰白色,和建筑有差别不美观。那我们就给建筑加个美观的外形,根据各个面顶点的坐标信息计算出顶点的UV,然后将所有面的顶点的UV坐标传入引擎,实现贴图效果,三维建筑支持多种贴图样式。

屋脊线生成

三维建筑做好后,就计划给建筑加个屋脊线,以实现屋顶的拖动,实现模型样式高度的调整。

0.2 技术实现

首先按照顶点e-f的路径,生成一条管道作为屋脊,当拖拽改变这条管道的位置时,同步改变顶点5,6的三维坐标,这样就得到了一个可以拉伸编辑的房屋模型。

自动生成多边屋脊线

通过打点创建房屋轮廓,然后点击自动计算屋脊线功能按钮,自动创建多边立体屋脊线。

0.3 技术实现

首先计算角a,b,c,d的角平分线,并且根据a,d角平分线的交点f,和b,c角平分线的交点e创建连线f,e。然后将面a,f,d;面a,b,e,f;面e,b,c;面f,e,c,d作为屋顶的顶面,生成屋顶的三维模型。操作步骤如下:

光伏板铺设

三维建的快速实现满足了客户的基本建筑需求,其它额外的业务需求,我们也尝试着进行了功能实现。如光伏板铺设需求。

光伏板位置移动

光伏板的铺设位置,支持批量铺设和铺设位置调整,支持整体布局优化。

技术实现

首先将镜头固定在坐标(0,1500,0),然后在面f-e-c-d上框选一个矩形区域,根据矩形区域面积和面f-e-c-d的投影面积找到两个面相交区域,在这个区域内自动铺排光伏板,通过像素检测计算光伏板的四个顶点是否都在屋面的有效范围内,如果不在,则删除该光伏板。对面a-b-e-f执行相同操作,最终得到的效果:

目前该设计工具还是一个雏形,是从技术实现的层面进行的尝试,后边会进行效果设计等其它功能的添加,如各种光照效果,各种场景组件等,欢迎各位沟通交流不同技术和想法。

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

posted on 2021-08-16 15:35  ITman彪叔  阅读(166)  评论(0编辑  收藏  举报

导航

ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl