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

最新推荐文章于 2024-06-22 19:10:00 发布

_Ginkgo

最新推荐文章于 2024-06-22 19:10:00 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/nioooom/article/details/88029295

版权

本文介绍了智慧粮仓的概念，强调了粮食安全和信息化技术在粮仓建设中的作用。通过3D可视化，实现粮仓的园区、仓区等3D展示，以及粮情、动环等信息的查询与设备控制，同时具备预防粮食问题的能力。文中还提供了Demo的实现步骤，包括加载场景资源、视角导航、信息面板交互和粮仓动画效果。

摘要由CSDN通过智能技术生成

前言

什么才是智慧粮仓

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

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

可视：粮仓的园区、仓区、仓库、设备的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