mns-mini-zabor/components/model/canvas.vue

33 lines
1.3 KiB
Vue

<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import Item from './item.vue';
const lSize = 0.1
const lamelles_count = useState('lamelles_count')
const { x, y, isScrolling, arrivedState, directions } = useScroll(document)
console.log(y)
</script>
<template>
<TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
<TresCircleGeometry :args="[8, 8, 1]" />
<TresMeshStandardMaterial color="pink" />
</TresMesh>
<Suspense>
<TresGroup :rotate-y="Math.PI * -0.5" :position-x="-0.5">
<Item model-url="/models/kosynka.glb" />
<Item model-url="/models/kreplaniye_planok.glb" />
<Item model-url="/models/planki.glb" />
<Item model-url="/models/stolb.glb" />
<Item model-url="/models/verh.glb" />
<Item model-url="/models/zakliopki.glb" />
</TresGroup>
</Suspense>
<Suspense>
<TresGroup :position="[1, 0, 1]">
<template v-for="i in lamelles_count">
<Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true" />
</template>
<Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]"
:remove-pos="true" />
</TresGroup>
</Suspense>
</template>