From 3827daff4f562f80de2e1f90213dab120096ca2a Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 20 Jun 2024 16:12:29 +0300
Subject: [PATCH] add lead info

---
 components/calcModels.vue       |  6 +++---
 components/expDiagram.vue       | 23 ++++++-----------------
 components/modal.vue            | 25 ++++++++++++++-----------
 components/model/diagram.vue    |  6 +++---
 components/model/item.vue       | 10 ++++++----
 components/model/parametric.vue | 22 ----------------------
 6 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 9504779..38d65fa 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -26,7 +26,7 @@ const pointLight = ref()
 
 const groundMaterial = ref({
     color: "#555",
-    roughness: 0.2,
+    roughness: 0.7,
     metalness: 0,
     side: FrontSide,
 })
@@ -100,8 +100,8 @@ watch([section_count, extra_section], () => {
                 </TresMesh>
 
                 <template v-if="pointLight">
-                    <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity"
-                        :position="Object.values(pointLight.position).map((el: any) => el * 8)" cast-shadow />
+                    <TresPointLight v-bind="pointLight"
+                        :position="Object.values(pointLight.position).map((el: any) => el * 7)" cast-shadow />
                 </template>
 
                 <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
diff --git a/components/expDiagram.vue b/components/expDiagram.vue
index 5aa8dd3..80a5817 100644
--- a/components/expDiagram.vue
+++ b/components/expDiagram.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Environment } from '@tresjs/cientos'
+import { OrbitControls, Environment, Html } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
@@ -26,15 +26,18 @@ const loadAll = async () => {
 
     back_light.value = back.children[0]
     back_light.value.intensity = back_light.value.intensity * k
+    back_light.value.shadow.bias = -0.01
     // back_light.value.intensity = 250
 
     key_light.value = key.children[0]
     key_light.value.intensity = key_light.value.intensity * k
+    key_light.value.shadow.bias = -0.01
     // key_light.value.intensity = 250
     key_light.value.cast_shadow = true
 
     secondary_light.value = secondary.children[0]
     secondary_light.value.intensity = secondary_light.value.intensity * k
+    secondary_light.value.shadow.bias = -0.01
     // secondary_light.value.intensity = 50
 }
 onMounted(() => {
@@ -49,12 +52,9 @@ onMounted(() => {
                     Загрузка 3D модели
                 </div>
             </template>
-            <TresCanvas preset="realistic" heoght="600">
+            <TresCanvas height="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <Suspense v-if=false>
-                    <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
-                </Suspense>
                 <Suspense>
                     <ModelDiagram />
                 </Suspense>
@@ -65,24 +65,13 @@ onMounted(() => {
                     :position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
                 <TresPointLight v-bind="secondary_light" v-if="secondary_light"
                     :position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
+                <TresAmbientLight :intensity="2"/>
             </TresCanvas>
         </ClientOnly>
         <span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
             <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
             <Icon name="mdi:square-outline" v-else />
         </span>
-        <div class="grid grid-cols-3 bg-slate-400">
-            <template v-for="(value, key) in { back: back_light, key: key_light, secondary: secondary_light }">
-                <div v-if="value">
-                    <strong>{{ key }}</strong><br />
-                    <label>decay</label><input type="number" step="0.1" v-model="value.decay" /><br />
-                    <label>intensity</label><input type="number" step="0.1" v-model="value.intensity" /><br />
-                    <label>position x</label><input type="number" step="0.1" v-model="value.position.x" /><br />
-                    <label>position y</label><input type="number" step="0.1" v-model="value.position.y" /><br />
-                    <label>position z</label><input type="number" step="0.1" v-model="value.position.z" /><br />
-                </div>
-            </template>
-        </div>
     </div>
 </template>
 
diff --git a/components/modal.vue b/components/modal.vue
index 293fa71..70896b8 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -74,13 +74,10 @@ const submit = (e: any) => {
         body: JSON.stringify({
             name: modal_data.name || `ref from site ${new Date}`,
             phone: modal_data.phone,
-            fence_info: `Ширина секции: ${fence_section.value}
-            Ламелей в секции: ${lamelles_count.value}
-            Всего секций: ${section_count.value}
-            Дополнительная секция: ${extra_section.value}
-            Общая длина забора: ${total_length.value}
-            Цвет ламелей ${lamelle_color.value} (${getColorNameFromRal(lamelle_color.value)})
-            Цвет столбов ${pillar_color.value} (${getColorNameFromRal(pillar_color.value)})`
+            fence_info: [
+                ...Object.values(total_txt.value).map(el => el.join('\n')), 
+                total_colors.value.join('\n')
+            ].join('\n\n'),
         })
     })
     modal_data.phone = undefined
@@ -91,6 +88,12 @@ const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
     currency: 'RUB',
 });
+const total_colors = computed(() => {
+    return [
+        `Ламели ${lamelle_color.value} ${getColorNameFromRal(lamelle_color.value)}`,
+        `Столбы ${pillar_color.value} ${getColorNameFromRal(lamelle_color.value)}`,
+    ]
+})
 const total_txt = computed(() => {
     let { mortgage, pillar, lamella, rivets, bar, guide } = calculatorData.value
     mortgage = parseFloat(mortgage)
@@ -122,12 +125,12 @@ const total_txt = computed(() => {
             txt: `Дополнительная секция, ламели, ${lam_count}шт`,
             value: prices.lamella_extra * lam_count
         },
-        guide: { 
-            txt: `Направляющие, 2шт`, 
+        guide: {
+            txt: `Направляющие, 2шт`,
             value: prices.guide * 2
         },
-        top: { 
-            txt: `Верхняя планка`, 
+        top: {
+            txt: `Верхняя планка`,
             value: prices.top * 1
         },
 
diff --git a/components/model/diagram.vue b/components/model/diagram.vue
index 9b58018..fd19fad 100644
--- a/components/model/diagram.vue
+++ b/components/model/diagram.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useGLTF, } from '@tresjs/cientos'
+import { useGLTF, Html } from '@tresjs/cientos'
 import Item from './item.vue';
 import { getColorHexFromRal } from '../ral';
-import { Color, MeshStandardMaterial } from 'three';
 
 const explosion_state = use_explosion_state()
 
@@ -28,10 +27,11 @@ const pillar_color = use_pillar_color()
 
 set_material(planki, getColorHexFromRal(lamelle_color.value));
 [stolb, verh, krepleniye_planok].map(el => set_material(el, getColorHexFromRal(pillar_color.value)))
+
 </script>
 <template>
     <TresGroup :position-y="-3.5" :scale="2">
-        <Item :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
+        <Item :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]"  />
         <Item :model="krepleniye_planok" :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
         <Item :model="osnova_stolba" />
         <Item :model="planki" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
diff --git a/components/model/item.vue b/components/model/item.vue
index 4da9411..8b4906d 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF, Html } from '@tresjs/cientos'
 import { Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'model', 'position', 'target', 'color', 'map'])
+const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
 let scene: any
 if (props.modelUrl) {
@@ -58,8 +58,10 @@ watch(props, () => {
 </script>
 <template>
     <Suspense>
-        <TresGroup :position="(props.position || [0, 0, 0])" ref="model">
-            <primitive :object="scene.children[0]" />
+        <TresGroup>
+            <TresGroup :position="(props.position || [0, 0, 0])" ref="model">
+                <primitive :object="scene.children[0]" />
+            </TresGroup>
         </TresGroup>
     </Suspense>
 </template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 2ce015a..0744154 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -26,31 +26,12 @@ const { scene: fence } = await useGLTF('/models_one/fence.glb', { draco: true })
 const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
 const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
 
-const lcolor = getColorHexFromRal(lamelle_color.value)
-const lamelle_material = new MeshStandardMaterial({
-    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(pcolor || '#eee'),
-    transparent: true,
-    opacity: 1,
-    roughness: 0.3,
-    metalness: 0.3
-})
 set_material(lamelle, getColorHexFromRal(lamelle_color.value));
 [top, fence, fastening].map((el: any) => { set_material(el, getColorHexFromRal(pillar_color.value)) })
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
     const items = seekAll(scene.value, 'name', "lamelles")
-    const m = lamelle_material
-    const mcolor = getColorHexFromRal(lamelle_color.value as ralTypes)
-    if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
         set_material(element, getColorHexFromRal(lamelle_color.value))
     });
@@ -63,9 +44,6 @@ watch(pillar_color, () => {
         ...seekAll(scene.value, 'name', "lam_fastening_two"),
         ...seekAll(scene.value, 'name', "top_section"),
     ]
-    const m = pillar_material
-    const mcolor = getColorHexFromRal(pillar_color.value as ralTypes)
-    if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
         set_material(element, getColorHexFromRal(pillar_color.value))
     });