feat: support open 3d viewer in media asset panel (#6703)

## Summary

Add support for previewing 3D assets directly in the Media Asset Panel.

## Changes

- **3D Asset Preview**: Clicking on 3D assets (`.glb`, `.gltf`, etc.) in
the Media Asset Panel now opens the full
  3D viewer

## Screenshots



https://github.com/user-attachments/assets/38808712-acc8-42aa-9f11-8d8bf2387b20

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6703-feat-support-open-3d-viewer-in-media-asset-panel-2ab6d73d3650811dbff9ecb570a0a878)
by [Unito](https://www.unito.io)

src/components/load3d/Load3dViewerContent.vue

@@ -37,6 +37,7 @@
               v-model:background-render-mode="viewer.backgroundRenderMode.value"
               v-model:fov="viewer.fov.value"
               :has-background-image="viewer.hasBackgroundImage.value"
+              :disable-background-upload="viewer.isStandaloneMode.value"
               @update-background-image="viewer.handleBackgroundImageUpdate"
             />
           </div>
@@ -91,13 +92,15 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
-  node: LGraphNode
+  node?: LGraphNode
+  modelUrl?: string
 }>()
 
 const viewerContentRef = ref<HTMLDivElement>()
@@ -106,20 +109,30 @@ const mainContentRef = ref<HTMLDivElement>()
 const maximized = ref(false)
 const mutationObserver = ref<MutationObserver | null>(null)
 
-const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
+const isStandaloneMode = !props.node && props.modelUrl
+
+const viewer = props.node
+  ? useLoad3dService().getOrCreateViewer(toRaw(props.node))
+  : useLoad3dViewer()
 
 const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
   useLoad3dDrag({
     onModelDrop: async (file) => {
       await viewer.handleModelDrop(file)
     },
-    disabled: viewer.isPreview
+    disabled: viewer.isPreview.value || isStandaloneMode
   })
 
 onMounted(async () => {
-  const source = useLoad3dService().getLoad3d(props.node)
-  if (source && containerRef.value) {
-    await viewer.initializeViewer(containerRef.value, source)
+  if (!containerRef.value) return
+
+  if (isStandaloneMode && props.modelUrl) {
+    await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
+  } else if (props.node) {
+    const source = useLoad3dService().getLoad3d(props.node)
+    if (source) {
+      await viewer.initializeViewer(containerRef.value, source)
+    }
   }
 
   if (viewerContentRef.value) {
@@ -150,7 +163,9 @@ onMounted(async () => {
 })
 
 const handleCancel = () => {
-  viewer.restoreInitialState()
+  if (!isStandaloneMode) {
+    viewer.restoreInitialState()
+  }
   useDialogStore().closeDialog()
 }
 

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -14,7 +14,7 @@
       </label>
     </div>
 
-    <div v-if="!hasBackgroundImage">
+    <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
       <Button
         severity="secondary"
         :label="$t('load3d.uploadBackgroundImage')"
@@ -74,6 +74,7 @@ const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(
 
 defineProps<{
   hasBackgroundImage?: boolean
+  disableBackgroundUpload?: boolean
 }>()
 
 const emit = defineEmits<{

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -163,6 +163,7 @@ import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
@@ -176,6 +177,7 @@ import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAs
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isCloud } from '@/platform/distribution/types'
+import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 
@@ -332,6 +334,25 @@ const handleAssetSelect = (asset: AssetItem) => {
 }
 
 const handleZoomClick = (asset: AssetItem) => {
+  const mediaType = getMediaTypeFromFilename(asset.name)
+
+  if (mediaType === '3D') {
+    const dialogStore = useDialogStore()
+    dialogStore.showDialog({
+      key: 'asset-3d-viewer',
+      title: asset.name,
+      component: Load3dViewerContent,
+      props: {
+        modelUrl: asset.preview_url || ''
+      },
+      dialogComponentProps: {
+        style: 'width: 80vw; height: 80vh;',
+        maximizable: true
+      }
+    })
+    return
+  }
+
   currentGalleryAssetId.value = asset.id
   const index = displayAssets.value.findIndex((a) => a.id === asset.id)
   if (index !== -1) {