From 52c8e84be4d8aa097542ad2f7ea80c2fbf55f7d3 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 19 Jun 2024 15:08:35 +0300
Subject: [PATCH] fps some fix

---
 components/calcModels.vue       | 32 ++------------------------------
 components/model/item.vue       |  2 +-
 components/model/parametric.vue | 14 +++++++++-----
 3 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 07cbf9b..586b36e 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { CanvasTexture, FrontSide, RepeatWrapping } from 'three';
+import { FrontSide, RepeatWrapping } from 'three';
 import { TresCanvas, useTexture } from '@tresjs/core'
 import { OrbitControls, useGLTF } from '@tresjs/cientos'
 
-const lamelles_count = use_lamelles_count()
 const fence_section = use_fence_section()
-const remove_pillar = use_remove_pillar()
-const pillar_color = use_pillar_color()
-const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
-const total_length = use_total_length()
-const min_length = use_min_length()
 const max_size = use_max_size()
 
 const controlsState = reactive({
@@ -71,28 +65,10 @@ const loadAll = async () => {
     })
 }
 const camera = ref("camera")
-const test_texture = reactive({
-    color: 0xff00ff,
-    transparent: true,
-    opacity: 1
-})
+
 onMounted(() => {
     cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
     loadAll()
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-    canvas.width = 64;
-    canvas.height = 64;
-    // drawing gray scale areas
-    ctx.fillStyle = '#404040';
-    ctx.fillRect(0, 0, 32, 32);
-    ctx.fillStyle = '#808080';
-    ctx.fillRect(32, 0, 32, 32);
-    ctx.fillStyle = '#c0c0c0';
-    ctx.fillRect(0, 32, 32, 32);
-    ctx.fillStyle = '#f0f0f0';
-    ctx.fillRect(32, 32, 32, 32);
-    test_texture.alphaMap = new CanvasTexture(canvas);
 })
 watch(section_count, () => {
     let v = (section_count.value + ~~(!!extra_section.value)) * 1.5
@@ -119,10 +95,6 @@ watch(section_count, () => {
                     <TresMeshStandardMaterial v-bind="groundMaterial" />
                 </TresMesh>
 
-                <TresMesh>
-                    <TresBoxGeometry />
-                    <TresMeshBasicMaterial v-bind="test_texture" />
-                </TresMesh>
                 <template v-if="pointLight">
                     <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
                         :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
diff --git a/components/model/item.vue b/components/model/item.vue
index a9f2240..fee3832 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
-import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
+import { Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map'])
 
 let scene: any
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index cc1de1c..5219739 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -15,7 +15,7 @@ const section_count = use_section_count()
 const extra_section = use_extra_section()
 const max_size = use_max_size()
 
-const { scene, renderer, camera } = useTresContext()
+const { scene, renderer } = useTresContext()
 renderer.value.toneMapping = ReinhardToneMapping
 
 renderer.value.shadowMap.enabled = true
@@ -36,15 +36,17 @@ function set_material(scene: any, material: any) {
         set_material(el, material)
     })
 }
+const lcolor = getColorHexFromRal(lamelle_color.value)
 const lamelle_material = new MeshStandardMaterial({
-    color: new Color(getColorHexFromRal(lamelle_color.value as ralTypes)),
+    color: new Color(lcolor || '#9c9c9c'),
     transparent: true,
     opacity: 1,
     roughness: 0.3,
     metalness: 0.3
 })
+const pcolor = getColorHexFromRal(pillar_color.value)
 const pillar_material = new MeshStandardMaterial({
-    color: new Color(getColorHexFromRal(pillar_color.value as ralTypes)),
+    color: new Color(pcolor || '#eee'),
     transparent: true,
     opacity: 1,
     roughness: 0.3,
@@ -59,7 +61,8 @@ const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
     const items = seekAll(scene.value, 'name', "lamelles")
     const m = lamelle_material
-    m.color = new Color(getColorHexFromRal(lamelle_color.value as ralTypes))
+    const mcolor = getColorHexFromRal(lamelle_color.value as ralTypes)
+    if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
         set_material(element, m)
     });
@@ -73,7 +76,8 @@ watch(pillar_color, () => {
         ...seekAll(scene.value, 'name', "top_section"),
     ]
     const m = pillar_material
-    m.color = new Color(getColorHexFromRal(pillar_color.value as ralTypes))
+    const mcolor = getColorHexFromRal(pillar_color.value as ralTypes)
+    if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
         set_material(element, m)
     });