如何用webgl(three.js)搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

来源:https://www.cnblogs.com/yeyunfei/archive/2022/10/27/16826146.html
-Advertisement-
Play Games

使用three.js(webgl)搭建智慧樓宇、3D園區、3D廠房、3D碼頭、3D海關、3D倉庫、3D定位、三維室內定位、設備檢測、數字孿生、物聯網3D、物業3D監控、物業基礎設施可視化運維、3d建築,3d消防,消防演習模擬,3d庫房,webGL,threejs,3d機房,bim管理系統 ...


序

　　又是快兩個月沒寫隨筆了，長時間不總結項目，不鍛煉文筆，一開篇，多少都會有些生疏，不知道如何開篇，如何寫下去。有點江郎才盡，黔驢技窮的感覺。

　　寫隨筆，通常三步走，第一步，搭建框架，先把你要寫的內容框架搭建出來；第二步，添磚，在框架基礎上，填寫各部分內容；第三步，加瓦，再寫好的內容上進行修改，潤濕。然後文章的質量，就因人而異了。但不管怎麼說，得寫，得練，得經受的起各路能人志士的批評指教，至於改不改，那也是寫文章的人的事了（通常我是認真接受批評指教的）。

　　你看，寫道這裡，我又不知道再序些啥了，索性就這樣吧。

　　閑話少序，切入正題

前言

　　前面的課程有講解過庫房相關的，但都是密集架庫房，檔案室庫房類的（《如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室（升級版）》《如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課》《如何用webgl(three.js)搭建一個3D庫房-第一課》）

　　該篇主要講解堆放箱體的庫房，以及碼頭集裝箱類似的庫房場地解決方案。

　　可視化孿生系統實現起來主要是數據源、業務系統、展示方案這三大部分。

　　數據源：就是數據的來源，針對該篇文章，是如何對庫房，庫位的數據進行採集，錄入。物聯網廠家通常叫做前端採集模塊。

　　　　　　該項目，數據源主要通過 rfid+手動錄入 的方式，項目中庫位主要分了室內和室外兩大部分，室內通過門口rfid門禁知道箱子的出入，再通過操作員手動錄入箱子的位置（再庫位上，詳細劃分了位置編號）；室外部分直接通過操作員手動錄入入庫出庫信息。

　　　　這裡還涉及到車輛定位（叉車），採用的是定位卡+基站以及分站的方式。

　　業務系統：針對採集上來的數據，如何進行有效的處理與存儲，如何有效符合客戶功能需求，以及要綜合考慮數據源結構，展示端需求數據結構，系統性能等。這些都是業務系統的主要功能要求。

　　　　　　　業務系統，也是我們程式員常說的後端服務。

　　展示方案：爭對客戶需求，設計符合客戶要求的交互三維可視化方案。

　　　　　　

　　該篇我們主要詳細講解展示端方案。

一、整體效果及功能

1.1、庫房外部及周遭場景

通過對園區進行建模，虛擬模擬周邊道路環境，實現整體場景展示。

1.2、外部庫位集裝箱信息，以及車輛信息

滑鼠滑動到集裝箱，或者車輛上，顯示貨物，車輛信息。

 

 

 

 具體實現滑動顯示

ModelBussiness.prototype.mouseInCurrentObj = null;
ModelBussiness.prototype.lastMouseInCurrentObj = null;
//滑鼠滑入事件
ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face, objs) {
  console.log(_obj.name);
  var _this = modelBussiness;
  WT3DObj.controls.autoRotate = false;
  
  var color = 0xbfffea;
  modelBussiness.lastMouseInCurrentObj = _obj;
  modelBussiness.mouseInCurrentObj = _obj;
  if (_obj.name.indexOf("dev_car_") >= 0) {

        var _sobj = _obj;
        if (_obj.name.indexOf("OBJCREN") > 0) {
            _sobj = _obj.parent;
        }
        var id = (_sobj.name.split("_Model_")[1]);

        var name = id;
        modelBussiness.mouseInCurrentObj = _sobj;
        _sobj.visible = true;
        WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x00ffff);
        $("#MarkMessageHelper").remove();
        $("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (window.event.pageX) + "px;top:" + (window.event.pageY - 10) + "px;height:2px;width:2px;z-index:1000;'></div>");
        showCarinfo(name,id);
    }

}

 

 

 

 

 

//展示貨物信息
function showGoodInfo(name, id) {
    //顯示結構部分
    var html = ' XXXXX';
    //彈窗
    layer.tips(html, "#MarkMessageHelper", {
        tips: [1, '#003333'],//彈窗類型與顏色
        time: 0,//彈窗自動關閉時長 0表示不自動關閉
        area: ["415px", "230px"],//彈窗大小
        success: function () {//彈窗顯示後回調
            setTimeout(function () {
                //數據介面 根據id獲取貨物詳細信息
                webapi.GetAllGoodsInfo(id, function (result) {
                    if (result) {
                        modelBussiness.cacheData = {
                            id: id,
                            result: result
                        };
                        for (var item in result) {//填充彈窗內結構的數據
                            $("#devParamValue3D" + id + "_" + item).html(result[item]);
                            if (item == "photo_urls") {
                                var _html = "";
                                $.each(result[item], function (_pindex, _pobj) {

                                    _html += ' <div style="float:left;cursor:pointer;margin-right:10px;" onclick="modelBussiness.showPics(\'' + _pobj.url + '\',\'' + _pobj.doctype + '\')">' + _pobj.doctype + '</div>';
                                })
                                $("#devParamValue3D" + id + "_photos").html(_html);
                            }
                        }
                    } else {
                        $("#devParamValue3D" + id + "_content").html("<font style='color:red;'>獲取數據異常</font>");
                    }
                })
            }, 200);
        }
    });

}

 1.3、車輛出入管理

 

 

 對進入的車輛實時監控，卡口信息實時展示

實現代碼如下：

            var carjp1_4_run = WT3DObj.commonFunc.findObject("car_sanka_3");
         
            carjp1_4_run.position.x = -858.739;
            carjp1_4_run.position.z = 19837.371;
 
            new TWEEN.Tween(carjp1_4_run.position).to({
               z: 14344.865
            }, 5000).onComplete(function () {
                new TWEEN.Tween(carjp1_4_run.rotation).to({
                    y: 0,
                }, 1000).onComplete(function () { }).start();
                new TWEEN.Tween(carjp1_4_run.position).to({
                    x: -225.796,
                    z: 13523.366
                }, 1000).onComplete(function () {


                    layer.tips("", "#MarkMessageHelper")
                    layer.msg(`
        車牌：<font color='#00ff00'>粵A17001</font><br/>
        類型：<font color='#00ff00'>內部車輛</font><br/>
        外出：<font color='#00ff00'>2022/10/22 15:36:45</font><br/>
        進入：<font color='#00ff00'>2022/10/22 17:56:12</font><br/>
        照片：<img src='../img/car_01.png' style="width:100px;height:100px;" />
        `)

                    setTimeout(function () {
                        var dz_3_lg = WT3DObj.commonFunc.findObject("dz_gz_1");
                        dz_3_lg.rotation.x = Math.PI / 2;
                        dz_3_lg.rotation.z = -Math.PI;
                        new TWEEN.Tween(dz_3_lg.rotation).to({
                            x: Math.PI
                        }, 2000).onComplete(function () {
                            new TWEEN.Tween(carjp1_4_run.position).to({
                                x: 1197.955,
                                z: 13308.873
                            }, 2000).onComplete(function () {

                            }).start();
                            new TWEEN.Tween(carjp1_4_run.rotation).to({
                                y: 11.617 / 180 * Math.PI,
                            }, 2000).onComplete(function () {
                                new TWEEN.Tween(carjp1_4_run.position).to({
                                    x: 10812.744,
                                    z: 12807.050
                                }, 6000).onComplete(function () {

                                }).start();
                                new TWEEN.Tween(carjp1_4_run.rotation).to({
                                    y: 0,
                                }, 2000).onComplete(function () {

                                }).start();

                            }).start();
                            setTimeout(function () {
                                new TWEEN.Tween(dz_3_lg.rotation).to({
                                    x: - Math.PI / 2
                                }, 2000).onComplete(function () {
                                    $("#doAnimationBtn").show();
                                }).start();
                            }, 2000);
                        }).start();
                    }, 2000);

                }).start();
            }).start();

 

1.4、內部倉庫場景

 雙擊進入內部室內倉庫

 綁定雙擊事件，實現跳轉即可

實現展開樓層如下：

ModelBussiness.prototype.tempNameList = [];
ModelBussiness.prototype.tempDataList = [];
ModelBussiness.prototype.videoDataCache = {};
ModelBussiness.prototype.showFloorState = "close";
//顯示樓層內部情況
ModelBussiness.prototype.showBuildFloors = function (buildnub, callBack) {
    var _this = this
    _this.showFloorState = "open";
    var builds = WT3DObj.commonFunc.findObjectsByNames(["ckbuild_486"]);
    //隱藏大樓
    WT3DObj.commonFunc.setSkinColorByname("ckbuild_486", 0x00ffff);
    WT3DObj.commonFunc.changeCameraPosition({ x: 3652.5144280174954, y: 990.805706980618, z: 5107.394022507952 }, { x: 1914.4771268074287, y: -723.8717024746979, z: 2181.6118222317314 }, 500,
        function () { });
    WT3DModel.commonFunc.changeObjsOpacity(builds, 1, 0.1, 500, function (obj) {
        var _obj = WT3DObj.commonFunc.findObject("ckbuild_486");
        if (typeof (_obj.oldPositionY) == 'undefined') {
            _obj.oldPositionY = _obj.position.y
        }
        _obj.position.y = 1000000;
        _obj.visible = false;

        WT3DObj.commonFunc.changeCameraPosition({ x: -1181.6606035933219, y: 7695.800119393643, z: 17124.216668774727 },{ x: 7526.409787213892, y: 2616.2148116624617, z: 7792.131296514065 }, 500,
            function () { });

        var names = ["zgx_102_f1", "zgx_102_f2", "zgx_102_f3", "zgx_102_f4"];
        var floors = WT3DObj.commonFunc.findObjectsByNames(names);
        modelBussiness.openFloors(floors, function () {
            if (callBack) {
                callBack();
            }
        });
    });

}//顯示樓層
ModelBussiness.prototype.openFloors = function (floors, callBack) {
    //顯示樓層
    $.each(floors, function (_index, _obj) {
        if (typeof (_obj.oldPositionY) == 'undefined') {
            _obj.oldPositionY = _obj.position.y
        }
        if (_obj.position.y > 100000) {
            _obj.position.y -= 1000000;
        }
        _obj.visible = true;
    });
    setTimeout(function () {
        $.each(floors, function (_index, _obj) {
            //展開樓層
            _obj.floorPosition = _obj.position.y;
            var floor = parseInt(_obj.name.split("_f")[1]);
            height = (floor - 1) * 1500 + 50;
            new TWEEN.Tween(_obj.position).to({
                y: height
            }, 500).start();
        });
        setTimeout(function () {

            if (callBack) {
                callBack()
            }
        }, 600);
    }, 500)

}

 1.5、分區塊信息

 建模時，已經固定分區，所以直接將分區標題固定即可。

 

 

 

 實現方法

ModelBussiness.prototype.showAreaGoods = function (code, callBack) {
    var objs = [];
    var hideobjs = [];
    $.each(WT3DObj.scene.children, function (_index, _obj) {
        //遍歷所有模型，找到對應的模型展示。非對應貨物 隱藏
        if (_obj.name.indexOf("location2_") == 0) {
            _obj.visible = true;
            if (_obj.oldPositionY || _obj.oldPositionY == 0) {
                _obj.position.y = _obj.oldPositionY;
            }
        }
        if (_obj.name.indexOf("g_") == 0) {
            _obj.visible = true;
            if (code == "ALL") {
                _obj.visible = true;
            } else {
                if (_obj.name.indexOf("_Area_" + code) > 0) {
                    _obj.visible = true;
                } else {
                    _obj.visible = false;
                }
            }
        }
    });
  
}

 

 1.6、單獨庫位展示

 單獨庫位展示，採用iframe彈框方式，有效節約資源，降低邏輯複雜度。

 

 

  

//展示貨物信息
function showGoodInfo(name, id) {
    //顯示結構部分
    var html = CONTENT;
    //彈窗
    layer.tips(html, "#MarkMessageHelper", {
        tips: [1, '#003333'],//彈窗類型與顏色
        time: 0,//彈窗自動關閉時長 0表示不自動關閉
        area: ["415px", "230px"],//彈窗大小
        success: function () {//彈窗顯示後回調
  
        }
    });

}

 

 1.7、貨物搜索定位

 實現貨物快速定位與檢索

//搜索動作
ModelBussiness.prototype.searchActionSate = false;
ModelBussiness.prototype.searchAddObjNames = [];
ModelBussiness.prototype.searchAction = function (result) {
    layer.load();
    var _this = this;
    WT3DObj.commonFunc.changeCameraPosition({ x: 1138.6583366079776, y: 7190.772604284317, z: 9690.731322273507 }, { x: 5051.345919026784, y: 678.7143248996384, z: 2255.8201639552867 }, 500,
         function () {
             modelBussiness.cancelSearchAction(function () {
                 var type="";
                 if (window.location.href.indexOf("index.html") >= 0) {
                     type = "jzx";
                 }
                 _this.searchActionSate = true;
                    var resultobj={};
                    $.each(result, function (_index, _obj) {
                        //areaId: "F5"
                        //id: "cf792a67-bfed-488b-8570-915a73341777"
                        //name: "20006010-2-2"
                        resultobj["g_" + _obj.id] = _obj;
                     
                    });

                    var models = [];
                    var objs = [];
                    modelBussiness.searchAddObjNames = [];
                    $.each(WT3DObj.scene.children, function (_index, _obj) {
                        //areaId: "F5"
                        //id: "cf792a67-bfed-488b-8570-915a73341777"
                        //name: "20006010-2-2"
                        if (!_obj.oldPositionY && _obj.oldPositionY != 0) {
                            _obj.oldPositionY = _obj.position.y;
                        }

                        if (_obj.name.indexOf("location2_") == 0) {
                            _obj.visible = false;
                            _obj.position.y = 1000000;
                        }
                        if (_obj.name.indexOf("g_") == 0) {
                            objs.push(_obj);
                            var cobj = resultobj[_obj.name.split("_Area_")[0]];
                            if (cobj) {
                                modelBussiness.searchAddObjNames.push("gSearch_" + cobj.id + "_name_" + cobj.name);
                               var cacheobj= _this.cacheGoodsResult["c_" + cobj.id];
                               models.push(createGoodCubeModels("gSearch_" + cobj.id + "_name_" + cobj.name, cobj.name, _obj.position, { x: _obj.scale.x * 100, y: _obj.scale.y * 100, z: _obj.scale.z * 100 }, type, cacheobj ? cacheobj.color : 0));
                               _obj.visible = false;
                               _obj.position.y = 1000000;
                            } 
                        }
                    });


                    if (models && models.length > 0) {

                        WT3DObj.commonFunc.loadModelsByJsons(models, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true, function () {
                            WT3DObj.commonFunc.changeObjsOpacity(objs, 1, 0.1, 500, function () {
                                layer.closeAll();
                            });
                        });
                    } else {
                        WT3DObj.commonFunc.changeObjsOpacity(objs, 1, 0.1, 500, function () {
                            layer.closeAll();
                        });
                    }
               
                 });
         });
}
View Code

 

 1.8、叉車定位

根據定位信息，實現叉車位置實時跟蹤

這裡採用的攝像頭定位卡加上基站的方案。

 if (modelBussiness.searchActionSate) {
    } else {
    webapi.GetAllGoodsList(1, function (result) {

        if (_this.oldGoodsData && _this.oldGoodsData.length > 0) {
            $.each(_this.oldGoodsData, function (_index, _obj) {
                WT3DObj.destoryObj(_obj);
            });
            _this.oldGoodsData = [];
           
        }
        for (var i = WT3DObj.scene.children.length - 1; i >= 0; i--) {
            var _obj = WT3DObj.scene.children[i];
            if (_obj && _obj.name && _obj.name.indexOf("g_") == 0 && _obj.name.indexOf("_Area_") > 0) {
                WT3DObj.scene.remove(_obj);
            }
        }


        var models = [];

        var extra_x = 0;
        var extra_y = 0;
        var type = "";
            extra_x = config.basePoint.room.x;
            extra_y = config.basePoint.room.y;
            if (result && result.length > 0) {
                $("#div_zk").html(result.length);

                //迴圈找出所有顏色 並且創建對象
                var _colors = [];
                var _colorsobjName = [];
                $.each(result, function (_index, _obj) {
                    _this.cacheGoodsResult["c_" + _obj.id] = _obj;
                    if (_colors.indexOf(_obj.color) < 0) {
                        models.push(createGoodCubeModels("g_" + _obj.id + "_Area_" + _obj.area, _obj.name, { x: _obj.position.x + extra_x, y: _obj.position.z, z: _obj.position.y + extra_y }, { x: _obj.size.x, y: _obj.size.z, z: _obj.size.y }, type, _obj.color));
                        _colorsobjName.push("g_" + _obj.id + "_Area_" + _obj.area);
                        _colors.push(_obj.color);
                    }
                })
                _this.oldGoodsData = _colorsobjName;
                WT3DObj.commonFunc.loadModelsByJsons(models, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true, function () {
                    var goods = WT3DObj.commonFunc.findObjectsByNames(_colorsobjName);
                    var goodobjs = {}
                    $.each(goods, function (_index, _obj) {
                        goodobjs[_obj.name] = _obj;
                    });
                    $.each(result, function (_index, _obj) {
                        var goodname = "g_" + _obj.id + "_Area_" + _obj.area;
                        
                        if (_colorsobjName.indexOf(goodname) < 0) {
                            var baseObjName = _colorsobjName[_colors.indexOf(_obj.color)];
                            var good1 = goodobjs[baseObjName];
                            if (good1) {
                                var newobj = good1.clone();
                                newobj.areaId = _obj.areaId;

                                newobj.name = goodname;
                                newobj.position.x = _obj.position.x + extra_x;
                                newobj.position.y = _obj.position.z;
                                newobj.position.z = _obj.position.y + extra_y;
                                if (modelBussiness.AreaLocationCache["location2_" + _obj.areaId]) {
                                    var newscalez=(newobj.position.y + _obj.size.z) / 10+0.1;
                                    if(newscalez>modelBussiness.AreaLocationCache["location2_" + _obj.areaId].scale.z){
                                        modelBussiness.AreaLocationCache["location2_" + _obj.areaId].scale.z=newscalez;
                                    }
                                }
                                newobj.scale.x = _obj.size.x / 100;
                                newobj.scale.y = _obj.size.z / 100;
                                newobj.scale.z = _obj.size.y / 100;
                                WT3DObj.scene.add(newobj);
                            }
                        } else {
                            var baseObjName = _colorsobjName[_colors.indexOf(_obj.color)];
                            var good1 = goodobjs[baseObjName];
                            good1.areaId = _obj.areaId;
                            if (modelBussiness.AreaLocationCache["location2_" + _obj.areaId]) {
                                var newscalez = (_obj.position.y + _obj.size.z) / 100 + 0.1;
                                if (newscalez > modelBussiness.AreaLocationCache["location2_" + _obj.areaId].scale.z) {
                                    modelBussiness.AreaLocationCache["location2_" + _obj.areaId].scale.z = newscalez;
                                }
                            }
                        }
                    })
                });
            }

    });
    }
    setTimeout(function () {
        modelBussiness.updateGoodsModel();
    }, config.updateGoodsTime * 1000)
View Code

二、實現邏輯

 2.1、建模

　　2.1.1、創建園區整體模型

　　　　2.1.1.1、創建周邊環境

{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_2"},{"show":true,"uuid":"","name":"box_4_m860","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":597.893,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_5_m404","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":464.89300000000003,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_6_m839","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":331.89300000000003,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_7_m583","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":198.89300000000003,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_8_m592","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":65.89300000000003,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_9_m709","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":-67.10699999999997,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_10_m206","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":-200.10699999999997,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_11_m496","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":-333.10699999999997,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_12_m352","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":-466.10699999999997,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_fore":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":1,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","copyFrom":"box_1","copyfrom":"box_3"},{"show":true,"uuid":"","name":"box_13_m723","objType":"cube2","length":125,"width":133,"height":130,"x":-314.045,"y":210.738,"z":-599.107,"style":{"skinColor":16777215,"
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 袋鼠雲平臺代碼規範化編譯部署的提效性改進實踐
    一、前言 作為全鏈路數字化技術與服務提供商，袋鼠雲提供了從數據湖、大數據基礎平臺、離線開發、實時開發、數據服務、數據治理、指標管理、客戶數據洞察、數據孿生可視化等全產品體系的服務。 圍繞著“行業應用”及“通用應用”，袋鼠雲聚焦數智提供全維數字解決方案，幫助企業實現降本增效、快捷轉型，迄今為止袋鼠雲已 ...
  • 論文解讀丨CIKM'22 MARINA：An MLP-Attention Model for Multivariate Time-Series Analysis
    摘要：華為雲資料庫創新Lab在論文《MARINA: An MLP-Attention Model for Multivariate Time-Series Analysis》中提出了華為自研的自回歸時序神經網路模型，可用於時序數據的預測以及異常檢測。 本文分享自華為雲社區《CIKM'22 MARIN ...
  • 安裝openruler詳細步驟
    openeuler安裝教程 1. 下載 鏡像版本：openEuler-20.03-LTS-x86_64-dvd.iso 下載地址：https://repo.openeuler.org/openEuler-20.03-LTS/ISO/x86_64/ 需要工具：vmware 2.安裝操作 完成 ...
  • offset新探索：雙管齊下，加速大數據量查詢
    摘要：隨著offset的增加，查詢的時長也會越來越長。當offset達到百萬級別的時候查詢時長通常是業務所不能容忍的。 本文分享自華為雲社區《offset新探索：雙管齊下，加速大數據量查詢》，作者： GaussDB 資料庫 。 眾所周知，在各類業務中時常會用到LIMIT y offset x來做跳過 ...
  • uniapp熱更新和整包更新思路
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 我們知道，在打包Android App之前，我們需要先通過HX生成打包資源。如果是通過cli創建的項目，則通過以下命令生成打包資源： yarn build:app-plus 生成打包資源後的目錄長這樣： 然後將整個目錄中的所有文件拷貝到A ...
  • SpringCloud微服務實戰——搭建企業級開發框架（四十七）：【移動開發】整合uni-app搭建移動端快速開發框架-添加Axios並實現登錄功能
    uni-app自帶uni.request用於網路請求，因為我們需要自定義攔截器等功能，也是為了和我們後臺管理保持統一，這裡我們使用比較流行且功能更強大的axios來實現網路請求。 Axios 是一個基於 promise 網路請求庫，作用於node.js 和瀏覽器中。 它是 isomorphic 的( ...
  • 廣告內容定向分級，保護未成年人身心健康
    隨著移動智能終端的普及，未成年人首次觸網的年齡不斷降低。根據中國互聯網路信息中心第48次《中國互聯網路發展狀況統計報告》顯示，截至2021年6月，中國網民規模為10.11億人，6—19歲網民占15.7%，共1.58億人。同時根據第十次中國未成年人互聯網運用調查顯示,中國未成年人互聯網普及率為99.2 ...
  • 前後端分離項目(七):實現"添加"功能(前端視圖)
    好家伙,本篇用於測試"添加"介面,為後續"用戶註冊"功能做鋪墊 (完整代碼在最後) 我們要實現"添加"功能 老樣子我們先來理清一下思路, 現在,我是一個用戶,我來到了註冊頁面,我在一個①表單中要把我要添加的數據填好, 然後點擊添加按鈕,進行②數據校驗(看看用戶有沒有少填的數據), 隨後,③發送網路請 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類