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