three.js 如何使用webgl实现3D储能,3D储能站,3D智慧储能、储能柜的三维可视化解决方案——第十七课

前言
上节课我们讲了《3D光伏发电》 , 与之配套的就是能量存储
【three.js 如何使用webgl实现3D储能,3D储能站,3D智慧储能、储能柜的三维可视化解决方案——第十七课】这节课我们主要讲讲储能 , 储能站 , 在分布式能源系统中起到调节用对电的尖峰平谷进行削峰填谷的作用 。特别是小型储能站 , 更加灵活 , 因地适宜 。能够很好的解决电力在时空上的不平衡 。储能电站技术的应用贯穿于电力系统发电、输电、配电、用电的各个环节 。
储能站可视化解决方案 , 有效直观的提升储能调节效率 。对设备进行状态告警监控 , 储能监控 。
定义介绍:
储能站:电能存储、转换及释放的设备集合站点
储能柜:电能储存的基础单元 , 通常单个柜每日的储电量达到了几千度 , 类似大型充电宝
阵列模块:一组储能柜 , 通过逻辑电路进行连接 , 实现统一充电放电 。
应用系统:是一套对设备状态、设备储能、工作状态 , 历史数据、预判调节等综合管理的软件 , 尽量减少人工的接入与实现全自动化 。
言归正传 , 我们这篇主要讲解储能系统的可视化解决方案 。从应用层解析储能站工作原理 , 储能站+物联网+可视化模式 , 监控储能设备状态 , 统计储能情况 , 有效调配用电效能 。
一、效果展示
1.1、储能站整体风貌
整体界面主要是三维+图表 , 两边的图表通过echart实现即可 。
天气预报调用天气接口:
   <iframe width="100%" style="margin-left:1.02vh;height:9vh" scrolling="no" frameborder="0" allowtransparency="true"                            src=https://www.huyubaike.com/biancheng/"https://i.tianqi.com/?c=code&a=getcode&id=9&py=changshou&icon=1&color=white"> 1.2、储能柜内部结构
双击储能柜 , 虚化其它建筑 , 展示储能柜内部结构
实现代码如下:
        httpGet("../js/models/pdxinner.json", function (res) {//请求模型代码            res[0].position.x = _obj.position.x;            res[0].position.y = _obj.position.y - 70;            res[0].position.z = _obj.position.z;            res[0].scale.x = 0.75;            res[0].scale.y = 0.75;            res[0].scale.z = 0.75;            //解析代码            WT3DObj.commonFunc.loadModelsByJsons(res, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true, function () {                setInterval(function () {                    var s1 = WT3DObj.commonFunc.findObject("dev_pdx_innerOBJCREN3");                    var s2 = WT3DObj.commonFunc.findObject("dev_pdx_innerOBJCREN24");                    var b1 = WT3DObj.commonFunc.findObject("dev_pdx_innerOBJCREN23");                    var b2 = WT3DObj.commonFunc.findObject("dev_pdx_innerOBJCREN4");                    var yh = { y: 1 };                    new TWEEN.Tween(yh).to({//补间动画                        y: 130                    }, 3500).onUpdate(function (a) {                        s1.scale.z = this.y;                        s2.scale.z = this.y;                        b1.scale.z = 1.01 - this.y / 130;                        b2.scale.z = 1.01 - this.y / 130;                    }).onComplete(function () {                    }).start();                }, 5000);                dev_pdx_inner = WT3DObj.commonFunc.findObject("dev_pdx_inner");                var dev_pdx_innerJson = WT3DObj.commonFunc.findJsonObject("dev_pdx_inner");                var flash1 = [];                var flash2 = [];                var flash3 = [];                var flashobjs = [];                WT3DObj.commonFunc.flashObjs(flash1, "flash1",0x00ffff,0,200,0);                WT3DObj.commonFunc.flashObjs(flash2, "flash2",0xffff00,0,200,0);                WT3DObj.commonFunc.flashObjs(flash3, "flash3", 0x00ffff, 0, 200, 0);            });        })

经验总结扩展阅读