add parametrical lamelles

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

components/calcmodel.vue

@@ -6,13 +6,13 @@ import Canvas from './model/canvas.vue';
 
 const controlsState = reactive({
     minDistance: 0,
-    maxDistance: 5,
+    maxDistance: 10,
-    enablePan: false,
+    // enablePan: false,
-    enebleZoom: 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 :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="1" color="red" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>

components/model/canvas.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import Item from './item.vue';
-const onClick = (e: MouseEvent) => {
+const lCount = 22
-    console.log(e)
+const lSize = 0.1
-}
-const { renderer } = useTresContext()
-renderer.value.shadowMap.enabled = true
 </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>

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