three.js 如何用webgl搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课( 二 ) _生活百科

1.3、内部仓库场景
双击进入内部室内仓库

文章插图
绑定双击事件，实现跳转即可
1.4、分区块信息
建模时，已经固定分区，所以直接将分区标题固定即可

文章插图
分区展示名称，直接再建模的时候固定即可。
按区块展示各部分库存信息

文章插图
实现方法
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弹框方式，有效节约资源，降低逻辑复杂度。

文章插图

文章插图
_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、货物搜索定位
实现货物快速定位与检索

文章插图
实现方法

文章插图

文章插图
//搜索动作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();});}});});}