mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

part of extra section

This commit is contained in:
Kseninia Mikhaylova 2024-06-14 16:56:47 +03:00
parent 636413e98c
commit 1555c115f1
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/model/fence.vue
View File

@ -1,13 +1,14 @@
<script setup lang="ts">
import { getColorHexFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral'
import { CanvasTexture, DoubleSide, RepeatWrapping, UVMapping } from 'three';
import { CanvasTexture } from 'three';
const props = defineProps(['index', 'models'])
const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')
const section_count = useState<number>('section_count')
const extra_section = useState<number>('extra_section')
const pillar_color = useState<ralTypes>('pillar_color')
const lamelle_color = useState<ralTypes>('lamelle_color')
const remove_pillar = useState<boolean>('remove_pillar')
@ -49,7 +50,7 @@ ctx.textAlign = "center"
ctx.textBaseline = 'middle'
ctx.fillText(props.index, s * 0.5, s * 0.5)
const textures = []
const textures: any[] = []
for (let index = 0; index < lamelles_count.value; index++) {
const element = document.createElement('canvas')
element.width = s
@ -61,15 +62,22 @@ for (let index = 0; index < lamelles_count.value; index++) {
);
textures.push(new CanvasTexture(element))
}
const fenceRotate = { x: 0, y: 0 }
if (props.index > 3) {
// fenceRotate.x = -Math.PI * 0.25
// fenceRotate.y = -Math.PI * 0.5
const extra = ref((extra_section && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false)
watch([extra_section, section_count], () => {
extra.value = (extra_section && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false
if (extra_section && props.index == (section_count.value + 1)) {
// pillar_one_pos.value = extra_section.value * -0.5 - 0.015
// pillar_two_pos.value = extra_section.value * 0.5 + pillar_size + bSize - 0.01
// } else {
// pillar_one_pos.value = fence_section.value * -0.5 - 0.015
// pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
}
})
console.log({pillar_size})
</script>
<template>
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :rotate-y="fenceRotate.y"
:rotate-x="fenceRotate.x">
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`"
:position-y="extra ? 1 : 0">
<TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
:position-z="0">
<TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
@ -102,7 +110,7 @@ if (props.index > 3) {
<TresGroup name="lamelles">
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="fence_section * 10">
<TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="(extra || fence_section) * 10">
<ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)"
:map="textures[textures.length - 1 - i]" />
</TresGroup>
@ -123,7 +131,7 @@ if (props.index > 3) {
</TresGroup>
</template>
</TresGroup>
<TresGroup name="top_section" :scale-x="fence_section * 10"
<TresGroup name="top_section" :scale-x="(extra || fence_section) * 10"
:position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
<ModelItem :model="props.models.top" :color="getColorHexFromRal(pillar_color)" />
</TresGroup>

7
components/model/parametric.vue
View File

@ -7,6 +7,7 @@ import { EXRLoader } from 'three/examples/jsm/Addons.js';
import { useGLTF, } from '@tresjs/cientos'
const section_count = useState<number>('section_count')
const extra_section = useState<number>('extra_section')
const { scene, renderer, camera } = useTresContext()
renderer.value.toneMapping = ReinhardToneMapping
@ -20,9 +21,9 @@ const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).gl
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
const { seek } = useSeek()
watch(section_count, () => {
watch([section_count,extra_section], () => {
const base = seek(scene.value, 'name', 'base')
const n = (section_count.value as number)
const n = (section_count.value as number) + ~~(!!extra_section.value)
if (base?.children && n < base?.children.length) {
base.children = [...base?.children.slice(0, n)]
}
@ -47,7 +48,7 @@ onMounted(() => {
</script>
<template>
<TresGroup name="base">
<template v-for="i in section_count">
<template v-for="i in (section_count + ~~(!!extra_section))">
<template v-if="i <= 20">
<ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
</template>