2. 程式人生 > >基於 HTML5 WebGL 的樓宇智慧化整合系統（三）

基於 HTML5 WebGL 的樓宇智慧化整合系統（三）

阿新 • • 發佈：2020-04-16
前言       2018年7月，資訊化部印發了《工業網際網路平臺建設及推廣指南》和《工業網際網路平臺評價方法》，掀起了 工業網際網路 的浪潮，併成為熱詞寫入了報告中。同為資訊發展下的產物 建築智慧化整合系統 也是兼具著資訊與管理的重要體現，資料化資訊通過視覺化的管理系統展示出一套網際網路智慧優化的解決方案，而本系列文章便結合了 HT  的 2D/3D 視覺化工具的運用，結合面板的資料展示和大樓建模場景的視覺化管理，前面的內容已經講解了 3D 模型和 2D 面板的融合體現，本次的內容將帶您探討 智慧樓宇管理系統、電梯監控系統 以及 停車場管理系統 的實現方式和整體系統的聯合優化體現。   介面簡介及效果預覽 智慧樓宇管理系統優化效果
      主要包括冷站、熱站和中央末端智慧群控的聯合作用，以及樓層智慧照明，通過清晰的動畫體現出整棟大樓智慧節能運作的流程，可以通過面板詳情的演示細緻地介紹每個場景的作用以及串聯的用處。   電梯以及樓層監控效果
      視覺化地實時監控電梯在樓層間的工作執行狀態，並且能夠準確地瀏覽每個電梯內的實時監控畫面。   停車場管理系統監控效果
      停車場作為現在樓宇監控不可缺失的一環，這裡主要可以體現出實時的車位監控，通過簡單的動畫演示來表現出整個停車場車輛的執行狀態，方便管理。   程式碼實現 一、 智慧樓宇管理系統優化效果的實現       在點選智慧樓宇管理系統的按鈕後，場景視角會根據 moveCamera 轉移到大樓正視的視角後，大樓整體呈現漸變虛化後透明展示大樓內部資訊，這個動畫是封裝了一個 tweenColor 顏色變化的過渡效果，從一種顏色 rgba 狀態上改變色值和透明度來體現視覺上的變化。在效果展示上有一種視覺化浸入式檢視大樓內部資訊的體驗，具體的 3D 模型屬性的變化可參考 <HT 的 3D 手冊>。 
// 通過 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();
            }
        });
    }
});
            顏色變化函式的實現是傳入引數來改變節點的顏色屬性變化值：
  • 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);
        }
    });
}

 

二、電梯以及樓層監控效果的實現       電梯是大樓日常管理必不可少的一環，而通過視覺化場景便可實時對接電梯執行的情況。電梯動畫效果的實現原理是判斷當前電梯所處樓層的位置和下一層隨機樓層的位置，來實現樓梯執行動畫，本棟大樓劃分設定為每層樓層高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);
        }
    });
}

 

三、停車場管理系統監控效果的實現       停車場的車位資訊可以直觀地在 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 工具上完整地體現。在未來科技的進步下，也許不再需要親臨現場管理著整棟的日常執行，一套視覺化的智慧化整合管理系統就可以輕鬆解決日常維護的繁瑣，充分的資料也可以實時地反映裝置與大樓的關聯資訊。         2019 我們也更新了數百個工業網際網路 2D/3D 視覺化案例集，在這裡你能發現許多新奇的例項，也能發掘出不一樣的工業網際網路：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA       同時，你也可以檢視更多案例及效果：https://www.hightopo.com/demos/index.ht

相關推薦

基於 HTML5 WebGL 的樓宇智慧化整合系統（三）

前言       2018年7月，資訊化部印發了《工業網際網路平臺建設及推廣指南》和《工業網際網路平臺評價方法》，掀起了 工業網際網路 的浪潮，併成為熱詞寫入了報告中。同為資訊發展下的產物 建築智慧化整合系統 也是兼具著資訊與管

基於 HTML5 WebGL 的樓宇智慧化整合系統（二）

前言       一套完整的視覺化操作互動上，必不可少 2D/3D 的融合，在上期我們介紹了有關 3D 場景的環視漫遊、巡視漫遊以及動畫效果，還包括了冷站場景、熱站場景以及智慧末端的實現原理，本期主要介紹關於 2D 圖紙面板的動畫效果以及面板視訊的嵌入。通過 

基於 HTML5 WebGL 的樓宇智慧化整合系統（一）

前言       隨著現代通訊技術、計算機技術、控制技術的飛速發展，智慧建築已經成為現代建築發展的主流。智慧建築是以建築物為平臺，兼備資訊設施系統、資訊化應用系統、建築裝置管理系統、公共安全系統等。集結構、系統、服務、管理及其優化組合為一體，向人們提供一個安全、高效、便攜、節能、

基於html5 plus + Mui 移動App開發（三）-食全庫

　　食全庫-食品安全知識庫。 　　食品安全（food safety）指食品無毒、無害，符合應當有的營養要求，對人體健康不造成任何急性、亞急性或者慢性危害。根據倍諾食品安全定義，食品安全是“食物中有毒、有害物質對人體健康影響的公共衛生問題”。食品安全也是一門專門探討在食品加工、儲存、銷售等過程中確保食品衛生及

基於 HTML5 WebGL 的垃圾分類系統

前言 垃圾分類，一般是指按一定規定或標準將垃圾分類儲存、分類投放和分類搬運，從而轉變成公共資源的一系列活動的總稱。分類的目的是提高垃圾的資源價值和經濟價值，力爭物盡其用。垃圾在分類儲存階段屬於公眾的私有品，垃圾經公眾分類投放後成為公眾所在小區或社群的區域性準公共資源，垃圾分類搬運到垃圾集中點或轉運站後成為沒

基於 HTML5 + WebGL 實現 3D 挖掘機系統

前言 在工業網際網路以及物聯網的影響下，人們對於機械的管理，機械的視覺化，機械的操作視覺化提出了更高的要求。如何在一個系統中完整的顯示機械的執行情況，機械的執行軌跡，或者機械的機械動作顯得尤為的重要，因為這會幫助一個不瞭解這個機械的小白可以直觀的瞭解機械的執行情況，以及機械的所有可能發生的動作，對於三一或者其

基於 HTML5 + WebGL 的垃圾分類系統

前言 垃圾分類，一般是指按一定規定或標準將垃圾分類儲存、分類投放和分類搬運，從而轉變成公共資源的一系列活動的總稱。分類的目的是提高垃圾的資源價值和經濟價值，力爭物盡其用。垃圾在分類儲存階段屬於公眾的私有品，垃圾經公眾分類投放後成為公眾所在小區或社群的區域性準公共資源，垃圾分類搬運到垃圾集中點或轉運站後成為沒有

基於 HTML5 + WebGL 的 3D 太陽系系統

前言 近年來隨著引力波的發現、黑洞照片的拍攝、火星上存在水的證據發現等科學上的突破，以及文學影視作品中諸如《三體》、《流浪地球》、《星際穿越》等的傳播普及，宇宙空間中那些原本遙不可及的事物離我們越來越近，人們對未知文明的關注和對宇宙空間的好奇達到了前所未有的高度。站在更高的立足點上，作為人類這個物種中的一員，

基於 HTML5 WebGL 的 CPU 監控系統

前言 科技改變生活，科技的發展帶來了生活方式的巨大改變。隨著通訊技術的不斷演進，5G 技術應運而生，隨時隨地萬物互聯的時代已經來臨。5G 技術不僅帶來了更快的連線速度和前所未有的使用者體驗，也為製造業，微電子及積體電路發展帶來了巨大的發展機遇和挑戰。 5G 技術商業實施過程中，5G 網路芯片面臨低功耗、低延時

Java實驗--基於Swing的簡單的歌曲信息管理系統（三）

img dbo check clas str http 按鈕 cancel uuid 轉載請註明出處，上一篇《Java實驗--基於Swing的簡單的歌曲信息管理系統（二）》介紹了項目的目錄結構和Dao層，本篇主要講解界面的繪制和業務層Service。 登錄界面 　　登錄

基於SSM框架的博客系統（二）博主登錄功能

erl 映射 import incr pac 加密 actor gets AC 一、 準備 1.數據庫 創建表db_blogger: 1 DROP TABLE IF EXISTS `t_blogger`; 2 3 CREATE TABLE `t_bl

基於ASP.NET的新聞管理系統（二）效果展示

後臺 family 技術 .net image 密碼 src 管理系 修改密碼 5. 新聞管理系統開發與實現 5.1前臺新聞頁面 主頁面 新聞欄展示新聞 搜索新聞 菜單欄鏈接新聞 後臺登錄界面 大管理員後臺管理界面 小管理員後臺管理界面 修改密

基於egg.js的開源商城系統（apshop）

apshop 基於egg.js的單商戶系統，目前僅實現PC端，後續會增加微信端 原始碼：https://github.com/inmyjs/apshop 商城管理端原始碼：https://github.com/inmyjs/apshop_admin 寫在前面： 這是我的一

基於BP神經網路的數字識別基礎系統（三）

基於BP神經網路的數字識別基礎系統（三） （接上篇） 上一篇的連結：http://blog.csdn.net/z_x_1996/article/details/60779141 上篇博文中筆者簡單的介紹了一下梯度下降演算法，這裡接著為大家介紹增量梯度下降演算法。 2.2.

基於Java Web的網上圖書商城管理系統——（三）

三、詳細設計 1.註冊 regist.jsp頁面------>UserServlet----->UserDao                   &

整合SpringMVC框架+Mybatis框架開發人力資源管理系統（三）

確定系統中的實體，建立資料庫表以及持久化類 1、確定系統所用到的實體、實體屬性以及各實體之間的聯絡同時建立資料庫表 本系統按照功能需求共涉及六個實體，分別是使用者User、員工Employee、職位Job、部門Dept、公告Notice、檔案Document，各實體之間的聯絡如下：

Yii 2.0 搭建基於RBAC許可權的後臺管理系統 （二）

三、RBAC整合AdminLTE後臺主題對選單進行控制1.  配置APACHE虛擬主機在 <XAMPP安裝路徑>\apache\conf\extra\httpd-vhosts.conf檔案末尾追加<VirtualHost *:80>     Serve

快速開發基於 HTML5 網路拓撲圖應用--入門篇（一）

計算機網路的拓撲結構是引用拓撲學中研究與大小，形狀無關的點、線關係的方法。把網路中的計算機和通訊裝置抽象為一個點，把傳輸介質抽象為一條線，由點和線組成的幾何圖形就是計算機網路的拓撲結構。網路的拓撲結構反映出網中各實體的結構關係，是建設計算機網路的第一步，是實現各種網路協議的基礎，它對網路的效能，系統的可靠性

Android彈幕實現：基於B站彈幕開源系統（3）-文字彈幕的完善和細節調整

Android彈幕實現：基於B站彈幕開源系統（3）本文在附錄1，2的基礎上再次對非同步獲取彈幕並顯示彈幕完善邏輯和程式碼，集中在上層Java程式碼部分：package zhangphil.danmaku; import android.app.Activity; imp

新一代基於大資料的管理資訊系統（MIS）報表需求開發

需求： 1.從後臺資料庫，通過spark連線hadoop（大量資料） 2.然後通過將資料在後臺（主要使用java）封裝成前臺需要的格式（一般是json格式），這一步中包含了service，DAO，spring配置以及使用，struts2的配置以及使用，如sql部分過於複雜