add last section

components/calcModels.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FrontSide, RepeatWrapping, Vector2 } from 'three';
+import { FrontSide, RepeatWrapping } from 'three';
 import { TresCanvas, useTexture } from '@tresjs/core'
 import { OrbitControls, useGLTF } from '@tresjs/cientos'
 

components/model/fence.vue

@@ -8,6 +8,7 @@ const fence_section = use_fence_section()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
 const remove_pillar = use_remove_pillar()
+const max_size = use_max_size()
 
 const lSize = 0.115
 const bSize = 0.0235
@@ -20,23 +21,31 @@ const scale_koef = 2.5
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 
-const make_translate_to_section = (source = fence_section.value) => {
+const last_element = ref(Math.min((section_count.value + ~~(!!extra_section.value)), max_size.value))
-    const one_s = (source + pillar_size + bSize)
+watch([section_count, extra_section], () => {
-    let r = (props.index - 1) * one_s * scale_koef
+    last_element.value = Math.min(section_count.value + ~~(!!extra_section.value), max_size.value)
-    return r
-}
-const translate_to_section = ref(make_translate_to_section())
-
-watch(fence_section, () => {
-    translate_to_section.value = make_translate_to_section()
 })
-
+const getExtraValue = () => (extra_section.value && props.index == last_element.value) ? extra_section.value * 0.001 : false
-const extra = ref((extra_section && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false)
+const extra = ref(getExtraValue())
 if (extra.value) {
     pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
     pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
 }
 
+const make_translate_to_section = (source = fence_section.value) => {
+    const one_s = (source + pillar_size + bSize) * scale_koef
+    let r = (props.index - 1) * one_s
+    if (typeof extra.value == 'number') {
+        r -= (fence_section.value - extra.value) * scale_koef * 0.5
+    }
+    return r
+}
+const translate_to_section = ref(make_translate_to_section())
+
+watch([fence_section, extra], () => {
+    translate_to_section.value = make_translate_to_section()
+})
+
 const instanced_lamelle = shallowRef();
 const instanced_lamelle_geometry = Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry)
 const instanced_lamelle_material = props.models.lamelle.children[0].material
@@ -58,7 +67,7 @@ watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra],
             instanced_lamelle.value.setMatrixAt(i, newmatrix);
 
             if (i >= lamelles_count.value) {
-                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, 2, 2)));
+                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, -2, 2)));
             }
         }
         instanced_lamelle.value.instanceMatrix.needsUpdate = true
@@ -66,8 +75,8 @@ watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra],
 });
 
 watch([section_count, fence_section, extra_section], () => {
-    extra.value = (extra_section.value && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false
+    extra.value = getExtraValue()
-    if (extra_section && props.index == (section_count.value + 1)) {
+    if (extra_section.value && props.index == last_element.value) {
         pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
         pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
         // translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
@@ -79,8 +88,7 @@ watch([section_count, fence_section, extra_section], () => {
 })
 </script>
 <template>
-    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`"
+    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="0">
-        :position-y="extra ? 1 : 0">
 
         <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
             :position-z="0">

components/model/item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGLTF, Html } from '@tresjs/cientos'
+import { useGLTF } from '@tresjs/cientos'
 import { Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
@@ -15,14 +15,6 @@ scene.castShadow = true
 
 const target = ref(props.target ? new Vector3(...props.target) : null)
 
-function shadows_and_pos(scene: any) {
-    scene.children.forEach((el: any) => {
-        shadows_and_pos(el)
-    })
-}
-
-shadows_and_pos(scene)
-
 const model = ref()
 const { onLoop } = useRenderLoop()
 
@@ -60,6 +52,6 @@ watch(props, () => {
 </script>
 <template>
     <Suspense>
-        <TresObject3D v-bind="scene.children[0]" :position="(props.position || [0, 0, 0])" ref="model" />
+        <primitive :object="scene.children[0]" :position="(props.position || [0, 0, 0])" ref="model" />
     </Suspense>
 </template>

components/model/parametric.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import {
-    EquirectangularReflectionMapping,
     ReinhardToneMapping, PCFSoftShadowMap,
     PMREMGenerator, Euler,
-    MeshStandardMaterial,
-    Color,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
-import { EXRLoader } from 'three/examples/jsm/Addons.js';
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
 
@@ -89,10 +85,8 @@ onMounted(async () => {
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="i in (section_count + ~~(!!extra_section))">
+        <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
-            <template v-if="i <= max_size">
+            <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
-                <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
-            </template>
         </template>
     </TresGroup>
 </template>