序：
最近因為疫情，居家辦公，索性翻翻之前的專案案例，總結總結。
這次疫情，深圳停擺，群眾也挺恐慌的，封閉前一天，超市被搶購一空，雖然官方媒體一再強調，材米油鹽蔬菜肉類管夠，但是任然擋不住群眾們的搶購“熱情”。從大家角度出發，此操作雖然不可取，但是也是無可厚非吧。畢竟從古至今，都是民以食為天。
不過大家真不用擔心，我國糧食儲備在任何時候都是絕對保障的了人民群眾的基本需求的。想想08年的糧食大戰，大量國際資本出逃股市等資本市場，將目光投向了石油、糧食等大宗商品，想通過糧食來收割其它國家，將次貸危機轉嫁給後發國家。在收割完亞非拉等小國後，國際資本的目光開始轉向了東方大國，如果能從東方大國的14億人口上進行收割，獲得的將是天量財富。國際資本為了炒高糧價，不斷掃貨，中儲糧為了平抑糧價不斷放貨出來，最激烈時，基本是隔一天就放一次貨。最終，贏得了這場無硝煙的戰爭。壓垮國際資本的最後一根稻草，便是中儲糧底牌，有“訊息”透露，中儲糧的剩餘糧食儲備完全足夠全體中國人吃一年。
專案背景：
隨著三維技術發展，儲糧產業也切入其中，直觀展現各儲備站，儲備倉，容量利用率，溫溼度情況。
如何把控好我國儲糧最後一道關，直觀排程成為重要的工具手段。
所以這個專案案例就是簡單模擬了一個儲糧視覺化的試探預研。
一、演示功能介紹
1、3D展示糧倉站點佈局結構
2、支援第一人稱，第三人人稱視角切換
3、模擬開倉門動畫
4、模擬運送糧食動畫
5、模擬VR視角
二、效果與程式碼實現：
1、糧倉全景，展示糧倉資訊，入庫時間等
功能程式碼如下：
ModelBussiness.prototype.showMsg = function (_obj, position, closeFunc) { //獲取位置 var screenPostion = WT3DObj.transToScreenCoord(position); $("#MarkMessageHelper").remove(); $("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x - 30) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>"); layer.closeAll(); var showHtml = "<div></div>"; var area = ["150px", "100px"]; if (w3DShowApi) { var wparam = w3DShowApi.showFloorNubWin(1); if (wparam) { showHtml = wparam.html; area = wparam.area; } } layer.tips(showHtml, '#MarkMessageHelper', { closeBtn: 1, shade: false, shadeClose: true, area: area, time: 0,//是否定時關閉，0表示不關閉 cancel: function (index, layero) { layer.close(index); if (closeFunc) { closeFunc(); } }, tips: [2, "rgba(0,0,0,0.1)"] //還可配置顏色 }); }
//顯示樓層數字的自定義框 W3DShowApi.prototype.showFloorNubWin = function (floorNub) { console.log("顯示樓層數字的自定義框"); //這裡的showHtml可以自定義 var showHtml = "<div style='font-size:32px;color:white;text-align:center;line-height:90px;'>" + "<small style='font-size:26px'>庫房：0" + parseInt(Math.random() * 90) + "號</small></br>" + "<small style='font-size:26px'>儲存：" + parseInt(Math.random() * 10000) + "噸</small></br>" + "<small style='font-size:26px'>入庫日期：2020-05-20</small>" + "</div > "; //這裡的顯示框大小可以自定義 var area = ['auto', "100px"];//寬 高 return { html: showHtml, area: area } }
糧倉模型程式碼如下:
{"show":true,"uuid":"","name":"ckls","objType":"ExtrudeGeometry","position":{"x":-7027.718,"y":-2429.816,"z":-2366.768},"style":{"skinColor":16711680,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../img/3dImg/dg.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../img/3dImg/dg.jpg"},"skin_side":{"skinColor":16777215,"opacity":1,"imgurl":"../img/3dImg/dg.jpg","repeatx":true,"width":0.1,"repeaty":true,"height":0.005}}},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":2930,"y":0,"type":"nomal"},{"x":2930,"y":420,"type":"nomal"},{"x":1530,"y":550,"type":"nomal"},{"x":0,"y":420,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":5900,"curveSegments":2,"steps":2,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}
2、模擬VR，第一人稱視角漫遊糧倉
程式碼實現如下：
ModelBussiness.prototype.showP3 = function () { WT3DObj.commonFunc.changeCameraPosition({ x: -13164.34432311454, y: 7433.8461563184155, z: -26817.982088179473 } , { x: 500.681205116016, y: -2274.562814956754, z: -9758.799659726134 }, 1000, function () { WT3DModel.RunFirstPersonControler = false; WT3DModel.isPhoneShow = false; WT3DModel.customerControler = false; }); } ModelBussiness.prototype.showP1 = function () { layer.msg("按鍵：W-S-A-D，控制方向！"); WT3DObj.commonFunc.changeCameraPosition({ x: 5693.553949631542, y: -2278.79914293584, z: -8633.34576275798 } , { x: -525.7703788342053, y: -1986.1924640893849, z: -7655.686274658601 }, 1000, function () { WT3DModel.RunFirstPersonControler = true; WT3DModel.FirstPersonHeight = -2000; WT3DModel.isPhoneShow = true; WT3DModel.customerControler = true; }); }
3、模擬開倉門動畫，展示庫存資訊
ModelBussiness.prototype.openCM = function () { $("#btnB").hide(); WT3DObj.commonFunc.changeCameraPosition({ x: -4532.010647527373, y: -2148.209185383555, z: -6284.603537926028 } , { x: -4012.9143765146973, y: -2341.7943442729725, z: -5196.68056917963 }, 1000, function () { var cangku_5 = WT3DObj.commonFunc.findObject("cangku_5"); var jlm = cangku_5.children[6]; if ($("#btnB").attr("data-state") == "close") { var door_left = WT3DObj.commonFunc.findObject("door_left"); var _tween = new TWEEN.Tween(door_left.rotation).to({ y: -Math.PI / 3 * 2, }, 2000).onUpdate(function () { }).onComplete(function () { }).start(); var door_right = WT3DObj.commonFunc.findObject("door_right"); var _tween = new TWEEN.Tween(door_right.rotation).to({ y: Math.PI / 3 * 2, }, 2000).onUpdate(function () { }).onComplete(function () { $("#btnB").html("關倉門"); $("#btnB").show(); $("#btnB").attr("data-state", "open"); }).start(); } else { var door_left = WT3DObj.commonFunc.findObject("door_left"); var _tween = new TWEEN.Tween(door_left.rotation).to({ y: 0, }, 2000).onUpdate(function () { }).onComplete(function () { }).start(); var door_right = WT3DObj.commonFunc.findObject("door_right"); var _tween = new TWEEN.Tween(door_right.rotation).to({ y: 0, }, 2000).onUpdate(function () { }).onComplete(function () { $("#btnB").show(); $("#btnB").html("開倉門"); $("#btnB").attr("data-state", "close"); }).start(); } }); }
4、模擬卡車取糧運糧動畫
程式碼實現如下：
WT3DObj.commonFunc.changeCameraPosition( { x: 801.5002120529539, y: 958.5646504069678, z: -12201.043716027832 },
{ x: -3801.0903443149705, y: -2092.3756811246753, z: -5062.5180794648995 }, 1000,
function () {
f1();
});
//卡車倒車
function f1() {
var car_kct_351 = WT3DObj.commonFunc.findObject("car_kct_351");
var kache_246 = WT3DObj.commonFunc.findObject("kache_246");
var kcls = WT3DObj.commonFunc.findObject("kcls");
kcls.position.x = -4189.892;
kcls.position.z = -5816.501;
kcls.scale.y = 0.1;
kcls.rotation.y = Math.PI / 2;
car_kct_351.rotation.y = Math.PI / 2;
kache_246.rotation.y = Math.PI / 2;
car_kct_351.visible = true;
kache_246.visible = true;
car_kct_351.position.x = -22422.475;
kache_246.position.x = -22620.574;
car_kct_351.position.z = -6239.199;
kache_246.position.z = -5932.506;
var _tween = new TWEEN.Tween(kache_246.position).to({
x: -3726.218
}, 6000).onUpdate(function () {
}).onComplete(function () {
}).start();
var _tween = new TWEEN.Tween(car_kct_351.position).to({
x: -3528.854
}, 6000).onUpdate(function () {
}).onComplete(function () {
f2();
}).start();
}
function f2() {
var car_kct_351 = WT3DObj.commonFunc.findObject("car_kct_351");
var kache_246 = WT3DObj.commonFunc.findObject("kache_246");
var _tween = new TWEEN.Tween(car_kct_351.position).to({
x: -3532.541,
}, 2000).onUpdate(function () {
}).onComplete(function () {
}).start();
var _tween = new TWEEN.Tween(kache_246.position).to({
x: -3729.164,
}, 2000).onUpdate(function () {
}).onComplete(function () {
f3()
}).start();
}
5、展示糧倉溫溼度分佈情況
實時掌控倉庫溫度，溼度情況，保障糧食質量
//根據倉庫id 獲取倉庫內溫度感測器溫度值 ModelBussiness.prototype.showTemptureByCID = function (cid) { //找到相關感測器模型 var objs = WT3DObj.commonFunc.findObjectsByNames(["t_" + cid + "_1", "t_" + cid + "_2", "t_" + cid + "_3", "t_" + cid + "_4", "t_" + cid + "_5"]); webapi.getTempValues(cid, function (values) {//rest方式獲取溫度值 var temModels= WT3DObj.createTepmtures(objs, values);//建立溫度值 WT3DObj.showModels(temModels); }) }
技術交流 1203193731@qq.com
交流微信：
如果你有什麼要交流的心得 可郵件我
其它相關文章：
如何用webgl(three.js)搭建處理3D隧道、3D橋樑、3D物聯網裝置、3D高速公路、三維隧道橋樑裝置監控-第十一課
如何用three.js實現數字孿生、3D工廠、3D工業園區、智慧製造、智慧工業、智慧工廠-第十課
使用webgl(three.js)建立3D機房，3D機房微模組詳細介紹(升級版二)
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建築，3D消防模擬——第三課
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課
如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模擬
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課（炫酷版一）