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

前言

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