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

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();});}});});} 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 = https://www.huyubaike.com/biancheng/[];}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 = https://www.huyubaike.com/biancheng/_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)