joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sunzhenyu 2021-06-17 15:50:18 +08:00
parent 0879173066
commit e3e7bf4a8d
8 changed files with 348 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/jlmap3d/jl3drailwaydrive/jl3drailwaydrive.js
View File

@ -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);
}

2
src/utils/baseUrl.js
View File

@ -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'; // 杜康

267
src/views/jlmap3d/railwaydrive/drivecontrol/centerpane.vue
View File

@ -9,16 +9,26 @@
<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"/>
<img id="div2" class="lgimg" :src="lg" :style="{top:movex}" @mousedown="speedstart" />
<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>
@ -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;
let angleall =397 - data[5]/100*105;
this.braketrans = "rotate("+angle+"deg)";
this.braketransall = "rotate("+angleall+"deg)";
this.stopheight = data[6]/150*235;
this.stopx = this.stopheight+15 +"px";
// 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>

6
src/views/jlmap3d/railwaydrive/drivecontrol/drivecontrol.vue
View File

@ -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;

78
src/views/jlmap3d/railwaydrive/sceneview/mmi.js
View File

@ -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 material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
var atp = new THREE.Mesh( geometry, material );
atp.position.x = 2.48;
atp.position.y = -0.34;
atp.position.z = 1;
//zc.rotation.y = Math.PI;
//0刻度-Math.PI*65.8/100
//110刻度-Math.PI*234.8/100
atp.rotation.z = -Math.PI*65.8/100;
scene.add( atp );
// var geometry = new THREE.PlaneBufferGeometry( 2, 2, 2 );
// var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
// var atp = new THREE.Mesh( geometry, material );
// atp.position.x = 2.48;
// atp.position.y = -0.34;
// atp.position.z = 1;
// //zc.rotation.y = Math.PI;
// //0刻度-Math.PI*65.8/100
// //110刻度-Math.PI*234.8/100
// atp.rotation.z = -Math.PI*65.8/100;
// 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 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.PlaneBufferGeometry( 2, 2, 2 );
// var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
// var ato = new THREE.Mesh( geometry, material );
// ato.position.x = 2.48;
// ato.position.y = -0.34;
// ato.position.z = 1;
// //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 material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
var ato = new THREE.Mesh( geometry, material );
ato.position.x = 2.48;
ato.position.y = -0.34;
ato.position.z = 1;
//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.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 );
// 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 );
}

4
src/views/jlmap3d/railwaydrive/sceneview/mmiview.vue
View File

@ -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',

BIN
static/jl3d/railway/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
static/jl3d/raiwaybiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB