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

序
又是快两个月没写随笔了，长时间不总结项目，不锻炼文笔，一开篇，多少都会有些生疏，不知道如何开篇，如何写下去。有点江郎才尽，黔驴技穷的感觉。
写随笔，通常三步走，第一步，搭建框架，先把你要写的内容框架搭建出来；第二步，添砖，在框架基础上，填写各部分内容；第三步，加瓦，再写好的内容上进行修改，润湿。然后文章的质量，就因人而异了。但不管怎么说，得写，得练，得经受的起各路能人志士的批评指教，至于改不改，那也是写文章的人的事了（通常我是认真接受批评指教的）。
你看，写道这里，我又不知道再序些啥了，索性就这样吧。
闲话少序，切入正题
前言
前面的课程有讲解过库房相关的，但都是密集架库房，档案室库房类的（《如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）》《如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课》《如何用webgl(three.js)搭建一个3D库房-第一课》）
该篇主要讲解堆放箱体的库房，以及码头集装箱类似的库房场地解决方案。
可视化孪生系统实现起来主要是数据源、业务系统、展示方案这三大部分。
数据源：就是数据的来源，针对该篇文章，是如何对库房，库位的数据进行采集，录入。物联网厂家通常叫做前端采集模块。
该项目，数据源主要通过 rfid+手动录入的方式，项目中库位主要分了室内和室外两大部分，室内通过门口rfid门禁知道箱子的出入，再通过操作员手动录入箱子的位置（再库位上，详细划分了位置编号）；室外部分直接通过操作员手动录入入库出库信息。
业务系统：针对采集上来的数据，如何进行有效的处理与存储，如何有效符合客户功能需求，以及要综合考虑数据源结构，展示端需求数据结构，系统性能等。这些都是业务系统的主要功能要求。
业务系统，也是我们程序员常说的后端服务。
展示方案：争对客户需求，设计符合客户要求的交互三维可视化方案。
该篇我们主要详细讲解展示端方案。
一、整体效果及功能
1.1、库房外部及周遭场景

文章插图
通过对园区进行建模，虚拟模拟周边道路环境，实现整体场景展示。
【three.js 如何用webgl搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课】1.2、外部库位集装箱信息，以及车辆信息
鼠标滑动到集装箱，或者车辆上，显示货物，车辆信息。

文章插图
具体实现滑动显示
ModelBussiness.prototype.mouseInCurrentObj = null;ModelBussiness.prototype.lastMouseInCurrentObj = null;//鼠标滑入事件ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face, objs) {console.log(_obj.name);var _this = modelBussiness;WT3DObj.controls.autoRotate = false;var color = 0xbfffea;modelBussiness.lastMouseInCurrentObj = _obj;modelBussiness.mouseInCurrentObj = _obj;if (_obj.name.indexOf("dev_car_") >= 0) {var _sobj = _obj;if (_obj.name.indexOf("OBJCREN") > 0) {_sobj = _obj.parent;}var id = (_sobj.name.split("_Model_")[1]);var name = id;modelBussiness.mouseInCurrentObj = _sobj;_sobj.visible = true;WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x00ffff);$("#MarkMessageHelper").remove();$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (window.event.pageX) + "px;top:" + (window.event.pageY - 10) + "px;height:2px;width:2px;z-index:1000;'></div>");showCarinfo(name,id);}}//展示货物信息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);}});}