parameter count

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">

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')

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>

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>

types/index.d.ts

@@ -1,4 +1,45 @@
 declare module '*.glb' {
     const src: string
     export default src
-}
+}
+
+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
+}