前言
21世紀，在能源危機和全球氣候變暖的壓力下，太陽能等可再生能源越來越受到關注，其中光伏建築一體化逐漸成為綠色發展方式和生活方式，加強節能降耗，支持低碳產業和新能源、可再生能源發展，也已經成為國家戰略，所以基於數據進行管理和監控的智慧樓宇能源系統已經成為了一種趨勢。通過數據我們可以直觀對建築執行能耗量化管理以及效果評估，來控制降低建築運營過程中所消耗的能量，最終降低建築的運營成本，提高能源使用效率。今天就給大家帶來一個采用 Hightopo 的 HT for Web 產品實現智慧樓宇的能耗監控系統。
系統預覽
這個圖中顯示的是一個 2D 3D 結合而成的智慧樓宇的能源監控系統，主要對樓宇設備能耗變化進行實時監控,比如：空調、照明等。
代碼實現
一、場景進入動畫預覽
對於 3D 建模下的樓宇建築，加上一個好的開場動畫效果，可以給用戶帶來良好的體驗效果，所以我們可以對 3D 場景 修改它的 eye 和 center 的數值來達到漫游的效果。當然我們也可以借助管道去實現更加復雜的漫游效果，其本質也是通過改變 3D 場景的 eye 和 center 的數值。
實現動畫代碼如下：
//場景進入動畫 flyToView(g3d, eye, center, cb, time) { g3d.moveCamera(eye, center, { duration: time ? time : 3000, finishFunc: function() { cb && cb(); } }); }
二、大樓動畫預覽
在 3D 場景中，我們可以對通過對整個大樓模型節點的拆分，把需要做動畫的大樓部分模型做成單獨的節點，再通過給這些節點設置不同的 Tag（注：類似ID，在我們的場景中是唯一的）。然后就可以通過 Tag 獲取到我們 3D 視圖中的這個節點，再通過動畫去修改該節點的 X 軸、Y 軸、以及 Z 軸的值，就可以做出這樣的大樓變化效果。在我們的 3D 的三維坐標系中，X 軸正方向朝右，Y 軸正方向朝上，Z 軸的正方向朝向屏幕外，采用的是右手螺旋法則，想了解更多關於我們 3D 場景的細節 ，詳見HT for Web 3D 手冊章節。
實現動畫代碼如下：
//大樓動畫1 buildAnim1(node, position, num, direction, cb, time) { var x = node.getX(), z = node.getY(), y = node.getElevation(); this.anim2 = ht.Default.startAnim({ duration: time ? time : 3000, finishFunc: function finishFunc() { cb && cb(); }, action: function action(v) { if (position === "Y") { var positionY = y + num * v; node.setElevation(positionY); } else if (position === "X") { if (direction === "lf" || direction === "ra") { var positionX = x + num * v; var positionY = z + num * v; node.setX(positionX); node.setY(positionY); } else if (direction === "la") { var positionX = x - num * v; var positionY = z + num * v; node.setX(positionX); node.setY(positionY); } else if (direction === "rf") { var positionX = x + num * v; var positionY = z - num * v; node.setX(positionX); node.setY(positionY); } } else if (position === "Z") { var positionZ = z + num * v; node.setY(positionZ); } } }); }
通過以上的代碼可以看出，我們可以動態傳入我們需要的參數，然后在我們動畫的 action 函數中根據我們傳的參數進行判斷需要哪一步動畫，當然我們還有一個 finishFunc 函數。我們就可以通過這個結束動畫去調用下一個動畫。這樣就可以實現動畫一步步的效果，這樣就可以把復雜的動畫拆分成多個簡單的小動畫。
三、電梯動畫預覽
在這個智慧樓宇能源監控系統中，我們還可以可視化地實時監控電梯在樓層間的工作運行狀態，並且能夠准確地瀏覽每個電梯在樓層間的停留時間。
實現動畫代碼如下：
//電梯動畫 elevatorAnim() { var self = this; var g3dDm = self.dm; var elevatorNodes = g3dDm.getDataByTag("elevatorNodes"); // 電梯動畫 var animateElevatorNodes = null; var elevatorNodesArr = []; elevatorNodes && elevatorNodes.eachChild(function (d) { d.a('direction', 1); elevatorNodesArr.push(d); }); var randomElevator = function () { animateElevatorNodes = []; for (var i = 0; i < 3; i++) { animateElevatorNodes.push(elevatorNodesArr[self.getRandomNumberByRange(0, 6)]); } }; randomElevator(); self.elevatorTask = { interval: 100, action: function (data) { if (animateElevatorNodes.indexOf(data) > -1) { var elevation = data.getElevation(); var nextElevation = elevation + data.a('direction') * 10; if (nextElevation < 0 && data.a('direction') === -1) { data.a('direction', 1); } if (nextElevation > 760 && data.a('direction') === 1) { data.a('direction', -1); } data.setElevation(nextElevation); } } }; g3dDm.addScheduleTask(self.elevatorTask);//開啟動畫 setInterval(randomElevator, 2000); }
對於電梯的動畫效果，我用的是 Hightopo 的調度來實現電梯的動畫效果。那什么是調度呢？在 HT 中，調度就是先通過 DataModel 添加調度任務，DataModel 會在調度任務指定的時間間隔（interval）到達時遍歷 3D 視圖的 DataModel 視圖下的所有圖元回調調度任務的 action 函數，可在該函數中對傳入的 Data 傳入的圖元做相應的屬性修改達到動畫效果。想了解更多調度信息，詳見<HT for Web 調度手冊>章節。
四、2D 面板展示以及數據綁定
在我們系統中我還搭建了 2D 場景，上面有曲線圖以及柱狀圖以及各種數據面板可以直觀的顯示樓宇的能耗信息，讓我們很方便的對樓宇執行能耗量化管理以及效果評估。對於曲線圖們支持第三方 ECharts 嵌入的方式引入。
界面如圖：
對於 2D 界面的數據綁定非常的簡單。我們可以給 2D 面板上的圖標設定 Tag ，然后通過對這個面板上綁定的屬性進行修改。代碼如下：
var powerModule = g2dDm.getDataByTag("powerModule"); powerModule.a({ // 此處名字為自己命名 "num1": self.getRandomNumberByRange(1000, 9999), "num2": self.getRandomNumberByRange(1, 100), "num3": self.getRandomNumberByRange(100, 999), "num4": self.getRandomNumberByRange(100, 999), }); powerModule.iv();
對於 2D 界面的數據綁定非常的簡單，我們也可以通過獲取接口的數據的方式動態綁定真實數據到 2D/3D 面板上。當然，如果只是 2D 場景上的文字，我們可以直接通過獲取這個文字的節點 node ，然后通過 node.s("text","修改的內容")，即可對數據進行修改。
總結
在能源危機和全球氣候變暖的壓力下，可再生資源，減少能源消耗，走可持續發展道路已變得尤為重要，也是21世紀的必然趨勢。通過能源監控系統，在這些豐富的曲線圖、柱圖等圖表以及有趣生動的3D動畫中，就可以直觀、有效的傳遞出樓宇內部的能源變化，從而降低建築的運營成本，有效的降低建築用能，對於節能減排、保護環境具有重要的現實意義。