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 2019-08-07 11:28:46 +08:00
parent 7edaf938c7
commit 5899fe1347
5 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/jlmap3d/config/Render.js
View File

@ -1,6 +1,12 @@
export function SetRender(dom) {
console.log(dom.clientWidth);
console.log(dom.clientHeight);
console.log(dom.innerWidth);
console.log(dom.innerHeight);
console.log(dom.offsetWidth);
console.log(dom.offsetHeight);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(dom.clientWidth, dom.clientHeight);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(dom.offsetWidth, dom.offsetHeight);
//renderer.setSize( window.innerWidth, window.innerHeight );
return renderer;
}

6
src/jlmap3d/jl3dsimulation/jl3dsimulation.js
View File

@ -48,7 +48,9 @@ export function JLmapDriving(dom, data,skinStyle) {
this.animateswitch = false;
//初始化webgl渲染
let renderer = SetRender(dom);
dom.appendChild(renderer.domElement);
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = "0";
document.getElementById('jlsimulation').appendChild(renderer.domElement);
//定义相机
let camera = SetCamera(dom);
//定义场景(渲染容器)
@ -85,7 +87,7 @@ export function JLmapDriving(dom, data,skinStyle) {
//地图模型数据
let mapdata = new Jl3ddata();
let camera2 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
let camera2 = new THREE.PerspectiveCamera( 60,window.innerWidth / window.innerHeight, 1, 2000 );
camera2.name = "camera2";
let controls3 = new MouseControls(camera2, 1.6);

4
src/jlmap3d/jlmap3d.js
View File

@ -48,7 +48,9 @@ export function JLmap3d(dom, data,skinStyle) {
this.animateswitch = false;
//初始化webgl渲染
let renderer = SetRender(dom);
dom.appendChild(renderer.domElement);
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = "0";
document.getElementById('testjlmap3d').appendChild(renderer.domElement);
//定义相机
let camera = SetCamera(dom);
//定义场景(渲染容器)

7
src/views/jlmap3d/index.vue
View File

@ -116,7 +116,7 @@
},
init: function (skinStyle) {
let mapdata = this.$store.getters['map/map'];
let dom = document.getElementById('testjlmap3d');
let dom = document.getElementById('app');
this.jlmap3d = new JLmap3d(dom, mapdata, skinStyle);
this.jlmap3d.eventon();
},
@ -227,8 +227,6 @@
}
#testjlmap3d {
width: 937px;
height: 937px;
}
.jalmap3ddiv {
@ -244,7 +242,8 @@
//left:20%;
width: 100%;
height: 100%;
z-index: 0;
position:absolute;
z-index: -1;
}
#canvastexture {

5
src/views/jlmap3d/simulation/jl3dsimulation.vue
View File

@ -160,7 +160,7 @@
},
init: function (skinStyle) {
let mapdata = this.$store.getters['map/map'];
let dom = document.getElementById('jlsimulation');
let dom = document.getElementById('app');
this.jlmap3d = new JLmapDriving(dom, mapdata, skinStyle);
this.jlmap3d.eventon();
@ -291,7 +291,8 @@
//left:20%;
width: 100%;
height: 100%;
z-index: 0;
position:absolute;
z-index: -1;
}
#canvastexture {