assets/main.scss

@@ -386,7 +386,7 @@ button {
             @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
 
             span {
-                @apply grow text-center;
+                @apply grow text-left;
             }
         }
 

components/calc/values.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import { Vector3 } from 'three';
+import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 
 import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
-import { getFilename, type patternTypes } from '../pattern';
-import { Vector3 } from 'three';
+import { getName as getPattern, type patternIds } from '../pattern';
+import { getName as getTopper, type toppersIds } from '../topper';
 
 const lamelle_height = use_lamelle_height()
 const lamelles_count = use_lamelles_count()
@@ -12,6 +13,7 @@ const fence_section = use_fence_section()
 const remove_pillar = use_remove_pillar()
 const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
 const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
@@ -139,8 +141,11 @@ const setLamelleColor = (color: ralTypes) => {
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
-const setPillarPattern = (pattern: patternTypes) => {
-    pillar_pattern.value = pattern
+const setPillarPattern = (id: patternIds) => {
+    pillar_pattern.value = id
+}
+const setPillarTopper = (id: toppersIds) => {
+    pillar_topper.value = id
 }
 watch(() => form_state, changeParametres, { deep: true })
 
@@ -199,11 +204,18 @@ const calc_table = computed(() => {
                 <div class="form-item form-item_color">
                     <label for="pillar_pattern">Узор столба</label>
                     <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
-                        :pattern="pillar_pattern" :disabled="remove_pillar"
+                        :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>
             </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" />
+                </div>
+            </div>
         </div>
         <div class="form-group">
             <div class="form-row">
@@ -276,12 +288,3 @@ const calc_table = computed(() => {
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-#pillar_pattern {
-    &[style*='url("/'] {
-        background-size: contain;
-        background-clip: content-box;
-        color: transparent;
-    }
-}
-</style>

components/dropdown/list.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import { getFilename, patterns } from '../pattern';
+import { getFilename as getPattern, patterns } from '../pattern';
+import { getFilename as getTopper, toppers } from '../topper';
 
-const props = defineProps([ 'cb']);
+const props = defineProps(['cb', 'patterns']);
+
+const p = {
+    list: undefined,
+    func: undefined
+}
+if (props.patterns == 'pattern') {
+    p.list = patterns;
+    p.func = getPattern
+} else if (props.patterns == 'topper') {
+    p.list = toppers
+    p.func = getTopper
+}
 </script>
 <template>
-    <template v-for="item in patterns">
-        <NuxtImg :src="getFilename(item.name)" class="picker-item" @click="props.cb(item.name)"
-            v-if="item.filename" />
-        <span class="picker-item picker-item--empty" @click="props.cb(item.name)" v-else />
+    <template v-for="item in p.list">
+        <NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
+        <span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
     </template>
 </template>

components/dropdown/picker.vue

@@ -46,10 +46,10 @@ watch(open_calc, () => {
                     <span>
                         {{ getColorNameFromRal(props.color) }}
                     </span>
-                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
                 </div>
             </template>
-            <template v-if="props.type == 'pattern'">
+            <template v-else>
                 <div @click="toggleOpen(!is_open)" :style="getFilename(props.pattern) ? [{
                     backgroundImage: `url(${getFilename(props.pattern)})`,
                     backgroundSize: 'contain',
@@ -58,7 +58,7 @@ watch(open_calc, () => {
                     <span>
                         {{ props.pattern }}
                     </span>
-                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
                 </div>
             </template>
         </div>
@@ -67,8 +67,8 @@ watch(open_calc, () => {
             <template v-if="props.type == 'color'">
                 <DropdownColor :cb="onClick" />
             </template>
-            <template v-else-if="props.type == 'pattern'">
-                <DropdownList :cb="onClick" />
+            <template v-else>
+                <DropdownList :cb="onClick" :patterns="props.type" />
             </template>
         </div>
     </div>

components/model/fence.vue

@@ -13,6 +13,7 @@ const remove_pillar = use_remove_pillar()
 
 const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
 const lamelle_color = use_lamelle_color()
 
 const lSize = lamelle_height.value

components/model/parametric.vue

@@ -3,20 +3,24 @@ import { Vector3 } from 'three';
 //@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
+import { getModel } from '../topper';
 
 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 fence_section = use_fence_section()
+
+const pillar_topper = use_topper()
+
 const open_calc = use_open_calc()
 const goto_cam = use_goto_camera()
 const goto_target = use_goto_target()
 
-const { scene, controls, camera } = useTresContext()
+const { scene, controls } = useTresContext()
 const { seek, seekAll } = useSeek()
 
-const { scene: model_pillar_top } = await useGLTF('/models_one/pillar/decor1.glb')
+const { scene: model_pillar_top } = await useGLTF(getModel(pillar_topper.value))
 const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
 const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
 const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')

components/pattern.ts

@@ -2,11 +2,18 @@ export const patterns = [
     { name: 'Без узора', },
     { name: 'Узор 1', filename: 'tile1.png' },
     { name: 'А это узор 2', filename: 'tile2.jpg' },
-]
-export const getFilename = (name: patternTypes) => {
-    const el = patterns.find(el => el.name == name)
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getName = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
+    if (!el) return undefined
+    return el.name
+}
+
+export const getFilename = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
     if (!el || !el.filename) return undefined
     return `/pattern/${el?.filename}`
 }
 
-export type patternTypes = typeof patterns[number]['name']
+export type patternIds = typeof patterns[number]['id']

components/topper.ts

@@ -0,0 +1,25 @@
+export const toppers = [
+    { name: 'Ровный', filename: 'icon_stolb_verh_1.svg', model: 'top' },
+    { name: 'Вершина 1', filename: 'icon_stolb_verh_2.svg', model: 'decor1' },
+    { name: 'Вершина 2', filename: 'icon_stolb_verh_3.svg', model: 'decor2' },
+    { name: 'Вершина 3', filename: 'icon_stolb_verh_3.svg', model: 'decor3' },
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getFilename = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/topper/${el?.filename}`
+}
+
+export const getName = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return el.name
+}
+export const getModel = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/models_one/pillar/topper/${el?.model}.glb`
+}
+
+export type toppersIds = typeof toppers[number]['id']

composables/useCalc.ts

@@ -1,6 +1,7 @@
 import type { ralTypes } from '@/components/ral'
 import { Vector3 } from 'three'
-import { type patternTypes } from '~/components/pattern'
+import { type patternIds } from '~/components/pattern'
+import { type toppersIds } from '~/components/topper'
 
 export const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
 export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '3007', '4007']
@@ -11,10 +12,13 @@ const min = 1370
 export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
 export const use_lamelles_count = () => useState('lamelles_count', () => 14)
 export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
+
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
 export const use_pillar_color = () => useState<ralTypes>('pillar_color')
 export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
-export const use_pattern = () => useState<patternTypes>('pattern', () => 'Без узора')
+export const use_pattern = () => useState<patternIds>('pattern', () => 0)
+export const use_topper = () => useState<toppersIds>('topper', () => 0)
+
 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)

public/topper/icon_stolb_verh_1.svg

@@ -0,0 +1,3 @@
+<svg width="147" height="129" viewBox="0 0 147 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.092 0.0210266L73.148 0L126.204 0.0210266L129.064 3.06403L128.838 14.843L146.236 22.519L146.296 37.488L140.375 47.003L132.706 47.026V128.971L73.148 128.983L13.59 128.971V47.026L5.92099 47.003L0 37.488L0.0599976 22.519L17.458 14.843L17.232 3.06403L20.092 0.0210266Z" fill="black"/>
+</svg>

public/topper/icon_stolb_verh_2.svg

@@ -0,0 +1,3 @@
+<svg width="117" height="135" viewBox="0 0 117 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.541 134.891H60.328H64.115H67.902H103.205H116.867V38.407H103.205L67.81 3.65302L64.454 1.259L60.508 0H56.359L52.413 1.259L49.057 3.65302L13.662 38.407H0V134.891H13.662H48.965H52.752H56.541Z" fill="black"/>
+</svg>

public/topper/icon_stolb_verh_3.svg

@@ -0,0 +1,3 @@
+<svg width="117" height="130" viewBox="0 0 117 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.868 129.438V0H0V129.438H116.868Z" fill="black"/>
+</svg>

utils/material.ts

@@ -21,7 +21,7 @@ const noiseTexturePromise = useLoader(TextureLoader, '/texture/images.jpeg')
 const loaded_patterns: { [key: string]: any } = {}
 for (let index = 0; index < patterns.length; index++) {
     const element = patterns[index];
-    const filename = getFilename(element.name)
+    const filename = getFilename(element.id)
     if (filename) {
         loaded_patterns[filename] = useLoader(TextureLoader, filename)
     }