Merge branch 'bx-696-startproject' of https://git.svs-tech.pro/ksenia_mikhailova/mns-mini-zabor into bx-696-startproject

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>

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,9 +27,6 @@ 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">