diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 7190a86..b574175 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -5,6 +5,7 @@ import { MeshStandardMaterial, MeshStandardMaterialParameters, Vector2, Vector3, CircleGeometry, MeshBasicMaterial, + Quaternion, } from 'three'; import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core'; @@ -21,14 +22,22 @@ import { mobileAndTabletCheck } from '../../helpers'; import { useTimer } from '../../stores/timer'; const props = defineProps(['source', 'loaded', 'loaded_pan']) +const CON_MOVETO_COUNT = 150; +const CAM_MOVETO_COUNT = 100; const models = ref([]) const clickable_items = ref([]) const clickable_refs = ref([]) const envVars = reactive({}) as EnvVars const def_distance = reactive({ max: 10, min: 1 }) +const controls_targetto = ref() as Ref; +const controls_targetto_count = ref(CON_MOVETO_COUNT) const camera_moveto = ref() as Ref; -const camera_moveto_count = ref(100) +const camera_moveto_count = ref(CON_MOVETO_COUNT) + +const camera_rotatetoto = ref() as Ref; +const camera_rotatetoto_count = ref(CAM_MOVETO_COUNT) + const sidebar = usePromoSidebar(); const sidebar_scene = usePromoScene(); @@ -220,6 +229,17 @@ const loadModels = async () => { } } +const gotoCenterAndDistance = () => { + (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min; + (controls.value as any).maxDistance = def_distance.max; + controls_targetto.value = new Vector3(0, 0, 0); + camera_moveto.value = new Vector3( + def_distance.max * 0.5, + def_distance.max * 0.5, + def_distance.max * 0.5 + ); +} + loadModels() watch(() => props.source, () => { const loaded = seekByName(scene.value, 'loaded') @@ -232,16 +252,7 @@ watch(() => props.source, () => { watch(() => sidebar, () => { if (sidebar.is_open == false) { - (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min; - (controls.value as any).maxDistance = def_distance.max; - (controls.value as any).target = new Vector3(0, 0, 0); - camera.value?.position.set( - def_distance.max * 0.5, - def_distance.max * 0.5, - def_distance.max * 0.5 - ); - (controls.value as any)._needsUpdate = true; - (controls.value as any).update() + gotoCenterAndDistance() } if (sidebar.is_open && sidebar.id_clickable) { const clickable = useClickable() @@ -254,7 +265,8 @@ watch(() => sidebar, () => { const target_vector = new Vector3(); el.getWorldPosition(target_vector); - camera_moveto.value = target_vector + controls_targetto.value = target_vector; + camera_rotatetoto.value = new Quaternion(0, 1, 0.25, -0.25) } } }, { deep: true }) @@ -271,35 +283,41 @@ onAfterRender(() => { (controls.value as any).update(); } } - if (camera_moveto.value) { + if (controls_targetto.value) { timer.stopTimer(); - (controls.value as any).target.lerp(camera_moveto.value, 0.01); - camera_moveto_count.value -= 1 - if (camera_moveto_count.value == 0) { - camera_moveto_count.value = 100 - camera_moveto.value = undefined - // camera.value?.position.set(30, 30, 30); - // camera.value?.rotation.set(0, 0, 1); - timer.startTimer() + (controls.value as any).target.lerp(controls_targetto.value, 0.01); + controls_targetto_count.value -= 1 + if (controls_targetto_count.value == 0) { + controls_targetto_count.value = CON_MOVETO_COUNT + controls_targetto.value = undefined } (controls.value as any).update() } + if (camera_moveto.value) { + timer.stopTimer(); + camera.value?.position.lerp(camera_moveto.value, 0.01); + camera_moveto_count.value -= 1 + if (camera_moveto_count.value == 0) { + camera_moveto_count.value = CON_MOVETO_COUNT + camera_moveto.value = undefined + } + } + if (camera_rotatetoto.value) { + timer.stopTimer(); + camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01); + camera_rotatetoto_count.value -= 1; + if (camera_rotatetoto_count.value == 0) { + camera_rotatetoto_count.value = CAM_MOVETO_COUNT + camera_rotatetoto.value = undefined + } + } }) const timer = useTimer() timer.timer_func = () => { if (timer.seconds_left == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) { - pause() - if (controls.value && camera.value) { - camera.value?.position.set( - (controls.value as any).maxDistance * 0.5, - (controls.value as any).maxDistance * 0.5, - (controls.value as any).maxDistance * 0.5 - ); - (controls.value as any).target = new Vector3(0, 0, 0); - (controls.value as any).autoRotate = true; - (controls.value as any).autoRotateSpeed = 0.5; - } - resume() + gotoCenterAndDistance(); + (controls.value as any).autoRotate = true; + (controls.value as any).autoRotateSpeed = 0.5; } }