Compressor/viewer/frontend/src/components/ViewerCanvas.vue

<script setup lang="ts">
import { ref } from 'vue'

import { useThreeViewer } from '../composables/useThreeViewer'
import { useModelStore } from '../stores/model'

const container = ref<HTMLElement | null>(null)
const modelStore = useModelStore()

useThreeViewer(container)
</script>

<template>
  <div class="stage">
    <div ref="container" class="canvas-host" />
    <div v-if="modelStore.loadingText" class="loading-overlay">{{ modelStore.loadingText }}</div>
    <slot />
  </div>
</template>

<style scoped>
.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #0f1115;
  overflow: hidden;
}
.canvas-host {
  position: absolute;
  inset: 0;
}
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b93a1;
  font-size: 14px;
  z-index: 5;
}
</style>