如何用基于WebGL架構的3D可視化平臺搭建-設備管理系統

jiekechoo 發布于2019-08-23 14:05 / 3031人閱讀

摘要：下面我們將用平臺來模擬一個設備管理系統。查看是否創建了定時器第三步，創建攝像機面板，煙感報警面板以及控制設備的開關，這里簡單調整一下面板位置之后會增加兩個創建設備的按鈕。創建對象數組，以及數組標識第五步，為每個設備對應的創建控制開關。

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

第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilder創建層級，之后再給層級加外立面就出現了當前的效果。詳情移步：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);

GPU云服務器云服務器如何用搭建linux 如何用vps搭建梯子如何用vps搭建網站如何用wordpress搭建個人博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100074.html

SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
基于WebGL架構的3D可視化平臺—平面圖導航（一）

摘要：接下來我們就用平面導航圖來解決這一問題。第二部分我會給頁加上鼠標懸停事件讓頁的標簽和我們場景中的一起動起來完整代碼加載場景代碼場景地址場景相關面板相關平面圖導航事件相關點擊事件返回事件前言利用CampusBuilder來搭建自己的虛擬世界過程有這樣一個問題:如何快速聚焦到虛擬場景的某一位置。當然我們可以創建幾個按鈕對應查找我們需要去的位置（參照物）并聚焦，但是按鈕并不是很炫酷也不能...

Labradors 2019-08-23 14:31 評論0 收藏0
基于WebGL架構的3D可視化平臺ThingJS—讓糧倉“智慧”升級

摘要：隨著信息化技術發展，全國各地開始智慧糧倉的建設，我們可以通過一個視頻看一下使用可視化平臺做的可視應用，可視一體化，讓糧倉智慧升級。構建糧倉內糧情的監控預警診斷分析一體化的可視化平臺。首先我們先了解一下基于WebGL架構的3D可視化平臺——ThingJS是什么？ ThingJS是優锘科技開發的一套面向物聯網應用的在線3D可視化應用開發及運營PaaS平臺，以 ThingJS云視PaaS服...

aaron 2019-08-23 16:45 評論0 收藏0
基于WebGL架構（ThingJS）3D可視化平臺—停車場管理系統

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

weij 2019-08-23 14:14 評論0 收藏0