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

//展示货物信息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.huyubaike.com/biancheng/{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、内部仓库场景
双击进入内部室内仓库

文章插图
绑定双击事件，实现跳转即可
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、货物搜索定位
实现货物快速定位与检索