fence color

assets/main.scss

@@ -118,7 +118,7 @@ a[href^="#"] {
     @apply bg-white p-10 border rounded shadow prose ;
 
     &-backdrop {
-        @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center;
+        @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30;
     }
 
     form {

components/calcModels.vue

@@ -87,6 +87,7 @@ watch([section_count, extra_section], () => {
             </template>
             <Loader />
             <TresCanvas shadows>
+                <StatsGl />
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">

components/calcValues.vue

@@ -124,7 +124,7 @@ const plurals = {
 }
 </script>
 <template>
-    <div class="container py-4">
+    <div class="container relative py-4">
         <ClientOnly fallback-tag="div">
             <template #fallback>
                 <div class="fallback">

components/model/parametric.vue

@@ -21,13 +21,18 @@ renderer.value.toneMapping = ReinhardToneMapping
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFSoftShadowMap
 
-const { scene: top } = await useGLTF('/models_one/verh_100.glb', { draco: true })
+const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
-const { scene: fence } = await useGLTF('/models_one/fence.glb', { draco: true })
+const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
-const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
+const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
-const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
+const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
 
-set_material(lamelle, getColorHexFromRal(lamelle_color.value));
+const top = ref(top_model)
-[top, fence, fastening].map((el: any) => { set_material(el, getColorHexFromRal(pillar_color.value)) })
+const fence = ref(fence_model)
+const fastening = ref(fastening_model)
+const lamelle = ref(lamelle_model)
+
+set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
+[top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -35,7 +40,7 @@ watch(lamelle_color, () => {
     items.forEach(element => {
         set_material(element, getColorHexFromRal(lamelle_color.value))
     });
-    set_material(lamelle, getColorHexFromRal(lamelle_color.value));
+    set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
 })
 watch(pillar_color, () => {
     const items = [
@@ -48,7 +53,7 @@ watch(pillar_color, () => {
     items.forEach(element => {
         set_material(element, getColorHexFromRal(pillar_color.value))
     });
-    [top, fence, fastening].map((el: any) => { set_material(el, getColorHexFromRal(pillar_color.value)) })
+    [top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
 })
 watch([section_count, extra_section], () => {
     const base = seek(scene.value, 'name', 'base')