如何用基于WebGL架構(gòu)的3D可視化平臺(tái)搭建-設(shè)備管理系統(tǒng)

jiekechoo 發(fā)布于2019-08-23 14:05 / 3041人閱讀

摘要：下面我們將用平臺(tái)來模擬一個(gè)設(shè)備管理系統(tǒng)。查看是否創(chuàng)建了定時(shí)器第三步，創(chuàng)建攝像機(jī)面板，煙感報(bào)警面板以及控制設(shè)備的開關(guān)，這里簡單調(diào)整一下面板位置之后會(huì)增加兩個(gè)創(chuàng)建設(shè)備的按鈕。創(chuàng)建對象數(shù)組，以及數(shù)組標(biāo)識(shí)第五步，為每個(gè)設(shè)備對應(yīng)的創(chuàng)建控制開關(guān)。

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

第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilder創(chuàng)建層級，之后再給層級加外立面就出現(xiàn)了當(dāng)前的效果。詳情移步：CampusBuilder3D場景制作工具

第二步，創(chuàng)建Equipment類，這里創(chuàng)建。switchControl方法主要一個(gè)完成一個(gè)計(jì)時(shí)器的功能來模擬設(shè)備警報(bào)。

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 + "查看是否創(chuàng)建了定時(shí)器");
        } else {
            console.log(this.interval);
            clearInterval(this.interval);
            if (equipment.style.color == "#FF0000")
                equipment.style.color = "";
        }
    }
}
THING.factory.registerClass("Equipment", Equipment);

第三步，創(chuàng)建攝像機(jī)面板，煙感報(bào)警面板以及控制設(shè)備的開關(guān)，這里簡單調(diào)整一下面板位置之后會(huì)增加兩個(gè)創(chuàng)建設(shè)備的按鈕。

//創(chuàng)建主面板
var panel1 = new THING.widget.Panel({
    titleText: "攝像機(jī)列表",
    closeIcon: false, // 是否有關(guān)閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
});
panel1.position = [80, 0];

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

// 創(chuàng)建任意對象
var dataObj1 = {
    open1: false,
    open2: false,
    open3: false,
    open4: false,
}
var dataObj2 = {
    open5: false,
    open6: false,
    open7: false,
    open8: false,
};

// 動(dòng)態(tài)綁定物體
var open1 = panel1.addBoolean(dataObj1, "open1").caption("設(shè)備01");
var open2 = panel1.addBoolean(dataObj1, "open2").caption("設(shè)備02");
var open3 = panel1.addBoolean(dataObj1, "open3").caption("設(shè)備03");
var open4 = panel1.addBoolean(dataObj1, "open4").caption("設(shè)備04");
var open5 = panel2.addBoolean(dataObj2, "open5").caption("設(shè)備01");
var open6 = panel2.addBoolean(dataObj2, "open6").caption("設(shè)備02");
var open7 = panel2.addBoolean(dataObj2, "open7").caption("設(shè)備03");
var open8 = panel2.addBoolean(dataObj2, "open8").caption("設(shè)備04");

第四步，開啟場景層級切換，創(chuàng)建攝像機(jī)和煙感報(bào)警器各四個(gè)，創(chuàng)建一個(gè)數(shù)字標(biāo)識(shí)index和保存equipment對象的數(shù)組equipmentGroup。

/創(chuàng)建equipment對象數(shù)組，以及數(shù)組標(biāo)識(shí)
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);
    }
});

第五步，為每個(gè)設(shè)備對應(yīng)的創(chuàng)建控制開關(guān)。

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);
    });

最后一步，創(chuàng)建兩個(gè)按鈕來控制創(chuàng)建設(shè)備。

new THING.widget.Button("創(chuàng)建煙感報(bào)警", 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("創(chuàng)建攝像頭", 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]);
});

在編寫過程還是走了不少彎路的，最主要的就是計(jì)時(shí)器的卸載問題，最初的版本寫來寫去發(fā)現(xiàn)不能控制警報(bào)的關(guān)閉，后來才發(fā)現(xiàn)計(jì)時(shí)器沒有卸載，警報(bào)不但不會(huì)關(guān)閉而且閃動(dòng)的頻率越來越快。更改之后創(chuàng)建了Equipment這個(gè)類來控制所有設(shè)備，通過創(chuàng)建這個(gè)類的對象給他賦id，父物體，模型地址。這里控制器在開關(guān)被觸發(fā)的時(shí)候創(chuàng)建一個(gè)新的計(jì)時(shí)器并賦給的這個(gè)對象，再次觸發(fā)時(shí)清除這個(gè)計(jì)時(shí)器，警報(bào)的動(dòng)畫就關(guān)閉了。演示地址

最后附上完整代碼：

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

//創(chuàng)建主面板
var panel1 = new THING.widget.Panel({
    titleText: "設(shè)備列表",
    closeIcon: false, // 是否有關(guān)閉按鈕
    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: "設(shè)備列表",
    closeIcon: false, // 是否有關(guān)閉按鈕
    dragable: true,
    retractable: true,
    opacity: 0.9,
    hasTitle: true,
    titleImage: "https://www.thingjs.com/static/images/example/icon.png"
});
panel2.position = [80, 320];
// 創(chuàng)建任意對象
var dataObj1 = {
    open1: false,
    open2: false,
    open3: false,
    open4: false,
}
var dataObj2 = {
    open5: false,
    open6: false,
    open7: false,
    open8: false,
};

// 動(dòng)態(tài)綁定物體
var open1 = panel1.addBoolean(dataObj1, "open1").caption("設(shè)備01");
var open2 = panel1.addBoolean(dataObj1, "open2").caption("設(shè)備02");
var open3 = panel1.addBoolean(dataObj1, "open3").caption("設(shè)備03");
var open4 = panel1.addBoolean(dataObj1, "open4").caption("設(shè)備04");
var open5 = panel2.addBoolean(dataObj2, "open5").caption("設(shè)備01");
var open6 = panel2.addBoolean(dataObj2, "open6").caption("設(shè)備02");
var open7 = panel2.addBoolean(dataObj2, "open7").caption("設(shè)備03");
var open8 = panel2.addBoolean(dataObj2, "open8").caption("設(shè)備04");

new THING.widget.Button("創(chuàng)建煙感報(bào)警", 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("創(chuàng)建攝像頭", 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]);
});
//創(chuàng)建equipment對象數(shù)組，以及數(shù)組標(biāo)識(shí)
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 + "查看是否創(chuàng)建了定時(shí)器");
        } else {
            console.log(this.interval);
            clearInterval(this.interval);
            if (equipment.style.color == "#FF0000")
                equipment.style.color = "";
        }
    }
}

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

云服務(wù)器 GPU云服務(wù)器如何用搭建linux 如何用vps搭建梯子如何用vps搭建網(wǎng)站如何用wordpress搭建個(gè)人博客

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100074.html

發(fā)表評論

登陸后可評論

0條評論

jiekechoo

男|高級講師

我要關(guān)注我要私信

TA的文章

拉勾Linux運(yùn)維實(shí)戰(zhàn)訓(xùn)練營

閱讀 3352·2021-11-22 15:22
是學(xué)Java好呢？還是學(xué)C++更有前途？

閱讀 2877·2021-10-12 10:12
SpinServers：美國高配服務(wù)器4路e5-4640v2(40核/80線程)、768G內(nèi)存、4*

閱讀 2171·2021-08-21 14:10
cubecloud，6周年，洛杉磯新品VPS5折(三網(wǎng)回程AS4837)，中國香港CN2/美國CN2

閱讀 3837·2021-08-19 11:13
CSS選擇器的分類

閱讀 2856·2019-08-30 15:43
python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁設(shè)計(jì)<二>

閱讀 3238·2019-08-29 16:52
css3 做一個(gè)類似于翻書特效的3D動(dòng)畫

閱讀 456·2019-08-29 16:41
100行l(wèi)ess實(shí)現(xiàn)bootstrap的12柵格布局

閱讀 1444·2019-08-29 12:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

如何用基于WebGL架構(gòu)的3D可視化平臺(tái)搭建-設(shè)備管理系統(tǒng)

相關(guān)文章

**SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片**

**基于WebGL架構(gòu)的3D可視化平臺(tái)—平面圖導(dǎo)航（一）**

**基于WebGL架構(gòu)的3D可視化平臺(tái)ThingJS—讓糧倉“智慧”升級**

基于WebGL架構(gòu)（ThingJS）3D可視化平臺(tái)—停車場管理系統(tǒng)

發(fā)表評論

0條評論

jiekechoo

男|高級講師

TA的文章

拉勾Linux運(yùn)維實(shí)戰(zhàn)訓(xùn)練營

是學(xué)Java好呢？還是學(xué)C++更有前途？

SpinServers：美國高配服務(wù)器4路e5-4640v2(40核/80線程)、768G內(nèi)存、4*

cubecloud，6周年，洛杉磯新品VPS5折(三網(wǎng)回程AS4837)，中國香港CN2/美國CN2

CSS選擇器的分類

python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁設(shè)計(jì)<二>

css3 做一個(gè)類似于翻書特效的3D動(dòng)畫

100行l(wèi)ess實(shí)現(xiàn)bootstrap的12柵格布局

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

如何用基于WebGL架構(gòu)的3D可視化平臺(tái)搭建-設(shè)備管理系統(tǒng)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！