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