From d023f6a5b9fad7a316533f30b22c7d381eee0500 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 10 Jun 2024 11:52:34 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D1=83=D0=BA=D0=BE=D0=B6=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D1=81?=
 =?UTF-8?q?=D1=85=D0=B5=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/expDiagram.vue    | 26 ++++++++++++++++++++++----
 components/model/diagram.vue | 19 +++++++++++++------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/components/expDiagram.vue b/components/expDiagram.vue
index 0f81605..fb49694 100644
--- a/components/expDiagram.vue
+++ b/components/expDiagram.vue
@@ -9,15 +9,33 @@ const controlsState = reactive({
     enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
-
+const container = ref()
+const koef = ref()
+const scrollBlock = (e: Event) => {
+    const { top, bottom, height } = container.value.getBoundingClientRect();
+    const { innerHeight } = window;
+    const partiallyVisible = (top > 0 && top < innerHeight) ||
+        (bottom > 0 && bottom < innerHeight)
+    const visibleHeight = innerHeight - top
+    const h = height * 1.5
+    if (partiallyVisible && visibleHeight < h) {
+        koef.value = visibleHeight / h
+    }
+}
+onMounted(() => {
+    document.addEventListener('scroll', scrollBlock)
+})
+onUnmounted(() => {
+    document.removeEventListener('scroll', scrollBlock)
+})
 </script>
 <template>
-    <div class="container min-w-full">
+    <div class="container min-w-full outline outline-2" ref="container">
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[-7, 2, 4 ]" />
+            <TresPerspectiveCamera :position="[-7, 2, 4]" />
             <OrbitControls v-bind="controlsState" make-default />
 
-            <ModelDiagram />
+            <ModelDiagram :koef="koef" />
 
             <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
             <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
diff --git a/components/model/diagram.vue b/components/model/diagram.vue
index 26ecc3f..902cbab 100644
--- a/components/model/diagram.vue
+++ b/components/model/diagram.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
+const props = defineProps(['koef'])
 import Item from './item.vue';
+const k = ref(props.koef || 1)
+watch(props, () => {
+    k.value = props.koef || 1
+    console.log(k)
+
+}, { deep: true })
 </script>
 <template>
     <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
@@ -8,12 +15,12 @@ import Item from './item.vue';
     </TresMesh>
     <Suspense>
         <TresGroup :translate-y="-2">
-            <Item model-url="/models/kosynka.glb" :target="[0.5, 0.25, 0.5,]" />
-            <Item model-url="/models/kreplaniye_planok.glb" :target="[1, 0.5, 1]" />
-            <Item model-url="/models/planki.glb" :target="[1.5, 1, 1.5,]" />
-            <Item model-url="/models/stolb.glb" :target="[-0.5, 0.25, -0.5,]" />
-            <Item model-url="/models/verh.glb" :target="[-1, 0.5, -1,]" />
-            <Item model-url="/models/zakliopki.glb" :target="[-1.5, 1, -1.5,]" />
+            <Item model-url="/models/kosynka.glb" :position="[0.5 * k, 0.25 * k, 0.5 * k]" />
+            <Item model-url="/models/kreplaniye_planok.glb" :position="[1 * k, 0.5 * k, 1 * k]" />
+            <Item model-url="/models/planki.glb" :position="[1.5 * k, 1 * k, 1.5 * k]" />
+            <Item model-url="/models/stolb.glb" :position="[-0.5 * k, 0.25 * k, -0.5 * k]" />
+            <Item model-url="/models/verh.glb" :position="[-1 * k, 0.5 * k, -1 * k]" />
+            <Item model-url="/models/zakliopki.glb" :position="[-1.5 * k, 1 * k, -1.5 * k]" />
         </TresGroup>
     </Suspense>
 </template>
\ No newline at end of file