序

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

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

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

　　閑話少序，切入正題

前言

　　前面的課程有講解過庫房相關的，但都是密集架庫房，檔案室庫房類的（《如何用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 =https://www.cnblogs.com/yeyunfei/archive/2022/10/27/ {
                            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='https://img.uj5u.com/2022/10/28/327854280720455.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,"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,"showHelper":true,"uuid":"","name":"DirectionalLight_12","objType":"DirectionalLight","shadowCameraNear":1,"shadowCameraFar":5000,"shadowCameraLeft":-500,"shadowCameraRight":500,"shadowCameraTop":500,"shadowCameraBottom":-500,"shadowMapWidth":1024,"shadowMapHeight":1024,"distance":5000,"targetName":"floor","intensity":1,"color":5592405,"castShadow":true,"position":{"x":1794.848,"y":1052.295,"z":-553.413},"showSortNub":12,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"shadowCameraFov":null,"decay":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""}

View Code

這里的道路直接用亮線畫出道路框架即可，然后通過流動的光線模擬車流，這在前面的文章中有詳細講解，

2.1.1.2、創建大樓

{"direction":"z","degree":0}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":0.5,"imgurl":"../img/3dImg/point.png","repeatx":true,"width":200,"repeaty":true,"height":200},"skin_down":{"skinColor":16777215,"side":1,"opacity":0,"imgurl":"../img/3dImg/point.png"},"skin_side":{"skinColor":16777215,"opacity":1,"imgurl":"../img/3dImg/outside_lightmap.jpg"}}},"showSortNub":10,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"box_1","objType":"cube2","length":1000,"width":1600,"height":130,"x":-1.812,"y":80.994,"z":-2.256,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":8,"repeaty":true,"height":12},"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":12,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"materialType":"Phong","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":12,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":8,"repeaty":true,"height":1},"skin_right":{"skinColor":16777215,"materialType":"lambert","side":1,"opacity":1,"imgurl":"../img/3dImg/cubeFace.jpg","repeatx":true,"width":8,"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_8","copyfrom":"box_4"},{"show":true,"uuid":"","name":"box_2","objType":"cube2","length":125,"width":133,"height":130,"x":-439.045,"y":210.738,"z":730.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}

View Code

2.1.1.3、創建樓層

用于分解樓層展示

function createAreaModels(name,title, color,_points) {
    var points = [];
    var maxx = null;
    var maxy = null;
    var minx =null;
    var miny = null;
    var extra_x = 0;
    var extra_y = 0;
    if (window.location.href.indexOf("index.html") >= 0) {
        extra_x = config.basePoint.index.x;
        extra_y = config.basePoint.index.y;
    } else {
        extra_x = config.basePoint.room.x;
        extra_y = config.basePoint.room.y;
    }
    $.each(_points, function (_index, _obj) {
        if (_obj.x > maxx || maxx == null) {
            maxx = _obj.x;
        }
        if (_obj.y > maxy || maxy == null){
            maxy = _obj.y;
        }

        if (_obj.x < minx || minx == null) {
            minx = _obj.x;
        }
        if (_obj.y < miny || miny == null) {
            miny = _obj.y;
        }
        points.push({
            "x": _obj.x + extra_x,
            "y": _obj.y + extra_y,
            "type": "nomal"
        });
    });
    var titleimg = "";var modeljson = [{ "show": true, "uuid": "", "name": "area_" + name, "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": 0 }, "style": { "skinColor": 16711680, "skin": { "skin_up": { "skinColor": color, "materialType": "Phong", "side": 1, "opacity": 0.5 }, "skin_down": { "skinColor": color, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": color, "opacity": 1 } } }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": points, "holes": [] }, "extrudeSettings": { "amount": 120, "curveSegments": 1, "steps": 1, "bevelEnabled": false, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 1, "extrudePathPoints": [] }, "showSortNub": 40, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }
return modeljson;
}

　　2.1.2、創建室內庫房模型

這里的模型通過代碼實作，篇幅過長，不便展示，

　　2.1.3、創建箱子模型

 { "show": true, "uuid": "", "name": name, "objType": "ExtrudeGeometry", "position": { "x": position.x, "y": position.y, "z": position.z }, "style": { "skinColor": 16711680, "skin": { "skin_up": { "skinColor": color1, "side": 1, "opacity": 1, "imgurl": imgurl1, "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.01 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": color2, "opacity": 1, "imgurl": imgurl2, "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.01 } } }, "scale": { "x": size.x / 100, "y": size.y / 100, "z": size.z / 100 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 0, "y": 100, "type": "nomal" }, { "x": 100, "y": 100, "type": "nomal" }, { "x": 100, "y": 0, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 100, "curveSegments": 1, "steps": 1, "bevelEnabled": false, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 1, "extrudePathPoints": [] }, "showSortNub": 100, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }

　　2.1.4、創建集裝箱模型

[{"show":true,"uuid":"","name":"cube2_6","objType":"cube2","length":400,"width":200,"height":200,"x":0,"y":200,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_down":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_fore":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_behind":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_left":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_right":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"}}},"showSortNub":6,"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":null,"BindMeteName":null}]

　　2.1.5、車輛模型

 { "name": _name, "objType": "objmodel", "position": _position, "scale": _scale, "visible": true, "rotation": [{ "direction": "x", "degree": _rotation.x }, { "direction": "y", "degree": _rotation.y-Math.PI/2 }, { "direction": "z", "degree": _rotation.z }], "filePath": "../js/models/car/", "mtlFileName": "car03.mtl", "objFileName": "car03.obj", "mtlIsPublic": false, "showSortNub": 7, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }

2.2、資料載入

　　通過資料生成模型，畫出庫位，載入車輛等

 
/* type：
        1://集裝箱
       2://箱子
        3://筒狀
    color://顏色
   id :設備id 唯一    必填
   position :設備位置  必填 格式 { x: 0, y: 0, z: 0} 這里矢量單位
   size:尺寸 默認值 { x: 1, y: 1, z: 1 };
*/
function createModelJsonByType(type,color, id, position, size) {
    if (!scale) {
        scale = { x: 1, y: 1, z: 1 };
    }
    var modeljson = null;
    switch (type) {
        case 1:
            {

            modeljson = {
             ....
            };
            }
            break;
        case 2:
            modeljson = {
              ....， };
            break;
        case 3:
            modeljson = {
               ....       };
            break;
       

             
    }

    modeljson.name = "dev_T_" + type + "_ID_" + id;
    if (config && config.name) {
        modeljson.name = config.name;
    }
    if (modeljson.children) {
        $.each(modeljson.children, function (_i, _o) {
            _o.name = "dev_T_" + type + "_ID_" + id + "OBJCREN" + _i;
        });
    }
    if (modeljson.position) {
        modeljson.position.x = position.x;
        if (position.y || position.y == 0) {
            modeljson.position.y = position.y;
        }
        modeljson.position.z = position.z;
    }

    return modeljson;
}

/*
創建車 
*/
function createCarModel(_name, _position, _rotation, _scale, carType) {


    var model = ...model;
    // 1.集卡（帶集裝箱的） 2.集卡（空車） 3.散卡（帶箱的小貨車） 4.正面吊 5.小鏟車 6 板車
    if (carType) {
        switch (carType) {
            case 1: {
                model.filePath = "../js/models/jika/";
                model.mtlFileName = "jika.mtl";
                model.objFileName = "jika.obj";
                model.scale = {
                    x: 4.200,
                    y: 4.200,
                    z: 4.200
                }
            }
                break;
            case 2: {
                model.filePath = "../js/models/jika_nocube/";
                model.mtlFileName = "jika_nocube.mtl";
                model.objFileName = "jika_nocube.obj";
                model.scale = {
                    x: 4.200,
                    y: 4.200,
                    z: 4.200
                }
            }
                break;
            case 3: {
                model.filePath = "../js/models/sanka/";
                model.mtlFileName = "sanka.mtl";
                model.objFileName = "sanka.obj";
                model.scale = {
                    x: 0.080,
                    y: 0.080,
                    z: 0.080
                }
                model.rotation[1].degree -= Math.PI / 2;
            }
                break;
            case 4: {
                model.filePath = "../js/models/diaoche/";
                model.mtlFileName = "dc.mtl";
                model.objFileName = "dc.obj";
                model.scale = {
                    x: 1.150,
                    y: 1.150,
                    z: 1.150
                }
            }
                break;
            case 5: {
                model.filePath = "../js/models/canche/";
                model.mtlFileName = "canche.mtl";
                model.objFileName = "canche.obj";
                model.scale = {
                    x: 0.1,
                    y: 0.1,
                    z: 0.1
                }
            }
                break;
            case 6: {
                model.filePath = "../js/models/banche/";
                model.mtlFileName = "banche.mtl";
                model.objFileName = "banche.obj";
                model.scale = {
                    x: 4.200,
                    y: 4.200,
                    z: 4.200
                }
            }
                break;
        }
    }
    //model.scale.x *= 0.8;
    //model.scale.y *= 0.8;
    //model.scale.z *= 0.8;
    return model;

}

2.3、自動生成貨物模型

　生成模型注意對于批量模型消耗瀏覽器性能，掉幀問題，這里后面我會用專門的篇幅講解，如何優化加載大量貨物且不掉幀的解決方案，

  //獲取區域庫位劃分資料
        webapi.GetAllArea(1, function (result) {
            var models = [];
            if (result && result.length > 0) {
                $("#room_shelfNub").html(result.length);
                $.each(result, function (_index, _obj) {
                    var _color = _obj.color;
                    if (_color == "") {
                        _color = Math.random() * 16777215 + "";
                    } else {
                        _color = _color.replace("#", "0x")
                    }
                    _color = parseInt(_color)
                    //生成區域畫線
                    var model = createAreaModels(_obj.code, _obj.name, _color, _obj.AreaPoints);
                    models = models.concat(model);
                })
            }
            console.log(models);
            
            WT3DObj.commonFunc.loadModelsByJsons(models, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true, function () {

            });

        })

2.4、主要邏輯

　　具體實作邏輯主要分為五個步驟

　　1、創建模型

　　2、校準坐標系，將模型的坐標系與資料坐標系校準對應，

　　3、根據配置載入配置模型，如攝像頭等

　　4、生成庫位、貨物，根據動態資料，生成庫位、車輛、貨物等模型

　　5、業務邏輯，實作滑動，雙擊，搜索等常規業務，

由于篇幅原因，本節先講解到這，

技術交流 [email protected]

交流微信：

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

其它相關文章：

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機房管線問題（機房升級版）-第九課（一）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/521889.html

標籤：其他

上一篇：學習筆記——Vue條件渲染

下一篇：前后端分離專案(七):實作"添加"功能(前端視圖)

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

使用webgl(three.js)搭建3D智慧園區、3D大屏，3D樓宇，智慧燈桿三維展示，3D燈桿，web版3D,bim管理系統——第六課