如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

这篇具有很好参考价值的文章主要介绍了如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

序:

  这几年观察下来,大部分做物联网三维可视化解决方案的企业或个人, 基本都绕不开3D机房。包括前面也讲过这样的案例《使用webgl(three.js)创建自动化抽象化3D机房,3D机房模块详细介绍(抽象版一)》  《 使用webgl(three.js)创建科技版3D机房,3D机房微模块详细介绍(升级版三)—— 1》

  随着技术的快速发展,机房的数量和规模也在不断扩大。然而,传统的数据中心管理方式已经无法满足现代社会的需求。在这种情况下,3D机房数据中心应运而生。

  顾名思义,三维机房数据中心是指利用三维仿真技术,将数据中心的空间信息、设备信息、人员流动信息等各类信息集成在三维模型中,实现数据中心的全面可视化。这种新型的数据中心管理方式,能够提高管理效率,降低运营成本,提升数据中心的可靠性。

  但是,三维机房解决方案已经发展了好多年,逃不开建模,数据连接,个性化定制。一个机房项目,开发周期长,研发成本高。不说如何颠覆一下这部分行业应用,也得想想如何提升一下效率。

  综述,低代码模式的三维机房解决方案呼之欲出。当然还是基于three.js(webgl)引擎架构

  我们还是闲话少叙,切入正题。

前言:

  首先,我们要确定目标与需求。

  目标:低代码生成三维机房系统。

     全套完备的三维数据中心系统,目标任务过于繁重,所以先得将目标切割,先完成低代码模式下的单个机房或者是微模块的前端三维方案。这就符合了自我效能理论,分割事务,及时得到正向反馈,不断完成小目标,看到成效,最终才能做出结果。

  需求:通过上面的目标分割,我们可以简单概述出需求。简单一句话,通过配置,快速生成3D机房,包括其常用的业务逻辑。

  这里我们明确了包含常用业务逻辑,而个性化特殊化的业务需求我们可以在完成这部分后,基于现有系统做叠加与拓展。为了方便拓展,先用简易系统要考虑到合理性与延续性。

   综上所述,我们要做一个通过简单配置即可自动生成一个3D机房前端系统。后续我们再通过做一个工具,通过工具拖拉拽来代替写配置这一步。

技术交流 1203193731@qq.com

交流微信:

    如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

如果你有什么要交流的心得 可邮件我

一、效果展示

1.1、机房效果

通过简单配置生成一个带有微模块、单排柜以及动环设备的机房模型

 文章来源地址https://www.toymoban.com/news/detail-710669.html

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

根据数据自动生成机柜内部设备

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

 

1.2、json配置

  分析行业需求,提炼配置信息

  房间建筑:长宽高属性,以及门窗属性。这里必须且必要省掉墙的皮肤属性、不规则房间特性等等

  设备:类型、位置,尺寸、关联数据id、这里要放弃设备细节。考虑的越多,越不容易完成目标

  通过上面分析,我们可以基本得出一个简单的配置信息

  1.2.1、建筑房间配置:

 

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

 

  {
        "type": "wall",
        "name": "wall_4", //名称
        "size": {
          "x": 8000, //墙长度
          "z": 100, //墙厚度
          "y": 1000 //墙体高度
        }, //墙的起始点位置
        "startPosition": { //墙体的起始位置 默认是墙体的左下角
          "x": -4000,
          "y": 0,
          "z": 2700
        },
        "doorHoles": [ //
          {
            "id": "door_001",//门禁设备id
            "type": 2, //0 x方向单门 1 x反方向单门 2 双门 3表示窗户洞
            "start": 400, //相对于尺寸参数的x 离0多长 比如400 表示门洞离x 0点400
            "width": 600, //门洞宽
            "height": 700, //门洞高
            "thickness": 40 //门厚度
          },
          {
            "type": 3,
            "start": 2600,
            "width": 2000,
            "height": 700,
            "rideHeight": 100, //窗户离墙的底边高度
            "thickness": 10 //窗的厚度
          }
        ],
      },

  1.2.2、机柜配置

  a、冷通道配置

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

 {
        "id": "101", //冷通道id 唯一
        "type": "minRoom", //冷通道类型
        "dataId": "101", //数据id 唯一
        "position": { //冷通道位置 是指冷通道中心点在场景中的位置
          "x": -2000,
          "y": 0,
          "z": 0
        },
        "rotationDir": "Z", //冷通道门对准的方向 X 表示坐标系x轴方向 Z表示坐标系z方向
        "rackLength": 9, //冷通道单边机柜的个数
        "children": [//冷通道内设备
          {
            "id": "1_1", //设备id
            "type": "ljkt", //设备类型 取值范围:ljkt ltg rack 分别表示列间空调  列头柜  机柜
            "dataId": "1_1", //数据id
            "row": "1", //表示在冷通道哪一排 取值1或者2 在第一排 或者第二排
            "col": "1", //表示在某排第几个
            "width": 0.5//占用宽度比例
          },
         ]
        ..........
      },

  b、单排柜配置

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

  {
        "id": "1_1", //机柜id 自定义 唯一性 建议跟数据库资产id保持一致
        "type": "rack", //类型
        "name": "rack_1_1", //机柜模型名称 唯一性
        "dataId": "1_1", //机柜数据id 这里是指数据库存储的机柜资产id
        "position": { //机柜位置 是指机柜中心点在场景中的位置
          "x": -2550,
          "y": 450,
          "z": 1315
        },
      }

  1.2.3、设备配置

 

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

 

 { //温湿度传感器
        "type": "wdcgq",//设备类型
        "id": "2",//id 保持全局唯一
        "dataId": "wd1",//数据id
        "position": {//模型中心点在场景中的位置
          "x": 0,
          "y": 1200,
          "z": 0
        },"scale": {//缩放 所有值不可为0
          "x": 1,
          "y": 1,
          "z": 1
        }
      }

1.3、业务逻辑

上面的配置,机房模型已经生成,接下来就是基于模型与数据,生成功能逻辑

例如、利用率、温度云图、承重、告警等等

 

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 温度云图

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 承重、功耗

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

 

二、代码解析

2.1、合理封装

 封装分为两部分

第一部分是模型封装,更加不同类型 以及属性生成模型/

例如:

  * 创建普通地板
  * @param {any} name  名称  floor
  * @param {any} size  尺寸 {x:8000,z:5000,y:100} 长 宽 厚
  * @param {any} CenterPosition 中心点位置  {x:0,z:-60,y:0}
  * @param {any} rotation 旋转  {x:0,y:0,z:0} 角度用
  */
function createFloor(name, size, CenterPosition, rotation) {
   ......
    return model;
}
 /**
  * 创建机房空气地板
  * @param {any} name  名称  floor
  * @param {any} size  尺寸 {x:8000,z:5000,y:100} 长 宽 厚
  * @param {any} CenterPosition 中心点位置  {x:0,z:-60,y:0}
  * @param {any} rotation 旋转  {x:0,y:0,z:0} 角度用
  */
function createDataCenterFloor(name, size, CenterPosition, rotation) {

    ......
    return model;
}
/**
 * 创建墙体
 * @param {any} name 名称 wall_4
 * @param {any} size 尺寸{x:8000,z:100,y:1000} 长 厚 高
 * @param {any} startPosition 起始点位置 { "x": -4858.313, "y": 0, "z": 1264.35 }
 * @param {any} doorHoles 门洞  [
                                    {
                                        type:2 ,//0 x方向单门 1 x反方向单门 2 双门 3窗户
                                        start: 400,//相对于尺寸参数的x 离0多长 比如400 表示门洞离x 0点400
                                        width:600,//门洞宽
                                        height:700,//门洞高
                                        thickness:40,//门洞厚度
                                        rideHeight:100//离地高度
                                    }

                                ]

 * @param {any} rotation 旋转  {x:0,y:0,z:0}
 */
function createWall(name,type, size, startPosition, doorHoles, rotation) {
 ......
    return buildwall;
}

第二部分是封装业务逻辑

将每部分业务逻辑单独封装到方法类中

例如:温度云图

//=======================================================温度=======================================================
function Tempture() {

}

Tempture.prototype.temptureSpaceState = 0;
//温度显示
Tempture.prototype.showTemptureMap = function (callBack) {
    var _this = this;
    if (_this.temptureSpaceState == 0) {
        $("#backBtn").fadeIn();
        layer.closeAll();
        $("#toolbar").fadeOut();
        _this.temptureSpaceState = 1;
        _this.createHeatMapModels("temptureObj", callBack);
        _this.hideAllMsg();
    } else {
        _this.temptureSpaceState = 0;
        _this.hideAllTemptureMapObjs();
    }

}
Tempture.prototype.hideAllTemptureMapObjs = function () {
    WT3DObj.destoryObj("temptureObj");
    for (var i = 0; i < 20; i++) {
        WT3DObj.destoryObj("temptureObj_" + i);
    }
}
//创建热力图
Tempture.prototype.createHeatMapModels = function (name, callBack) {
    var _this = this;
    var scaleRate = 1;
    if (roomConfig.buildData.baseConfig && roomConfig.buildData.baseConfig.normRackSize) {
        scaleRate = roomConfig.buildData.baseConfig.normRackSize.width / 350;
    }
    _this.getHeatMapDataValue(function (_data) {
        var modeljson =  ...;
        WT3DObj.InitAddObject(modeljson);
        for (var i = 0; i < 10; i++) {
            modeljson.position.y += (roomConfig.maxheight / 10) / scaleRate;
            modeljson.name = name + "_" + i;
            modeljson.values = _data.data;
            WT3DObj.InitAddObject(modeljson);
        }
    }, callBack);
};
Tempture.prototype.getHeatMapDataValue = function (suc, callBack) {
    webapi.getTemptureValue(function (result) {

        var heatMapData = {};

        $.each(result, function (_reindex, _reobj) {
            heatMapData["d_" + _reobj.id] = _reobj;
        });

         ...
        var rdata = {
            max: 100,
            data: datas
        };
        if (suc) {
            suc(rdata);
        }
        if (callBack) {
            callBack(mtemp);
        }
    });
}

 

 

2.2、业务隔离

 switch (id) {
            case "div_btn_1"://异常设备
                {
                    clearInterval(_this.alarmSetintervalIndex);
                    $("#btn_1").fadeTo(100, 1);
                    if ($("#btn_1").attr("title") == "告警监控") {
                        $("#btn_1").attr("title", "关闭告警闪动");
                        $("#btn_1").attr("src", "../img/pageimg2/ycsbclose.png");
                        modelBussiness.closeAlarm();
                    } else {
                        _this.flashAlarmBtn();
                        modelBussiness.startAlarm();
                        $("#btn_1").attr("src", "../img/pageimg2/ycsb.png");
                        $("#btn_1").attr("title", "告警监控");
                    }
                }
                break;
            case "div_btn_2"://空间
                {
                    modelBussiness.currentState = 22;
                    modelBussiness.showSpaceRate();
                }
                break;
            case "div_btn_3"://U位
                {
                    modelBussiness.currentState = 23;
                    modelBussiness.showUsageMap();
                }
            
                break;
            case "div_btn_4":
                {
                    modelBussiness.currentState = 24;
                    modelBussiness.showTemptureMap();
                }//温度
                
                break;
            case "div_btn_5"://承重
                {
                    modelBussiness.currentState = 25;
                    modelBussiness.showBearing();
                }
                break;
            case "div_btn_6"://功率
                {
                    modelBussiness.currentState = 26;
                    modelBussiness.showEnergyRate();
                }
                break;

        }
    });

 

三、主要难点

3.1、如何封装模型、提炼参数

  1. 选择关键参数:在模型中可能有很多参数,需要选择出一些关键的参数。例如,一些对模型性能影响较大的参数,或者一些表示模型复杂度的参数等。
  2. 定义计算方法:对于每个关键参数,需要定义一个计算方法。
  3. 提取参数:在模型预测时,需要提取出这些关键参数的值。
  4. 可视化参数:对于一些关键参数,可能还需要进行可视化,以便于理解和优化模型。

3.2、如何在生成的不同房间模型下,还能展现业务功能

  1. 定义业务功能:首先需要明确每个房间所需展现的业务功能
  2. 集成业务功能:将所定义的各项业务功能集成到三维房间模型中
  3. 交互式展示:将三维房间模型与业务功能进行交互式展示。
  4. 场景模拟:根据实际使用场景,模拟不同场景下的业务功能展示。

3.3、如何做数据分离

   统一webapi数据文件,这里主要处理获取数据,数据过滤

  

/*
数据接口
*/
function WebAPI() {
    this.serverHead = "";//idc/
    this.roomid = getQueryString("room") ? getQueryString("room") : "1";
    this.CabInfosCache = null;//机柜数据缓存
    this.OtherDevsCache = null;//所有设备缓存
    this.ServerDevsCache = {};//所有设备缓存
    this.AllDevsCache = null;//所有设备缓存
    this.alarmCache = [];//告警缓存
    this.modelAlarmCache = {};//模型对应告警缓存
    this.wsSocket = null;
    //告警闪动对应的颜色
    this.alarmColors = {
        "L1": 0xff0000,
        "L2": 0xff6600,
        "L3": 0xffff00,
        "L4": 0x0096ff,
    }
    this.urls = {
        enables: "/dataDemo/enable.json",//功能开启关闭接口
        buildData: "/dataDemo/buildData.json",//创建模型接口
        racks: "/dataDemo/racks.json",//机柜信息
        useRates:"/dataDemo/useRates.json",//机柜利用率
        temperatures: "/dataDemo/tempTureData.json",//温度数据
        bearing: "/dataDemo/beringRate.json",//承重
        euRate: "/dataDemo/euRate.json",//功耗
        uvInfos: "/dataDemo/uDetail.json",//u位信息
        otherDevs: "/dataDemo/otherDev.json",//其它动环设备
        DevData: "/dataDemo/otherDevValue.json",//动环设备实时数据
        queryInfos: "/dataDemo/search.json",//查询接口
        alarms: "/dataDemo/alarm.json",//告警
        wsurl: "xxxx",//websocket地址

    }
}
WebAPI.prototype.getEnables = function () {
    var _this = this;
    var url = this.serverHead + this.urls.enables + "?roomId=" + this.roomid;
    url += "&r=" + Math.random();
    var enables = null;
    httpGetSyn(url, function (response) {
        if (response && response.data) {
            enables = response.data;
        }
    }, function (err) {
        console.log(err);
    });
    return enables;
}
.......

 

 由于篇幅原因,我们本节课先到这里,后面我们更新如何创建一个可编辑工具完成配置

 

技术交流 1203193731@qq.com

交流微信:

    如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

如果你有什么要交流的心得 可邮件我

其它相关文章:

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)

如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决方案——第十八课(一)

webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课

webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课(定位升级版)

使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生——第十三课

如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课(炫酷版一)

使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统——第六课

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一)

 

到了这里,关于如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月04日
    浏览(59)
  • WebGL入门之基于WebGL的3D可视化引擎介绍

    WebGL(Web Graphics Library)是一个JavaScript API,用于在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形,而无需使用插件。WebGL通过引入一个非常符合OpenGL ES 2.0的API来实现这一点,该API可以在HTML 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。WebGL完全集

    2024年02月11日
    浏览(46)
  • Unity-WebGL基于JS实现网页录音

          因为该死的Unity不支持WebGL的麦克风,所以只能向网页借力,用网页原生的navigator.getUserMedia录音,然后传音频流给Unity进行转AudioClip播放。       还有一点非常重要:能有同事借力就直接问,厚着脸皮上,我自己闷头两天带加班,不如同事谭老哥加起来提供帮助的俩小

    2023年04月08日
    浏览(44)
  • 如何学习three.js

    学习three.js最好的方法是通过理解它的核心概念和最常用的组件。 除了透视相机,还有正交相机(OrthographicCamera). 不说八股文,就说在实战中的体验: 透视相机,在左右移动时,会变形(会有一种拉扯的感觉); 正交相机不会有拉扯的感觉 上面这三句是你 在用到渲染器时,必定要写的

    2024年01月17日
    浏览(37)
  • 基于Three.js的WebXR渲染入门

    我不会花太多时间讨论 Three.JS 渲染管道的工作原理,因为它在互联网上有详细记录(例如,此链接)。 我将在下图中列出基础知识,以便更容易理解各个部分的去向。 在我们深入了解 WebXR API 本身之前,您应该知道 WebXR 设备 API Polyfill 可通过两种主要方式帮助开发人员: 如

    2024年02月11日
    浏览(40)
  • Three.js--》建模软件如何加载外部3D模型?

    目录 三维建模软件的介绍 Blender官方文档介绍 Blender软件安装 GLTF格式简介 gltf不同文件形式         看过我之前讲解的three文章的人都知道,我在创建模型的时候都没有使用three.js自带的一些简单模型,而是引入外部的模型并加载到页面上, 简言之 :对于简单的立方体、

    2024年02月06日
    浏览(39)
  • web上构建3d效果 基于three.js的实例

    web页面上提供3D效果,可以为页面提供不少色彩,H5之后canvas 为webgl提供了基础,使得在web页面使用JS也能写出3D的效果,其中three.js作为封装了图形函数 的框架,为入门提供了方便,效果图如下。   以上是官方例子中其中的三个,没接触过的朋友肯定会觉得很神奇,事实上

    2024年02月05日
    浏览(46)
  • three.js 场景中如何彻底删除模型和性能优化

    在three.js场景中,要彻底删除外部模型,需要执行以下几个步骤: 从场景中移除模型 你可以使用 scene.remove(model) 或者 scene.remove(model.children[0]) 将模型从场景中移除。如果是多个模型,可以用循环来处理。 移除所有材质和纹理 模型通常会包含材质和纹理,即使你把它们从场景

    2024年02月10日
    浏览(40)
  • DataGear 制作基于 three.js 的 3D 数据可视化看板

    DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板,也支持导入由 npm 、 vite 等前端工具构建的前端程序包。得益于这一特性,可以很容易制作基于three.js的3D数据可视化看板。 首先,参考three.js的官方教程 https://threejs.org/docs/index.html#manual/en/introduction/Installation 编写

    2024年03月09日
    浏览(58)
  • 03.Three.js的入门教程(二)如何创建一个3D地球?

    前言:通过上节课 02.Three.js的入门课程(一),我们了解了Three.js的最小案例DEMO,熟悉了几个重要组成部分。这节课带领大家编写一个3D地球。 一、通过纹理图渲染一个地球 1.1. 创建一个纹理加载器对象TextureLoader,可以加载图片作为纹理贴图; 1.2.完整代码结构 二、小球标

    2024年02月04日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包