修改三维大铁驾驶面板，增加云效果

src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js

@@ -67,6 +67,52 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 	//let camera = SetCamera(dom);
 	// 定义场景(渲染容器)
 	let scene = SetScene(project);
+	scene.background = new THREE.CubeTextureLoader()
+				.setPath( 'https://oss.joylink.club/oss/joylink/PICTURE/2021-06-15/' )
+				.load( [ '18-75117.jpg', '17-78286.jpg', '19-62689.jpg', '15-95146.jpg', '16-99183.jpg', '14-94914.jpg' ] );
+
+	let meshCloud;
+	var loader = new THREE.TextureLoader();
+  // 加载一个资源
+  loader.load(
+    // 资源URL
+    JL3D_LOCAL_STATIC+"/jl3d/railway/c.png",
+
+    // onLoad回调
+    function ( texture ) {
+
+			let materialCloud = new THREE.MeshPhongMaterial({
+				transparent:true,
+				map:texture,
+			});
+			let planeCloud = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );
+			let geoCloud =  new THREE.Geometry();
+
+			for ( var i = 0; i < 20; i++ ) {
+
+				planeCloud.position.x = 1000 - 2000 * Math.random();
+				planeCloud.position.y = Math.random() * 500+100 ;
+				planeCloud.position.z = 1000 - 2000 * Math.random();
+				planeCloud.rotation.z = Math.random() * Math.PI*i;
+				planeCloud.scale.x = planeCloud.scale.y = Math.random() * Math.random() * 5+0.5;
+				planeCloud.lookAt(new THREE.Vector3( 0, 0, 0 ));
+				THREE.GeometryUtils.merge( geoCloud, planeCloud );
+
+			}
+
+			meshCloud = new THREE.Mesh( geoCloud, materialCloud );
+			meshCloud.renderOrder = 8;
+			camera.add( meshCloud );
+    },
+
+    // 目前暂不支持onProgress的回调
+    undefined,
+
+    // onError回调
+    function ( err ) {
+      console.error( 'An error happened.' );
+    }
+  );
 
 	let speed = 0;
 
@@ -113,7 +159,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 	// 地图模型数据
 	let mapdata = new Jl3ddata();
 
-	let camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 0.1, 400000);
+	let camera = new THREE.PerspectiveCamera(70, dom.clientWidth/dom.clientHeight, 0.1, 4000);
 	camera.position.set( 0, 0, 0 );
 	camera.aspect = window.innerWidth / window.innerHeight;
 	camera.updateProjectionMatrix();
@@ -201,7 +247,7 @@ export function JLmapDriving(dom,data,mapId,storemod,translation,routegroup,proj
 			// 根据相机渲染场景
 			renderer.render(scene, camera);
 			//cctv渲染
-
+			meshCloud.rotation.y += 0.0001;
 			if(scope.cctvswitch == true){
 				renderercctv.render(scene,cameracctv);
 			}

src/utils/baseUrl.js

@@ -6,7 +6,7 @@ export function getBaseUrl() {
         // BASE_API = 'http://192.168.8.107:9000'; // 袁琪
         // BASE_API = 'http://192.168.3.83:9000'; // 旭强 有线
         // BASE_API = 'http://192.168.8.114:9000'; // 旭强 无线
-        BASE_API = 'http://192.168.3.120:9000'; // 张赛
+        // BASE_API = 'http://192.168.3.120:9000'; // 张赛
         // BASE_API = 'http://192.168.8.140:9000'; // 杜康
         // BASE_API = 'http://b29z135112.zicp.vip';
         // BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue

@@ -9,18 +9,28 @@
 			<img id="directimgbrakeall" class="brakeimg" :src="brakeallimgurlt" :style="{transform:braketransall}" @mousedown="touchstartbrakeall"  />
 		</div> -->
 
-		<div id="direct" class="brakebutton" style="bottom:5%;left:100px;">
+		<!-- <div id="direct" class="brakebutton" style="bottom:5%;left:100px;">
 			<img class="brakeimg" :src="brakeimgurl" />
 			<img id="directimgbrake" class="brakeimg" :src="brakeimgurlt" :style="{transform:braketrans}" @mousedown="touchstartbrake"  />
+		</div> -->
+
+		<div id="directpane" class="directbutton" style="bottom:10px;left:150px;">
+			<img class="rightbuttonbcimg" :src="zuoimg" />
+			<img id="directimgdiv" class="rightbuttonbcimg" :src="niuimg" :style="{transform:doordirecttou}" @mousedown='doordirecttouchstart' />
 		</div>
 
-
-
 		<div id="div1" class ="pane-box">
-      <img class="paneimg" :src="pane"/>
+			<div style="width:100%;height:33px;position:absolute;top:0;font-size:33px;color:#ffffff;">油门</div>
+      <img class="paneimg" :src="pane" @mouseout="speedout"  />
       <img id="div2" class="lgimg" :src="lg" :style="{top:movex}" @mousedown="speedstart"  />
 			<!-- @mouseup="speedend" -->
 		</div>
+		<div id="div3" class ="pane-box2">
+			<div style="width:100%;height:33px;position:absolute;top:0;font-size:33px;color:#ffffff;">刹车</div>
+			<img class="paneimg" :src="pane" @mouseout="bakeout"/>
+			<img id="div4" class="lgimg" :src="lg" :style="{top:stopx}" @mousedown="bakestart"    />
+			<!-- @mouseup="speedend" -->
+		</div>
 
 	</div>
 </template>
@@ -65,6 +75,10 @@
 				pane:JL3D_LOCAL_STATIC+"/jl3d/railway/lg.png",
 				lg:JL3D_LOCAL_STATIC+"/jl3d/railway/yuahdfgdfre.png",
 
+				doordirecttou:"rotate(0deg)",
+				zuoimg:JL3D_LOCAL_STATIC+"/jl3d/railway/direct.png",
+				niuimg:JL3D_LOCAL_STATIC+"/jl3d/control/niu.png",
+
 				iconrotate:45,//旋转deg
 				icontranslateX:100,//沿x轴位移px
 				icontranslateY:100,//沿y轴位移px
@@ -83,6 +97,11 @@
 	        y: null
 				},
 				moveheight:null,
+				move:0,
+				movex:"73px",
+				stopheight:null,
+				stop:0,
+				stopx:"73px",
 				speedlimit:160,
 
 			}
@@ -147,11 +166,30 @@
 			updateInitStatus : function(data){
 				this.moveheight = data[4]/100*235;
 				this.movex = this.moveheight+15 +"px";
-				let angle = 397 - data[6]/150*83;
+				this.stopheight = data[6]/150*235;
-				let angleall =397 - data[5]/100*105;
+				this.stopx = this.stopheight+15 +"px";
-				this.braketrans = "rotate("+angle+"deg)";
-				this.braketransall = "rotate("+angleall+"deg)";
 
+				// let angle = 397 - data[6]/150*83;
+				// let angleall =397 - data[5]/100*105;
+				// this.braketrans = "rotate("+angle+"deg)";
+				// this.braketransall = "rotate("+angleall+"deg)";
+
+				if(data[2] == "1"){
+					this.doordirecttou = "rotate("+320+"deg)";
+					this.oldDirectType = 1;
+				}
+				if(data[2] == "0"){
+					this.doordirecttou = "rotate("+360+"deg)";
+					this.oldDirectType = 0;
+				}
+				if(data[2] == "-1"){
+					this.doordirecttou = "rotate("+399+"deg)";
+					this.oldDirectType = -1;
+				}
+				if(data[2] == "2"){
+					this.doordirecttou = "rotate("+442+"deg)";
+					this.oldDirectType = 2;
+				}
 			},
 			centerstate : function(gear){
 				this.touchstate = gear;
@@ -199,6 +237,54 @@
 
 				}
 			},
+			bakestart: function(event){
+				let domoffset = document.getElementById("div3").getBoundingClientRect();
+				// movelimit
+				this.movelimit.x = domoffset.x;
+				this.movelimit.y = domoffset.y;
+				event.preventDefault();
+	      document.getElementById("div3").onmousemove = this.bakechange;
+				document.getElementById("div4").onmouseup  = this.bakeend;
+			},
+			bakechange: function(event){
+					this.stopheight = event.pageY-this.movelimit.y;
+					this.stopx = this.stopheight-15 +"px";
+					// if(this.atostate == true){
+					// 	this.$store.dispatch('app/setAtoState', false);
+					// }
+					this.stop = this.stopheight/235;
+					if(this.stopheight<=40){
+						this.stopheight=30;
+						this.stopx=23+"px";
+						this.stop = 0;
+					}
+					if(this.stopheight>=235){
+						this.stopheight=235;
+						this.stopx=235+"px";
+						this.stop = 1;
+					}
+
+					let param = {
+						// id:this.groupNum,
+						id:"001",
+						pos:parseInt(this.stop*150)
+					};
+					const userInfo = store.state.training.simulationUserList.find(el => el.id == store.state.user.id);
+					throttle(
+						trainSimulationForce(this.group,userInfo.memberId,param,"Train_Drive_Auto_Break  ").then(res => {
+								// console.log(res);
+						}).catch((error) => {
+								console.log(error);
+						}),200,true);
+			},
+			bakeend: function(event){
+				document.getElementById("div3").onmousemove = null;
+				document.getElementById("div4").onmouseup  = null;
+			},
+			bakeout: function(event){
+				document.getElementById("div3").onmousemove = null;
+				document.getElementById("div4").onmouseup  = null;
+			},
 			speedstart: function(event){
 				let domoffset = document.getElementById("div1").getBoundingClientRect();
 				// movelimit
@@ -207,6 +293,7 @@
 				event.preventDefault();
 	      document.getElementById("div1").onmousemove = this.speedchange;
 				document.getElementById("div2").onmouseup  = this.speedend;
+
 			},
 			speedchange: function(event){
 					this.moveheight = event.pageY-this.movelimit.y;
@@ -245,7 +332,10 @@
 				document.getElementById("div1").onmousemove = null;
 				document.getElementById("div2").onmouseup  = null;
 			},
-
+			speedout: function(event){
+				document.getElementById("div1").onmousemove = null;
+				document.getElementById("div2").onmouseup  = null;
+			},
 
 
 			click:function(){//图标点击事件
@@ -340,7 +430,7 @@
 						}).catch((error) => {
 								console.log(error);
 						}),200,true);
-					updatemmic1(param.percent);
+					// updatemmic1(param.percent);
 
 				}
 
@@ -434,6 +524,135 @@
 				}
 
 			},
+			doordirecttouchstart:function(e){
+
+
+				let domoffset = document.getElementById("directimgdiv").getBoundingClientRect();
+				// movelimit
+				this.angleoffset.x = domoffset.x;
+				this.angleoffset.y = domoffset.y;
+
+
+				e.preventDefault();
+
+				document.getElementById("directimgdiv").onmousemove = this.doordirecttouchmove;
+				document.getElementById("directimgdiv").onmouseup  = this.doordirecttouchup;
+
+
+			},
+			doordirecttouchmove:function(e){//finger move 触发
+				// console.log(e);
+
+				this.getAngle(e.pageX-this.angleoffset.x ,e.pageY-this.angleoffset.y);
+			},
+			doordirecttouchup:function(e){
+				document.getElementById("directimgdiv").onmousemove = null;
+				document.getElementById("directimgdiv").onmouseup  = null;
+			},
+
+			getAngle:function(mx,my){
+
+				let px=50;
+				let py=50;
+				// let x = Math.abs(px-mx);
+				// let y = Math.abs(py-my);
+				// let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				// let cos = y/z;
+				// let radina = Math.acos(cos);//用反三角函数求弧度
+				// let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+
+				//圆心坐标
+				let x = Math.abs(px-mx);
+				let y = Math.abs(py-my);
+				let z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
+				let cos = y/z;
+				let radina = Math.acos(cos);//用反三角函数求弧度
+				let angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
+
+				if(mx>px&&my>py){//鼠标在第四象限
+					angle = 180 - angle;
+				}
+
+				// if(mx==px&&my>py){//鼠标在y轴负方向上
+				// 	angle = 180;
+				// }
+
+				// if(mx>px&&my==py){//鼠标在x轴正方向上
+				// 	angle = 90;
+				// }
+
+				if(mx<px&&my>py){//鼠标在第三象限
+					angle = 180+angle;
+				}
+				//
+				// if(mx<px&&my==py){//鼠标在x轴负方向
+				// 	angle = 270;
+				// }
+
+				if(mx<px&&my<py){//鼠标在第二象限
+					angle = 360 - angle;
+				}
+
+				angle = angle + 180;
+
+				let paramGear = {
+					// id:this.groupNum,
+					id:"001",
+					pos:''
+				};
+
+				// console.log(angle);
+				if(angle<=356){
+
+					this.doordirecttou = "rotate("+320+"deg)";
+					this.directType = 1;
+					paramGear.pos = '4';
+				}
+				if(angle>356 && angle<372){
+					this.doordirecttou = "rotate("+360+"deg)";
+					this.directType = 0;
+					paramGear.pos = '0';
+				}
+
+				if(angle>372 && angle<421){
+					this.doordirecttou = "rotate("+399+"deg)";
+					this.directType = -1;
+					paramGear.pos = '4';
+				}
+
+				if(angle>421){
+					this.doordirecttou = "rotate("+442+"deg)";
+					this.directType = 2;
+					paramGear.pos = '4';
+				}
+
+
+
+
+
+				if(this.oldDirectType != this.directType){
+					this.oldDirectType = this.directType;
+					let param = {
+						// id:this.groupNum,
+						id:"001",
+						pos:parseInt(this.directType)
+					};
+					const userInfo = store.state.training.simulationUserList.find(el => el.id == store.state.user.id);
+
+					trainSimulationForce(this.group,userInfo.memberId,paramGear,"Train_Drive_Gear_Change").then(res => {
+							// console.log(res);
+					}).catch((error) => {
+							console.log(error);
+					});
+
+					trainSimulationForce(this.group,userInfo.memberId,param,"Train_Drive_Change_Over_Switch").then(res => {
+							// console.log(res);
+					}).catch((error) => {
+							console.log(error);
+					});
+				}
+			},
 		},
 	}
 </script>
@@ -462,7 +681,16 @@
         height:300px;
         overflow: hidden;
         position: absolute;
-
+				text-align: center;
+    }
+		.pane-box2{
+        right: 0px;
+        bottom: 10px;
+        width:120px;
+        height:300px;
+        overflow: hidden;
+        position: absolute;
+				text-align: center;
     }
 		.lgimg{
 				width: 60px;
@@ -502,5 +730,20 @@
 		font-size: 1px;
 		position:absolute;
 	}
+	.directbutton{
+		width: 100px;
+		height: 100px;
+		position: absolute;
+		text-align: center;
+		cursor:pointer;
+	}
+
+	.rightbuttonbcimg{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top:0;
+		left:0;
+	}
 
 </style>

src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue

@@ -20,7 +20,7 @@
 
 			<!-- <Left-Pane ref="leftcontrol" /> -->
 
-			<Right-Pane ref="rightcontrol" />
+			<!-- <Right-Pane ref="rightcontrol" /> -->
 
 			<!-- <TopRight-Pane ref="topcontrol" :group-num="groupnum" /> -->
 
@@ -290,7 +290,7 @@ import axios from 'axios';
 			updateDriveValue(newvalue){
 
 				this.$refs.centercontrol.updateInitStatus(newvalue);
-				this.$refs.rightcontrol.updateInitStatus(newvalue);
+				// this.$refs.rightcontrol.updateInitStatus(newvalue);
 			},
 			updatetrainlist(){
 				getMemberListCommon(this.$route.query.group,"DRIVER").then(netdata => {
@@ -362,7 +362,7 @@ import axios from 'axios';
 
 <style>
 	.drivepane{
-		width:30%;
+		width:400px;
     height:333px;
 		right:0;
 		bottom:0;

src/views/jlmap3d/railwaydrive/sceneview/mmi.js

@@ -21,7 +21,7 @@ export function mmirender(dom) {
   scene.add( plane );
 
 
-  var texture = new THREE.TextureLoader().load( JL3D_LOCAL_STATIC+'/jl3d/biao.png' );
+  var texture = new THREE.TextureLoader().load( JL3D_LOCAL_STATIC+'/jl3d/raiwaybiao.png' );
   var geometry = new THREE.PlaneBufferGeometry( 60, 60, 2 );
   var material = new THREE.MeshBasicMaterial( {map: texture, side: THREE.DoubleSide} );
   var kd = new THREE.Mesh( geometry, material );
@@ -47,45 +47,45 @@ export function mmirender(dom) {
   zz.position.x = 11;
   zc.add( zz );
 
-  var geometry = new THREE.PlaneBufferGeometry( 2, 2, 2 );
+  // var geometry = new THREE.PlaneBufferGeometry( 2, 2, 2 );
-  var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
+  // var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
-  var atp = new THREE.Mesh( geometry, material );
+  // var atp = new THREE.Mesh( geometry, material );
-  atp.position.x = 2.48;
+  // atp.position.x = 2.48;
-  atp.position.y = -0.34;
+  // atp.position.y = -0.34;
-  atp.position.z = 1;
+  // atp.position.z = 1;
-  //zc.rotation.y = Math.PI;
+  // //zc.rotation.y = Math.PI;
-  //0刻度-Math.PI*65.8/100
+  // //0刻度-Math.PI*65.8/100
-  //110刻度-Math.PI*234.8/100
+  // //110刻度-Math.PI*234.8/100
-  atp.rotation.z = -Math.PI*65.8/100;
+  // atp.rotation.z = -Math.PI*65.8/100;
-  scene.add( atp );
+  // scene.add( atp );
+  //
+  // var geometry = new THREE.CircleBufferGeometry(1.5, 1 );
+  // var material = new THREE.MeshBasicMaterial( {color: 0xea0000, side: THREE.DoubleSide} );
+  // var atpmark = new THREE.Mesh( geometry, material );
+  // atpmark.position.z = 1;
+  // atpmark.position.x = 21;
+  // atpmark.rotation.y = Math.PI;
+  // atp.add( atpmark );
 
-  var geometry = new THREE.CircleBufferGeometry(1.5, 1 );
+  // var geometry = new THREE.PlaneBufferGeometry( 2, 2, 2 );
-  var material = new THREE.MeshBasicMaterial( {color: 0xea0000, side: THREE.DoubleSide} );
+  // var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
-  var atpmark = new THREE.Mesh( geometry, material );
+  // var ato = new THREE.Mesh( geometry, material );
-  atpmark.position.z = 1;
+  // ato.position.x = 2.48;
-  atpmark.position.x = 21;
+  // ato.position.y = -0.34;
-  atpmark.rotation.y = Math.PI;
+  // ato.position.z = 1;
-  atp.add( atpmark );
+  // //zc.rotation.y = Math.PI;
+  // //0刻度-Math.PI*65.8/100
+  // //110刻度-Math.PI*234.8/100
+  // ato.rotation.z = -Math.PI*65.8/100;
+  // scene.add( ato );
 
-  var geometry = new THREE.PlaneBufferGeometry( 2, 2, 2 );
+  // var geometry = new THREE.CircleBufferGeometry(1.5, 1 );
-  var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
+  // var material = new THREE.MeshBasicMaterial( {color: 0xEEEE00, side: THREE.DoubleSide} );
-  var ato = new THREE.Mesh( geometry, material );
+  // var atomark = new THREE.Mesh( geometry, material );
-  ato.position.x = 2.48;
+  // atomark.position.z = 1;
-  ato.position.y = -0.34;
+  // atomark.position.x = 21;
-  ato.position.z = 1;
+  // atomark.rotation.y = Math.PI;
-  //zc.rotation.y = Math.PI;
+  // ato.add( atomark );
-  //0刻度-Math.PI*65.8/100
-  //110刻度-Math.PI*234.8/100
-  ato.rotation.z = -Math.PI*65.8/100;
-  scene.add( ato );
-
-  var geometry = new THREE.CircleBufferGeometry(1.5, 1 );
-  var material = new THREE.MeshBasicMaterial( {color: 0xEEEE00, side: THREE.DoubleSide} );
-  var atomark = new THREE.Mesh( geometry, material );
-  atomark.position.z = 1;
-  atomark.position.x = 21;
-  atomark.rotation.y = Math.PI;
-  ato.add( atomark );
 
 
 
@@ -99,7 +99,7 @@ export function mmirender(dom) {
   }
 
   this.updatezz = function(speed){
-    zc.rotation.z = -Math.PI*(65.8+169*speed/110)/100;
+    zc.rotation.z = -Math.PI*(72.3+157*speed/360)/100;
 
     renderer.render( scene, camera );
   }

src/views/jlmap3d/railwaydrive/sceneview/mmiview.vue

@@ -95,9 +95,9 @@ import axios from 'axios';
 
 import { prefixIntrger } from '@/utils/date';
 
-import { mmirender } from '@/views/jlmap3d/drive/sceneview/mmi';
+import { mmirender } from '@/views/jlmap3d/railwaydrive/sceneview/mmi';
 
-import { mmiimage } from '@/views/jlmap3d/drive/sceneview/mmiimage';
+import { mmiimage } from '@/views/jlmap3d/railwaydrive/sceneview/mmiimage';
 
 export default {
   name: 'SimulationMmi',