multiple
This commit is contained in:
parent
43e796e612
commit
7bca3fff2b
|
|
@ -3,6 +3,8 @@ const lamelles_count = useState('lamelles_count', () => 8)
|
||||||
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
|
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
|
||||||
const pillar_color = useState('pillar_color', () => '#828282')
|
const pillar_color = useState('pillar_color', () => '#828282')
|
||||||
const lamelle_color = useState('lamelle_color', () => '#C2B078')
|
const lamelle_color = useState('lamelle_color', () => '#C2B078')
|
||||||
|
const section_count = useState('section_count', () => 1)
|
||||||
|
const extra_section = useState('section_count', () => 0)
|
||||||
|
|
||||||
const parametric = {
|
const parametric = {
|
||||||
length: {
|
length: {
|
||||||
|
|
@ -74,6 +76,7 @@ const changeParametres = () => {
|
||||||
const t_f = (form_state.total_length_mm - form_state.fence_length)
|
const t_f = (form_state.total_length_mm - form_state.fence_length)
|
||||||
const i_f = (form_state.length - form_state.fence_length)
|
const i_f = (form_state.length - form_state.fence_length)
|
||||||
form_state.full_sections = Math.floor(t_f / i_f)
|
form_state.full_sections = Math.floor(t_f / i_f)
|
||||||
|
section_count.value = form_state.full_sections
|
||||||
if (t_f % i_f) {
|
if (t_f % i_f) {
|
||||||
form_state.extra_section = Math.round(t_f % i_f)
|
form_state.extra_section = Math.round(t_f % i_f)
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
|
||||||
|
import { useTexture } from '@tresjs/core'
|
||||||
|
import { useGLTF } from '@tresjs/cientos'
|
||||||
|
|
||||||
|
const props = defineProps(['index'])
|
||||||
|
|
||||||
|
const lamelles_count = useState<number>('lamelles_count')
|
||||||
|
const fence_section = useState<number>('fence_section')
|
||||||
|
const pillar_color = useState('pillar_color')
|
||||||
|
const lamelle_color = useState('lamelle_color')
|
||||||
|
|
||||||
|
const lSize = 0.115
|
||||||
|
const bSize = 0.0235
|
||||||
|
const pillar_size = 80 * 0.001
|
||||||
|
|
||||||
|
const { renderer } = useTresContext()
|
||||||
|
renderer.value.toneMapping = ReinhardToneMapping
|
||||||
|
|
||||||
|
renderer.value.shadowMap.enabled = true
|
||||||
|
renderer.value.shadowMap.type = PCFShadowMap
|
||||||
|
|
||||||
|
const pbrTexture = await useTexture({
|
||||||
|
map: '/texture/Ground039_4K-JPG_Color.jpg',
|
||||||
|
displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
|
||||||
|
roughnessMap: '/texture/Ground039_4K-JPG_Roughness.jpg',
|
||||||
|
normalMap: '/texture/Ground039_4K-JPG_NormalDX.jpg',
|
||||||
|
aoMap: '/texture/Ground039_4K-JPG_AmbientOcclusion.jpg',
|
||||||
|
// metalnessMap: '/textures/myMetalnessTexture.jpg',
|
||||||
|
// matcap: '/textures/myMatcapTexture.jpg',
|
||||||
|
// alphaMap: '/textures/myAlphaMapTexture.jpg'
|
||||||
|
})
|
||||||
|
const repeat = 5
|
||||||
|
for (const key in pbrTexture) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
|
||||||
|
const element = pbrTexture[key];
|
||||||
|
if (element && element.wrapS) {
|
||||||
|
element.wrapS = RepeatWrapping
|
||||||
|
element.wrapT = RepeatWrapping
|
||||||
|
element.repeat.x = repeat
|
||||||
|
element.repeat.y = repeat
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const { scene: top } = await useGLTF('/models_one/verh_100.glb')
|
||||||
|
const { scene: fence } = await useGLTF('/models_one/fence.glb')
|
||||||
|
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
|
||||||
|
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
|
||||||
|
|
||||||
|
const pillar_one_pos = ref(fence_section.value * -0.5 - 0.01)
|
||||||
|
const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
|
||||||
|
|
||||||
|
watch(fence_section, () => {
|
||||||
|
pillar_one_pos.value = fence_section.value * -0.5 - 0.01
|
||||||
|
pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25" :translate-x="(props.index || 0) * 0.5"
|
||||||
|
:translate-z="(props.index || 0) * 0.5">
|
||||||
|
<TresMesh receive-shadow :translate-y="-0.5">
|
||||||
|
<TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
|
||||||
|
<TresMeshStandardMaterial v-bind="pbrTexture" color="black" metalness="0" roughness="0.5" />
|
||||||
|
</TresMesh>
|
||||||
|
|
||||||
|
<TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
<template v-for="(n, i) in lamelles_count">
|
||||||
|
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
<TresGroup :position="[pillar_one_pos, (lSize * lamelles_count), 0]" :scale="[1, 0.5, 1]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
|
||||||
|
<TresGroup :position="[pillar_two_pos, (lSize * -0.5), 0]" :scale="[-1, 0.5, 1]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
<template v-for="(n, i) in lamelles_count">
|
||||||
|
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
<TresGroup :position="[pillar_two_pos, (lSize * lamelles_count), 0]" :scale="[-1, 0.5, 1]">
|
||||||
|
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
|
||||||
|
<template v-for="(n, i) in lamelles_count">
|
||||||
|
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
|
||||||
|
<ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-for="(n, i) in lamelles_count">
|
||||||
|
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
|
||||||
|
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-for="(n, i) in lamelles_count">
|
||||||
|
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
|
||||||
|
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
|
||||||
|
<ModelItem :model="top" :remove-pos="true" :color="pillar_color" />
|
||||||
|
</TresGroup>
|
||||||
|
</TresGroup>
|
||||||
|
</template>
|
||||||
|
|
@ -1,114 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
|
const section_count = useState('section_count')
|
||||||
import { useTexture } from '@tresjs/core'
|
|
||||||
import { useGLTF } from '@tresjs/cientos'
|
|
||||||
|
|
||||||
const lamelles_count = useState<number>('lamelles_count')
|
|
||||||
const fence_section = useState<number>('fence_section')
|
|
||||||
const pillar_color = useState('pillar_color')
|
|
||||||
const lamelle_color = useState('lamelle_color')
|
|
||||||
|
|
||||||
const lSize = 0.115
|
|
||||||
const bSize = 0.0235
|
|
||||||
const pillar_size = 80 * 0.001
|
|
||||||
|
|
||||||
const { renderer } = useTresContext()
|
|
||||||
renderer.value.toneMapping = ReinhardToneMapping
|
|
||||||
|
|
||||||
renderer.value.shadowMap.enabled = true
|
|
||||||
renderer.value.shadowMap.type = PCFShadowMap
|
|
||||||
// public/texture/Ground039_4K-JPG_AmbientOcclusion.jpg
|
|
||||||
// public/texture/Ground039_4K-JPG_Color.jpg
|
|
||||||
// public/texture/Ground039_4K-JPG_Displacement.jpg
|
|
||||||
// public/texture/Ground039_4K-JPG_NormalDX.jpg
|
|
||||||
// public/texture/Ground039_4K-JPG_NormalGL.jpg
|
|
||||||
// public/texture/Ground039_4K-JPG_Roughness.jpg
|
|
||||||
const pbrTexture = await useTexture({
|
|
||||||
map: '/texture/Ground039_4K-JPG_Color.jpg',
|
|
||||||
displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
|
|
||||||
roughnessMap: '/texture/Ground039_4K-JPG_Roughness.jpg',
|
|
||||||
normalMap: '/texture/Ground039_4K-JPG_NormalDX.jpg',
|
|
||||||
aoMap: '/texture/Ground039_4K-JPG_AmbientOcclusion.jpg',
|
|
||||||
// metalnessMap: '/textures/myMetalnessTexture.jpg',
|
|
||||||
// matcap: '/textures/myMatcapTexture.jpg',
|
|
||||||
// alphaMap: '/textures/myAlphaMapTexture.jpg'
|
|
||||||
})
|
|
||||||
const repeat = 5
|
|
||||||
for (const key in pbrTexture) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
|
|
||||||
const element = pbrTexture[key];
|
|
||||||
if (element && element.wrapS) {
|
|
||||||
element.wrapS = RepeatWrapping
|
|
||||||
element.wrapT = RepeatWrapping
|
|
||||||
element.repeat.x = repeat
|
|
||||||
element.repeat.y = repeat
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const { scene: top } = await useGLTF('/models_one/verh_100.glb')
|
|
||||||
const { scene: fence } = await useGLTF('/models_one/fence.glb')
|
|
||||||
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
|
|
||||||
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
|
|
||||||
|
|
||||||
const pillar_one_pos = ref(fence_section.value * -0.5 - 0.01)
|
|
||||||
const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
|
|
||||||
|
|
||||||
watch(fence_section, () => {
|
|
||||||
pillar_one_pos.value = fence_section.value * -0.5 - 0.01
|
|
||||||
pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
|
<template v-for="i in section_count">
|
||||||
<TresMesh receive-shadow :translate-y="-0.5">
|
<template v-if="i <= 5">
|
||||||
<TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
|
<ModelFence :index="i" />
|
||||||
<TresMeshStandardMaterial v-bind="pbrTexture" color="black" metalness="0" roughness="0.5" />
|
|
||||||
</TresMesh>
|
|
||||||
|
|
||||||
<TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">
|
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
<template v-for="(n, i) in lamelles_count">
|
|
||||||
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
|
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
</template>
|
||||||
<TresGroup :position="[pillar_one_pos, (lSize * lamelles_count), 0]" :scale="[1, 0.5, 1]">
|
</template>
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
|
|
||||||
<TresGroup :position="[pillar_two_pos, (lSize * -0.5), 0]" :scale="[-1, 0.5, 1]">
|
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
<template v-for="(n, i) in lamelles_count">
|
|
||||||
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
|
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
|
||||||
<TresGroup :position="[pillar_two_pos, (lSize * lamelles_count), 0]" :scale="[-1, 0.5, 1]">
|
|
||||||
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
|
|
||||||
<template v-for="(n, i) in lamelles_count">
|
|
||||||
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
|
|
||||||
<ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-for="(n, i) in lamelles_count">
|
|
||||||
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
|
|
||||||
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-for="(n, i) in lamelles_count">
|
|
||||||
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
|
|
||||||
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
|
|
||||||
<ModelItem :model="top" :remove-pos="true" :color="pillar_color" />
|
|
||||||
</TresGroup>
|
|
||||||
</TresGroup>
|
|
||||||
</template>
|
</template>
|
||||||
Loading…
Reference in New Issue