基於 HTML5 WebGL 的 智慧樓宇能源監控系統

前言

21世紀，在能源危機和全球氣候變暖的壓力下，太陽能等可再生能源愈來愈受到關注，其中光伏建築一體化逐漸成爲綠色發展方式和生活方式，增強節能降耗，支持低碳產業和新能源、可再生能源發展，也已經成爲國家戰略，因此基於數據進行管理和監控的智慧樓宇能源系統已經成爲了一種趨勢。經過數據咱們能夠直觀對建築執行能耗量化管理以及效果評估，來控制下降建築運營過程當中所消耗的能量，最終下降建築的運營成本，提升能源使用效率。今天就給你們帶來一個採用 Hightopo 的 HT for Web 產品實現智慧樓宇的能耗監控系統。

系統預覽

這個圖中顯示的是一個 2D 3D 結合而成的智慧樓宇的能源監控系統，主要對樓宇設備能耗變化進行實時監控,好比：空調、照明等。

代碼實現

1、場景進入動畫預覽

對於 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();
        }
    });
}

2、大樓動畫預覽

在 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 函數。咱們就能夠經過這個結束動畫去調用下一個動畫。這樣就能夠實現動畫一步步的效果，這樣就能夠把複雜的動畫拆分紅多個簡單的小動畫。

3、電梯動畫預覽

在這個智慧樓宇能源監控系統中，咱們還能夠可視化地實時監控電梯在樓層間的工做運行狀態，而且可以準確地瀏覽每一個電梯在樓層間的停留時間。

實現動畫代碼以下：

//電梯動畫
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 調度手冊>章節。

4、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動畫中，就能夠直觀、有效的傳遞出樓宇內部的能源變化，從而下降建築的運營成本，有效的下降建築用能，對於節能減排、保護環境具備重要的現實意義。