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

fence perspective

This commit is contained in:
Kseninia Mikhaylova 2024-06-12 11:29:01 +03:00
parent 7bca3fff2b
commit bc9332f38f
6 changed files with 122 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/calcModels.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { OrbitControls, useProgress, Environment } from '@tresjs/cientos' import { OrbitControls, Environment } from '@tresjs/cientos'
const controlsState = reactive({ const controlsState = reactive({
minDistance: 5, minDistance: 5,
@ -16,7 +16,7 @@ const controlsState = reactive({
<div class="container min-w-full relative"> <div class="container min-w-full relative">
<Loader /> <Loader />
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[8, 2, -4]" /> <TresPerspectiveCamera :position="[-4, 2, 8]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense> <Suspense>
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" /> <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
@ -24,7 +24,7 @@ const controlsState = reactive({
<Suspense> <Suspense>
<ModelParametric /> <ModelParametric />
</Suspense> </Suspense>
<TresDirectionalLight :position="[80, 70, 60]" :intensity="10" color="#fdf5ca" cast-shadow /> <TresDirectionalLight :position="[80, 70, 60]" :intensity="5" color="#fdf5ca" cast-shadow />
</TresCanvas> </TresCanvas>
</div> </div>
</template> </template>

2
components/calcValues.vue
View File

@ -14,7 +14,7 @@ const parametric = {
}, },
total_length: { total_length: {
min: 0.4, min: 0.4,
step: 0.05, step: 0.01,
}, },
height: { height: {
min: 675, min: 675,

2
components/expDiagram.vue
View File

@ -23,7 +23,7 @@ const scrollBlock = (e: Event) => {
} }
} }
const targetExplosion = useState('targetExplosion', () => { const targetExplosion = useState('targetExplosion', () => {
const k = 3 const k = 1.5
return { return {
kosynka: [0 * k, 0 * k, 0.75 * k], kosynka: [0 * k, 0 * k, 0.75 * k],
krepleniye_planok: [0 * k, 0 * k, 0.5 * k], krepleniye_planok: [0 * k, 0 * k, 0.5 * k],

4
components/loader.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const { hasFinishLoading, progress, items } = await useProgress() import { useProgress } from '@tresjs/cientos'
console.log(progress) const { hasFinishLoading, progress } = await useProgress()
</script> </script>
<template> <template>
<Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200" <Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"

120
components/model/fence.vue
View File

@ -1,9 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three'; const props = defineProps(['index', 'models'])
import { useTexture } from '@tresjs/core'
import { useGLTF } from '@tresjs/cientos'
const props = defineProps(['index'])
const lamelles_count = useState<number>('lamelles_count') const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section') const fence_section = useState<number>('fence_section')
@ -14,99 +10,85 @@ const lSize = 0.115
const bSize = 0.0235 const bSize = 0.0235
const pillar_size = 80 * 0.001 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_one_pos = ref(fence_section.value * -0.5 - 0.01)
const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize) const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
watch(fence_section, () => { watch(fence_section, () => {
pillar_one_pos.value = fence_section.value * -0.5 - 0.01 pillar_one_pos.value = fence_section.value * -0.5 - 0.01
pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
})
const scale_koef = 3
const show_pillar_one = ref(props.index == 1)
const show_pillar_two = ref(true)
const make_translate_to_section = () => {
const r = (props.index - 1) / 2 * (fence_section.value + pillar_size + bSize) * scale_koef
if (props.index % 2 == 0) {
show_pillar_two.value = false
show_pillar_one.value = true
return -1 * r
}
return r
}
const translate_to_section = ref(make_translate_to_section())
watch(fence_section, () => {
translate_to_section.value = make_translate_to_section()
}) })
</script> </script>
<template> <template>
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25" :translate-x="(props.index || 0) * 0.5" <TresGroup :scale="scale_koef" :position-x="translate_to_section">
:translate-z="(props.index || 0) * 0.5"> <TresGroup name="pillar_one" v-if="show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
<TresMesh receive-shadow :translate-y="-0.5"> <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
<TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" /> <ModelItem :model="props.models.fence" :color="pillar_color" />
<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> </TresGroup>
<template v-for="(n, i) in lamelles_count"> <template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]"> <TresGroup :position-y="(lSize * i)">
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fence" :color="pillar_color" />
</TresGroup> </TresGroup>
</template> </template>
<TresGroup :position="[pillar_one_pos, (lSize * lamelles_count), 0]" :scale="[1, 0.5, 1]"> <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fence" :color="pillar_color" />
</TresGroup>
</TresGroup> </TresGroup>
<TresGroup :position="[pillar_two_pos, (lSize * -0.5), 0]" :scale="[-1, 0.5, 1]"> <TresGroup name="pillar_two" v-if="show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" /> <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
<ModelItem :model="props.models.fence" :color="pillar_color" />
</TresGroup> </TresGroup>
<template v-for="(n, i) in lamelles_count"> <template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]"> <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fence" :color="pillar_color" />
</TresGroup> </TresGroup>
</template> </template>
<TresGroup :position="[pillar_two_pos, (lSize * lamelles_count), 0]" :scale="[-1, 0.5, 1]"> <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
<ModelItem :model="fence" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fence" :color="pillar_color" />
</TresGroup>
</TresGroup> </TresGroup>
<TresGroup name="lamelles">
<template v-for="(n, i) in lamelles_count"> <template v-for="(n, i) in lamelles_count">
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]"> <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
<ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" /> <ModelItem :model="props.models.lamelle" :color="lamelle_color" />
</TresGroup> </TresGroup>
</template> </template>
</TresGroup>
<TresGroup name="lamelles_fastening_one" :position-x="pillar_one_pos">
<template v-for="(n, i) in lamelles_count"> <template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_one_pos, (lSize * i), 0]"> <TresGroup :position-y="(lSize * i)">
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fastening" :color="pillar_color" />
</TresGroup> </TresGroup>
</template> </template>
</TresGroup>
<TresGroup name="lamelles_fastening_two" :position-x="pillar_two_pos">
<template v-for="(n, i) in lamelles_count"> <template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]"> <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
<ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" /> <ModelItem :model="props.models.fastening" :remove-pos="true" :color="pillar_color" />
</TresGroup> </TresGroup>
</template> </template>
</TresGroup>
<TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, lamelles_count * lSize, 0]"> <TresGroup name="top_section" :scale-x="fence_section * 10"
<ModelItem :model="top" :remove-pos="true" :color="pillar_color" /> :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
<ModelItem :model="props.models.top" :color="pillar_color" />
</TresGroup> </TresGroup>
</TresGroup> </TresGroup>
</template> </template>

48
components/model/parametric.vue
View File

@ -1,10 +1,54 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
import { useTexture } from '@tresjs/core'
import { useGLTF } from '@tresjs/cientos'
const section_count = useState('section_count') const section_count = useState('section_count')
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_NormalGL.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')
</script> </script>
<template> <template>
<TresGroup :translate-y="-3.25">
<TresMesh receive-shadow :translate-y="-0.5">
<TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
<TresMeshStandardMaterial v-bind="pbrTexture" :metalness="0.2" :roughness="0.8" :opacity="0.5" />
</TresMesh>
<template v-for="i in section_count"> <template v-for="i in section_count">
<template v-if="i <= 5"> <template v-if="i <= 20">
<ModelFence :index="i" /> <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
</template> </template>
</template> </template>
</TresGroup>
</template> </template>