From 60ed5e4e77e5fd60644fe9da47bf13412f15117c Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 7 Jun 2024 10:59:41 +0300
Subject: [PATCH] fence position

---
 app.vue                         |  2 +-
 assets/main.scss                |  3 +++
 components/calcModels.vue       |  4 ++--
 components/model/parametric.vue | 11 +----------
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index 2d6bb77..7b7297b 100644
--- a/app.vue
+++ b/app.vue
@@ -91,7 +91,7 @@ const toggleModal = () => {
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
-    <div class="siteblock bg-white">
+    <div class="siteblock siteblock_calc bg-white">
       <CalcValues />
       <CalcModels />
     </div>
diff --git a/assets/main.scss b/assets/main.scss
index efbb3f2..508c89e 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -66,6 +66,9 @@ a[href^="#"] {
             max-height: 50vh;
         }
     }
+    &_calc {
+        @apply pb-0;
+    }
 
     &-content {
         @apply col-span-6 h-full flex flex-col justify-between prose;
diff --git a/components/calcModels.vue b/components/calcModels.vue
index 2c545ab..20b82d9 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -4,7 +4,7 @@ import { OrbitControls } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
-    maxDistance: 5,
+    maxDistance: 10,
     enablePan: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
@@ -12,7 +12,7 @@ const controlsState = reactive({
 <template>
     <div class="container min-w-full">
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[7, 2, 6]" />
+            <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
             <ModelParametric />
             <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="10" cast-shadow />
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 68fcc0d..122d140 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -9,15 +9,6 @@ const lamelle_color = useState('lamelle_color')
 const lSize = 0.115
 const bSize = 0.0235
 const pillar_size = 80 * 0.001
-const { scene, renderer, camera } = useTresContext()
-
-
-renderer.value.autoClear = true
-
-watch([lamelles_count, fence_section, lamelle_color], () => {
-    // renderer.value.clearColor()
-    // renderer.value.render(scene.value, camera.value)
-})
 </script>
 <template>
     <TresGroup>
@@ -25,7 +16,7 @@ watch([lamelles_count, fence_section, lamelle_color], () => {
             <Environment files='/hdrmaps/lonely_road_afternoon_4k.hdr' :background="true" />
         </Suspense>
         <Suspense>
-            <TresGroup>
+            <TresGroup :scale="2" :rotate-y="-Math.PI * -0.5" :translate-y="-1.5">
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
                     :color="pillar_color" />