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

26 lines
1.1 KiB
Vue

<script setup lang="ts">
const props = defineProps(['koef'])
import Item from './item.vue';
const k = ref(props.koef || 1)
watch(props, () => {
if (k.value !== props.koef) {
k.value = props.koef || 1
}
}, { deep: true })
</script>
<template>
<TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
<TresCircleGeometry :args="[8, 8, 1]" />
<TresMeshStandardMaterial color="pink" />
</TresMesh>
<Suspense>
<TresGroup :translate-y="-2" :scale="1.25">
<Item model-url="/models/kosynka.glb" :position="[0.5 * k, 0.25 * k, 0.5 * k]" />
<Item model-url="/models/kreplaniye_planok.glb" :position="[1 * k, 0.5 * k, 1 * k]" />
<Item model-url="/models/planki.glb" :position="[1.5 * k, 1 * k, 1.5 * k]" />
<Item model-url="/models/stolb.glb" :position="[-0.5 * k, 0.25 * k, -0.5 * k]" />
<Item model-url="/models/verh.glb" :position="[-1 * k, 0.5 * k, -1 * k]" />
<Item model-url="/models/zakliopki.glb" :position="[-1.5 * k, 1 * k, -1.5 * k]" />
</TresGroup>
</Suspense>
</template>