From 39f883f6eca2366ce61b3582f1be14c7aa6303e6 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Wed, 4 Sep 2024 17:11:40 +0300 Subject: [PATCH] test smooth --- front/src/assets/sidebar.scss | 6 +- front/src/components/Promo/load_models.vue | 102 ++++++++++----------- front/src/components/sidebar.vue | 2 +- 3 files changed, 52 insertions(+), 58 deletions(-) diff --git a/front/src/assets/sidebar.scss b/front/src/assets/sidebar.scss index 77ff516..31eaeeb 100644 --- a/front/src/assets/sidebar.scss +++ b/front/src/assets/sidebar.scss @@ -216,7 +216,11 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25); input[type=radio], input[type=checkbox] { - order: 10 + order: 10; + + &:checked + label { + font-weight: bolder; + } } label { diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 7023364..535e245 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -2,14 +2,12 @@ import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'; import { Box3, Color, Group, Mesh, - MeshStandardMaterial, MeshBasicMaterial, + MeshStandardMaterial, Vector2, Vector3, - Quaternion, AdditiveBlending, - Euler, SRGBColorSpace, RingGeometry, - CircleGeometry, + Quaternion, Euler, SRGBColorSpace } from 'three'; -import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core'; +import { useTresContext, useSeek, useLoop } from '@tresjs/core'; // @ts-ignore import { useGLTF } from '@tresjs/cientos' @@ -25,7 +23,6 @@ import { useTimer } from '../../stores/timer'; import { useRawData } from '../../stores/raw_data'; import { useTimerHome } from '../../stores/timer_home'; import { useItem } from '../../stores/item'; -import { hsl } from 'd3'; const props = defineProps(['source', 'loaded_pan', 'push']) @@ -38,7 +35,7 @@ const targetDistance = reactive({ max: 10, min: 0 }) let sidebar_clickable = [] as PromoScene[] let sidebar_visible = [] as PromoScene[] -const COUNT = 50 +const COUNT = 30 type smooth = { value: Vector3 | Quaternion | undefined, count: number @@ -272,22 +269,22 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => { if (el) { targetDistance.max = 10 targetDistance.min = 1 + + const test_euler = new Euler( + -45 * 1 * (Math.PI / 180), + 35 * 1 * (Math.PI / 180), + 35 * 1 * (Math.PI / 180) + ) + const target_vector = new Vector3(); - el.getWorldPosition(target_vector); - // target_vector.y = raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1; - target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1) + // target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1) - // const quaternion = new Quaternion(); - // quaternion.setFromEuler(new Euler( - // -45 * 1 * (Math.PI / 180), - // 35 * 1 * (Math.PI / 180), - // 35 * 1 * (Math.PI / 180) - // )); + const quaternion = new Quaternion(); + quaternion.setFromEuler(test_euler); + set_moveto(smooth_rotate, quaternion) - // set_moveto(smooth_rotate, quaternion) - - const d = raw_dataStore.data.max_distance * 0.5; + // const d = raw_dataStore.data.max_distance * 0.5; const lerp_vector = new Vector3(0, 0, 0) lerp_vector.lerpVectors(target_vector, camera.value?.position as Vector3, 0.5) lerp_vector.setComponent(1, raw_dataStore.data.max_distance * 0.5) @@ -295,7 +292,7 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => { camera.value?.position && camera.value?.position.distanceTo(lerp_vector) > raw_dataStore.data.max_distance * 0.5 || camera.value?.position && camera.value?.position.distanceTo(target_vector) > 10 ) { - set_moveto(smooth_target, new Vector3(lerp_vector.x, d, lerp_vector.z)) + set_moveto(smooth_target, lerp_vector) set_moveto(smooth_move, lerp_vector) set_moveto(temp_smooth_target, target_vector) @@ -324,44 +321,37 @@ onAfterRender(() => { } } }) - const koef = (1 / COUNT) * 3 - const smoothy = [ - { - el: smooth_target, - temp_el: temp_smooth_target, - f: () => { - (controls.value as any).target.lerp(smooth_target.value as Vector3, 1 / smooth_target.count); - }, - }, - { - el: smooth_move, - temp_el: temp_smooth_move, - f: () => { - camera.value?.position.lerp(smooth_move.value as Vector3, 1 / smooth_move.count); - }, - }, - { - el: smooth_rotate, - f: () => { - camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, 1 / smooth_rotate.count); - camera.value?.quaternion.normalize() - } + const koef = 0.2 + const threshold = 2 + if (smooth_move.value || smooth_target.value || smooth_rotate.value) { + // Плавно изменяем позицию камеры + camera.value?.position.lerp(smooth_target.value as Vector3, koef); + + if (smooth_rotate.value) { + const currentRotation = new Quaternion().copy(camera.value.quaternion); + currentRotation.slerp(smooth_rotate.value, 0.5); + camera.value.quaternion.copy(currentRotation); + // camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, 0.5); + camera.value?.quaternion.normalize() + console.log(camera.value?.quaternion.angleTo(smooth_rotate.value as Quaternion)) } - ] - smoothy.forEach(element => { - if (element.el.value) { - timer.resetTimer(); - element.f() - element.el.count -= 1 - if (element.el.count == 1) { - set_moveto(element.el, undefined) - if (element.temp_el && element.temp_el.value) { - set_moveto(element.el, element.temp_el.value) - set_moveto(element.temp_el, undefined) - } - } + + // Плавно изменяем целевую точку контроллера + controls.value.target.lerp(smooth_target.value, koef); + controls.value.update(); // Обновляем контроллер + + // Проверка на достижение целевой позиции + if ( + camera.value.position.distanceTo(smooth_move.value || smooth_target.value) < threshold + // && camera.value?.quaternion.angleTo(smooth_rotate.value as Quaternion) < Math.PI / 8 + ) { + smooth_move.value = smooth_target.value = smooth_rotate.value = undefined + if (temp_smooth_move) set_moveto(smooth_move, temp_smooth_move.value) + if (temp_smooth_target) set_moveto(smooth_target, temp_smooth_target.value) + } - }); + } + }) const timer = useTimer() diff --git a/front/src/components/sidebar.vue b/front/src/components/sidebar.vue index bb2eaa6..0ba9f97 100644 --- a/front/src/components/sidebar.vue +++ b/front/src/components/sidebar.vue @@ -35,7 +35,7 @@ watch(() => sidebar.id_clickable, () => {
+ :id="item.id.toString()" />