components/calc/values.vue

@@ -4,6 +4,7 @@ import type { ralTypes } from '@/components/ral'
 
 import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
 import type { patternTypes } from '../pattern';
+import { Vector3 } from 'three';
 
 const lamelle_height = use_lamelle_height()
 const lamelles_count = use_lamelles_count()
@@ -16,6 +17,7 @@ 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 goto_cam = use_goto_camera()
 
 if (!pillar_color.value) {
     const r = Math.floor(Math.random() * predefPillarColors.length)
@@ -137,14 +139,16 @@ const changeParametres = () => {
 
 
 const setLamelleColor = (color: ralTypes) => {
+    goto_cam.value = new Vector3(-2, -2, -2)
     lamelle_color.value = color;
     lamelle_text.value = contrastColor(color) ?? '#000'
 }
 const setPillarColor = (color: ralTypes) => {
+    goto_cam.value = new Vector3(2, 2, 2)
     pillar_color.value = color
     pillar_text.value = contrastColor(color) ?? '#000'
 }
-const setPillarPattern = (pattern:patternTypes) => {
+const setPillarPattern = (pattern: patternTypes) => {
     pillar_pattern.value = pattern
 }
 watch(() => form_state, changeParametres, { deep: true })
@@ -231,7 +235,7 @@ const calc_table = computed(() => {
                         backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
                         color: lamelle_text
                     }" disabled />
-                    <DropdownColorPicker :cb="setLamelleColor" />
+                    <DropdownColorPicker :cb="setLamelleColor">123</DropdownColorPicker>
                 </div>
                 <div class="form-item form-item_color">
                     <label for="pillar_color">Цвет столба</label>

components/dropdown/colorPicker.vue

@@ -4,6 +4,8 @@ import { ralClassicPallette, getColorHexFromRal } from '@/components/ral'
 const props = defineProps(['color', 'cb', 'open', 'active'])
 const open = props.open ?? true
 
+const goto_cam = use_goto_camera()
+
 const onClick = (color: string) => {
     if (props.cb) {
         props.cb(color)
@@ -12,6 +14,9 @@ const onClick = (color: string) => {
 }
 const isOpenPicker = ref<boolean>(false)
 const toggleOpen = (value: boolean = !isOpenPicker) => {
+    if (value == false) {
+        goto_cam.value = undefined
+    }
     isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
 }
 const picker = ref()
@@ -29,9 +34,15 @@ onUnmounted(() => {
 </script>
 <template>
     <div class="color_picker" ref="picker">
-        <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
-            :style="[props.color && { backgroundColor: getColorHexFromRal(props.color) ?? '' }]"
-            :class="[{ 'color_picker-selected__active': active }]"></div>
+        <template v-if="$slots.default">
+            <slot @click="toggleOpen(true)"></slot>
+        </template>
+        <template v-else>
+            <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
+                :style="[props.color && { backgroundColor: getColorHexFromRal(props.color) ?? '' }]"
+                :class="[{ 'color_picker-selected__active': active }]"></div>
+        </template>
+
         <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
             <template v-for="col in ralClassicPallette">
                 <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col.hex }]"

components/model/parametric.vue

@@ -4,16 +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';
-import { getFilename } from '../pattern';
 
 const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
@@ -65,7 +61,7 @@ set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
 [top, fastening, fence, fence_bottom, fence_top].map(
     (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
 [fence_inner].map(
-    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -136,8 +132,12 @@ 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)
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), 
+            {
+                pattern: pillar_pattern.value,
+                count: lamelle_count.value
+            }
+        ) });
 })
 const pmremGenerator = new PMREMGenerator(renderer.value);
 pmremGenerator.compileEquirectangularShader();

components/pattern.ts

@@ -1,7 +1,7 @@
 export const patterns = [
     { name: 'Без узора', },
     { name: 'Узор 1', filename: 'tile1.png' },
-    { name: 'Еще раз узор 1', filename: 'tile1.png' },
+    { name: 'А это узор 2', filename: 'tile2.jpg' },
 ]
 export const getFilename = (name: patternTypes) => {
     const el = patterns.find(el => el.name == name)

composables/useCalc.ts

@@ -1,4 +1,5 @@
 import type { ralTypes } from '@/components/ral'
+import { Vector3 } from 'three'
 import { type patternTypes } from '~/components/pattern'
 
 export const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
@@ -20,3 +21,5 @@ export const use_total_length = () => useState('total_length', () => (((min + 10
 export const use_min_length = () => useState('min_length', () => 700)
 export const use_max_size = () => useState<number>('max_size', () => 20)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
+
+export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)