全國
手機版|
關注公眾號|
下載手機APP 而Hightopo（以下簡稱HT）的HTforWeb產品上的web組態提供了豐富的2D組態和3D組態效果，可以根據需求快速實現一套完整的數據可視化係統。本文將通過HT的3D組態實現一個可視化分布式能源站係統，帶你走進豐富的組態的大門。
界麵簡介及效果預覽
場景搭建上我們呈現了以熱、電、冷聯供為主要形式的多聯產係統的分布式能源站係統，根據管道流動傳遞的流程步驟下，有效地實現了能源的梯級利用的展示效果：
告別傳統工業互聯網，提高數字管控思維：三維組態分布式能源站
代碼實現
在能源站的建設中，分布式能源站是指小規模化、利用熱、電、冷聯供為主要形式分布於負荷附近的清潔環保發電設施，是一種相對可靠又高效的發電形式。
3D場景實現上通過創建ht.graph3d.Graph3dView來呈現3D的內容，3D視圖組件進行deserialize()反序列化對應的json呈現出3D場景內容，然後將3D組件再加入到body下xia的de方fang式shi實shi現xian場chang景jing的de加jia載zai渲xuan染ran的de效xiao果guo。還hai可ke以yi自zi定ding義yi修xiu改gai一yi些xie交jiao互hu或huo者zhe視shi角jiao上shang的de限xian製zhi，如ru修xiu改gai左zuo右you鍵jian的de交jiao互hu方fang式shi或huo者zhe設she置zhi場chang景jing的de最zui大da仰yang角jiao，都dou能neng使shi用yong戶hu在zai交jiao互hu體ti驗yan上shang更geng為wei流liu暢chang。
//創建三維拓撲視圖
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，genjuzijiduijiejiaohudexuqiu，keyipanduancaiyonglunxuntiaoyongjiekouhuozheshiduijieshuangxiangjinxingshujuchuanshu，qidaoshishishuaxinshujudexuqiu，ershujudezaitikeyiduijiedaoHT的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
})
如(ru)果(guo)貼(tie)圖(tu)是(shi)矢(shi)量(liang)，對(dui)於(yu)開(kai)啟(qi)了(le)緩(huan)存(cun)的(de)公(gong)告(gao)板(ban)，性(xing)能(neng)上(shang)會(hui)大(da)大(da)提(ti)高(gao)。對(dui)比(bi)一(yi)下(xia)這(zhe)個(ge)例(li)子(zi)，你(ni)會(hui)發(fa)現(xian)緩(huan)存(cun)機(ji)製(zhi)上(shang)性(xing)能(neng)的(de)差(cha)異(yi)性(xing)。由(you)此(ci)看(kan)出(chu)，緩(huan)存(cun)機(ji)製(zhi)對(dui)於(yu)整(zheng)體(ti)場(chang)景(jing)的(de)流(liu)暢(chang)度(du)是(shi)至(zhi)關(guan)重(zhong)要(yao)的(de)，對(dui)於(yu)一(yi)些(xie)不(bu)必(bi)要(yao)實(shi)時(shi)刷(shua)新(xin)的(de)麵(mian)板(ban)信(xin)息(xi)，我(wo)們(men)可(ke)以(yi)采(cai)取(qu)緩(huan)存(cun)的(de)方(fang)式(shi)，並(bing)且(qie)在(zai)下(xia)一(yi)次(ci)更(geng)新(xin)的(de)時(shi)候(hou)調(tiao)用(yong)Graph3dView.invalidateShape3dCachedImage(node)來手動刷新這個節點，從而大大提高了場景的性能：
g3d.invalidateShape3dCachedImage(billboard);
