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

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();});}});});} 1.8、叉车定位