mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transition fix

This commit is contained in:
Kseninia Mikhaylova 2024-06-11 10:50:06 +03:00
parent 8031ee39fd
commit 715dcb01b7
5 changed files with 55 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@ -35,11 +35,6 @@ const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/
const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`) const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`) const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`)
const isModalOpen = useState('modal_open', () => false)
const toggleModal = () => {
isModalOpen.value = !isModalOpen.value
}
const { scrollToAnchor, scrollToTop } = useAnchorScroll({ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
toTop: { toTop: {
scrollOptions: { scrollOptions: {

14
components/calcModels.vue
View File

@ -13,13 +13,15 @@ const { hasFinishLoading, progress, items } = await useProgress()
</script> </script>
<template> <template>
<div class="container min-w-full relative"> <div class="container min-w-full relative">
<div v-show="!hasFinishLoading" <Transition>
class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"> <div v-if="!hasFinishLoading"
<div class="w-200px"> class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
Loading... {{ progress }} % <div class="w-200px">
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i> Идет загрузка... {{ progress }} %
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
</div>
</div> </div>
</div> </Transition>
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[8, 2, -4]" /> <TresPerspectiveCamera :position="[8, 2, -4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />

5
components/calcValues.vue
View File

@ -109,6 +109,11 @@ const calc_text = computed(() => {
} }
return txt return txt
}) })
const isModalOpen = useState('modal_open', () => false)
const toggleModal = () => {
isModalOpen.value = !isModalOpen.value
}
</script> </script>
<template> <template>
<div class="container py-4"> <div class="container py-4">

8
components/model/item.vue
View File

@ -75,7 +75,9 @@ watch(props, () => {
}, { deep: true }) }, { deep: true })
</script> </script>
<template> <template>
<TresGroup :position="props.position || [0, 0, 0]" ref="model"> <Suspense>
<primitive :object="scene.children[0]" cast-shadow receive-shadow /> <TresGroup :position="props.position || [0, 0, 0]" ref="model">
</TresGroup> <primitive :object="scene.children[0]" cast-shadow receive-shadow />
</TresGroup>
</Suspense>
</template> </template>

79
components/model/parametric.vue
View File

@ -26,49 +26,42 @@ const pbrTexture = await useTexture({
}) })
</script> </script>
<template> <template>
<TresGroup> <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
<Suspense> <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25"> <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
<TresMesh receive-shadow cast-shadow :translate-y="-0.25"> <TresMeshStandardMaterial v-bind="pbrTexture" />
<TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" /> </TresMesh>
<TresMeshStandardMaterial v-bind="pbrTexture" /> <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
</TresMesh> :remove-pos="true" :color="pillar_color" />
<ModelItem model-url="/models_one/bottom.glb" <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
:position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true" :remove-pos="true" :color="pillar_color" />
:color="pillar_color" /> <ModelItem model-url="/models_one/verh_100.glb" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]"
<ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]" :remove-pos="true" :color="pillar_color" />
:remove-pos="true" :color="pillar_color" /> <ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
<ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
:position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" <template v-for="(n, i) in lamelles_count">
:color="pillar_color" /> <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
<ModelItem model-url="/models_one/verh_100.glb" <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
:position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
</TresGroup>
</template>
<TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
<ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
<ModelItem model-url="/models_one/bottom.glb"
:position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem model-url="/models_one/bottom.glb"
:position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
</TresGroup> </TresGroup>
</Suspense> </template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
</TresGroup>
</template>
<TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
<ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
<ModelItem model-url="/models_one/bottom.glb"
:position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem model-url="/models_one/bottom.glb"
:position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
</TresGroup> </TresGroup>
</template> </template>