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

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

原文地址：https://www.cnblogs.com/ThingJS3D/p/10122841.html

时间： 2024-08-11 16:56:18

使用用基于WebGL架构的3D可视化平台ThingJS搭建-设备管理系统的相关文章

基于 HTML5 和 WebGL 的地铁站 3D 可视化系统

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

HTML5+WebGL 的加油站 3D 可视化监控

前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SCADA 系统的推广使用,大大提高了我国加油站的监控效率,本文所讲的则是通过对加油站的可视化建模,结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控.三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合,充分发挥了两种技术的核心优势,并通过数据库进行数据共享,共同构成

基于运营架构的办公流程能力平台

基于运营架构的办公流程能力平台服务于大.中型企事业单位,为企业业务流程重组提供信息化解决方案和支撑. 办公流程管理以流程化管理为核心,此核心包括:流程建模及其生命周期管理.流程执行管理及其生命周期管理.流程监控与分析三部分.围绕流程管理的生命周期展开,他能体现出管理的能力.效益.效率. 流程建模及其生命周期管理包括:业务需求.开发建设.上线(并形成流程目录).变更.下线.最终销毁全生命周期管理.相关的业务功能有:流程快速开发和流程建模.流程后评估: 流程执行及其生命周期管理包括:启动流程实例.流

PaaS的发展将释放物联网开发效率 ——基于云架构的物联网云平台解决方案

2018年7月6日.7日,为期两天的 ArchSummit 全球架构师峰会在深圳·华侨城洲际酒店拉开帷幕.在7月6日解决方案专场活动上,BoCloud博云CTO李亚琼博士带来了<物联网多路数据处理基础上的云平台架构设计实践>,本次分享以物联网+云的技术挑战为切入点,通过实际案例讲解多路数据聚合架构的设计要点,以及云.互联网架构在物联网系统中的应用. IOT时代,云计算是物联网的核心 物联网,Internet of things(即 IoT ),是新一代信息技术的重要组成部分,也是"信

关于3D可视化平台！

3D可视化,就是把复杂抽象的数据信息,以合适的视觉元素及视角去呈现,方便大家理解.记忆.传递! 3D可视化平台采用3D虚拟仿真技术,将机房进行虚拟仿真,并以此为依托来呈现IT设备的一切状况,使得监控信息的整合就变得直观.便捷,数据中心机房作为整个智慧检务工程系统的信息枢纽担负着重要作用,现已完成我省数据中心机房环境和资产的可视化浏览,可清晰完整展现整个机房环境和运行状况. 系统以3D可视化作为重要管理手段,对数据中心资产设备,资源设备运行状况等进行全面监控和管理,包括基础设备监控和基础设备管理两

基于 HTML5 + WebGL 的无人机 3D 可视化系统

前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的  HT for Web  产品来搭建的一款 无人机 3D 可视化系统,通过对无人机及其信息的全景展示来模拟无人机状态的监控. 系统中包含 4 种展示模式:实体模式 .热力模式.线框模式和内部模式,通过飞机下方操作按钮即可进行模式切换. 预览地址:https://hightopo.com/demo/pl

3D可视化平台助力数据中心IT运维！

IT运维部门核心价值是保障业务系统的正常运行,而支撑业务系统的IT环境又非常复杂,涉及人力.网络.服务器.IDC.机柜.各类应用等等资源.任何一个环节出现问题,都将"牵一发而动全身".可见,IT系统资源监控与管理非常重要. 因此,我们需要将影响应用系统稳定运行的几个要素数据3D可视化.比如:基础设施资源使用情况:应用性能指标及系统整体运行情况,如这个系统是否可用.整体健康度等.总体来说,可以用到的常用可视化手段有数据统计.拟物化关系.流程关系.各种图表展现以及3D动画技术等. 在当下大

Babylonjs 初级教程---微软的基于webgl的H5 3D游戏引擎

Babylon.js 页面图像库 游戏创建系统! Hi!欢迎阅读 Babylon.js 初级教程, 这是后面学习最棒的基于Javascript的网页图形库框架所需必备知识的一个基础介绍. 你想知道什么是框架么?  你可以把框架认为成 建筑里的脚手架, 它支撑你围绕它创建新东西而不必为底层细节操心. Babylon.js构造里一个复杂的系统, 让网页图形库更容易使用. 我们希望以一种非常快速的方式教给你大量的信息.  通常这里的任务都有多于一种方式达成.  我希望你自己去发现其它的方式.  根据对

创建基础场景---基于WebGL的H5 3D游戏引擎BabylonJS

在本教程里, 我们将用Babylon.js创建一个基础的3D场景. 具有两个造型物的基础场景 在你开始之前,请确定你有个支持WebGL的浏览器 (比如:IE11+, 火狐4+, 谷歌浏览器9+, Opera15+, 等.). HTML部分 首先, 创建一个基础的HTML5网页: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=