[3d] refactor load3d nodes (#2683)

Co-authored-by: github-actions <github-actions@github.com>

src/components/load3d/Load3DAnimation.vue

@@ -63,8 +63,8 @@ import { computed, ref } from 'vue'
 import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
 import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
-import type { AnimationItem } from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { AnimationItem } from '@/extensions/core/load3d/interfaces'
 
 const props = defineProps<{
   node: any

src/components/load3d/Load3DScene.vue

@@ -1,11 +1,14 @@
 <template>
-  <div ref="container" class="w-full h-full"></div>
+  <div ref="container" class="w-full h-full relative">
+    <LoadingOverlay ref="loadingOverlayRef" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { LGraphNode } from '@comfyorg/litegraph'
 import { onMounted, onUnmounted, ref, toRaw, watchEffect } from 'vue'
 
+import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import { useLoad3dService } from '@/services/load3dService'
@@ -26,6 +29,7 @@ const props = defineProps<{
 const container = ref<HTMLElement | null>(null)
 const node = ref(props.node)
 const load3d = ref<Load3d | Load3dAnimation | null>(null)
+const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
 const eventConfig = {
   materialModeChange: (value: string) => emit('materialModeChange', value),
@@ -36,7 +40,10 @@ const eventConfig = {
   cameraTypeChange: (value: string) => emit('cameraTypeChange', value),
   showGridChange: (value: boolean) => emit('showGridChange', value),
   showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
-  backgroundImageChange: (value: string) => emit('backgroundImageChange', value)
+  backgroundImageChange: (value: string) =>
+    emit('backgroundImageChange', value),
+  modelLoadingStart: () => loadingOverlayRef.value?.startLoading(),
+  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading()
 } as const
 
 watchEffect(() => {

src/components/load3d/LoadingOverlay.vue

@@ -0,0 +1,56 @@
+<template>
+  <Transition name="fade">
+    <div
+      v-if="modelLoading"
+      class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    >
+      <div class="flex flex-col items-center">
+        <div class="spinner"></div>
+        <div class="text-white mt-4 text-lg">
+          {{ t('load3d.loadingModel') }}
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const modelLoading = ref(false)
+
+const startLoading = () => {
+  modelLoading.value = true
+}
+
+const endLoading = () => {
+  modelLoading.value = false
+}
+
+defineExpose({
+  startLoading,
+  endLoading
+})
+</script>
+
+<style scoped>
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>