From 0eaaa1e0a68270e4095c5a9b600103cc0c27749f Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 6 Jun 2024 10:21:04 +0300
Subject: [PATCH 1/2] add parametrical lamelles

---
 app.vue                                      |  3 ++-
 components/{calculator.vue => calcmodel.vue} | 14 +++++-----
 components/model/canvas.vue                  | 19 +++++++++-----
 components/model/item.vue                    | 27 +++++++++++++++++---
 4 files changed, 44 insertions(+), 19 deletions(-)
 rename components/{calculator.vue => calcmodel.vue} (70%)

diff --git a/app.vue b/app.vue
index 3f913cf..81f7322 100644
--- a/app.vue
+++ b/app.vue
@@ -49,6 +49,7 @@ type ApiSocial_networkType = {
 import '@/assets/main.scss'
 
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
+
 useSeoMeta({
   title: seoData.value?.title,
   ogTitle: seoData.value?.title,
@@ -132,7 +133,7 @@ const toggleModal = () => {
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
     <div class="block bg-white">
-      <Calculator />
+      <Calcmodel />
     </div>
     <div class="footer">
       <div class="container">
diff --git a/components/calculator.vue b/components/calcmodel.vue
similarity index 70%
rename from components/calculator.vue
rename to components/calcmodel.vue
index bbd48f2..7e0a210 100644
--- a/components/calculator.vue
+++ b/components/calcmodel.vue
@@ -6,13 +6,13 @@ import Canvas from './model/canvas.vue';
 
 const controlsState = reactive({
     minDistance: 0,
-    maxDistance: 5,
-    enablePan: false,
-    enebleZoom: false,
+    maxDistance: 10,
+    // enablePan: false,
+    // enebleZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.02,
     // distance: 3
 })
-
+console.log(controlsState)
 // const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
 // const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
@@ -22,11 +22,11 @@ const controlsState = reactive({
 <template>
     <div class="container">
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[4, 8, 4]" :distance="3" />
+            <TresPerspectiveCamera :position="[-7, 2, 3]" :distance="3" />
             <OrbitControls v-bind="controlsState" make-default />
             <Canvas />
-            <TresDirectionalLight v-light-helper :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
-            <TresDirectionalLight v-light-helper :position="[2, 2, -2]" :intensity="1" color="yellow" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>
diff --git a/components/model/canvas.vue b/components/model/canvas.vue
index 9755b84..2542e94 100644
--- a/components/model/canvas.vue
+++ b/components/model/canvas.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import Item from './item.vue';
-const onClick = (e: MouseEvent) => {
-    console.log(e)
-}
-const { renderer } = useTresContext()
-renderer.value.shadowMap.enabled = true
+const lCount = 22
+const lSize = 0.1
 </script>
 <template>
-    <TresMesh :position="[0, -1, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
+    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
         <TresBoxGeometry :args="[8, 8, 0.05]" />
         <TresMeshStandardMaterial color="pink" />
     </TresMesh>
     <Suspense>
-        <TresGroup :position="[0, -1, 0]">
+        <TresGroup>
             <Item model-url="/models/kosynka.glb" />
             <Item model-url="/models/kreplaniye_planok.glb" />
             <Item model-url="/models/planki.glb" />
@@ -21,4 +18,12 @@ renderer.value.shadowMap.enabled = true
             <Item model-url="/models/zakliopki.glb" />
         </TresGroup>
     </Suspense>
+    <Suspense>
+        <TresGroup :position="[1, 0, 1]">
+            <template v-for="i in lCount">
+                <Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true" />
+            </template>
+            <Item model-url="/models_one/verh.glb" :position="[0, (lCount + 1) * lSize, 0]" :remove-pos="true" />
+        </TresGroup>
+    </Suspense>
 </template>
\ No newline at end of file
diff --git a/components/model/item.vue b/components/model/item.vue
index c801407..d7025ba 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Vector3 } from 'three';
-const props = defineProps(['modelUrl'])
+const props = defineProps(['modelUrl', 'position', 'removePos'])
 const { scene } = await useGLTF(props.modelUrl)
-console.log(scene, props.modelUrl)
 scene.receiveShadow = true
 scene.castShadow = true
 
@@ -16,13 +15,33 @@ box.getSize(size)
 
 const box_size = [size.x, size.y, size.z]
 
-scene.children.forEach((el:any) => {
+scene.children.forEach((el: any) => {
     el.castShadow = true
     el.receiveShadow = true
+    if (props.removePos) {
+        el.translateX(-el.position.x)
+        el.translateY(-el.position.y)
+        el.translateZ(-el.position.z)
+    }
 });
+
+function shadows_and_pos(scene: any) {
+    scene.children.forEach((el: any) => {
+        el.castShadow = true
+        el.receiveShadow = true
+        if (props.removePos) {
+            el.translateX(-el.position.x)
+            el.translateY(-el.position.y)
+            el.translateZ(-el.position.z)
+        }
+        shadows_and_pos(el)
+    })
+}
+
+shadows_and_pos(scene)
 </script>
 <template>
-    <TresGroup>
+    <TresGroup :position="props.position || [0, 0, 0]">
         <TresMesh :position="center" cast-shadow receive-shadow v-if="false">
             <TresBoxGeometry :args="box_size" />
             <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />

From 438d53218ae0250dd90d13cc3a67f9d559db2b0c Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 6 Jun 2024 10:43:59 +0300
Subject: [PATCH 2/2] parameter count

---
 app.vue                                      | 47 +-------------------
 components/{calcmodel.vue => calcModels.vue} |  2 +-
 components/calcValues.vue                    | 16 +++++++
 components/model/canvas.vue                  |  7 +--
 types/index.d.ts                             | 43 +++++++++++++++++-
 5 files changed, 65 insertions(+), 50 deletions(-)
 rename components/{calcmodel.vue => calcModels.vue} (97%)
 create mode 100644 components/calcValues.vue

diff --git a/app.vue b/app.vue
index 81f7322..eddadb5 100644
--- a/app.vue
+++ b/app.vue
@@ -3,53 +3,9 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
 import k_logo from '@/assets/icons/logo.svg'
-
-type ApiKpType = {
-  id: number
-  title: string
-  content: string
-  url: string
-  meta_title: any
-  meta_description: string
-  keywords: any
-  is_indexed: boolean
-}
-
-type ApiPagesType = {
-  id: number
-  title: string
-  menu_title: string
-  slug: string
-  external_link: string
-  content: string
-  image: string
-}
-
-type ApiReviewsType = {
-  id: number
-  image: string
-  text: string
-  comment: string
-}
-
-type ApiFooterType = {
-  id: number
-  text: string
-  small_text: boolean
-}
-
-type ApiSocial_networkType = {
-  id: number
-  name: string
-  link: string
-  image: string
-}
-
-
 import '@/assets/main.scss'
 
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
-
 useSeoMeta({
   title: seoData.value?.title,
   ogTitle: seoData.value?.title,
@@ -133,7 +89,8 @@ const toggleModal = () => {
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
     <div class="block bg-white">
-      <Calcmodel />
+      <CalcValues />
+      <CalcModels />
     </div>
     <div class="footer">
       <div class="container">
diff --git a/components/calcmodel.vue b/components/calcModels.vue
similarity index 97%
rename from components/calcmodel.vue
rename to components/calcModels.vue
index 7e0a210..3bda8f9 100644
--- a/components/calcmodel.vue
+++ b/components/calcModels.vue
@@ -12,7 +12,7 @@ const controlsState = reactive({
     maxPolarAngle: (Math.PI / 2) - 0.02,
     // distance: 3
 })
-console.log(controlsState)
+// console.log(controlsState)
 // const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
 // const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
diff --git a/components/calcValues.vue b/components/calcValues.vue
new file mode 100644
index 0000000..d99410d
--- /dev/null
+++ b/components/calcValues.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const lamelles_count = useState('lamelles_count', () => 3)
+const lamelles = reactive({
+    min: 3,
+    max: 30,
+    value: lamelles_count
+})
+const chanreParametres = () => {
+    lamelles_count.value = lamelles.value
+}
+</script>
+<template>
+    <div class="container">
+        <input type="number" :max="lamelles.max" :min="lamelles.min" v-model="lamelles.value" @change="chanreParametres" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/model/canvas.vue b/components/model/canvas.vue
index 2542e94..4d3cb0b 100644
--- a/components/model/canvas.vue
+++ b/components/model/canvas.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import Item from './item.vue';
-const lCount = 22
 const lSize = 0.1
+const lamelles_count = useState('lamelles_count')
+
 </script>
 <template>
     <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
@@ -20,10 +21,10 @@ const lSize = 0.1
     </Suspense>
     <Suspense>
         <TresGroup :position="[1, 0, 1]">
-            <template v-for="i in lCount">
+            <template v-for="i in lamelles_count">
                 <Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true" />
             </template>
-            <Item model-url="/models_one/verh.glb" :position="[0, (lCount + 1) * lSize, 0]" :remove-pos="true" />
+            <Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]" :remove-pos="true" />
         </TresGroup>
     </Suspense>
 </template>
\ No newline at end of file
diff --git a/types/index.d.ts b/types/index.d.ts
index 001da03..6f292ee 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,45 @@
 declare module '*.glb' {
     const src: string
     export default src
-}
\ No newline at end of file
+}
+
+type ApiKpType = {
+    id: number
+    title: string
+    content: string
+    url: string
+    meta_title: any
+    meta_description: string
+    keywords: any
+    is_indexed: boolean
+}
+
+type ApiPagesType = {
+    id: number
+    title: string
+    menu_title: string
+    slug: string
+    external_link: string
+    content: string
+    image: string
+}
+
+type ApiReviewsType = {
+    id: number
+    image: string
+    text: string
+    comment: string
+}
+
+type ApiFooterType = {
+    id: number
+    text: string
+    small_text: boolean
+}
+
+type ApiSocial_networkType = {
+    id: number
+    name: string
+    link: string
+    image: string
+}