基於 HTML5 WebGL 的樓宇智能化集成系統（三）

時間 2020-04-16

標籤基於 html5 html webgl 樓宇智能集成系統欄目 HTML5 简体版

原文原文鏈接

前言

2018年7月，信息化部印發了《工業互聯網平臺建設及推廣指南》和《工業互聯網平臺評價方法》，掀起了 工業互聯網 的浪潮，併成爲熱詞寫入了報告中。同爲信息發展下的產物 建築智能化集成系統也是兼具着信息與管理的重要體現，數據化信息經過可視化的管理系統展現出一套互聯網智能優化的解決方案，而本系列文章便結合了HT 的2D/3D 可視化工具的運用，結合面板的數據展現和大樓建模場景的可視化管理，前面的內容已經講解了 3D 模型和 2D 面板的融合體現，本次的內容將帶您探討 智慧樓宇管理系統、電梯監控系統 以及 停車場管理系統的實現方式和總體系統的聯合優化體現。html

界面簡介及效果預覽

智慧樓宇管理系統優化效果 node

主要包括冷站、熱站和中央末端智慧羣控的聯合做用，以及樓層智慧照明，經過清晰的動畫體現出整棟大樓智慧節能運做的流程，能夠經過面板詳情的演示細緻地介紹每一個場景的做用以及串聯的用處。json

電梯以及樓層監控效果 緩存

可視化地實時監控電梯在樓層間的工做運行狀態，而且可以準確地瀏覽每一個電梯內的實時監控畫面。dom

停車場管理系統監控效果 ide

停車場做爲如今樓宇監控不可缺失的一環，這裏主要能夠體現出實時的車位監控，經過簡單的動畫演示來表現出整個停車場車輛的運行狀態，方便管理。函數

代碼實現

1、 智慧樓宇管理系統優化效果的實現工具

在點擊智慧樓宇管理系統的按鈕後，場景視角會根據 moveCamera 轉移到大樓正視的視角後，大樓總體呈現漸變虛化後透明展現大樓內部信息，這個動畫是封裝了一個 tweenColor 顏色變化的過渡效果，從一種顏色 rgba 狀態上改變色值和透明度來體現視覺上的變化。在效果展現上有一種可視化浸入式查看大樓內部信息的體驗，具體的 3D 模型屬性的變化可參考<HT 的 3D 手冊>。oop

// 經過 moveCamera 改變 eye 和 center 來移動場景視角爲大樓的正視面
moveCamera(g3d, [134, 399, 1617], [7, 40, 144], {
    duration: 2000,
    easing: t => t * t,
    finishFunc: () => {
        // 開啓場景大樓模型的可透明爲 true
        this.building.eachChild(c => {
            c.s({
                'shape3d.transparent': true,
            });
        });
        // 大樓模型線框的顏色變化
        tweenColor(this.building, 'wf.color', 'rgba(72,149,232,1)', 'rgba(56,156,255,0.03)', {
            duration: 2000,
            easing: t => t
        });
        // 大樓模型總體染色的顏色變化
        tweenColor(this.building, 'shape3d.blend', 'rgba(120,180,255,1)', 'rgba(120,180,255,0)', {
            duration: 2000,
            easing: t => t,
            finishFunc: () => {
                // 樓層設置爲可見
                this.floor.eachChild(c => {
                    setNodeVisible(c, true);
                });
                this.floorLighting = 1;
                // 顯示大樓建築信息的動畫
                this.showBuilding();
            }
        });
    }
});

顏色變化函數的實現是傳入參數來改變節點的顏色屬性變化值：post

node：改變顏色的圖元節點；
startColor：起始顏色的 rgba 值；
endColor：變化後顏色的 rgba 值；
animParams：過渡動畫參數；

tweenColor(node, property, startColor, endColor, animParams) {
    animParams = animParams || {};
    if (!animParams.frames && !animParams.duration)
        animParams.duration = 5000;
    if (!animParams.easing)
        animParams.easing = t => t;

    startColor = ht.Default.toColorData(startColor);
    endColor = ht.Default.toColorData(endColor);

    const dx = endColor[0] - startColor[0];
    const dy = endColor[1] - startColor[1];
    const dz = endColor[2] - startColor[2];
    const da = endColor[3] - startColor[3];
    const postAction = animParams.postAction;
    animParams.action = (v, t) => {
        const x = startColor[0] + v * dx;
        const y = startColor[1] + v * dy;
        const z = startColor[2] + v * dz;
        const a = (startColor[3] + v * da) / 255;

        node.s(property, ('rgba(' + ([x, y, z, a]).join(', ')) + ')');

        if (postAction) postAction(('rgba(' + ([x, y, z, a]).join(', ')) + ')');
    }
    return ht.Default.startAnim(animParams);
}

大樓透明化後展現內部信息，此時咱們能夠看到樓層的照明系統從底樓逐一貫上亮起也是經過這種方法實現的。然後大樓兩側的系統介紹面板是經過改變面板的縮放屬性來實現延展的效果：

// 面板顯示
showPanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (1 - data.getScaleX()) * v);
        }
    });
}

// 面板隱藏
hidePanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (0 - data.getScaleX()) * v);
        }
    });
}

2、 電梯以及樓層監控效果的實現

電梯是大樓平常管理必不可少的一環，而經過可視化場景即可實時對接電梯運行的狀況。電梯動畫效果的實現原理是判斷當前電梯所處樓層的位置和下一層隨機樓層的位置，來實現樓梯運行動畫，本棟大樓劃分設定爲每層樓層高50，因此只須要獲得電梯所處的高度就很容易能夠判斷出所處的樓層，而電梯面板也是經過這個判斷來實時展現樓層的信息。

具體實現的僞代碼以下：

elevatorAnimation(data) {
    const g3d = this.g3d;
    const tag = data.getTag();
    const e = data.getElevation();
    const label = data.getChildAt(0);
    // 判斷如今所處樓層
    let now = Math.ceil(e / 50);
    // 下一層樓層取1~7隨機數
    let next = randomNumber(1, 7);
    // 根據如今的樓層和下一個樓層，判斷電梯運行的範圍
    let range = numBetween(now, next);
    this.animationElevatorMap[tag] = ht.Default.startAnim({
        duration: range * 800,
        easing: t => t,
        action: (v, t) => {
            // 電梯運行位置設定
            data.setElevation(now < next ? (e + (range * 50) * v) : (e - (range * 50) * v));
            // 設置電梯樓層面板顯示並根據電梯位置設定
            if (!label) return;
            const floor = Math.ceil(data.getElevation() / 50);
            if (floor === label.a('text')) return;
            label.a('text', floor);
            // 手動刷新電梯面板信息
            g3d.invalidateShape3dCachedImage(label);
        },
        finishFunc: () => {
            // 銷燬電梯間隔動畫
            delete this.timeoutElevatorMap[tag];

            // 執行電梯間隔動畫後回調電梯運行動畫
            this.timeoutElevatorMap[tag] = setTimeout(() => {
                this.elevatorAnimation1(data);
            }, Math.floor(Math.random() * 5000) + 2000);
        }
    });
}

3、 停車場管理系統監控效果的實現

停車場的車位信息能夠直觀地在 3D 場景中去實現管理，而車輛進出的可視化控制也能夠用簡單的管道動畫去實現，實時監控車輛進出去調用這個動畫就能很直觀地反應停車場的實時狀況。而停車場的具體實現方案是經過車輛節點的前進管道和倒退管道去調用封裝的管道動畫來實現車輛行駛和倒車入庫的動畫效果：

每一個車輛的停車動畫都包含着 forwardPath 和 backwardPath 兩條路線，分別對應着車輛的前進路線和倒車路線，具體的行駛僞代碼以下：

park(car, key = 'Path', finishFunc) {
    const dm = car.dm();
    const tag = car.getTag();
    const forwardPath = dm.getDataByTag(tag + '_forward' + key);
    const backwardPath = dm.getDataByTag(tag + '_backward' + key);
    this.animationMap[tag] = move(car, forwardPath, 'forward', undefined, 24, {
        pathEndFunc: () => {
            this.animationMap[tag].stop();

            this.animationMap[tag] = move(car, backwardPath, 'backward', undefined, undefined, {
                pathEndFunc: () => {
                    this.animationMap[tag].stop();
                    delete this.animationMap[tag];

                    if (finishFunc) finishFunc();
                    return true;
                }
            });
            return true;
        }
    });
}

move 是節點沿着路徑平滑移動的封裝函數，主要參數爲：

node：動畫節點；
path：運行路徑；
direction：節點朝向 forward | backward;
animParams：動畫參數；

經過繪製一條運行路線的管道，ht.Default.getLineCacheInfo() 獲得這條管道的點位和分割信息 cache，而後管道信息經過 ht.Default.getLineLength() 獲得管道的長度，而且經過 ht.Default.getLineOffset() 來獲取連線或者管道指定比例的偏移信息，從而達到移動的效果，注意的是，這裏還設定了 direction 來規定動畫節點的朝向，主要是爲了經過 node.lookAtX() 來獲取節點下一個面對的朝向的位置信息，並設置節點此時的位置，從而達到節點沿着路徑平滑移動的效果。

move(node, path, direction, step = 6, interval = 75, animParams) {
    let cache = path.__cache__;
    if (!cache)
        cache = path.__cache__ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments());

    const len = ht.Default.getLineLength(cache);

    animParams = animParams || {};

    const face = direction === 'forward' ? 'front' : direction === 'backward' ? 'back' : direction;
    let currentLen = 0;
    const pathEndFunc = animParams.pathEndFunc;
    const action = animParams.action;
    animParams.action = (v, t) => {
        if (currentLen >= len) {
            // 檔 pathEndFunc 返回 true 是，認爲是要結束動畫, 不執行後面檔 action
            if (pathEndFunc && pathEndFunc())
                return;
        }
        currentLen = currentLen % len;

        const offset = ht.Default.getLineOffset(cache, currentLen);
        const point = offset.point;

        node.lookAtX([point.x, node.getElevation(), point.z], face);
        node.p3(point.x, node.getElevation(), point.z);

        currentLen = currentLen + step;

        if (action) action();
    };
    return loop(animParams.action, interval);
}

與此同時，咱們還能夠看到車輛行駛到車位或者離開時，車位上方的紅綠燈則表示着這個車位的停放信息，是根據車輛的狀況實時設定車位的情況，經過改變其信號燈 image 的 json 圖標並手動刷新緩存來實現的。而緩存機制對於總體場景的流暢度是相當重要的，對於一些沒必要要實時刷新的面板信息，咱們能夠採起緩存的方式，而且在下一次更新的時候調用 Graph3dView.invalidateShape3dCachedImage(node)來手動刷新這個節點，從而大大提升了場景的性能，有關 3D 面板的屬性能夠參考<HT 的 3D 手冊 billboard 公告板>。

updateLight(view, light, color) {
    light.s('shape3d.image', 'symbols/parking/' + color + 'Light.json');
    view.invalidateShape3dCachedImage(light);
}

總結

IBMS 智能化集成系統管理結合數據信息、大樓模型以及每一個系統的場景模型，完整地體現出一套系統之間的功能串聯。在一棟大樓的功能上，每一個子系統負責着各自信息數據的管理和操做，可是經過智能化集成管理系統的管理，即可將每部分子系統的數據信息彙總到一塊兒去可視化 3D/2D 工具上完整地體現。在將來科技的進步下，也許再也不須要親臨現場管理着整棟的平常運行，一套可視化的智能化集成管理系統就能夠輕鬆解決平常維護的繁瑣，充分的數據也能夠實時地反映設備與大樓的關聯信息。