From 91de92ddfa95b7bd7a61236a07207a99cf4e7782 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 11 Jun 2024 11:25:31 +0300
Subject: [PATCH] preload all calc models

---
 components/calcModels.vue       |  5 +++--
 components/model/item.vue       | 12 +++++++---
 components/model/parametric.vue | 39 ++++++++++++++++++---------------
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 1e5ab1f..99d16a3 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -13,8 +13,9 @@ const { hasFinishLoading, progress, items } = await useProgress()
 </script>
 <template>
     <div class="container min-w-full relative">
-        <Transition>
-            <div v-if="!hasFinishLoading"
+        <Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
+            leave-active-class="opacity-0 transition-opacity duration-200">
+            <div v-show="!hasFinishLoading"
                 class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
                 <div class="w-200px">
                     Идет загрузка... {{ progress }} %
diff --git a/components/model/item.vue b/components/model/item.vue
index bc4eb36..490339b 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'position', 'removePos', 'target', 'color'])
+const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color'])
 
-const { scene } = await useGLTF(props.modelUrl)
+let scene
+if (props.modelUrl) {
+    const { scene: model } = await useGLTF(props.modelUrl, { draco: true })
+    scene = model
+} else {
+    scene = props.model
+}
 scene.receiveShadow = true
 scene.castShadow = true
 
@@ -17,7 +23,7 @@ const getMaterial = () => {
     return new MeshStandardMaterial({
         color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
         roughness: 0.3,
-        metalness: 1,
+        metalness: 0.5,
     })
 }
 const material = getMaterial()
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index ff2d468..0d390bb 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useTexture } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
 import { ReinhardToneMapping, PCFShadowMap } from 'three';
 
 const lamelles_count = useState<number>('lamelles_count')
@@ -24,6 +25,10 @@ const pbrTexture = await useTexture({
     normalMap: '/texture/Rock035_2K_NormalGL.jpg',
     ambientOcclusion: '/texture/Rock035_2K_AmbientOcclusion.jpg',
 })
+const { scene: bottom } = await useGLTF('/models_one/verh_100.glb', { draco: true })
+const { scene: verh } = await useGLTF('/models_one/bottom.glb', { draco: true })
+const { scene: stolb } = await useGLTF('/models_one/stolb.glb', { draco: true })
+const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
 </script>
 <template>
     <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
@@ -31,37 +36,35 @@ const pbrTexture = await useTexture({
             <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial v-bind="pbrTexture" />
         </TresMesh>
-        <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
-            :remove-pos="true" :color="pillar_color" />
-        <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
-            :remove-pos="true" :color="pillar_color" />
-        <ModelItem model-url="/models_one/verh_100.glb" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]"
-            :remove-pos="true" :color="pillar_color" />
-        <ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
-            :remove-pos="true" :color="pillar_color" />
+        <ModelItem :model="bottom" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
+        <ModelItem :model="bottom" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
+        <ModelItem :model="verh" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
+        <ModelItem :model="verh" :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
         <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" :color="pillar_color" />
+                <ModelItem :model="stolb" :remove-pos="true" :color="pillar_color" />
             </TresGroup>
         </template>
         <template v-for="(n, i) in lamelles_count">
             <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" :color="pillar_color" />
+                <ModelItem :model="stolb" :remove-pos="true" :color="pillar_color" />
             </TresGroup>
         </template>
         <template v-for="(n, i) in lamelles_count">
             <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
-                <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
+                <ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
             </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" :color="pillar_color" />
+            <ModelItem :model="verh" :remove-pos="true" :color="pillar_color" />
         </TresGroup>
-        <ModelItem model-url="/models_one/bottom.glb"
-            :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
-            :color="pillar_color" />
-        <ModelItem model-url="/models_one/bottom.glb"
-            :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
-            :color="pillar_color" />
+        <ModelItem :model="bottom" :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
+        <ModelItem :model="bottom" :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
     </TresGroup>
 </template>
\ No newline at end of file