assets/main.scss

@@ -182,6 +182,10 @@ a[href^="#"] {
 
         .container {
             @apply gap-4 items-stretch;
+
+            >* {
+                @apply relative;
+            }
         }
     }
 
@@ -306,6 +310,10 @@ button {
 
     &-row {
         @apply flex flex-row flex-wrap gap-2;
+
+        &_picker {
+            @apply grid grid-cols-2 justify-center items-center;
+        }
     }
 
     &-item {
@@ -316,7 +324,7 @@ button {
         }
 
         .icon {
-            @apply hover:text-primary cursor-pointer transition-colors text-2xl;
+            @apply hover:text-primary cursor-pointer transition-colors text-xl;
 
             &.disabled {
                 @apply text-neutral pointer-events-none cursor-not-allowed;
@@ -352,6 +360,7 @@ button {
                 input {
                     @apply flex-grow;
                 }
+
                 span {
                     @apply min-w-16;
                 }
@@ -383,7 +392,7 @@ button {
         @apply flex items-center justify-between;
 
         >div {
-            @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
+            @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-2;
 
             span {
                 @apply grow text-left;
@@ -393,7 +402,7 @@ button {
     }
 
     &-button {
-        @apply min-w-10 shrink-0 h-full;
+        @apply min-w-6 shrink-0 h-full;
     }
 
     &-selected {
@@ -401,7 +410,11 @@ button {
     }
 
     &-changer {
-        @apply flex gap-3 mt-4 max-h-36 overflow-auto;
+        @apply gap-3 mt-4 max-h-36 overflow-auto order-10 hidden;
+
+        &_open {
+            @apply flex flex-wrap col-span-2;
+        }
     }
 
     &-list {
@@ -445,9 +458,11 @@ button {
         }
     }
 }
-.calc{
+
+.calc {
     @apply max-h-[800px] relative h-full;
 }
+
 .calc_table {
     @apply flex flex-col gap-2 self-end;
 

components/calc/values.vue

@@ -169,12 +169,12 @@ const calc_table = computed(() => {
         },
         {
             name:
-                `Ламели, RAL ${lamelle_color.value}, ${getColorNameFromRal(lamelle_color.value)?.toLowerCase()}`,
+                `Ламели`,
             value: section_count.value * lamelles_count.value,
             extra: 1 * lamelles_count.value
         },
         {
-            name: `Столбы, RAL ${pillar_color.value}, ${getColorNameFromRal(pillar_color.value)?.toLowerCase()}`,
+            name: `Столбы`,
             value: !form_state.remove_pillar ? section_count.value + ~~(!!form_state.extra_section) + 1 : `—`,
             extra: `—`
         },
@@ -183,42 +183,31 @@ const calc_table = computed(() => {
 </script>
 <template>
     <div class="form">
+
         <div class="form-group">
-            <div class="form-row">
+            <div class="form-row form-row_picker">
-                <div class="form-item form-item_color">
                 <label for="lamelle_color">Цвет ламелей</label>
                 <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
                     :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
                     :goto_cam="new Vector3(0.75, 0.75, 0.75)" />
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-item form-item_color">
                 <label for="pillar_color">Цвет столба</label>
                 <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
                     :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
                     :goto_cam="new Vector3(-1, -1, 1)" />
             </div>
-            </div>
+            <div class="form-row form-row_picker">
-            <div class="form-row">
-                <div class="form-item form-item_color">
                 <label for="pillar_pattern">Узор столба</label>
                 <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
                     :pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
                     :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
                     :goto_cam="new Vector3(1, 2, -1)" />
-                </div>
+                <label for="pillar_topper">Колпак столба</label>
-            </div>
-            <div class="form-row">
-                <div class="form-item form-item_color">
-                    <label for="pillar_topper">Вершина</label>
                 <DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
                     :pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
                     :goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
                     :goto_cam="new Vector3(-1, 2, 1)" />
             </div>
         </div>
-        </div>
         <div class="form-group">
             <div class="form-row">
                 <div class="form-item form-item_range w-full">
@@ -271,10 +260,10 @@ const calc_table = computed(() => {
                 </div>
             </div>
         </div>
+
         <div class="form-group">
-            <div class="form-row">
             <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
-                    <div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
+                <div class="grid calc_table w-full">
                     <div class="grid grid-cols-4 relative">
                         <template v-for="item in calc_table">
                             <div class="col-span-3 calc_table-maincell">
@@ -288,5 +277,4 @@ const calc_table = computed(() => {
             </template>
         </div>
     </div>
-    </div>
 </template>

components/dropdown/picker.vue

@@ -62,8 +62,8 @@ watch(open_calc, () => {
                 </div>
             </template>
         </div>
-
+    </div>
-        <div class="picker-changer flex flex-wrap" v-if="is_open">
+    <div class="picker-changer" :class="[{ 'picker-changer_open': is_open }]">
         <template v-if="props.type == 'color'">
             <DropdownColor :cb="onClick" />
         </template>
@@ -71,7 +71,6 @@ watch(open_calc, () => {
             <DropdownList :cb="onClick" :patterns="props.type" />
         </template>
     </div>
-    </div>
 </template>
 <style scoped>
 .color_picker-selected:not([style*=color]) {

components/model/env.vue

@@ -3,10 +3,13 @@ import {
     PCFSoftShadowMap,
     CineonToneMapping,
     PMREMGenerator,
+    Vector3,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
-
+import { useLoop } from '@tresjs/core';
 const { scene, renderer, camera } = useTresContext()
+const {onBeforeRender} = useLoop()
+
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 1
 
@@ -30,7 +33,16 @@ onMounted(async () => {
 
     scene.value.environment = newEnvMap
     scene.value.environmentIntensity = 1
+    scene.value.environmentRotation.z = 0.25
     result.renderTarget.texture.dispose();
 })
+onBeforeRender(()=>{
+    if(camera.value) {
+        const cameraDirection = new Vector3()
+        camera.value.getWorldDirection(cameraDirection);
+        const angle = Math.atan2(cameraDirection.z, cameraDirection.x);
+        scene.value.environmentRotation.z = angle + 0.25
+    }
+})
 </script>
 <template></template>

components/model/fence.vue

@@ -132,7 +132,6 @@ watch(lamelles_count, setBraceCount)
 
 const pillar = ref<Mesh[]>([])
 const setPillar = () => {
-    console.log(props.models.pillar_top)
     const top = props.models.pillar_top.children[0];
     top.position.setComponent(1, lSize * lamelles_count.value + lamelles_count.value * 0.0001 * scale_koef);
 

composables/useCalc.ts

@@ -23,7 +23,7 @@ export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
 export const use_min_length = () => useState('min_length', () => 700)
-export const use_max_size = () => useState<number>('max_size', () => 3)
+export const use_max_size = () => useState<number>('max_size', () => 1)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
 
 export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)