From 79c5f002bd1c001e39a1910bdaf9e1eb21f1e58e Mon Sep 17 00:00:00 2001 From: aixianling Date: Tue, 2 Jul 2024 19:01:27 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E9=BC=93=E6=8D=A3=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AppThreeMap.vue | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/views/AppThreeMap.vue b/src/views/AppThreeMap.vue index f0e42ff..6186062 100644 --- a/src/views/AppThreeMap.vue +++ b/src/views/AppThreeMap.vue @@ -250,7 +250,7 @@ export default { * @desc 创建相机 * */ 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.y = 0; this.camera.up.z = 1; @@ -262,17 +262,18 @@ export default { * @desc 创建渲染器 * */ setRenderer() { + console.log(rootEl.offsetWidth, rootEl.offsetHeight) this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer.setPixelRatio(window.devicePixelRatio * 1); this.renderer.sortObjects = true; // 渲染顺序 this.renderer.setClearColor('#212121'); - this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight); + this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight); rootEl.appendChild(this.renderer.domElement); function onWindowResize() { - this.camera.aspect = rootEl.innerWidth / rootEl.innerHeight; + this.camera.aspect = rootEl.offsetWidth / rootEl.offsetHeight; this.camera.updateProjectionMatrix(); - this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight); + this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight); } rootEl.addEventListener('resize', onWindowResize.bind(this), false); @@ -303,8 +304,8 @@ export default { let that = this; function onMouseMove(event) { - const x = (event.clientX / rootEl.innerWidth) * 2 - 1; //标准设备横坐标 - const y = -(event.clientY / rootEl.innerHeight) * 2 + 1; //标准设备纵坐标 + const x = (event.clientX / rootEl.offsetWidth) * 2 - 1; //标准设备横坐标 + const y = -(event.clientY / rootEl.offsetHeight) * 2 + 1; //标准设备纵坐标 const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标 //标准设备坐标转世界坐标 const worldVector = standardVector.unproject(that.camera); @@ -349,16 +350,8 @@ export default { // window.addEventListener('mousemove', onMouseMove, false); } - /** - * @desc 创建地面函数 - * */ 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({ - // map: maps, opacity: 1, transparent: true, color: '#07193D'