From fff3d118184e94a419f0d6c3ab74b2b581f39f85 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 23 Sep 2024 14:17:06 +0300
Subject: [PATCH] one fence item

---
 components/calcModels.vue       | 18 +++++++-----
 components/calcValues.vue       | 52 +++++++++++++++++----------------
 components/model/line.vue       |  4 +--
 components/model/parametric.vue | 27 ++++++++++++++++-
 utils/material.ts               |  4 +--
 5 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 30a76db..8e9b45d 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -5,18 +5,21 @@ import { degToRad } from 'three/src/math/MathUtils.js';
 
 const section_count = use_section_count()
 const extra_section = use_extra_section()
-
+const lamelles_count = use_lamelles_count()
+const lamelle_height = use_lamelle_height()
+const defDistance = 3
 const controlsState = reactive({
     distance: section_count.value,
-    minDistance: 10,
-    maxDistance: 10,
+    minDistance: defDistance,
+    maxDistance: defDistance,
     position: { x: 0, y: 0, z: 0 },
     enablePan: false,
     enableZoom: false,
     minPolarAngle: degToRad(60),
-    maxPolarAngle: degToRad(60),
+    maxPolarAngle: degToRad(90),
 })
 const cameraStat = reactive({
+    position: [0, 0, 5],
     aspect: 1920 / 600,
     // fov: 40,
 })
@@ -25,7 +28,7 @@ const camera = ref("camera")
 
 watch([section_count, extra_section], () => {
     let v = (section_count.value + ~~(!!extra_section.value));
-    if (v <= 10) v = 10
+    if (v <= defDistance) v = defDistance
     controlsState.minDistance = v;
     controlsState.maxDistance = v;
     (camera.value as any).position.normalize().multiplyScalar(v)
@@ -41,16 +44,15 @@ watch([section_count, extra_section], () => {
             </template>
             <Loader />
             <Stats />
-            <TresCanvas clear-color="#ccc">
+            <TresCanvas  shadows>
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <TresGroup>
+                <TresGroup :position-y="-0.5">
                     <Suspense>
                         <ModelParametric />
                     </Suspense>
                 </TresGroup>
 
-                <TresAmbientLight intensity="10" />
             </TresCanvas>
         </ClientOnly>
     </div>
diff --git a/components/calcValues.vue b/components/calcValues.vue
index f5cf095..80a0ec1 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -151,7 +151,7 @@ const goal = (target: string, params: object) => {
 </script>
 <template>
     <div class="container relative py-4">
-        <div class="col-span-4">
+        <div class="col-span-3">
             <div class="form-row">
                 <div class="form-item w-full">
                     <label for="length">Длина ламельного блока, мм</label>
@@ -166,34 +166,11 @@ const goal = (target: string, params: object) => {
                         v-model="form_state.height" :ref="form_refs.height" />
                 </div>
 
-                <div class="form-item">
-                    <label for="lamelle_color">Цвет ламелей</label>
-                    <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
-                        disabled />
-                    <ColorPicker :cb="setLamelleColor" />
-                </div>
-                <div class="form-item">
-                    <label for="pillar_color">Цвет столба</label>
-                    <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
-                        disabled />
-                    <ColorPicker :cb="setPillarColor" />
-                </div>
-
                 <div class="form-item">
                     <label for="total_length">Общая длина забора, м</label>
                     <input type="number" id="total_length" v-bind="parametric.total_length" min=0
                         v-model="form_state.total_length" :ref="form_refs.total_length" />
                 </div>
-                <div class="form-item xl:w-2/4 text-sm xl:text-base">
-                    <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
-                        Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
-                        размер, чтобы продолжить.
-                    </p>
-                    <p v-if="form_state.extra_section" class="text-ioprim">
-                        Внимание! Дополнительная секция приводит к увеличению стоимости.
-                        Рекомендуем вам изменить длину забора или длину секции!
-                    </p>
-                </div>
 
                 <div class="form-item form-item_checkbox">
                     <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
@@ -205,8 +182,21 @@ const goal = (target: string, params: object) => {
                 </div>
             </div>
         </div>
+        <div class="col-span-3 col-start-10">
+            <div class="form-item">
+                <label for="lamelle_color">Цвет ламелей</label>
+                <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
+                    disabled />
+                <ColorPicker :cb="setLamelleColor" />
+            </div>
+            <div class="form-item">
+                <label for="pillar_color">Цвет столба</label>
+                <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60" disabled />
+                <ColorPicker :cb="setPillarColor" />
+            </div>
+        </div>
         <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
-            <div class="col-span-4 col-start-9">
+            <div class="col-span-12">
                 <div class="col-span-12 xl:col-span-8 xl:col-start-3 grid calc_table">
                     <div class="grid grid-cols-6">
                         <div class="col-span-4 calc_table-maincell">Секции</div>
@@ -243,6 +233,18 @@ const goal = (target: string, params: object) => {
                 <div class="col-span-12 text-center mb-4">
                     <button @click.prevent="toggleModal">Рассчитать</button>
                 </div>
+                <div class="col-span-12">
+                    <div class="form-item xl:w-2/4 text-sm xl:text-base">
+                        <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
+                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
+                            размер, чтобы продолжить.
+                        </p>
+                        <p v-if="form_state.extra_section" class="text-ioprim">
+                            Внимание! Дополнительная секция приводит к увеличению стоимости.
+                            Рекомендуем вам изменить длину забора или длину секции!
+                        </p>
+                    </div>
+                </div>
             </div>
         </template>
     </div>
diff --git a/components/model/line.vue b/components/model/line.vue
index 6e21ed2..951de31 100644
--- a/components/model/line.vue
+++ b/components/model/line.vue
@@ -129,7 +129,7 @@ onBeforeRender(() => {
         :position-z="position.z">
         <TresGroup :name="`line_${props.number}_inner`">
             <template v-for="i in props.count">
-                <template v-if="(i + (props.number - 1) * props.count) <= total"
+                <template v-if="(i + (props.number - 1) * props.count) <= 1"
                     :key="(i + (props.number - 1) * props.count)">
                     <ModelFence :index="i" :models="props.models"
                         :last_element="(i + (props.number - 1) * props.count) == total"
@@ -139,7 +139,7 @@ onBeforeRender(() => {
         </TresGroup>
         <TresGroup name="pointer">
             <template v-for="(p, i) in clickable_pointers">
-                <TresObject3D v-bind="p.clone()" :ref="clickable_refs[i]" />
+                <TresObject3D v-bind="p.clone()" :ref="clickable_refs[i]" :visible="false" />
             </template>
         </TresGroup>
     </TresGroup>
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index d96487f..dbac4a6 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -4,7 +4,12 @@ import {
     CineonToneMapping,
     Mesh,
     Object3D,
+    Vector3,
+    EquirectangularReflectionMapping,
+    Euler,
+    PMREMGenerator,
 } from 'three';
+import { GainMapLoader, } from '@monogrid/gainmap-js'
 //@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
@@ -15,7 +20,7 @@ const section_count = use_section_count()
 const lamelle_count = use_lamelles_count()
 const extra_section = use_extra_section()
 
-const { scene, renderer, camera } = useTresContext()
+const { scene, renderer, camera, controls } = useTresContext()
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 0.5
 
@@ -128,6 +133,26 @@ watch(() => [section_count.value, extra_section.value], () => {
 watch(lamelle_count, () => {
     [fence_inner].map(
         (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+    camera.value?.lookAt(10, 10, 10)
+})
+const pmremGenerator = new PMREMGenerator(renderer.value);
+pmremGenerator.compileEquirectangularShader();
+onMounted(async () => {
+    const loader = new GainMapLoader(renderer.value)
+    const result = await loader.loadAsync([
+        'hdrmaps/hdr.webp',
+        'hdrmaps/hdr-gainmap.webp',
+        'hdrmaps/hdr.json',
+    ])
+    if (renderer.value && camera.value) {
+        renderer.value.render(scene.value, camera.value)
+    }
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+
+    scene.value.environment = newEnvMap
+    scene.value.environmentIntensity = 1.5
+    result.renderTarget.texture.dispose();
 })
 
 </script>
diff --git a/utils/material.ts b/utils/material.ts
index 9a40cdd..cfde1a2 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -32,8 +32,8 @@ export const set_material = (scene: any, color: any, count: number | undefined =
         alphaMap: count ? texture : null,
         transparent: true,
         opacity: 1,
-        // roughness: 0.5,
-        // metalness: 0,
+        roughness: 0.2,
+        metalness: 0,
         side: DoubleSide,
     })
     set_metaril_func(scene, material)