From 7f378d63ee7b9741b85474c848e54dd5f07ce667 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 10 Jun 2024 10:56:44 +0300
Subject: [PATCH] parametric loader

---
 components/calcModels.vue       | 15 +++++++++++++--
 components/model/parametric.vue |  6 +-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index e7f9013..d711656 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
@@ -9,12 +9,23 @@ const controlsState = reactive({
     enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
+const { hasFinishLoading, progress, items } = await useProgress()
 </script>
 <template>
-    <div class="container min-w-full">
+    <div class="container min-w-full relative">
+        <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">
+                Loading... {{ progress }} %
+                <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+            </div>
+        </div>
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
+            <Suspense>
+                <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
+            </Suspense>
             <Suspense>
                 <ModelParametric />
             </Suspense>
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index f671137..984ba93 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useTexture } from '@tresjs/core'
-import { Environment } from '@tresjs/cientos'
 import { ReinhardToneMapping, PCFShadowMap } from 'three';
 
 const lamelles_count = useState<number>('lamelles_count')
@@ -28,13 +27,10 @@ const pbrTexture = await useTexture({
 </script>
 <template>
     <TresGroup>
-        <Suspense>
-            <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
-        </Suspense>
         <Suspense>
             <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                 <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
-                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5"  />
+                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
                     <TresMeshStandardMaterial v-bind="pbrTexture" />
                 </TresMesh>
                 <ModelItem model-url="/models_one/bottom.glb"