61 lines
3.1 KiB
Vue
61 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { Environment } from '@tresjs/cientos'
|
|
import { CineonToneMapping, PCFShadowMap } from 'three';
|
|
|
|
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 = CineonToneMapping
|
|
|
|
renderer.value.shadowMap.type = PCFShadowMap
|
|
</script>
|
|
<template>
|
|
<TresGroup>
|
|
<Suspense>
|
|
<Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
|
|
</Suspense>
|
|
<Suspense>
|
|
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
|
|
<TresMesh receive-shadow>
|
|
<TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" :rotate-y="-Math.PI * 0.5" />
|
|
</TresMesh>
|
|
<ModelItem model-url="/models_one/bottom.glb"
|
|
:position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
|
|
:color="pillar_color" />
|
|
<ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
|
|
:remove-pos="true" :color="pillar_color" />
|
|
<ModelItem model-url="/models_one/verh_100.glb"
|
|
:position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
|
|
:color="pillar_color" />
|
|
<ModelItem model-url="/models_one/verh_100.glb"
|
|
:position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
|
|
:color="pillar_color" />
|
|
<template v-for="(n, i) in lamelles_count">
|
|
<TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
|
|
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
|
|
</TresGroup>
|
|
</template>
|
|
<template v-for="(n, i) in lamelles_count">
|
|
<TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
|
|
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
|
|
</TresGroup>
|
|
</template>
|
|
<template v-for="(n, i) in lamelles_count">
|
|
<TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
|
|
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
|
|
</TresGroup>
|
|
</template>
|
|
<TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
|
|
<ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
|
|
</TresGroup>
|
|
</TresGroup>
|
|
</Suspense>
|
|
</TresGroup>
|
|
</template> |