parametric model

assets/main.scss

@@ -44,7 +44,7 @@ a[href^="#"] {
     }
 
     &-text {
-        @apply col-span-5 text-sm prose;
+        @apply col-span-5 text-sm prose whitespace-break-spaces;
 
         &-small {
             @apply col-span-10 text-xs min-w-full prose;

components/calcModels.vue

@@ -4,9 +4,9 @@ import { OrbitControls } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
-    maxDistance: 10,
+    maxDistance: 5,
     enablePan: false,
-    enableZoom: false,
+    // enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
 // console.log(controlsState)

components/calcValues.vue

@@ -1,23 +1,39 @@
 <script setup lang="ts">
-import { useScroll } from '@vueuse/core';
-
-const lamelles_count = useState('lamelles_count', () => 3)
-const lamelles = reactive({
-    min: 3,
-    max: 30,
-    value: lamelles_count
-})
-const chanreParametres = () => {
-    lamelles_count.value = lamelles.value
+const lamelles_count = useState('lamelles_count', () => 8)
+const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
+const parametric = {
+    length: {
+        min: 100,
+        max: 2400,
+        step: 10,
+    },
+    height: {
+        min: 220,
+        max: 2400,
+        step: 115,
+    }
 }
+const form_state = reactive({
+    length: fence_section.value * 1000,
+    height: lamelles_count.value * parametric.height.step
+})
+const changeParametres = () => {
+    const lamelles = Math.floor(form_state.height / parametric.height.step)
+    lamelles_count.value = lamelles
+    fence_section.value = form_state.length * 0.001
+}
+watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
     <div class="container">
         <form class="form">
             <div class="form-item">
-                <label for="lanelles_count">Количество ламелей</label>
-                <input id="lanelles_count" type="number" :max="lamelles.max" :min="lamelles.min"
-                    v-model="lamelles.value" @change="chanreParametres" />
+                <label for="length">Длина секции, мм</label>
+                <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
+            </div>
+            <div class="form-item">
+                <label for="height">Высота забора, мм</label>
+                <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
             </div>
         </form>
     </div>

components/model/item.vue

@@ -46,12 +46,13 @@ const axis = [
     { axis: 'y', func: 'translateY', },
     { axis: 'z', func: 'translateZ', },
 ]
+type vectorType = 'x' | 'y' | 'z';
 onLoop(() => {
     if (model.value && props.target) {
         axis.forEach(element => {
             const point = model.value.position[element.axis]
-            let step = stepbase * target[element.axis]
-            if (Math.abs(point) >= Math.abs(target[element.axis])) {
+            let step = stepbase * target[element.axis as vectorType]
+            if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
                 step = 0
             }
             model.value[element.func](step)

components/model/parametric.vue

@@ -1,21 +1,42 @@
 <script setup lang="ts">
-import { Vector3 } from 'three';
-import Item from './item.vue';
-const lSize = 0.1
-const lamelles_count = useState('lamelles_count')
+const lamelles_count = useState<number>('lamelles_count')
+const fence_section = useState<number>('fence_section')
+
+const lSize = 0.115
+const bSize = 0.0235
+const pillar_size = 80 * 0.001
+const { scene, renderer, camera } = useTresContext()
+watch([lamelles_count, fence_section], () => {
+    // console.log(scene)
+    console.log(lamelles_count)
+    renderer.value.render(scene.value, camera.value)
+})
 </script>
 <template>
-    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
-        <TresCircleGeometry :args="[8, 8, 1]" />
-        <TresMeshStandardMaterial color="pink" />
-    </TresMesh>
     <Suspense>
-        <TresGroup :position="[1, 0, 1]">
-            <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, (lamelles_count + 1) * lSize, 0]"
+        <TresGroup>
+            <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
                 :remove-pos="true" />
+            <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
+                :remove-pos="true" />
+            <ModelItem model-url="/models_one/verh_100.glb"
+                :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
+            <ModelItem model-url="/models_one/verh_100.glb"
+                :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
+            <template v-for="(n, i) in lamelles_count">
+                <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
+                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
+                </TresGroup>
+                <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
+                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
+                </TresGroup>
+                <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
+                    <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" />
+                </TresGroup>
+            </template>
+            <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
+                <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" />
+            </TresGroup>
         </TresGroup>
     </Suspense>
 </template>