全國
手機版|
關注公眾號|
下載手機APP 在網絡迅速發(fā)展的今天，人們的交流已經不再僅限于面對面，一個視頻通話就能拉近彼此之間的距離，而在工業(yè)管控上卻不僅僅局限于實時視頻流的監(jiān)控，HTML本身擁有強大的web組件可供我們去實施一些好玩的例子，甚至加上一些簡單有趣的動畫和實時數(shù)據(jù)的對接，效果上可不止提高了一個水平。加上現(xiàn)如今已經啟動許久的工業(yè)4.0衍生出的新一代工業(yè)互聯(lián)網和不久才面世于眾的5G新時代，數(shù)據(jù)可視化與網絡帶寬發(fā)展的碰撞，激發(fā)出了一代3D數(shù)據(jù)可視化監(jiān)管的發(fā)展。
而Hightopo（以下簡稱HT）的HTforWeb產品上的web組態(tài)提供了豐富的2D組態(tài)和3D組態(tài)效果，可以根據(jù)需求快速實現(xiàn)一套完整的數(shù)據(jù)可視化系統(tǒng)。本文將通過HT的3D組態(tài)實現(xiàn)一個可視化分布式能源站系統(tǒng)，帶你走進豐富的組態(tài)的大門。
界面簡介及效果預覽
場景搭建上我們呈現(xiàn)了以熱、電、冷聯(lián)供為主要形式的多聯(lián)產系統(tǒng)的分布式能源站系統(tǒng)，根據(jù)管道流動傳遞的流程步驟下，有效地實現(xiàn)了能源的梯級利用的展示效果：
告別傳統(tǒng)工業(yè)互聯(lián)網，提高數(shù)字管控思維：三維組態(tài)分布式能源站
代碼實現(xiàn)
在能源站的建設中，分布式能源站是指小規(guī)模化、利用熱、電、冷聯(lián)供為主要形式分布于負荷附近的清潔環(huán)保發(fā)電設施，是一種相對可靠又高效的發(fā)電形式。
3D場景實現(xiàn)上通過創(chuàng)建ht.graph3d.Graph3dView來呈現(xiàn)3D的內容，3D視圖組件進行deserialize()反序列化對應的json呈現(xiàn)出3D場景內容，然后將3D組件再加入到body下的方式實現(xiàn)場景的加載渲染的效果。還可以自定義修改一些交互或者視角上的限制，如修改左右鍵的交互方式或者設置場景的最大仰角，都能使用戶在交互體驗上更為流暢。
//創(chuàng)建三維拓撲視圖
this.g3d=newht.graph3d.Graph3dView();
this.g3dDm=this.g3d.dm();
//將3D組件加入到body下
this.g3d.addToDOM();
//修改左右鍵交互方式
letmapInteractor=newht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
//修改最大仰角為PI/2
mapInteractor.maxPhi=Math.PI/2;
為了能在懸浮建筑模型的時候，視覺上有交互體驗，這里設置了模型的高亮模式。
告別傳統(tǒng)工業(yè)互聯(lián)網，提高數(shù)字管控思維：三維組態(tài)分布式能源站
//設置鼠標懸浮高亮模式
this.g3d.setHighlightMode('mouseover');
//設置高亮顏色
ht.Style['highlight.color']='#FEB64D';
場景渲染加載出來后，我們就能對于分布式能源站的工業(yè)流程可以通過管道的動畫來展示。HT提供的ht.Shape是極其強大的圖元類型，其在GraphView和Graph3dView組件上都能展示出各種二維和三維的形狀效果，其擴展子類ht.PolyLine可實現(xiàn)三維空間管道的功能，我們可以通過ht.PolyLine繪制出流程所經的路徑，通過ht.Default.startAnim()動畫函數(shù)去執(zhí)行調用變化管道上的uv貼圖的偏移值，就可以達到流動的效果。
告別傳統(tǒng)工業(yè)互聯(lián)網，提高數(shù)字管控思維：三維組態(tài)分布式能源站
實現(xiàn)的代碼如下：
animflow(){
//動畫執(zhí)行函數(shù)
ht.Default.startAnim({duration:2000,
easing:(t)=>{returnt},
action:(v,t)=>{
//通過數(shù)據(jù)模型獲取唯一標識tag得到管道節(jié)點設置uv偏移流動動畫
this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset',[v,0]);
this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset',[v,0.5]);
this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset',[-v,0.5]);
...},finishFunc:()=>{
animflow();}});}
而場景中呈現(xiàn)出來的數(shù)據(jù)，我們可以通過對接一些主流的接口，例如ajax、axios或者是WebSocket，根據(jù)自己對接交互的需求，可以判斷采用輪詢調用接口或者是對接雙向進行數(shù)據(jù)傳輸，起到實時刷新數(shù)據(jù)的需求，而數(shù)據(jù)的載體可以對接到HT的3D公告板billboard上進行展示：
告別傳統(tǒng)工業(yè)互聯(lián)網，提高數(shù)字管控思維：三維組態(tài)分布式能源站
billboard同樣是基于ht.Shape的子類，對于Shape不管是在2D組態(tài)或者是3D組態(tài)上呈現(xiàn)，都可以通過一些定義的屬性styleMap來設定一些本身自帶的屬性值，當然用戶也可以自己通過在attrObject里設定一些自定義屬性。而分布式能源站中，我們通過對billboard設定了一些屬性值來控制公告板的屬性信息：
letbillboard=newht.Node();
billboard.s({//設定shpe3d的類型為公告板billboard
"shape3d":"billboard",
//設置公告板的圖片image
"shape3d.image":"symbols/htdesign/box/panel.json",
//設置公告板始終自動旋轉面對屏幕
"shape3d.autorotate":true,
//設置公告板開啟透明
"shape3d.transparent":true,
//設置公告板不可移動
"3d.movable":false,
//設置公告板始終置頂
"shape3d.alwaysOnTop":true,
//設置公告板不可選中
"3d.selectable":false,
//公告板開啟緩存
"shape3d.image.cache":true
})
如果貼圖是矢量，對于開啟了緩存的公告板，性能上會大大提高。對比一下這個例子，你會發(fā)現(xiàn)緩存機制上性能的差異性。由此看出，緩存機制對于整體場景的流暢度是至關重要的，對于一些不必要實時刷新的面板信息，我們可以采取緩存的方式，并且在下一次更新的時候調用Graph3dView.invalidateShape3dCachedImage(node)來手動刷新這個節(jié)點，從而大大提高了場景的性能：
g3d.invalidateShape3dCachedImage(billboard);
