1. 首頁 > 生活百科 > >

three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課( 二 )

生活百科

 1.3、車輛出入管理

three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
對進入的車輛實時監控，卡口信息實時展示
實現代碼如下：
var carjp1_4_run = WT3DObj.commonFunc.findObject("car_sanka_3");carjp1_4_run.position.x = -858.739;carjp1_4_run.position.z = 19837.371;new TWEEN.Tween(carjp1_4_run.position).to({z: 14344.865}, 5000).onComplete(function () {new TWEEN.Tween(carjp1_4_run.rotation).to({y: 0,}, 1000).onComplete(function () { }).start();new TWEEN.Tween(carjp1_4_run.position).to({x: -225.796,z: 13523.366}, 1000).onComplete(function () {layer.tips("", "#MarkMessageHelper")layer.msg(`車牌：<font color='#00ff00'>粵A17001</font><br/>類型：<font color='#00ff00'>內部車輛</font><br/>外出：<font color='#00ff00'>2022/10/22 15:36:45</font><br/>進入：<font color='#00ff00'>2022/10/22 17:56:12</font><br/>照片：<img src="http://img.zhejianglong.com/231019/0230355S7-4.png" style="width:100px;height:100px;" />`)setTimeout(function () {var dz_3_lg = WT3DObj.commonFunc.findObject("dz_gz_1");dz_3_lg.rotation.x = Math.PI / 2;dz_3_lg.rotation.z = -Math.PI;new TWEEN.Tween(dz_3_lg.rotation).to({x: Math.PI}, 2000).onComplete(function () {new TWEEN.Tween(carjp1_4_run.position).to({x: 1197.955,z: 13308.873}, 2000).onComplete(function () {}).start();new TWEEN.Tween(carjp1_4_run.rotation).to({y: 11.617 / 180 * Math.PI,}, 2000).onComplete(function () {new TWEEN.Tween(carjp1_4_run.position).to({x: 10812.744,z: 12807.050}, 6000).onComplete(function () {}).start();new TWEEN.Tween(carjp1_4_run.rotation).to({y: 0,}, 2000).onComplete(function () {}).start();}).start();setTimeout(function () {new TWEEN.Tween(dz_3_lg.rotation).to({x: - Math.PI / 2}, 2000).onComplete(function () {$("#doAnimationBtn").show();}).start();}, 2000);}).start();}, 2000);}).start();}).start();1.4、內部倉庫場景
雙擊進入內部室內倉庫
three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
綁定雙擊事件，實現跳轉即可
實現展開樓層如下：
ModelBussiness.prototype.tempNameList = [];ModelBussiness.prototype.tempDataList = [];ModelBussiness.prototype.videoDataCache = {};ModelBussiness.prototype.showFloorState = "close";//顯示樓層內部情況ModelBussiness.prototype.showBuildFloors = function (buildnub, callBack) {var _this = this_this.showFloorState = "open";var builds = WT3DObj.commonFunc.findObjectsByNames(["ckbuild_486"]);//隱藏大樓WT3DObj.commonFunc.setSkinColorByname("ckbuild_486", 0x00ffff);WT3DObj.commonFunc.changeCameraPosition({ x: 3652.5144280174954, y: 990.805706980618, z: 5107.394022507952 }, { x: 1914.4771268074287, y: -723.8717024746979, z: 2181.6118222317314 }, 500,function () { });WT3DModel.commonFunc.changeObjsOpacity(builds, 1, 0.1, 500, function (obj) {var _obj = WT3DObj.commonFunc.findObject("ckbuild_486");if (typeof (_obj.oldPositionY) == 'undefined') {_obj.oldPositionY = _obj.position.y}_obj.position.y = 1000000;_obj.visible = false;WT3DObj.commonFunc.changeCameraPosition({ x: -1181.6606035933219, y: 7695.800119393643, z: 17124.216668774727 },{ x: 7526.409787213892, y: 2616.2148116624617, z: 7792.131296514065 }, 500,function () { });var names = ["zgx_102_f1", "zgx_102_f2", "zgx_102_f3", "zgx_102_f4"];var floors = WT3DObj.commonFunc.findObjectsByNames(names);modelBussiness.openFloors(floors, function () {if (callBack) {callBack();}});});}//顯示樓層ModelBussiness.prototype.openFloors = function (floors, callBack) {//顯示樓層$.each(floors, function (_index, _obj) {if (typeof (_obj.oldPositionY) == 'undefined') {_obj.oldPositionY = _obj.position.y}if (_obj.position.y > 100000) {_obj.position.y -= 1000000;}_obj.visible = true;});setTimeout(function () {$.each(floors, function (_index, _obj) {//展開樓層_obj.floorPosition = _obj.position.y;var floor = parseInt(_obj.name.split("_f")[1]);height = (floor - 1) * 1500 + 50;new TWEEN.Tween(_obj.position).to({y: height}, 500).start();});setTimeout(function () {if (callBack) {callBack()}}, 600);}, 500)} 1.5、分區塊信息
建模時，已經固定分區，所以直接將分區標題固定即可 。
three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
實現方法
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;}}}});}

推薦閱讀