1. 首頁 > 生活百科 > >

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集裝箱可視化孿生系統——第十五課

文章插圖
通過對園區進行建模，虛擬模擬周邊道路環境，實現整體場景展示 。
【three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課】1.2、外部庫位集裝箱信息，以及車輛信息
鼠標滑動到集裝箱，或者車輛上，顯示貨物，車輛信息 。
three.js 如何用webgl搭建一個3D庫房,3D倉庫,3D碼頭,3D集裝箱可視化孿生系統——第十五課

文章插圖
具體實現滑動顯示
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);}});}

推薦閱讀