components/model/diagram.vue

@@ -4,6 +4,7 @@ import { useGLTF } from '@tresjs/cientos'
 import { getColorHexFromRal } from '../ral';
 
 const explosion_state = use_explosion_state()
+const globalFenceType = useGlobalFenceType()
 
 const k = 1.5
 const targetExplosion = {
@@ -14,24 +15,59 @@ const targetExplosion = {
     stolb: [0 * k, 0 * k, 1 * k],
     verh: [0 * k, 0.25 * k, 0 * k],
 }
+const { scene: standart_kosynka } = await useGLTF('/models_exp/kosynka.glb')
+const { scene: standart_krepleniye_planok } = await useGLTF('/models_exp/krepleniye_planok.glb')
+const { scene: standart_osnova_stolba } = await useGLTF('/models_exp/osnova_stolba.glb')
+const { scene: standart_planki } = await useGLTF('/models_exp/planki.glb')
+const { scene: standart_stolb } = await useGLTF('/models_exp/stolb.glb')
+const { scene: standart_verh } = await useGLTF('/models_exp/verh.glb')
+
+const { scene: aristo_kosynka } = await useGLTF('/models_aristo_exp/kosynka.glb')
+const { scene: aristo_krepleniye_planok } = await useGLTF('/models_aristo_exp/krepleniye_planok.glb')
+const { scene: aristo_osnova_stolba } = await useGLTF('/models_aristo_exp/osnova_stolba.glb')
+const { scene: aristo_planki } = await useGLTF('/models_aristo_exp/planki.glb')
+const { scene: aristo_stolb } = await useGLTF('/models_aristo_exp/stolb.glb')
+const { scene: aristo_verh } = await useGLTF('/models_aristo_exp/verh.glb')
+
+const kosynka = ref(standart_kosynka)
+const krepleniye_planok = ref(standart_krepleniye_planok)
+const osnova_stolba = ref(standart_osnova_stolba)
+const planki = ref(standart_planki)
+const stolb = ref(standart_stolb)
+const verh = ref(standart_verh)
+
+watch(() => globalFenceType.value?.type, (t) => {
+    if (t == 'aristo') {
+        kosynka.value = aristo_kosynka
+        krepleniye_planok.value = aristo_krepleniye_planok
+        osnova_stolba.value = aristo_osnova_stolba
+        planki.value = aristo_planki
+        stolb.value = aristo_stolb
+        verh.value = aristo_verh
+    }
+    if (t == "standart") {
+        kosynka.value = standart_kosynka
+        krepleniye_planok.value = standart_krepleniye_planok
+        osnova_stolba.value = standart_osnova_stolba
+        planki.value = standart_planki
+        stolb.value = standart_stolb
+        verh.value = standart_verh
+    }
+    set_material(planki.value, getColorHexFromRal(lamelle_color.value));
+    [stolb, verh, krepleniye_planok].map(el => set_material(el.value, getColorHexFromRal(pillar_color.value)))
+})
 
-const { scene: kosynka } = await useGLTF('/models_exp/kosynka.glb')
-const { scene: krepleniye_planok } = await useGLTF('/models_exp/krepleniye_planok.glb')
-const { scene: osnova_stolba } = await useGLTF('/models_exp/osnova_stolba.glb')
-const { scene: planki } = await useGLTF('/models_exp/planki.glb')
-const { scene: stolb } = await useGLTF('/models_exp/stolb.glb')
-const { scene: verh } = await useGLTF('/models_exp/verh.glb')
 
 const lamelle_color = use_lamelle_color()
 const pillar_color = use_pillar_color()
 
-set_material(planki, getColorHexFromRal(lamelle_color.value));
-[stolb, verh, krepleniye_planok].map(el => set_material(el, getColorHexFromRal(pillar_color.value)))
+set_material(planki.value, getColorHexFromRal(lamelle_color.value));
+[stolb, verh, krepleniye_planok].map(el => set_material(el.value, getColorHexFromRal(pillar_color.value)))
 
 </script>
 <template>
     <Suspense>
-        <TresGroup :position-y="-3.5" :scale="2">
+        <TresGroup :position-y="-3.5" :scale="2" :key="globalFenceType?.type">
             <ModelItem :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
             <ModelItem :model="krepleniye_planok"
                 :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />

components/model/fence.vue

@@ -145,19 +145,6 @@ const calculateAddScale = (model: Mesh, k = 1): number => {
 
     return (lamelle_height.value * k) / boundingBoxHeight;
 };
-const calculateFasteningScale = (model_fastening: Mesh, model_lamelle: Mesh, c = 'z'): number => {
-    function getWidth(model: Mesh, c) {
-        if (!model.geometry.boundingBox) {
-            model.geometry.computeBoundingBox(); // Вычисляем boundingBox, если он не был вычислен ранее
-        }
-
-        return Math.abs(
-            model.geometry.boundingBox!.max[c] - model.geometry.boundingBox!.min[c]
-        );
-    }
-
-    return getWidth(model_lamelle, c) / (getWidth(model_fastening, c))
-};
 
 const pillar = ref<Mesh[]>([])
 const setPillar = () => {
@@ -204,27 +191,25 @@ const setFastening = () => {
     )
 
     const v = ((extra.value as number) || fence_section.value) * 10
+    
     const top = props.models.fastening_top.clone().children[0];
     top.position.set(
         pillar_size * 0.5,
-        lamelles_count.value * lamelle_height.value - 0.0275 * scale_koef,
+        lamelles_count.value * lamelle_height.value -0.0275 * scale_koef,
         0
     );
     top.scale.setComponent(0, v);
-    top.scale.setComponent(2, calculateFasteningScale(top, props.models.lamelle.children[0]));
-
-    let c = 0.002 * scale_koef
+    
+    let c = 0.0019 * scale_koef
     const side_one = props.models.fastening_side.clone().children[0];
     side_one.name = 'side_one'
     side_one.position.set(pillar_one_pos.value, 0, c);
     side_one.scale.set(1, lamelles_count.value * calculateAddScale(side_one), 1)
-    side_one.scale.setComponent(2, calculateFasteningScale(side_one, props.models.lamelle.children[0]));
 
     const side_two = props.models.fastening_side.clone().children[0];
     side_two.name = 'side_two'
     side_two.scale.set(-1, lamelles_count.value * calculateAddScale(side_two), -1)
     side_two.position.set(pillar_two_pos.value, 0, c);
-    side_two.scale.setComponent(2, calculateFasteningScale(side_two, props.models.lamelle.children[0]));
 
     let arr = [top_one, top_two, top, side_one, side_two];
     [top, side_one, side_two, ...braces.value].map(el => {

pages/index.vue

@@ -135,7 +135,7 @@ watch(openTab, () => {
                 </div>
             </div>
         </div>
-        <div class="siteblock siteblock_imgbg bg-slate-500  hidden"
+        <div class="siteblock siteblock_imgbg bg-slate-500 "
             :style="[{ backgroundImage: `url(${[imgBase, delivery?.image].join('/')})` }]">
             <NuxtImg :src="[imgBase, delivery?.image].join('/')" class="invisible" v-if="delivery"
                 alt="коричневый забор" title="" format="webp" loading="lazy" />