2. 程式人生 > >使用用基於WebGL架構的3D視覺化平臺ThingJS搭建-裝置管理系統

使用用基於WebGL架構的3D視覺化平臺ThingJS搭建-裝置管理系統

阿新 • • 發佈：2018-12-15

國內高層建築不斷興建，它的特點是高度高、層數多、體量大。面積可達幾萬平方米到幾十萬平方米。這些建築都是一個個龐然大物，高高的聳立在地面上，這是它的外觀，而隨之帶來的內部的建築裝置也是大量的。為了提高裝置利用率，合理地使用能源，加強對建築裝置狀態的監視等，自然地就提出了樓宇自動化控制系統。下面我們將用ThingJS平臺來模擬一個裝置管理系統。

第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilde建立層級，之後再給層級加外立面就出現了當前的效果。詳情移步：CampusBuilder3D場景製作工具

第二步，建立Equipment類，這裡建立。switchControl方法主要一個完成一個計時器的功能來模擬裝置警報。

class Equipment extends THING.Thing {
    constructor(app, name, obj, url) {
        super(app);
        this.name = name;
        this.obj = obj;
        this.url = url;
        this.interval = null;
        this.localPosition = [Math.floor(Math.random() * 7), 2.9, Math.floor(Math.random() * 7)];
    }
    createSelf() {
        app.create({
            type: 
 
'Equipment',
            name: this.name,
            url: this.url,
            parent: this.obj,
            localPosition: this.localPosition,
            angle: 0
        });
    }
    switchControl(ev) {
        var flag;
        var equipment = app.query(this.name)[0];
        app.level.change(equipment);
        
 
if (ev) {
            this.interval = setInterval(function () {
                if (flag) {
                    equipment.style.color = '#FF0000';
                    flag = false;
                } else {
                    flag = true;
                    equipment.style.color = '';
                }
            }, 500);
            console.log(this.interval + "檢視是否建立了定時器");
        } else {
            console.log(this.interval);
            clearInterval(this.interval);
            if (equipment.style.color == '#FF0000')
                equipment.style.color = '';
        }
    }
}
THING.factory.registerClass('Equipment', Equipment);

第三步，建立攝像機面板，煙感報警面板以及控制裝置的開關，這裡簡單調整一下面板位置之後會增加兩個建立裝置的按鈕。

//建立主面板
var panel1 = new THING.widget.Panel({
    titleText: '攝像機列表',
    closeIcon: false, // 是否有關閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel1.position = [80, 0];

var panel2 = new THING.widget.Panel({
    titleText: '煙感報警列表',
    closeIcon: false, // 是否有關閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel2.position = [80, 320];

// 建立任意物件
var dataObj1 = {
    open1: false,
    open2: false,
    open3: false,
    open4: false,
}
var dataObj2 = {
    open5: false,
    open6: false,
    open7: false,
    open8: false,
};

// 動態繫結物體
var open1 = panel1.addBoolean(dataObj1, 'open1').caption('裝置01');
var open2 = panel1.addBoolean(dataObj1, 'open2').caption('裝置02');
var open3 = panel1.addBoolean(dataObj1, 'open3').caption('裝置03');
var open4 = panel1.addBoolean(dataObj1, 'open4').caption('裝置04');
var open5 = panel2.addBoolean(dataObj2, 'open5').caption('裝置01');
var open6 = panel2.addBoolean(dataObj2, 'open6').caption('裝置02');
var open7 = panel2.addBoolean(dataObj2, 'open7').caption('裝置03');
var open8 = panel2.addBoolean(dataObj2, 'open8').caption('裝置04');
第四步，開啟場景層級切換，建立攝像機和煙感報警器各四個，建立一個數字標識index和儲存equipment物件的陣列equipmentGroup。

/建立equipment物件陣列，以及陣列標識
var equipmentGroup = [];
var index = 0;

app.on('load', function (ev) {

    app.level.change(ev.campus);

    for (var i = 0; i < 8; i++) {
        var type = null;
        if (i < 4) {
            type = 'http://model.3dmomoda.cn/models/62A8A75C75044E6AB3D8463FA0CB67AF/0/gltf/';
        } else {
            type = 'http://model.3dmomoda.cn/models/641A9B800DE5431E8C84DC290F8EFDE6/0/gltf/';
        }
        var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type);
        equipment.createSelf();
        equipmentGroup.push(equipment);
    }
});

第五步，為每個裝置對應的建立控制開關。

open1.on('change', function (ev) {
        equipmentGroup[0].switchControl(ev);
    });
    open2.on('change', function (ev) {
        equipmentGroup[1].switchControl(ev);
    });
    open3.on('change', function (ev) {
        equipmentGroup[2].switchControl(ev);
    });
    open4.on('change', function (ev) {
        equipmentGroup[3].switchControl(ev);
    });
    open5.on('change', function (ev) {
        equipmentGroup[4].switchControl(ev);
    });
    open6.on('change', function (ev) {
        equipmentGroup[5].switchControl(ev);
    });
    open7.on('change', function (ev) {
        equipmentGroup[6].switchControl(ev);
    });
    open8.on('change', function (ev) {
        equipmentGroup[7].switchControl(ev);
    });

最後一步，建立兩個按鈕來控制建立裝置。

new THING.widget.Button('建立煙感報警', function () {
    var type = 'http://model.3dmomoda.cn/models/641A9B800DE5431E8C84DC290F8EFDE6/0/gltf/';
    var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type,);
    equipment.createSelf();
    equipmentGroup.push(equipment);
    app.level.change(app.query(equipment.name)[0]);
});

new THING.widget.Button('建立攝像頭', function () {
    var type = 'http://model.3dmomoda.cn/models/62A8A75C75044E6AB3D8463FA0CB67AF/0/gltf/';
    var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type,);
    equipment.createSelf();
    equipmentGroup.push(equipment);
    app.level.change(app.query(equipment.name)[0]);
});

在編寫過程還是走了不少彎路的，最主要的就是計時器的解除安裝問題，最初的版本寫來寫去發現不能控制警報的關閉，後來才 發現計時器沒有解除安裝，警報不但不會關閉而且閃動的頻率越來越快。更改之後建立了Equipment這個類來控制所有裝置，通過建立這個類的物件給他賦id，父物體，模型地址。這裡控制器在開關被觸發的時候建立一個新的計時器並賦給的這個物件，再次觸發時清除這個計時器，警報的動畫就關閉了。演示地址

最後附上完整程式碼：

/**
 * 說明：建立App，url為場景地址（可選）
 */
var app = new THING.App({
    url: "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/CampusBuilder20181126134710",    // 場景地址
    "skyBox": "BlueSky"
});

//建立主面板
var panel1 = new THING.widget.Panel({
    titleText: '裝置列表',
    closeIcon: false, // 是否有關閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
    titleImage: 'https://www.thingjs.com/static/images/example/icon.png'
});
panel1.position = [80, 0];

var panel2 = new THING.widget.Panel({
    titleText: '裝置列表',
    closeIcon: false, // 是否有關閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
    titleImage: 'https://www.thingjs.com/static/images/example/icon.png'
});
panel2.position = [80, 320];
// 建立任意物件
var dataObj1 = {
    open1: false,
    open2: false,
    open3: false,
    open4: false,
}
var dataObj2 = {
    open5: false,
    open6: false,
    open7: false,
    open8: false,
};

// 動態繫結物體
var open1 = panel1.addBoolean(dataObj1, 'open1').caption('裝置01');
var open2 = panel1.addBoolean(dataObj1, 'open2').caption('裝置02');
var open3 = panel1.addBoolean(dataObj1, 'open3').caption('裝置03');
var open4 = panel1.addBoolean(dataObj1, 'open4').caption('裝置04');
var open5 = panel2.addBoolean(dataObj2, 'open5').caption('裝置01');
var open6 = panel2.addBoolean(dataObj2, 'open6').caption('裝置02');
var open7 = panel2.addBoolean(dataObj2, 'open7').caption('裝置03');
var open8 = panel2.addBoolean(dataObj2, 'open8').caption('裝置04');

new THING.widget.Button('建立煙感報警', function () {
    var type = 'http://model.3dmomoda.cn/models/641A9B800DE5431E8C84DC290F8EFDE6/0/gltf/';
    var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type,);
    equipment.createSelf();
    equipmentGroup.push(equipment);
    app.level.change(app.query(equipment.name)[0]);
});

new THING.widget.Button('建立攝像頭', function () {
    var type = 'http://model.3dmomoda.cn/models/62A8A75C75044E6AB3D8463FA0CB67AF/0/gltf/';
    var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type,);
    equipment.createSelf();
    equipmentGroup.push(equipment);
    app.level.change(app.query(equipment.name)[0]);
});
//建立equipment物件陣列，以及陣列標識
var equipmentGroup = [];
var index = 0;


app.on('load', function (ev) {

    app.level.change(ev.campus);

    for (var i = 0; i < 8; i++) {
        var type = null;
        if (i < 4) {
            type = 'http://model.3dmomoda.cn/models/62A8A75C75044E6AB3D8463FA0CB67AF/0/gltf/';
        } else {
            type = 'http://model.3dmomoda.cn/models/641A9B800DE5431E8C84DC290F8EFDE6/0/gltf/';
        }
        var equipment = new Equipment(app, 'equipment' + index++, app.query('floor' + (Math.floor(Math.random() * 5) + 1))[0], type);
        equipment.createSelf();
        equipmentGroup.push(equipment);
    }

    open1.on('change', function (ev) {
        equipmentGroup[0].switchControl(ev);
    });
    open2.on('change', function (ev) {
        equipmentGroup[1].switchControl(ev);
    });
    open3.on('change', function (ev) {
        equipmentGroup[2].switchControl(ev);
    });
    open4.on('change', function (ev) {
        equipmentGroup[3].switchControl(ev);
    });
    open5.on('change', function (ev) {
        equipmentGroup[4].switchControl(ev);
    });
    open6.on('change', function (ev) {
        equipmentGroup[5].switchControl(ev);
    });
    open7.on('change', function (ev) {
        equipmentGroup[6].switchControl(ev);
    });
    open8.on('change', function (ev) {
        equipmentGroup[7].switchControl(ev);
    });

});

class Equipment extends THING.Thing {
    constructor(app, name, obj, url) {
        super(app);
        this.name = name;
        this.obj = obj;
        this.url = url;
        this.interval = null;
    }
    createSelf() {
        app.create({
            type: 'Equipment',
            name: this.name,
            url: this.url,
            parent: this.obj,
            localPosition: [Math.floor(Math.random() * 7), 2.9, Math.floor(Math.random() * 7)],
            angle: 0
        });
    }
    switchControl(ev) {
        var flag;
        var equipment = app.query(this.name)[0];
        app.level.change(equipment);
        if (ev) {
            this.interval = setInterval(function () {
                if (flag) {
                    equipment.style.color = '#FF0000';
                    flag = false;
                } else {
                    flag = true;
                    equipment.style.color = '';
                }
            }, 500);
            console.log(this.interval + "檢視是否建立了定時器");
        } else {
            console.log(this.interval);
            clearInterval(this.interval);
            if (equipment.style.color == '#FF0000')
                equipment.style.color = '';
        }
    }
}

THING.factory.registerClass('Equipment', Equipment);

 

相關推薦

使用用基於WebGL架構的3D視覺化平臺ThingJS搭建-裝置管理系統

國內高層建築不斷興建，它的特點是高度高、層數多、體量大。面積可達幾萬平方米到幾十萬平方米。這些建築都是一個個龐然大物，高高的聳立在地面上，這是它的外觀，而隨之帶來的內部的建築裝置也是大量的。為了提高裝置利用率，合理地使用能源，加強對建築裝置狀態的監視等，自然地就提出了樓宇自動化控制系統。下面我們將用Thing

基於WebGL架構的3D視覺化平臺—三維裝置管理（ThingJS實現裝置管理3D視覺化）

國內高層建築不斷興建，它的特點是高度高、層數多、體量大。面積可達幾萬平方米到幾十萬平方米。這些建築都是一個個龐然大物，高高的聳立在地面上，這是它的外觀，而隨之帶來的內部的建築裝置也是大量的。為了提高裝置利用率，合理地使用能源，加強對建築裝置狀態的監視等，自然地就提出了樓宇自動化控制系統。下面我們將用Thing

基於WebGL架構的3D視覺化平臺ThingJS——實現櫃子開關門動畫

ThingJS是基於WebGL架構的物聯網3D視覺化PasS平臺，零門檻、高效率、低成本開發各類3D應用，大大降低了傳統3D視覺化開發。 第一步，載入場景（場景為預先搭建好的），這裡可以用摸摸搭自己搭建場景連結，摸摸搭官網：http://www.3dmomoda

基於WebGL架構的3D視覺化平臺—實現汽車行走路線演示

    小車行走路線演示New VS Old 剛接觸ThingJS的時候，寫的一個小車開進小區的演示，今天又看了教程中有movePath這個方法就重新寫了一遍，其中也遇到了一些問題，尤其突出的問題就是小車過彎的尷尬表現。 先給大家看看Old版本，Old版演示地址。 再看看New版

基於WebGL架構的3D視覺化平臺—新風系統演示

新風系統是根據在密閉的室內一側用專用裝置向室內送新風，再從另一側由專用裝置向室外排出，在室內會形成“新風流動場”，從而滿足室內新風換氣的需要。實施方案是：採用高風壓、大流量風機、依靠機械強力由一側向室內送風，由另一側用專門設計的排風風機向室外排出的方式強迫在系統內形成新風流動場。在送風的同時對進入室內的空氣進

基於WebGL架構的3D視覺化平臺—家居城3D展示

本文將模擬一個“宜家”，讓大家足不出戶在家裡就能更加直觀立體的挑選傢俱。 第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilde建立層級，之後再給層級加外立面就出現了當前的效果。這次我們其

基於WebGL架構的3D視覺化平臺—小區水，電，燃氣管線演示

地下的管線錯綜複雜如何，圖紙並不能完全滿足實際需求，我們就用ThingJS平臺來模擬一個小區水，電，天然氣管線演示。 第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilde建立層級，之後再

基於WebGL架構的3D視覺化平臺—停車場管理系統

隨著社會的發展，城市中的汽車越來越多。車輛集中存放管理的場所被人類提出車輛進出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場系統應用現代機械電子及通訊科學技術，集控制硬體、軟體於一體。隨著科技的發展，停車場管理系統也日新月異，目前最為專業化的停車場系統為免取卡停車場。下面我們就

關於3D視覺化平臺！

　　3D視覺化，就是把複雜抽象的資料資訊，以合適的視覺元素及視角去呈現，方便大家理解、記憶、傳遞！　　3D視覺化平臺採用3D虛擬模擬技術，將機房進行虛擬模擬，並以此為依託來呈現IT裝置的一切狀況，使得監控資訊的整合就變得直觀、便捷，資料中心機房作為整個智慧檢務工程系統的資訊樞紐擔負著重要作用，現已完成我省資料

三維視覺化資料中心機房監控管理系統

前言 IDC（Internet Data Center，指網際網路資料中心）行業有這樣一句操作效率的名言："你無法控制沒有經過測量的事物。"言外之意：要想減少能源浪費情況就必須從最基本的測量開始。但如果無法得知能源都用到了什麼地方的話，管理人員就無法知悉將重點放哪。 本文介紹通過 HT 打

基於HTML5的WebGL呈現A星演算法的3D視覺化

function init() { w = 40; m = 20; d = w * m / 2; gridRows = []; dm = new ht.DataModel();

基於 HTML5 WebGL 的挖掘機 3D 視覺化應用

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

基於 HTML5 WebGL 的加油站 3D 視覺化監控

前言 隨著數字化，工業網際網路，物聯網的發展，我國加油站正向有人值守，無人操作，遠端控制的方向發展，傳統的人工巡查方式逐漸轉變為以自動化控制為主的線上監控方式，即採用資料採集與監控系統 SCADA。SCADA 系統的推廣使用，大大提高了我國加油站的監控效率，本文所講的則是通過對加油站的視覺化建模，結合 HT&

基於 HTML5 和 WebGL 的地鐵站 3D 視覺化系統

前言 工業網際網路，物聯網，視覺化等名詞在我們現在資訊化的大背景下已經是耳熟能詳，日常生活的交通，出行，吃穿等可能都可以用資訊化的方式來為我們表達，在傳統的視覺化監控領域，一般都是基於 Web SCADA 的前端技術來實現 2D 視覺化監控，本系統採用 Hightopo 的 HT for Web 產品來構造輕

B/S 端構建的基於 WebGL 3D 視覺化檔案館管理系統

前言 檔案管理系統是通過建立統一的標準以規範整個檔案管理，包括規範各業務系統的檔案管理的完整的檔案資源資訊共享服務平臺，主要實現檔案流水化採集功能。為企事業單位的檔案現代化管理，提供完整的解決方案，檔案管理系統既可以自成系統，為使用者提供完整的檔案管理和網路查詢功能，也可以與本單位的OA辦公自動化和DPM設計

基於 HTML5 + WebGL 的宇宙(太陽系) 3D 視覺化系統

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

基於 HTML5 + WebGL 的無人機 3D 視覺化系統

前言 近年來，無人機的發展越發迅速，既可民用於航拍，又可軍用於偵察，涉及行業廣泛，也被稱為“會飛的照相機”。但作為軍事使用，無人機的各項效能要求更加嚴格、重要。本系統則是通過 Hightopo 的  HT for Web  產品來搭建的一款 無人機

基於 HTML5 WebGL 的發動機 3D 視覺化系統

前言 --     工業機械產品大多體積龐大、運輸成本高，在參加行業展會或向海外客戶銷售時，如果沒有實物展示，僅憑靜態、簡單的圖片說明書介紹，無法讓客戶全面瞭解產品，不僅工作人員製作麻煩，客戶看得也費力。如果能在 Web 上做 3D 裝置展示，銷售人員可以不限平臺隨時給客戶介紹演示。還可

微服務架構視覺化平臺實踐

為什麼需要架構視覺化 隨著企業進行微服務架構改造，系統架構複雜度越來越高，架構變化日益頻繁，微服務改造後的實際架構模型可能與預期已經產生了巨大差異，架構師或系統運維人員很難準確記憶所有資源例項的構成和互動情況；其次，系統架構在動態演化過程中可能引入了一些不可靠的因素，比如弱依賴變強依

WebGL停車場三維視覺化管理系統 DEMO（thingjs 停車場3D視覺化管理）

隨著社會的發展，城市中的汽車越來越多。車輛集中存放管理的場所被人類提出車輛進出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場系統應用現代機械電子及通訊科學技術，集控制硬體、軟體於一體。隨著科技的發展，停車場管理系統也日新月異，目前最為專業化的停車場系統為免取卡停車場。 簡易DEMO