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

1.3、车辆出入管理

文章插图
对进入的车辆实时监控，卡口信息实时展示
实现代码如下：
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(`车牌：粤A17001 类型：内部车辆 外出：2022/10/22 15:36:45 进入：2022/10/22 17:56:12 照片：<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、内部仓库场景
双击进入内部室内仓库

文章插图
绑定双击事件，实现跳转即可
实现展开楼层如下：
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、分区块信息
建模时，已经固定分区，所以直接将分区标题固定即可。

文章插图
实现方法
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;}}}});}