基于WebGL架构的3D可视化平台—粮仓3D场景

news/2024/11/21 1:46:51/

前言

什么才是智慧粮仓

正所谓“国以民为本，民以食为天”。粮食既是关系国计民生和国家经济安全的重要战略物资，也是人民群众最基本的生活资料。其中粮仓是粮食建设的根基，对保障粮食安全尤为重要。随着信息化技术发展，全国各地开始智慧粮仓的建设：

可视一体化，让粮仓“智慧”升级

可视：粮仓的园区、仓区、仓库、设备的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',})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, -15, 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',})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, -15, 0],// 指定页面的哪个点放到localPosition位置上(百分比)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,});
});

http://www.ppmy.cn/news/690027.html

相关文章

50代码HTML5 Canvas 3D 编辑器优雅搞定

50代码HTML5 Canvas 3D 编辑器优雅搞定

原创 文章， 转载请标明出处 https://blog.csdn.net/liuwei000000/article/details/83378837 1024程序员节刚过，手痒想实现一个html的3d编辑器，看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>，都觉得太复杂，一个3d编辑器…
阅读更多...
基于ThingJS开发的WebGL H5停车场三维可视化管理Demo

基于ThingJS开发的WebGL H5停车场三维可视化管理Demo

前言 随着社会的发展&#xff0c;城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术&#xff0c;集控制硬件、软件于一体。随着科技的发展&#xff0c;停车场…
阅读更多...
monoSLAM

monoSLAM

单目相机的优点&#xff08;和双目相机相比&#xff09;&#xff1a;双目相机测得的深度距离收到基线长度的限制&#xff0c;单目相机就可以解决这个问题。 参考博客&#xff1a;http://blog.csdn.net/heyijia0327/article/details/50758944 &#xff08;一定要看&#xff0c…
阅读更多...
Mooo

Mooo

【题目描述】 有 N 个能量发射站排成一行&#xff0c;每个发射站i都有不相同的高度 Hi&#xff0c;并能向两边&#xff08;当然两端的只能向一边&#xff09;同时发射能量值为 Vi 的能量&#xff0c;并且发出的能量只被两边最近的且比它高的发射站接收。 显然每个发射站有可能接…
阅读更多...
mood

mood

心情不好
阅读更多...
demo.

demo.

Demo源代码 <?php header(X-XSS-Protection: 0); $xss isset($_GET[xss])? $_GET[xss] : ; $xss str_replace(array("(",")","&","\\","<",">",""), , $xss); echo "<img sr…
阅读更多...
ADMM

ADMM

背景知识 对偶上升 等式约束优化问题&#xff1a; f f f是凸函数&#xff0c;2.1的拉格朗日项为&#xff1a; 其对偶函数为&#xff1a; inf代表下确界&#xff0c;之所以用下确界而不是用min&#xff0c;可能是因为有些函数没有极值&#xff08;定义域取不到&#xff09…
阅读更多...
TO moya

TO moya

谢谢你在我的BLOG上面的回复&#xff01;关于你说的"使用Netmeeting SDK"实现点对点的通信其实是很简单的。打开一个记事本&#xff0c;拷贝如下的代码&#xff1a; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> &…
阅读更多...
最新文章

Copyright @ 2022~2023