[3d] add support to export different formats (#3176)

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

src/components/load3d/Load3D.vue

@@ -54,6 +54,7 @@
       @updateUpDirection="handleUpdateUpDirection"
       @updateMaterialMode="handleUpdateMaterialMode"
       @updateEdgeThreshold="handleUpdateEdgeThreshold"
+      @exportModel="handleExportModel"
     />
   </div>
 </template>
@@ -72,6 +73,7 @@ import {
 } from '@/extensions/core/load3d/interfaces'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
+import { useToastStore } from '@/stores/toastStore'
 
 const { widget } = defineProps<{
   widget: ComponentWidget<string[]>
@@ -183,6 +185,22 @@ const handleUpdateMaterialMode = (value: MaterialMode) => {
   node.properties['Material Mode'] = value
 }
 
+const handleExportModel = async (format: string) => {
+  if (!load3DSceneRef.value?.load3d) {
+    useToastStore().addAlert('No 3D scene to export')
+    return
+  }
+
+  try {
+    await load3DSceneRef.value.load3d.exportModel(format)
+  } catch (error) {
+    console.error('Error exporting model:', error)
+    useToastStore().addAlert(
+      `Failed to export model as ${format.toUpperCase()}`
+    )
+  }
+}
+
 const listenMaterialModeChange = (mode: MaterialMode) => {
   materialMode.value = mode
 

src/components/load3d/Load3DControls.vue

@@ -16,14 +16,14 @@
       >
         <div class="flex flex-col">
           <Button
-            v-for="(label, category) in categories"
+            v-for="category in availableCategories"
             :key="category"
             class="p-button-text w-full flex items-center justify-start"
             :class="{ 'bg-gray-600': activeCategory === category }"
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)"></i>
-            <span class="text-white">{{ t(label) }}</span>
+            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
           </Button>
         </div>
       </div>
@@ -70,6 +70,12 @@
         @updateLightIntensity="handleUpdateLightIntensity"
         ref="lightControlsRef"
       />
+
+      <ExportControls
+        v-if="activeCategory === 'export'"
+        @exportModel="handleExportModel"
+        ref="exportControlsRef"
+      />
     </div>
     <div v-if="showPreviewButton">
       <Button class="p-button-rounded p-button-text" @click="togglePreview">
@@ -89,9 +95,10 @@
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
+import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
@@ -123,19 +130,30 @@ const props = defineProps<{
 }>()
 
 const isMenuOpen = ref(false)
-const activeCategory = ref<'scene' | 'model' | 'camera' | 'light'>('scene')
-const categories = {
+const activeCategory = ref<string>('scene')
+const categoryLabels: Record<string, string> = {
   scene: 'load3d.scene',
   model: 'load3d.model',
   camera: 'load3d.camera',
-  light: 'load3d.light'
+  light: 'load3d.light',
+  export: 'load3d.export'
 }
 
+const availableCategories = computed(() => {
+  const baseCategories = ['scene', 'model', 'camera', 'light']
+
+  if (!props.inputSpec.isAnimation) {
+    return [...baseCategories, 'export']
+  }
+
+  return baseCategories
+})
+
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
 }
 
-const selectCategory = (category: 'scene' | 'model' | 'camera' | 'light') => {
+const selectCategory = (category: string) => {
   activeCategory.value = category
   isMenuOpen.value = false
 }
@@ -145,7 +163,8 @@ const getCategoryIcon = (category: string) => {
     scene: 'pi pi-image',
     model: 'pi pi-box',
     camera: 'pi pi-camera',
-    light: 'pi pi-sun'
+    light: 'pi pi-sun',
+    export: 'pi pi-download'
   }
   // @ts-expect-error fixme ts strict error
   return `${icons[category]} text-white text-lg`
@@ -162,6 +181,7 @@ const emit = defineEmits<{
   (e: 'updateUpDirection', direction: UpDirection): void
   (e: 'updateMaterialMode', mode: MaterialMode): void
   (e: 'updateEdgeThreshold', value: number): void
+  (e: 'exportModel', format: string): void
 }>()
 
 const backgroundColor = ref(props.backgroundColor)
@@ -218,6 +238,10 @@ const handleUpdateFOV = (value: number) => {
   emit('updateFOV', value)
 }
 
+const handleExportModel = (format: string) => {
+  emit('exportModel', format)
+}
+
 const closeSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 

src/components/load3d/Load3DScene.vue

@@ -59,7 +59,13 @@ const eventConfig = {
   modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
   materialLoadingStart: () =>
     loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
-  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading()
+  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
+  exportLoadingStart: (message: string) => {
+    loadingOverlayRef.value?.startLoading(message || t('load3d.exportingModel'))
+  },
+  exportLoadingEnd: () => {
+    loadingOverlayRef.value?.endLoading()
+  }
 } as const
 
 watchEffect(() => {

src/components/load3d/LoadingOverlay.vue

@@ -15,19 +15,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { t } from '@/i18n'
 
 const modelLoading = ref(false)
 const loadingMessage = ref('')
 
-const startLoading = (message?: string) => {
-  modelLoading.value = true
+const startLoading = async (message?: string) => {
   loadingMessage.value = message || t('load3d.loadingModel')
+  modelLoading.value = true
+
+  await nextTick()
 }
 
-const endLoading = () => {
+const endLoading = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 100))
   modelLoading.value = false
 }
 

src/components/load3d/controls/ExportControls.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-export-formats">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleExportFormats"
+      >
+        <i
+          class="pi pi-download text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.exportModel'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+      <div
+        v-show="showExportFormats"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="format in exportFormats"
+            :key="format.value"
+            class="p-button-text text-white"
+            @click="exportModel(format.value)"
+          >
+            {{ format.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const emit = defineEmits<{
+  (e: 'exportModel', format: string): void
+}>()
+
+const showExportFormats = ref(false)
+
+const exportFormats = [
+  { label: 'GLB', value: 'glb' },
+  { label: 'OBJ', value: 'obj' },
+  { label: 'STL', value: 'stl' }
+]
+
+const toggleExportFormats = () => {
+  showExportFormats.value = !showExportFormats.value
+}
+
+const exportModel = (format: string) => {
+  emit('exportModel', format)
+
+  showExportFormats.value = false
+}
+
+const closeExportFormatsList = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-export-formats')) {
+    showExportFormats.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeExportFormatsList)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeExportFormatsList)
+})
+</script>