基于WebGL架构的3D可视化ThingJS平台—粮仓3D场景
前言
什么才是智慧粮仓
正所谓“国以民为本,民以食为天”。粮食既是关系国计民生和国家经济安全的重要战略物资,也是人民群众最基本的生活资料。其中粮仓是粮食建设的根基,对保障粮食安全尤为重要。随着信息化技术发展,全国各地开始智慧粮仓的建设:
可视一体化,让粮仓“智慧”升级
可视:粮仓的园区、仓区、仓库、设备的3D可视;
可查:3D场景内查看粮情、动环、仓容、能耗、视频监控、出入库等信息;
可控:3D场景内控制仓门、仓窗、通风口、风机、空调等设备设施的开关状态;
可防:系统通过集成数据,提前预知粮食霉菌、虫害的产生与生长趋势,提早制定防治措施,实现粮食绿色、生态储藏。
以上摘自【万物可视系列之三】物联网可视化让粮仓“智慧升级”:[原文链接]
(http://blog.uinnova.cn/articles/2018/09/26/1469670300647.html)
查看DEMO
实现
第一步,加载场景资源。
//加载场景代码
var app = new THING.App({// 场景地址"url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/CB20190228115320",//背景设置"skyBox": "BlueSky"
});
第二步,创建视角导航栏。给每一个按钮添加监听事件,当切换观察模式时,将其他观察模式关闭并将摄像头的视角锁定。当选择的观察模式为全局观察模式时允许摄像头操作app.camera.inputEnabled = true。
var toolbar2 = new THING.widget.Panel({ width: '250px', captionPos: 'hover' });
toolbar2.position = [10, 10];// 数据对象
var dataObj = {area01: false,area02: false,area03: false,overall: true,}THING.Utils.dynamicLoad(['lib/iconfont.js'], function () {var button1 = toolbar2.addImageBoolean(dataObj, 'area01').caption('宿舍区域').url('#momoda_lc-icontubiao22');var button2 = toolbar2.addImageBoolean(dataObj, 'area02').caption('工厂区域').url('#momoda_lc-icontubiao10');var button3 = toolbar2.addImageBoolean(dataObj, 'area03').caption('粮仓区域').url('#momoda_lc-icontubiao21');var button4 = toolbar2.addImageBoolean(dataObj, 'overall').caption('全景预览').url('#momoda_lc-icontubiao28');button1.on('change', function (ev) {dataObj.area02 = false;dataObj.area03 = false;dataObj.overall = false;app.camera.flyTo({'position': [-22.356943810261143, 13.20176112267712, 28.19482648304762],'target': [-53.24507055455286, 0.6162378602394785, 6.3743932170050375],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button2.on('change', function (ev) {dataObj.area01 = false;dataObj.area03 = false;dataObj.overall = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [-2.8177753324747767, 16.090400887405227, 19.94073098974482],'target': [-2.685240969328181, -1.3204502556714408, 3.6209106265430773],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button3.on('change', function (ev) {dataObj.area01 = false;dataObj.area02 = false;dataObj.overall = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [33.313117413004846, 20.17892561437951, 30.105105312212782],'target': [50.84710727906235, -1.7298146965736394, 10.602912178089504],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button4.on('change', function (ev) {dataObj.area01 = false;dataObj.area02 = false;dataObj.area03 = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [-18.079999999999977, 80.427, 101.051],'target': [13.422, 2.597, 2.226],'time': 2000,'complete': function () {app.camera.inputEnabled = true;}});});
});
第三步,鼠标单击事件为粮仓添加信息面板,以及右键删除信息面板重置摄像头位置。
var panel;
app.on('SingleClick', function (ev) {if (ev.button == 2) {if (panel) {panel.destroy();panel = null;}if (curObject) {curObject.playAnimation('close');curObject = null;app.camera.flyTo({'position': [33.313117413004846, 20.17892561437951, 30.105105312212782],'target': [50.84710727906235, -1.7298146965736394, 10.602912178089504],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});}return;}var object = ev.object;if (object == null || object.name == "field")return;if (panel != null) {panel.destroy();panel = null;}panel = new THING.widget.Panel({width: '200px',cornerType: 'polyline'})var data = {type: '小米',admin: 'Kerwin',surplus: Math.round(Math.random() * 100) + '%',temperature: Math.round(Math.random() * 10) + '°'}// 绑定物体身上相应的属性数据panel.addString(object, 'id').caption('仓库编号');panel.addString(data, 'admin').caption('管理员');panel.addString(data, 'type').caption('库存种类');panel.addString(data, 'surplus').caption('剩余空间');panel.addString(data, 'temperature').caption('仓库温度');panel.position = [500, 50];//创建UIAnchor面板var uiAnchor = app.create({// 类型type: 'UIAnchor',// 父节点设置parent: object,// 要绑定的页面的 element 对象element: panel.domElement,// 设置 localPosition 为 [0, 0, 0]localPosition: [0, -30, 0],// 指定页面的哪个点放到localPosition位置上(百分比)pivot: [-0.2, 2.1]});uiAnchor["panel"] = panel;return uiAnchor;
});
第四步,鼠标左键双击时,粮仓的open动画开启并将当前粮仓保存为curObject,当curObject发生改变时执行close动画并且为curObject重新赋值。
var curObject;
app.on('dblclick', function (ev) {if (ev.button == 2)return;if (curObject) {curObject.playAnimation('close');curObject = null;}var object = ev.object;curObject = object;curObject.playAnimation('open');app.camera.flyTo({object: curObject,});
});
完整代码
//加载场景代码
var app = new THING.App({// 场景地址"url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/CB20190228115320",//背景设置"skyBox": "BlueSky"
});var toolbar2 = new THING.widget.Panel({ width: '250px', captionPos: 'hover' });
toolbar2.position = [10, 10];// 数据对象
var dataObj = {area01: false,area02: false,area03: false,overall: true,}THING.Utils.dynamicLoad(['lib/iconfont.js'], function () {var button1 = toolbar2.addImageBoolean(dataObj, 'area01').caption('宿舍区域').url('#momoda_lc-icontubiao22');var button2 = toolbar2.addImageBoolean(dataObj, 'area02').caption('工厂区域').url('#momoda_lc-icontubiao10');var button3 = toolbar2.addImageBoolean(dataObj, 'area03').caption('粮仓区域').url('#momoda_lc-icontubiao21');var button4 = toolbar2.addImageBoolean(dataObj, 'overall').caption('全景预览').url('#momoda_lc-icontubiao28');button1.on('change', function (ev) {dataObj.area02 = false;dataObj.area03 = false;dataObj.overall = false;app.camera.flyTo({'position': [-22.356943810261143, 13.20176112267712, 28.19482648304762],'target': [-53.24507055455286, 0.6162378602394785, 6.3743932170050375],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button2.on('change', function (ev) {dataObj.area01 = false;dataObj.area03 = false;dataObj.overall = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [-2.8177753324747767, 16.090400887405227, 19.94073098974482],'target': [-2.685240969328181, -1.3204502556714408, 3.6209106265430773],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button3.on('change', function (ev) {dataObj.area01 = false;dataObj.area02 = false;dataObj.overall = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [33.313117413004846, 20.17892561437951, 30.105105312212782],'target': [50.84710727906235, -1.7298146965736394, 10.602912178089504],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});});button4.on('change', function (ev) {dataObj.area01 = false;dataObj.area02 = false;dataObj.area03 = false;// 摄像机飞行到某位置app.camera.flyTo({'position': [-18.079999999999977, 80.427, 101.051],'target': [13.422, 2.597, 2.226],'time': 2000,'complete': function () {app.camera.inputEnabled = true;}});});});var panel;
app.on('SingleClick', function (ev) {if (ev.button == 2) {if (panel) {panel.destroy();panel = null;}if (curObject) {curObject.playAnimation('close');curObject = null;app.camera.flyTo({'position': [33.313117413004846, 20.17892561437951, 30.105105312212782],'target': [50.84710727906235, -1.7298146965736394, 10.602912178089504],'time': 2000,'complete': function () {app.camera.inputEnabled = false;}});}return;}var object = ev.object;if (object == null || object.name == "field")return;if (panel != null) {panel.destroy();panel = null;}panel = new THING.widget.Panel({width: '200px',cornerType: 'polyline'})var data = {type: '小米',admin: 'Kerwin',surplus: Math.round(Math.random() * 100) + '%',temperature: Math.round(Math.random() * 10) + '°'}// 绑定物体身上相应的属性数据panel.addString(object, 'id').caption('仓库编号');panel.addString(data, 'admin').caption('管理员');panel.addString(data, 'type').caption('库存种类');panel.addString(data, 'surplus').caption('剩余空间');panel.addString(data, 'temperature').caption('仓库温度');panel.position = [500, 50];//创建UIAnchor面板var uiAnchor = app.create({type: 'UIAnchor',parent: object,element: panel.domElement,localPosition: [0, -30, 0],pivot: [-0.2, 2.1]});uiAnchor["panel"] = panel;return uiAnchor;
});var curObject;
app.on('dblclick', function (ev) {if (ev.button == 2)return;if (curObject) {curObject.playAnimation('close');curObject = null;}var object = ev.object;curObject = object;curObject.playAnimation('open');app.camera.flyTo({object: curObject,});
});
基于WebGL架构的3D可视化ThingJS平台—粮仓3D场景相关推荐
- 数字孪生-智慧园区3D可视化管理平台
自主研发的基于HTML5的3D图形渲染引擎+mmsDT开发平台,为Web可视化提供了丰富的展现形式和视觉效果.木棉树软件聚焦工业数字孪生的生产管控.智慧城市的监控运维等可视化应用领域,产品 ...
- 3D可视化信息管理平台让运维管理更高效率!
3D可视化,就是把复杂抽象的数据信息,以合适的视觉元素及视角去呈现,方便大家理解.记忆.传递! 因此,我们需要将影响应用系统稳定运行的几个要素数据3D可视化.比如:基础设施资源使用情况:应用性能指标及 ...
- 基于WebGL架构的3D可视化平台—三维设备管理(ThingJS实现楼宇设备管理3D可视化)...
国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设 ...
- 基于WebGL架构的3D可视化平台—停车场管理系统
前言 随着社会的发展,城市中的汽车越来越多.车辆集中存放管理的场所被人类提出车辆进出的秩序.车辆存放的安全性.车辆存放管理的有偿性等要求.停车场系统应用现代机械电子及通讯科学技术,集控制硬件.软件于一 ...
- 基于WebGL架构的3D可视化平台—新风系统演示
新风系统是根据在密闭的室内一侧用专用设备向室内送新风,再从另一侧由专用设备向室外排出,在室内会形成"新风流动场",从而满足室内新风换气的需要.实施方案是:采用高风压.大流量风机.依 ...
- 基于WebGL的三维数据可视化大屏开发流 ThingJS
三维数据大屏可视化系统包含多源数据连接.生成二维/三维视图.构建可视化大屏.大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考. 多 ...
- Sovit3D数字孪生智慧海上风电场3D可视化管理平台
建设背景 双碳目标背景下,大力发展新能源产业已成为各界共识.风能凭借其资源总量丰富.环保.运行管理自动化程度高.度电成本持续降低等突出的优势,目前已成为开发和应用最为广泛的可再生能源之一,是全球可再生 ...
- NASA样本实验室之3D渲染图,一分钟搭建教程!3D 可视化 ThingJS
ThingJS在实现物理空间与信息空间的融合过程中,空间数据模型无疑是两者之间重要的联系纽带. 号外!美国宇航局(NASA)约翰逊航天中心向公众发布了目前正在建设中的实验室的渲染图,该实验室将用于研究 ...
- 基于WebGL架构的3D可视化平台—城市地下管线3D可视化
前言 城市管网是城市最重要的公共基础设施之一,与城市的发展和居民日常生活息息相关.根据不同的市政建设,管网分供水.排污.供暖.通信.电力等多种类别,其广泛分布遍及地下.随着城市发展建设所衍生出空间分布 ...
最新文章
- wxWidgets:wxRadioButton类用法
- 巨头垄断,Facebook直接封杀了一个国家!
- Web安装项目创建桌面快捷方式
- Codeforces Round #561 (Div. 2)ABC
- 机器学习实战(十)利用K-means算法对未标注数据分组
- 前端学习(3167):react-hello-react之鼠标移入效果
- [算法]判断一个数是不是2的N次方
- 网络爬虫--16.BeautifulSoup4
- android1.6,令人遗憾的Android 1.6系统_戴尔 Mini5(Streak)_手机其它OS-中关村在线
- MySql数据同步(双机热备)已正式应用上平台
- weui 导航悬浮固定
- Android开发学习笔记:数据存取之File浅析
- DevOps运维开发一体化
- 转为字符数组_py字符打印照片
- 图像空域增强:灰度映射法
- 面试官:说说什么是 Java 内存模型(JMM)?
- 支付宝 错误代码 insufficient-isv-permissions 错误原因: ISV权限不足,建议在开发者中心检查签约是否已经生效
- 蹩脚的Access分页语句
- MacOS 开启latex人生(mactex+texmaker安装)
- 邓白氏码查询不能用_邓白氏编码查询有哪些意义?
热门文章
- Python可变/不可变对象
- java语言输出当前日期时间的方法
- 平衡企业管理与协作Worktile让工作更简单
- 今天在隧道一车上的一幕
- 如何自己开发一个Android APP(2)——项目框架
- ca76a_c++_流文件打开输入输出文件模式
- 144显示器只有60_Win10系统下144hz显示器刷新率只显示60hz如何解决
- 由一份诊断报告引发的思考
- 解决mybatis的SELECT command denied to user 'root'@'192.168.1.47' for table 'user'的报错。mysql用户权限修改,表权限修改。
- ATECC508A芯片开发笔记(六):产生CSR以及申请证书(X.509)流程及其内容分析