修改老数据地图三维设备显示交互功能

src/jlmap3d/jl3ddevice/jl3ddevice.js

@@ -5,6 +5,8 @@ import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
 
 import { ModelManager } from '@/jlmap3d/jl3ddevice/loader.js';
 import { Signallightload } from '@/jlmap3d/jl3ddevice/component/signallight.js';
+import { Moveanimate } from '@/jlmap3d/jl3ddevice/component/moveanimate.js';
+import { Textconfig } from '@/jlmap3d/jl3ddevice/component/textconfig.js';
 
 import StompClient from '@/utils/sock';
 
@@ -19,6 +21,21 @@ export function Jl3ddevice(dom,group,token) {
 	Signallightload(this.signallights);
 	this.mixers = [];
 	this.showmodel = null;
+
+	//新数据交互
+	let helpbox,textplane;
+	let daochamodel;
+	//点击事件状态
+	this.raycasterstatus = false;
+	//动画状态
+	this.animastats = false;
+	//当前选中模型
+	this.nowobject = null;
+	//当前动画播放模型
+	this.animationmodel = null;
+	this.devicetext = new Textconfig();
+	this.windowstatus = '0';
+
 	//初始化webgl渲染
 	this.renderer = new THREE.WebGLRenderer({ antialias: true });
 
@@ -70,6 +87,10 @@ export function Jl3ddevice(dom,group,token) {
 	this.controls.update();
 	this.selectmodel = null;
 
+	let moveanima = new Moveanimate(scope);
+	document.addEventListener( "mousedown", onselect, false );
+
+
 	let teststomp = new StompClient();
 	let topic = '/user/topic/simulation/assistant/'+group;
 	// let topic = '/user/queue/simulation/jl3d/'+group;
@@ -83,7 +104,6 @@ export function Jl3ddevice(dom,group,token) {
 
 	function callback(Response) {
 		let data = JSON.parse(Response.body);
-		console.log(data);
 		if(scope.nowcode != data.body.code){
 			scope.nowcode = data.body.code;
 			scope.selectmodel(data);
@@ -97,11 +117,18 @@ export function Jl3ddevice(dom,group,token) {
 		scope.camera.updateProjectionMatrix();
 		scope.renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
 	}
-
+	this.domresize = function(){
+		scope.camera.aspect = scope.dom.offsetWidth / scope.dom.offsetHeight;
+		scope.camera.updateProjectionMatrix();
+		scope.renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
+	}
 	this.anime = null;
 
 	this.modelmanager = new ModelManager();
 	this.modelmanager.loadpromise(Staticmodel, scope.mixers).then(function (data) {
+		moveanima.initlistnew(scope.modelmanager.switchmodel.mesh);
+		daochamodel = scope.modelmanager.switchmodel.mesh.getObjectByName("DAOCHA");
+
 		animate();
 	})
 
@@ -113,6 +140,7 @@ export function Jl3ddevice(dom,group,token) {
 		scope.controls.update();
 		//scope.camera.lookAt(plane);
 		//
+		moveanima.animateupdate();
 		let delta = clock.getDelta();
 		if (scope.mixers) {
 			for (let i = 0; i < scope.mixers.length; i++) {
@@ -139,7 +167,17 @@ export function Jl3ddevice(dom,group,token) {
 					scope.showmodel = scope.modelmanager.switchmodel.mesh;
 					scope.scene.add(scope.showmodel);
 
+					scope.devicetext.initdevicetext(scope.modelmanager.switchmodel.mesh);
+					scope.nowobject = scope.modelmanager.switchmodel.mesh;
+					updatemenulist(scope.devicetext.devicelist);
+					scope.raycasterstatus = true;
+
+				}else{
+					scope.raycasterstatus = false;
+					scope.nowobject = "";
+					updatemenulist();
 				}
+
 				if (data.body._type == "Signal") {
 					scope.modelmanager.signalmodel.code = data.body.code;
 
@@ -155,15 +193,25 @@ export function Jl3ddevice(dom,group,token) {
 					scope.showmodel = scope.modelmanager.standmodel.mesh;
 					scope.scene.add(scope.showmodel);
 				}
-				scope.showmodel.code = data.body.code;
+
+				if(scope.showmodel){
+					scope.resetmodel();
+					scope.showmodel.code = data.code;
 					initstatus(data);
 				}
+
+			}
 		} else {
 			if (data.body._type == "Switch") {
 				scope.modelmanager.switchmodel.locateType = data.body.locateType;
 				scope.modelmanager.switchmodel.code = data.body.code;
 				scope.showmodel = scope.modelmanager.switchmodel.mesh;
 				scope.scene.add(scope.showmodel);
+
+				scope.devicetext.initdevicetext(scope.modelmanager.switchmodel.mesh);
+				scope.nowobject = scope.modelmanager.switchmodel.mesh;
+				updatemenulist(scope.devicetext.devicelist);
+				scope.raycasterstatus = true;
 				if (data.body.locateType == "01") {
 					scope.modelmanager.switchmodel.locateType = "01";
 					scope.modelmanager.switchmodel.action.reset();
@@ -180,6 +228,10 @@ export function Jl3ddevice(dom,group,token) {
 
 				}
 
+			}else{
+				scope.raycasterstatus = false;
+				scope.nowobject = "";
+				updatemenulist();
 			}
 			if (data.body._type == "Signal") {
 				scope.modelmanager.signalmodel.code = data.body.code;
@@ -442,4 +494,235 @@ export function Jl3ddevice(dom,group,token) {
 		}
 
 	}
+
+	//设备分解、归位动画按钮
+	this.disperdevice1 = function(){
+		if(scope.nowobject.animacode){
+			if(moveanima.status == true){
+				if(scope.animastats == false){
+					scope.animastats = true;
+					moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"on"],true)
+				}	else if(scope.animastats == true){
+					scope.animastats = false;
+					moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"off"],true);
+				}
+			}
+		}
+
+
+	};
+
+	this.disperdevice2 = function(){
+		if(scope.nowobject.animacode){
+			if(moveanima.status == true){
+				if(scope.animastats == false){
+					scope.animastats = true;
+					moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"chaijie"],true);
+				}	else if(scope.animastats == true){
+					scope.animastats = false;
+					moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"fuwei"],true);
+				}
+			}
+		}
+
+	};
+
+	this.resetmodel = function(){
+		if(scope.nowobject.animacode){
+			scope.animastats = false;
+			moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"fuwei"],true);
+		}
+
+	};
+
+	this.animationmsgshowon = function(nowobject){
+		scope.animationmodel = nowobject;
+		if(helpbox){
+			scope.animationmodel.helpbox = null;
+			scope.scene.remove( helpbox );
+			helpbox = undefined;
+		}
+
+		settext(scope.animationmodel,scope.animationmodel.position);
+		// console.log(scope.animationmodel);
+		helpbox = new THREE.BoxHelper( scope.animationmodel, 0xff0000 );
+		moveanima.updatehelpbox(helpbox,textplane);
+		// settext(intersects[0].object,intersects[0].point);
+		// getdevicemsg(intersects[0].object.name);
+		scope.scene.add( helpbox );
+		getdevicemsg(nowobject.name);
+	}
+
+	this.animationmsgshowoff = function(nowobject){
+		if(helpbox){
+			scope.animationmodel.helpbox = null;
+			scope.scene.remove( helpbox );
+			helpbox = undefined;
+		}
+		if(textplane){
+			scope.scene.remove(textplane);
+			textplane.geometry.dispose();
+			textplane.material.dispose();
+		}
+		scope.animationmodel = null;
+	}
+
+	this.updateselect = function(updata){
+		// console.log(updata);
+		if(helpbox){
+			scope.scene.remove( helpbox );
+			helpbox = null;
+		}
+		helpbox = new THREE.BoxHelper( updata.mesh, 0xff0000 );
+		// console.log(updata.mesh);
+		let point = {
+			x:updata.mesh.matrixWorld.elements[12],
+			y:updata.mesh.matrixWorld.elements[13],
+			z:updata.mesh.matrixWorld.elements[14]
+		};
+		settext(updata.mesh,point)
+		getdevicemsg(updata.mesh.name);
+		scope.scene.add( helpbox );
+	}
+
+	function getdevicemsg(selectname){
+		// console.log(selectname);
+		for(let i=0,leni=scope.devicetext.devicelist.length;i<leni;i++){
+
+			if(selectname == scope.devicetext.devicelist[i].name){
+				updatemsg(scope.devicetext.devicelist[i].text,scope.devicetext.devicelist[i].msg);
+				i=leni;
+			}
+		}
+	}
+
+	this.updatewindowstatus = function(nowwindowstatus){
+		scope.windowstatus == nowwindowstatus;
+	}
+
+	function onselect(event){
+		if(event.button == '0'){
+
+			if(scope.raycasterstatus){
+
+				//定义光线
+				let raycaster = new THREE.Raycaster();
+				//定义平面鼠标点击坐标
+				let mouse = new THREE.Vector2();
+				let getBoundingClientRect = scope.dom.getBoundingClientRect()
+				if(scope.windowstatus == '0'){
+					mouse.x = ( (event.clientX - getBoundingClientRect .left)  /scope.dom.offsetWidth) * 2-1;
+					mouse.y = -( (event.clientY - getBoundingClientRect .top) / scope.dom.offsetHeight) * 2 + 1;
+				}else{
+					mouse.x = (event.clientX /  scope.dom.offsetWidth) * 2 - 1;
+					mouse.y = -(event.clientY / scope.dom.offsetHeight) * 2 + 1;
+				}
+
+				raycaster.setFromCamera( mouse, scope.camera );
+
+
+				let intersects = raycaster.intersectObjects( scope.modelmanager.switchmodel.mesh.children,true);
+				if(helpbox){
+					scope.scene.remove( helpbox );
+					helpbox = null;
+				}
+				if(textplane){
+					scope.scene.remove(textplane);
+					textplane.geometry.dispose();
+					textplane.material.dispose();
+				}
+				if(intersects[0]){
+
+
+					if(intersects[0].object.raycastoff){
+						helpbox = new THREE.BoxHelper( intersects[0].object.parent, 0xff0000 );
+						settext(intersects[0].object.parent,intersects[0].point);
+						getdevicemsg(intersects[0].object.parent.name);
+
+					}else{
+						helpbox = new THREE.BoxHelper( intersects[0].object, 0xff0000 );
+						settext(intersects[0].object,intersects[0].point);
+						getdevicemsg(intersects[0].object.name);
+
+					}
+
+					scope.scene.add( helpbox );
+				}
+			}
+
+		}
+
+	}
+
+	function settext(intersects,point){
+		if(intersects.text){
+			let textgeometry = new THREE.PlaneBufferGeometry( 18, 12, 1 );
+			let textt = new THREE.CanvasTexture(getTextCanvas(intersects.text));
+			let textmaterial = new THREE.MeshBasicMaterial( {
+				side: THREE.DoubleSide,
+				map:textt ,transparent: true,
+				alphaTest:0.1
+			} );
+			if(textplane){
+				scope.scene.remove(textplane);
+				textplane.geometry.dispose();
+				textplane.material.dispose();
+			}
+			textplane= new THREE.Mesh( textgeometry, textmaterial );
+			// textplane.name = data[i].code;
+			textplane.position.x = point.x;
+			textplane.position.y = point.y+6;
+			textplane.position.z = point.z;
+			// console.log(textplane.position);
+			// textplane.tcode = data[i].code;
+			textplane.rotation.y = -Math.PI/2;
+			textplane.lookAt(scope.camera.position);
+			// scope.textlist.push(textplane);
+			// newmesh.children[0].add(textplane);
+
+			scope.scene.add(textplane);
+
+			textgeometry.dispose();
+			textmaterial.dispose();
+			textt.dispose();
+		}
+	}
+	var beauty = new Image();
+	beauty.src = "../../static/texture/guide.png";
+	//canvas文字贴图方法
+	//PS:待提炼 增强功能
+	function getTextCanvas(text){
+			var canvas = document.getElementById('canvastexture');
+
+		  canvas.width = 256;
+		  canvas.height = 128;
+
+		  var ctx = canvas.getContext('2d');
+
+		  //var bg = canvas.createPattern(img, "no-repeat");
+		  //ctx.fillStyle = bg;
+		  ctx.fillRect(0, 0,256,128);
+		  ctx.font = "20px Verdana";
+		  ctx.fillStyle = '#FFFFFF';
+		  ctx.textAlign = 'center';
+		  ctx.textBaseline = 'middle';
+		  ctx.clearRect(0,0,256,128);
+		  //console.log(text.groupNumber);
+		  ctx.drawImage(beauty,0,0,256, 128);
+		  ctx.fillText("设备部件:"+text, 90,30);
+		  // ctx.fillText("车组人员:XXX", 40,20);
+		  // ctx.fillText("速度:XXX.XXX", 40,30);
+		  //ctx.fillText(text.trainModel.name, width/2,height*3/4);
+		  let data = ctx.getImageData(0, 0,256, 128);
+		  return data;
+
+	}
+	this.hideswitch = function (nowswitchstatus){
+		if(nowswitchstatus){
+			scope.modelmanager.switchmodel.mesh.add(daochamodel);
+		}else{
+			scope.modelmanager.switchmodel.mesh.remove(daochamodel);
+		}
+
+	}
 }

src/jlmap3d/jl3ddevice/loader.js

@@ -66,9 +66,6 @@ function fbxpromise(asset,mixers,model){
         mixers.push(mixer);
         //model.action.play();
       }
-      console.log(object);
-
-
       resolve(asset.deviceType);
     } );
 

src/utils/baseUrl.js

@@ -2,11 +2,11 @@ export function getBaseUrl() {
     let BASE_API;
     if (process.env.NODE_ENV === 'development') {
         // BASE_API = 'https://joylink.club/jlcloud';
-        // BASE_API = 'https://test.joylink.club/jlcloud';
+        BASE_API = 'https://test.joylink.club/jlcloud';
         // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
         // BASE_API = 'http://192.168.3.6:9000'; // 旭强
         // BASE_API = 'http://192.168.3.41:9000'; // 张赛
-        BASE_API = 'http://192.168.3.82:9000'; // 杜康
+        // BASE_API = 'http://192.168.3.82:9000'; // 杜康
         // BASE_API = 'http://192.168.3.41:9000'; // 张赛
         // BASE_API = 'http://b29z135112.zicp.vip';
         // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

src/views/display/index.vue

@@ -43,7 +43,7 @@
 
     <!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
 
-    <Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
+    <Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" />
     <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
 
     <scheduling v-if="isShowScheduling" ref="scheduling" :group="group" />

src/views/jlmap3d/device/jl3ddevice.vue

@@ -33,6 +33,7 @@
 		},
 		data() {
 			return {
+				datastatus:"",
 				jl3d: null,
 				psdlist:this.$store.state.map.map.psdList,
 				windowstatus:false,
@@ -63,6 +64,7 @@
 			},
 			'$store.state.menuOperation.selectedCount': {
 				handler: function (newVal, oldVal) {
+					if(this.datastatus == "new"){
 						if (newVal != oldVal) {
 							if(this.$store.state.menuOperation.selected._type){
 								if(this.$store.state.menuOperation.selected._type == "StationStand"){
@@ -77,11 +79,10 @@
 									this.jl3d.selectmodel(this.$store.state.menuOperation.selected);
 								}
 							}
-
-						// this.jl3d.selectmodel(this.$store.state.socket.device);
-
 						}
 					}
+
+				}
 			},
 			// '$store.state.socket.device': {
 			// 	deep: true,
@@ -111,10 +112,14 @@
 			let header = this.$route.query.token;
 			// console.log(this.$store.state.menuOperation);
 			// console.log(this.$store.state.map.map.linkList);
+			// console.log(this.$store.state.map.map.linkList);
 			if(this.$store.state.map.map.linkList){
+				this.datastatus = "old";
 	      this.initolddata(group,header);
 			}else{
+				this.datastatus = "new";
 				this.initnewdata(group,header);
+
 			}
 			// if (group) {
       //   this.init(group,header);