61 lines
2.9 KiB
Vue
61 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { Environment } 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 { scene, renderer, camera } = useTresContext()
|
|
|
|
|
|
renderer.value.autoClear = true
|
|
|
|
watch([lamelles_count, fence_section, lamelle_color], () => {
|
|
// renderer.value.clearColor()
|
|
// renderer.value.render(scene.value, camera.value)
|
|
})
|
|
</script>
|
|
<template>
|
|
<TresGroup>
|
|
<Suspense>
|
|
<Environment files='/hdrmaps/lonely_road_afternoon_4k.hdr' :background="true" />
|
|
</Suspense>
|
|
<Suspense>
|
|
<TresGroup>
|
|
<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> |