From 4873e7b5eb2f75e38768b8886c11a1e1c2708b7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Fri, 12 Jul 2024 13:40:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=90=E5=8D=87=E6=9C=BA?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw-ui/src/views/board/model/animation.js | 124 +++++++++-------------- hw-ui/src/views/board/model/index.vue | 96 +++++++----------- 2 files changed, 83 insertions(+), 137 deletions(-) diff --git a/hw-ui/src/views/board/model/animation.js b/hw-ui/src/views/board/model/animation.js index 4ffa103..59ba57b 100644 --- a/hw-ui/src/views/board/model/animation.js +++ b/hw-ui/src/views/board/model/animation.js @@ -1,3 +1,4 @@ +let tuopanInishengji = true let storeyHeight = { 1: 0, 2: 261.9, @@ -27,70 +28,70 @@ let tuopanLocation = { z: 0 } -const tishengjiAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => { +const tishengjiAnimation = (model, floor, newLocation = 0, time = 2000) => { return new Promise((resolve, reject) => { - try { - if (!model) { - reject() + tishengjiLocation.floor = floor + if (!model || tishengjiLocation.y === newLocation) { + resolve() + } + let distance = newLocation - tishengjiLocation.y + let time1 = setInterval(() => { + if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) { + model.position.y = newLocation + tishengjiLocation.y = newLocation + resolve() + clearInterval(time1) + clearTimeout(time3) + } else { + model.position.y += distance / (time / 16) + tishengjiLocation.y = model.position.y } - let distance = newLocation - oddLocation + }, 16) + let time3 = setTimeout(() => { + resolve() + clearInterval(time1) + clearTimeout(time3) + }, time + 1000) + + }) +} + +const tuopanXAnimation = (model, newLocation = 0, time = 2000) => { + return new Promise((resolve, reject) => { + if (!model || newLocation === tuopanLocation.x || tishengjiLocation.floor !== tuopanLocation.floor) { + resolve() + }else{ + tuopanInishengji = newLocation === 0; + let distance = newLocation - tuopanLocation.x let time1 = setInterval(() => { - if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) { - model.position.y = newLocation - tishengjiLocation.y = newLocation + if ((distance > 0 && model.position.x >= newLocation) || (distance < 0 && model.position.x <= newLocation)) { + model.position.x = newLocation + tuopanLocation.x = newLocation resolve() clearInterval(time1) clearTimeout(time3) } else { - model.position.y += distance / (time / 16) - tishengjiLocation.y = model.position.y + model.position.x += distance / (time / 16) + tuopanLocation.x = model.position.x } }, 16) let time3 = setTimeout(() => { - reject() + resolve(0) clearInterval(time1) clearTimeout(time3) }, time + 1000) - - }catch (e) { - console.log(e) } }) } -const tuopanXAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => { +const tuopanYAnimation = (model, floor, newLocation = 0, time = 2000) => { return new Promise((resolve, reject) => { - if (!model) { - reject() - } - let distance = newLocation - oddLocation - let time1 = setInterval(() => { - if ((distance > 0 && model.position.x >= newLocation) || (distance < 0 && model.position.x <= newLocation)) { - model.position.x = newLocation - tuopanLocation.x = newLocation - resolve() - clearInterval(time1) - clearTimeout(time3) - } else { - model.position.x += distance / (time / 16) - tuopanLocation.x = model.position.x - } - }, 16) - let time3 = setTimeout(() => { - reject() - clearInterval(time1) - clearTimeout(time3) - }, time + 1000) - }) -} - -const tuopanYAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => { - return new Promise((resolve, reject) => { - if (!model) { - reject() + tuopanLocation.floor = floor + if (!model || tuopanLocation.y === newLocation) { + resolve() } - let distance = newLocation - oddLocation + let distance = newLocation - tuopanLocation.y let time1 = setInterval(() => { if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) { model.position.y = newLocation @@ -104,50 +105,19 @@ const tuopanYAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) } }, 16) let time3 = setTimeout(() => { - reject() - clearInterval(time1) - clearTimeout(time3) - }, time + 1000) - }) -} - -const tuopanAnimation = (model, oddLocation = {}, newLocation = {}, time = 2000) => { - return new Promise((resolve, reject) => { - if (!model) { - reject() - } - let X = ((newLocation.x === null || newLocation.x === undefined) ? oddLocation.x : newLocation.x) - oddLocation.x - let Y = ((newLocation.y === null || newLocation.y === undefined) ? oddLocation.y : newLocation.y) - oddLocation.y - let time1 = setInterval(() => { - model.position.x += X / (time / 16) - model.position.y += Y / (time / 16) - tuopanLocation.x = model.position.x - tuopanLocation.y = model.position.y - }, 16) - let time2 = setTimeout(() => { - model.position.x = ((newLocation.x === null || newLocation.x === undefined) ? oddLocation.x : newLocation.x) - model.position.y = ((newLocation.y === null || newLocation.y === undefined) ? oddLocation.y : newLocation.y) resolve() clearInterval(time1) - clearTimeout(time2) - clearTimeout(time3) - }, time) - let time3 = setTimeout(() => { - reject() - clearInterval(time1) - clearTimeout(time2) clearTimeout(time3) }, time + 1000) }) } export { + tuopanInishengji, storeyHeight, storeyWidth, - tishengjiLocation, - tuopanLocation, tishengjiAnimation, tuopanXAnimation, tuopanYAnimation, - tuopanAnimation + tuopanLocation } diff --git a/hw-ui/src/views/board/model/index.vue b/hw-ui/src/views/board/model/index.vue index be7e0e3..829103e 100644 --- a/hw-ui/src/views/board/model/index.vue +++ b/hw-ui/src/views/board/model/index.vue @@ -6,7 +6,7 @@
- + { - if (funs.length > 0) { - await funs[0]() - funs.shift() - return animation(funs) - } -} - -const tishengjiToFloor = (floor) => { - return tishengjiAnimation(keyidongModel, tishengjiLocation.y, storeyHeight[floor], 2000) -} -const tuopanReset = async() => { - await tuopanXAnimation(tuopanModel, tuopanLocation.x, 0, 2000) - console.log(321321312) -} -const tuopanToFloor = (floor) => { - return tuopanYAnimation(tuopanModel, tuopanLocation.y, storeyHeight[floor], 2000) - return () => { - tuopanXAnimation(tuopanModel, tuopanLocation.x, 0, 20) - tuopanYAnimation(tuopanModel, tuopanLocation.y, storeyHeight[floor], 2000) +const animation = async() => { + try { + if (animationLine.length > 0) { + await animationLine[0]() + animationLine.shift() + if (animationLine.length > 0) { + animation(animationLine) + } else { + isAnimation = false + } + } + } catch (e) { + console.log(e) } } -const tuopanOut = async(floor) => { - await tuopanXAnimation(tuopanModel, tuopanLocation.x, storeyWidth[floor], 2000) - console.log(321321312) -} const scene = new THREE.Scene() const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 @@ -104,8 +93,7 @@ export default { data() { return { num: -60, - floor: 0, - tuopanInishengji: true + floor: 0 } }, mounted() { @@ -167,14 +155,13 @@ export default { xhr => { if ((xhr.loaded / xhr.total * 100) === 100) { a += 1 - console.log(a) } } ) }) }) } - loadF(['AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'changfang002', 'changfang003', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan']) + loadF(['tishengji', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'changfang002', 'changfang003', 'quanzidongchaibaojizhaungpeixian003', 'tishengji_keyidongbufen', 'tishengji_tuopan']) const labelRenderer = new CSS2DRenderer() labelRenderer.setSize(window.innerWidth, window.innerHeight) @@ -222,7 +209,6 @@ export default { // 如果有交点 if (intersects.length > 0) { let obj = intersects[0] - console.log(obj) new TWEEN.Tween(camera.position).to(new THREE.Vector3((intersects[0].point.x + 0), (intersects[0].point.y + 500), (intersects[0].point.z - 500)), 500).onUpdate(() => { camera.updateProjectionMatrix() }).start() @@ -237,11 +223,15 @@ export default { // 渲染循环 function animate() { + if (animationLine.length > 0 && isAnimation === false) { + console.log('动画') + isAnimation = true + animation(animationLine) + } requestAnimationFrame(animate) TWEEN.update() if (keyidongModel) { // keyidongModel.position.y += 0.1; - // console.log( keyidongModel) } if (tuopanModel) { // tuopanModel.position.y += 0.1; @@ -251,7 +241,6 @@ export default { } setInterval(() => { - // console.log(camera) }, 1000 * 10) animate() @@ -259,37 +248,24 @@ export default { }, methods: { handleChange() { - tuopanModel.position.x = this.num - + // tuopanModel.position.x = this.num }, toFloor(e) { - // tishengjiToFloor(e) - tishengjiLocation.floor = e - // tishengjiLocation.y = storeyHeight[e] - if (this.tuopanInishengji) { - // tuopanToFloor(e) - tuopanLocation.floor = e - // tuopanLocation.y = storeyHeight[e] - animationLine.push(() => Promise.all([tishengjiToFloor(e), tuopanToFloor(e)])) - } else { - animationLine.push(() => Promise.all([tishengjiToFloor(e)])) - } - if (animationLine.length === 1) { - console.log(animationLine[0]) - animation(animationLine) - } + animationLine.push(() => { + console.log(321323) + console.log(tuopanInishengji) + if (tuopanInishengji) { + return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])]) + } else { + animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e])) + } + }) }, tuopanReset() { - if (tishengjiLocation.floor === tuopanLocation.floor) { - tuopanReset() - tuopanLocation.x = 0 - this.tuopanInishengji = true - } + animationLine.push(() => tuopanXAnimation(tuopanModel, 0)) }, tuopanOut() { - tuopanOut(this.floor) - tuopanLocation.x = storeyWidth[this.floor] - this.tuopanInishengji = false + animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor])) }, removetuopan() { scene.remove(tuopanModel)