add lead info

2024-06-20 16:12:29 +03:00 · 2024-06-20 16:12:29 +03:00 · 3827daff4f
parent 6067edcec2
commit 3827daff4f
6 changed files with 32 additions and 60 deletions
--- 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" />
--- 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>

--- 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
        },

--- 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]" />
--- 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>
--- 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))
    });