topper

components/dropdown/list.vue

@@ -3,11 +3,15 @@ import { getFilename as getPattern, patterns } from '../pattern';
 import { getFilename as getTopper, toppers } from '../topper';
 
 const props = defineProps(['cb', 'patterns']);
-
+type pType = {
-const p = {
+    list: typeof patterns | typeof toppers,
-    list: undefined,
+    func: any
-    func: undefined
 }
+const p = {
+    list: [],
+    func: () => { }
+} as pType
+
 if (props.patterns == 'pattern') {
     p.list = patterns;
     p.func = getPattern

components/model/fence.vue

@@ -132,6 +132,7 @@ 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);
 
@@ -156,7 +157,7 @@ const setPillar = () => {
     pillar.value = arr.map(el => el.clone())
 }
 setPillar()
-watch([pillar_pattern, pillar_color, fence_section, lamelles_count], setPillar)
+watch([pillar_pattern, pillar_color, pillar_topper, fence_section, lamelles_count], setPillar)
 
 const fastening = ref<Object3D[]>([])
 const setFastening = () => {

components/model/parametric.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Vector3 } from 'three';
+import { Object3D, 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';
+import { getModel, toppers, type toppersIds } from '../topper';
 
 const section_count = use_section_count()
 const extra_section = use_extra_section()
@@ -20,7 +20,12 @@ const goto_target = use_goto_target()
 const { scene, controls } = useTresContext()
 const { seek, seekAll } = useSeek()
 
-const { scene: model_pillar_top } = await useGLTF(getModel(pillar_topper.value))
+const topper_models = {} as {[key:toppersIds]:Object3D}
+for await (const element of toppers) {
+    const { scene } = await useGLTF(getModel(element.id))
+    topper_models[element.id] = scene
+}
+
 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')
@@ -34,8 +39,8 @@ const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: t
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
 const top = ref(top_model)
+const pillar_top = ref(topper_models[pillar_topper.value])
 const pillar_center = ref(model_pillar_center)
-const pillar_top = ref(model_pillar_top)
 const pillar_bottom = ref(model_pillar_bottom)
 const pillar_inner = ref(model_pillar_inner)
 const pillar_brace = ref(model_pillar_brace)
@@ -44,6 +49,10 @@ const fastening_side = ref(model_fastening_side)
 const fixing = ref(model_fixing)
 const lamelle = ref(lamelle_model)
 
+watch(pillar_topper, async () => {
+    pillar_top.value = topper_models[pillar_topper.value]
+})
+
 const total = ref((section_count.value + ~~(!!extra_section.value)))
 const size = ref(Math.ceil(total.value / 4))
 const count = ref((total.value >= 4) ? size.value : total.value)

components/topper.ts

@@ -1,8 +1,7 @@
 export const toppers = [
-    { name: 'Ровный', filename: 'icon_stolb_verh_1.svg', model: 'top' },
+    { name: 'Ровный', filename: 'icon_stolb_verh_3.svg', model: 'top' },
     { name: 'Вершина 1', filename: 'icon_stolb_verh_2.svg', model: 'decor1' },
-    { name: 'Вершина 2', filename: 'icon_stolb_verh_3.svg', model: 'decor2' },
+    { name: 'Вершина 2', filename: 'icon_stolb_verh_1.svg', model: 'decor3' },
-    { name: 'Вершина 3', filename: 'icon_stolb_verh_3.svg', model: 'decor3' },
 ].map((el, i) => Object.assign(el, { id: i }))
 
 export const getFilename = (id: toppersIds) => {