<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>
