1. 首頁 > 生活百科 > >

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

生活百科

1.3、內部倉庫場景
雙擊進入內部室內倉庫

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

文章插圖
綁定雙擊事件，實現跳轉即可
 1.4、分區塊信息
建模時，已經固定分區，所以直接將分區標題固定即可
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
分區展示名稱，直接再建模的時候固定即可 。
 按區塊展示各部分庫存信息
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
實現方法
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.5、單獨庫位展示
單獨庫位展示，采用iframe彈框方式，有效節約資源，降低邏輯復雜度 。
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖

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

文章插圖
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
_this.currentCameraInfo.position ={x:WT3DObj.camera.position.x,y: WT3DObj.camera.position.y,z: WT3DObj.camera.position.z} ;_this.currentCameraInfo.target = {x: WT3DObj.controls.target.x,y: WT3DObj.controls.target.y,z: WT3DObj.controls.target.z};_this.nearCameraPostion(_sobj, _face, objs);var code = _sobj.name.replace("location2_","")var index = layer.open({type: 2,skin: 'myLayer',shade: 0.8,title: "庫位：" + code,area: [($(window).width() - 100) + "px", ($(window).height() - 100) + "px"],fixed: false, //不固定maxmin: false,content: "locationDetail.html?location=" + code,cancel: function () {WT3DObj.commonFunc.changeCameraPosition(_this.currentCameraInfo.position, _this.currentCameraInfo.target, 500, function () {})}}); 1.6、貨物搜索定位
實現貨物快速定位與檢索
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
實現方法
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
//搜索動作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"http://id: "cf792a67-bfed-488b-8570-915a73341777"http://name: "20006010-2-2"resultobj["g_" + _obj.id] = _obj;});var models = [];var objs = [];modelBussiness.searchAddObjNames = [];$.each(WT3DObj.scene.children, function (_index, _obj) {//areaId: "F5"http://id: "cf792a67-bfed-488b-8570-915a73341777"http://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();});}});});}

推薦閱讀