AI 助理
备案控制台
开发者社区 大数据 文章 正文

基于WebGL架构的3D可视化平台—三维设备管理（ThingJS实现楼宇设备管理3D可视化）

2018-12-14 2389
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 国内高层建筑不断兴建，它的特点是高度高、层数多、体量大。面积可达几万平方米到几十万平方米。这些建筑都是一个个庞然大物，高高的耸立在地面上，这是它的外观，而随之带来的内部的建筑设备也是大量的。为了提高设备利用率，合理地使用能源，加强对建筑设备状态的监视等，自然地就提出了楼宇自动化控制系统。

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

　　

文章标签：
数据可视化
关键词：
架构平台
架构可视化
架构3d
webgl架构3d可视化平台
thingjs
目录
相关文章
土木林森
|
2月前
|
SQL 存储 分布式计算
ODPS技术架构深度剖析与实战指南——从零开始掌握阿里巴巴大数据处理平台的核心要义与应用技巧
【10月更文挑战第9天】ODPS是阿里巴巴推出的大数据处理平台，支持海量数据的存储与计算，适用于数据仓库、数据挖掘等场景。其核心组件涵盖数据存储、计算引擎、任务调度、资源管理和用户界面，确保数据处理的稳定、安全与高效。通过创建项目、上传数据、编写SQL或MapReduce程序，用户可轻松完成复杂的数据处理任务。示例展示了如何使用ODPS SQL查询每个用户的最早登录时间。
土木林森
119 1
赵渝强老师
|
27天前
|
SQL 数据采集 分布式计算
【赵渝强老师】基于大数据组件的平台架构
本文介绍了大数据平台的总体架构及各层的功能。大数据平台架构分为五层：数据源层、数据采集层、大数据平台层、数据仓库层和应用层。其中，大数据平台层为核心，负责数据的存储和计算，支持离线和实时数据处理。数据仓库层则基于大数据平台构建数据模型，应用层则利用这些模型实现具体的应用场景。文中还提供了Lambda和Kappa架构的视频讲解。
赵渝强老师
108 3
【赵渝强老师】基于大数据组件的平台架构
1778908750453455
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
医疗行业的语音识别技术解析：AI多模态能力平台的应用与架构
AI多模态能力平台通过语音识别技术，实现实时转录医患对话，自动生成结构化数据，提高医疗效率。平台具备强大的环境降噪、语音分离及自然语言处理能力，支持与医院系统无缝集成，广泛应用于门诊记录、多学科会诊和急诊场景，显著提升工作效率和数据准确性。
1778908750453455
119 3
穿过生命散发芬芳
|
1月前
|
监控 API 调度
开放源代码平台Flynn的架构与实现原理
【10月更文挑战第21天】应用程序的生命周期涉及从开发到运行的复杂过程，包括源代码、构建、部署和运行阶段。
穿过生命散发芬芳
41 2
技术自由圈/原疯狂创客圈
|
2月前
|
机器学习/深度学习 自然语言处理 搜索推荐
大厂 10Wqps智能客服平台，如何实现架构演进？
40岁老架构师尼恩，凭借深厚的架构功力，指导众多小伙伴成功转型大模型架构师，实现职业逆袭。尼恩的《LLM大模型学习圣经》系列PDF，从基础理论到实战应用，全面覆盖大模型技术，助力读者成为大模型领域的专家。该系列包括《从0到1吃透Transformer技术底座》《从0到1吃透大模型的基础实操》《从0到1吃透大模型的顶级架构》等，内容详实，适合不同水平的读者学习。此外，尼恩还分享了多个智能客服平台的实际案例，展示了大模型在不同场景中的应用，为读者提供了宝贵的实践经验。更多技术资料和指导，请关注尼恩的《技术自由圈》公众号。
技术自由圈/原疯狂创客圈
55 0
大厂 10Wqps智能客服平台，如何实现架构演进？
喜欢猪猪
|
2月前
|
消息中间件 缓存 Java
亿级流量电商平台微服务架构详解
【10月更文挑战第2天】构建一个能够处理亿级流量的电商平台微服务架构是一个庞大且复杂的任务，这通常涉及到多个微服务、数据库分库分表、缓存策略、消息队列、负载均衡、熔断降级、分布式事务等一系列高级技术和架构模式。
喜欢猪猪
97 3
弹性计算小冉
|
3月前
|
Cloud Native Java 编译器
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
随着云计算技术的不断发展，云服务商们不断推出高性能、高可用的云服务器实例，以满足企业日益增长的计算需求。阿里云推出的倚天实例，凭借其基于ARM架构的倚天710处理器，提供了卓越的计算能力和能效比，特别适用于云原生、高性能计算等场景。然而，有的用户需要将传统基于x86平台的应用迁移到倚天实例上，本文将介绍如何将基于x86架构平台的应用迁移到阿里云倚天实例的服务器上，帮助开发者和企业用户顺利完成迁移工作，享受更高效、更经济的云服务。
弹性计算小冉
104 13
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
梦笔生花伟
|
3月前
|
缓存 物联网 数据库
如何帮助我们改造升级原有架构——基于TDengine 平台
一、简介 TDengine 核心是一款高性能、集群开源、云原生的时序数据库（Time Series Database，TSDB），专为物联网IoT平台、工业互联网、电力、IT 运维等场景设计并优化，具有极强的弹性伸缩能力。同时它还带有内建的缓存、流式计算、数据订阅等系统功能，能大幅减少系统设计的复杂度，降低研发和运营成本，是一个高性能、分布式的物联网IoT、工业大数据平台。 二、TDengine 功能与组件 TDengine 社区版是一开源版本，采用的是 AGPL 许可证，它具备高效处理时序数据所需要的所有功能，包括: SQL 写入、无模式写入和通过第三方工具写入 S标准 SQL 查
梦笔生花伟
84 13
131王
|
3月前
|
监控 Android开发 iOS开发
深入探索安卓与iOS的系统架构差异：理解两大移动平台的技术根基在移动技术日新月异的今天，安卓和iOS作为市场上最为流行的两个操作系统，各自拥有独特的技术特性和庞大的用户基础。本文将深入探讨这两个平台的系统架构差异，揭示它们如何支撑起各自的生态系统，并影响着全球数亿用户的使用体验。
本文通过对比分析安卓和iOS的系统架构，揭示了这两个平台在设计理念、安全性、用户体验和技术生态上的根本区别。不同于常规的技术综述，本文以深入浅出的方式，带领读者理解这些差异是如何影响应用开发、用户选择和市场趋势的。通过梳理历史脉络和未来展望，本文旨在为开发者、用户以及行业分析师提供有价值的见解，帮助大家更好地把握移动技术发展的脉络。
131王
104 6
音视频牛哥
|
3月前
|
编解码 Linux 开发工具
Linux平台x86_64|aarch64架构RTMP推送|轻量级RTSP服务模块集成说明
支持x64_64架构、aarch64架构（需要glibc-2.21及以上版本的Linux系统, 需要libX11.so.6, 需要GLib–2.0, 需安装 libstdc++.so.6.0.21、GLIBCXX_3.4.21、 CXXABI_1.3.9）。
音视频牛哥
88 0

热门文章

最新文章

  • 1
    最新发布！阿里云卓越架构框架重磅升级
  • 2
    日交易笔百万级，Ping++的大数据平台架构
  • 3
    究竟啥才是互联网架构“高并发”
  • 4
    FFA 2023 「流式湖仓」专场：从技术原理到应用实践打造流式湖仓新架构
  • 5
    微博feed系统的推(push)模式和拉(pull)模式和时间分区拉模式架构探讨
  • 6
    大型网站的核心架构要素
  • 7
    实战分层架构
  • 8
    深入linux内核架构读书笔记-进程管理和调度
  • 9
    【转】Linux 概念架构的理解
  • 10
    歪理邪说解析架构设计师上午考试试题之十一（分析2010下半年系统架构设计师上午试题51-56题）
  • 1
    You Only Cache Once:YOCO 基于Decoder-Decoder 的一个新的大语言模型架构
    251
  • 2
    构建未来：云原生架构在企业数字化转型中的关键作用
    45
  • 3
    【Uniapp 专栏】Uniapp 架构设计与原理探究
    237
  • 4
    构建高效微服务架构：后端开发的新范式
    53
  • 5
    构建未来：云原生架构在现代企业中的应用与挑战
    62
  • 6
    构建未来：云原生架构在现代企业中的应用与挑战
    46
  • 7
    LabVIEW生产者消费者架构
    165
  • 8
    【MongoDB 专栏】MongoDB 与微服务架构的结合
    124
  • 9
    CVPR 202：擅长处理复杂场景和语言表达，清华&博世提出全新实例分割网络架构MagNet
    170
  • 10
    构建未来：云原生架构在企业数字化转型中的关键作用
    45

    • 相关课程

    更多
  • Serverless 函数计算架构
  • 架构的演进
  • MySQL企业常见架构与调优经验分享
  • 企业Web常用架构LAMP-LNMP实战
  • 企业级互联网分布式系统应用架构学习
  • 高校精品课-上海交通大学 -企业级应用体系架构

    • 相关电子书

    更多
  • MaxCompute Serverless 架构演进
  • 阿里云消息队列的 Serverless架构演进
  • 青团社云原生架构实践—亿级灵活用工平台的架构实践

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • 配置流程编排实现根据天气情况播放歌曲
  • 基于函数计算一键部署掌上游戏机
  • DataV平面地图组件入门
  • 快速搭建移动端可视化看板
  • DataV Board用户界面概览
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月