kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

重新鼓捣地图

Browse Source
This commit is contained in:
aixianling
2024-07-02 19:01:27 +08:00
parent 83249af3f3
commit 79c5f002bd
1 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/AppThreeMap.vue
View File

@@ -250,7 +250,7 @@ export default {
* @desc 创建相机 * @desc 创建相机
* */ * */
setCamera() { setCamera() {
this.camera = new THREE.PerspectiveCamera(10, rootEl.innerWidth / rootEl.innerHeight, 1, 2000); this.camera = new THREE.PerspectiveCamera(10, rootEl.offsetWidth / rootEl.offsetHeight, 1, 2000);
this.camera.up.x = 0; this.camera.up.x = 0;
this.camera.up.y = 0; this.camera.up.y = 0;
this.camera.up.z = 1; this.camera.up.z = 1;
@@ -262,17 +262,18 @@ export default {
* @desc 创建渲染器 * @desc 创建渲染器
* */ * */
setRenderer() { setRenderer() {
console.log(rootEl.offsetWidth, rootEl.offsetHeight)
this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setPixelRatio(window.devicePixelRatio * 1); this.renderer.setPixelRatio(window.devicePixelRatio * 1);
this.renderer.sortObjects = true; // 渲染顺序 this.renderer.sortObjects = true; // 渲染顺序
this.renderer.setClearColor('#212121'); this.renderer.setClearColor('#212121');
this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight); this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
rootEl.appendChild(this.renderer.domElement); rootEl.appendChild(this.renderer.domElement);
function onWindowResize() { function onWindowResize() {
this.camera.aspect = rootEl.innerWidth / rootEl.innerHeight; this.camera.aspect = rootEl.offsetWidth / rootEl.offsetHeight;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight); this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
} }
rootEl.addEventListener('resize', onWindowResize.bind(this), false); rootEl.addEventListener('resize', onWindowResize.bind(this), false);
@@ -303,8 +304,8 @@ export default {
let that = this; let that = this;
function onMouseMove(event) { function onMouseMove(event) {
const x = (event.clientX / rootEl.innerWidth) * 2 - 1; //标准设备横坐标 const x = (event.clientX / rootEl.offsetWidth) * 2 - 1; //标准设备横坐标
const y = -(event.clientY / rootEl.innerHeight) * 2 + 1; //标准设备纵坐标 const y = -(event.clientY / rootEl.offsetHeight) * 2 + 1; //标准设备纵坐标
const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标 const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
//标准设备坐标转世界坐标 //标准设备坐标转世界坐标
const worldVector = standardVector.unproject(that.camera); const worldVector = standardVector.unproject(that.camera);
@@ -349,16 +350,8 @@ export default {
// window.addEventListener('mousemove', onMouseMove, false); // window.addEventListener('mousemove', onMouseMove, false);
} }
/**
* @desc 创建地面函数
* */
makeGround() { makeGround() {
const maps = new THREE.TextureLoader().load("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAInUlEQVR4nO3ZMQ7CMBAAwQTlSfn/C/iT6SKEKHEC7ExnCeXceXWsY4yxnGM/aQ4A/Lr77AG32QMAgO8jAAAgaHs5r5fcAgB4Nus9Pv72twEAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAgrZlWfarLwEAnOJ4820AACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAgtYxxng+X3YTAGC24823AQCAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIGh7OY+3v/qMfeK3AeCf3GcPsAEAgCABAABBD+KuEWUfb+G0AAAAAElFTkSuQmCC");
maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
maps.repeat.set(14, 14); // 纹理 y,x方向重铺
maps.needsUpdate = false; // 纹理更新
let material = new THREE.MeshBasicMaterial({ let material = new THREE.MeshBasicMaterial({
// map: maps,
opacity: 1, opacity: 1,
transparent: true, transparent: true,
color: '#07193D' color: '#07193D'