ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bx-1379-redesign #15

Merged
ksenia_mikhailova merged 124 commits from bx-1379-redesign into dev 2024-09-06 15:39:13 +03:00
Conversation 0 Commits 124 Files Changed 68 +44 -39
3 changed files with 44 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 398b7ca54e - Show all commits

68
front/src/components/Promo/load_models.vue
View File

@ -22,27 +22,26 @@ import { useLoading } from '../../stores/loading';
import { mobileAndTabletCheck } from '../../helpers';
import { useTimer } from '../../stores/timer';
import { useRawData } from '../../stores/raw_data';
import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
const props = defineProps(['source', 'loaded_pan'])
const CON_MOVETO_COUNT = 150;
const CAM_MOVETO_COUNT = 10;
const models = ref<model3DType[]>([])
const clickable_items = ref<any[]>([])
const clickable_refs = ref<any[]>([])
const envVars = reactive({}) as EnvVars
const process_loading = ref(null)
const targetDistance = reactive({ max: 10, min: 0 })
let sidebar_clickable = [] as PromoScene[]
let sidebar_visible = [] as PromoScene[]
let addTexture: any
const COUNT = 100
const controls_targetto = ref() as Ref<Vector3 | undefined>;
const controls_targetto_count = ref(CON_MOVETO_COUNT)
const controls_targetto_count = ref(COUNT)
const camera_moveto = ref() as Ref<Vector3 | undefined>;
const camera_moveto_count = ref(CON_MOVETO_COUNT)
const camera_moveto_count = ref(COUNT)
const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
const camera_rotatetoto_count = ref(CAM_MOVETO_COUNT)
const camera_rotatetoto_count = ref(COUNT)
const sidebar = usePromoSidebar();
const sidebar_scene = usePromoScene();
@ -90,14 +89,13 @@ const setEnv = async () => {
const setControls = () => {
if (!controls.value) return;
controls.value.enabled = false;
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
targetDistance.max = raw_dataStore.data.max_distance;
targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
// (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
(controls.value as any).maxDistance = raw_dataStore.data.max_distance;
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
);
const d = targetDistance.max * 0.5
camera.value?.position.set(d, d, d);
(controls.value as any).target = new Vector3(0, 0, 0);
(controls.value as any).autoRotate = false;
@ -268,8 +266,8 @@ const loadModels = async () => {
}
const gotoCenterAndDistance = () => {
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
(controls.value as any).maxDistance = raw_dataStore.data.max_distance;
targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
targetDistance.max = raw_dataStore.data.max_distance;
controls_targetto.value = new Vector3(0, 0, 0);
camera_moveto.value = new Vector3(
raw_dataStore.data.max_distance * 0.5,
@ -305,20 +303,19 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
if (!target) return
const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
if (el) {
(controls.value as any).maxDistance = 10;
(controls.value as any).minDistance = 1;
targetDistance.max = 10
targetDistance.min = 1
const target_vector = new Vector3();
el.getWorldPosition(target_vector);
target_vector.y = 10;
controls_targetto.value = target_vector;
const distance = (controls.value as any).target.distanceTo(target_vector)
controls_targetto_count.value = parseInt(distance) * 10
const quaternion = new Quaternion();
quaternion.setFromAxisAngle(new Vector3(1, 0, 0), -45 * 4 * (Math.PI / 180));
// camera.value?.applyQuaternion(quaternion)
camera_rotatetoto.value = quaternion
camera.value.rotation.z += Math.PI/2
camera_moveto.value = target_vector;
}
}
}, { deep: true })
@ -331,47 +328,45 @@ onAfterRender(() => {
const dis_to_cam = camera.value?.position.distanceTo(el.value[0].position);
if (dis_to_cam) {
// console.log(dis_to_cam)
const scaling = (1 * dis_to_cam) / 100
el.value[0].children[0].scale.set(scaling, scaling, scaling);
el.value[0].updateMatrixWorld()
}
}
})
if (controls.value) {
if (timer.seconds_left == 0) {
(controls.value as any).update();
}
}
const koef = 0.02
if (controls_targetto.value) {
timer.stopTimer();
(controls.value as any).target.lerp(controls_targetto.value, 0.01);
(controls.value as any).target.lerp(controls_targetto.value, koef);
controls_targetto_count.value -= 1
if (controls_targetto_count.value == 0) {
controls_targetto_count.value = CON_MOVETO_COUNT
controls_targetto.value = undefined
controls_targetto_count.value = 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.value?.position.lerp(camera_moveto.value, koef);
camera_moveto_count.value -= 1
if (camera_moveto_count.value == 0) {
camera_moveto_count.value = CON_MOVETO_COUNT
camera_moveto.value = undefined
camera_moveto.value = undefined;
camera_moveto_count.value = COUNT;
// (controls.value as any).maxDistance = targetDistance.max;
// (controls.value as any).minDistance = targetDistance.min;
}
}
if (camera_rotatetoto.value && !controls_targetto.value) {
if (!camera_moveto.value && !controls_targetto.value && camera_rotatetoto.value) {
timer.stopTimer();
camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
camera.value?.quaternion.slerp(camera_rotatetoto.value, koef);
// camera.value?.quaternion.normalize();
camera_rotatetoto_count.value -= 1;
if (camera_rotatetoto_count.value == 0) {
camera_rotatetoto_count.value = CAM_MOVETO_COUNT
camera_rotatetoto_count.value = COUNT;
camera_rotatetoto.value = undefined
}
}
(controls.value as any).update()
})
const timer = useTimer()
@ -411,6 +406,7 @@ const clickEvent = (event: MouseEvent) => {
.filter(Boolean)
if (names.length) {
sidebar.open(parseInt(names[0].replace('_clickable', '')))
sidebar.toggleAccordion('clickable')
}
}
const timerEvent = ['click', 'contextmenu', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'touchmove']

5
front/src/components/sidebar.vue
View File

@ -13,6 +13,11 @@ const clickable_obj = ref()
watch(clickable_obj, () => {
sidebar.open(clickable_obj.value);
})
watch(() => sidebar.id_clickable, () => {
if (sidebar.is_open) {
clickable_obj.value = sidebar.id_clickable
}
})
</script>
<template>
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]">

10
front/src/stores/promo_sidebar.ts
View File

@ -43,14 +43,18 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
this.is_open = false
}
},
toggleAccordion(name: string) {
toggleAccordion(name: string, newState = null) {
if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable')
if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')
if (this.accordions.includes(name)) {
this.accordions.splice(this.accordions.indexOf(name), 1)
if (newState == false || newState == null) {
this.accordions.splice(this.accordions.indexOf(name), 1)
}
} else {
this.accordions.push(name)
if (newState == true || newState == null) {
this.accordions.push(name)
}
}
},