forked from mns/mini-skamja
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { Vector3 } from 'three'
|
|
|
|
const types = {
|
|
small: defineAsyncComponent(() => import('./small.vue'))
|
|
}
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String as PropType<keyof typeof types>,
|
|
default: 'small',
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
const camera = ref()
|
|
const controls = ref()
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 2,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: Math.PI / 2 - 0.2
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative h-[600px] max-h-screen">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">Загрузка 3D модели</div>
|
|
</template>
|
|
<TresCanvas height="600">
|
|
<TresPerspectiveCamera :position="new Vector3(-7, 2, 4)" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" ref="controls" make-default />
|
|
<ModelEnv />
|
|
<Suspense>
|
|
<component :is="types[props.type]" />
|
|
</Suspense>
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|