如何用基于WebGL架构的3D可视化平台搭建-设备管理系统

jiekechoo 发布于2019-08-23 14:05 / 3011人阅读

摘要：下面我们将用平台来模拟一个设备管理系统。查看是否创建了定时器第三步，创建摄像机面板，烟感报警面板以及控制设备的开关，这里简单调整一下面板位置之后会增加两个创建设备的按钮。创建对象数组，以及数组标识第五步，为每个设备对应的创建控制开关。

国内高层建筑不断兴建，它的特点是高度高、层数多、体量大。面积可达几万平方米到几十万平方米。这些建筑都是一个个庞然大物，高高的耸立在地面上，这是它的外观，而随之带来的内部的建筑设备也是大量的。为了提高设备利用率，合理地使用能源，加强对建筑设备状态的监视等，自然地就提出了楼宇自动化控制系统。下面我们将用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搭建个人博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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