Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions src/components/load3d/Load3dViewerContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>()
Expand All @@ -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) {
Expand Down Expand Up @@ -150,7 +163,9 @@ onMounted(async () => {
})

const handleCancel = () => {
viewer.restoreInitialState()
if (!isStandaloneMode) {
viewer.restoreInitialState()
}
useDialogStore().closeDialog()
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/load3d/controls/viewer/ViewerSceneControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</label>
</div>

<div v-if="!hasBackgroundImage">
<div v-if="!hasBackgroundImage && !disableBackgroundUpload">
<Button
severity="secondary"
:label="$t('load3d.uploadBackgroundImage')"
Expand Down Expand Up @@ -74,6 +74,7 @@ const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(

defineProps<{
hasBackgroundImage?: boolean
disableBackgroundUpload?: boolean
}>()

const emit = defineEmits<{
Expand Down
21 changes: 21 additions & 0 deletions src/components/sidebar/tabs/AssetsSidebarTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'

Expand Down Expand Up @@ -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) {
Expand Down
72 changes: 69 additions & 3 deletions src/composables/useLoad3dViewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@ interface Load3dViewerState {
materialMode: MaterialMode
}

export const useLoad3dViewer = (node: LGraphNode) => {
/**
* @param node Optional node - if provided, viewer works in node mode with apply/restore
* If not provided, viewer works in standalone mode for asset preview
*/
export const useLoad3dViewer = (node?: LGraphNode) => {
const backgroundColor = ref('')
const showGrid = ref(true)
const cameraType = ref<CameraType>('perspective')
Expand All @@ -40,6 +44,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
const materialMode = ref<MaterialMode>('original')
const needApplyChanges = ref(true)
const isPreview = ref(false)
const isStandaloneMode = ref(false)

let load3d: Load3d | null = null
let sourceLoad3d: Load3d | null = null
Expand Down Expand Up @@ -166,11 +171,14 @@ export const useLoad3dViewer = (node: LGraphNode) => {
}
})

/**
* Initialize viewer in node mode (with source Load3d)
*/
const initializeViewer = async (
containerRef: HTMLElement,
source: Load3d
) => {
if (!containerRef) return
if (!containerRef || !node) return

sourceLoad3d = source

Expand Down Expand Up @@ -263,6 +271,52 @@ export const useLoad3dViewer = (node: LGraphNode) => {
}
}

/**
* Initialize viewer in standalone mode (for asset preview)
*/
const initializeStandaloneViewer = async (
containerRef: HTMLElement,
modelUrl: string
) => {
if (!containerRef) return

try {
isStandaloneMode.value = true

const mockNode = {
widgets: [
{ name: 'width', value: 800 },
{ name: 'height', value: 600 }
],
properties: {},
graph: null,
type: 'AssetPreview'
} as unknown as LGraphNode

load3d = new Load3d(containerRef, {
node: mockNode,
disablePreview: true,
isViewerMode: true
})

await load3d.loadModel(modelUrl)

backgroundColor.value = '#282828'
showGrid.value = true
cameraType.value = 'perspective'
fov.value = 75
lightIntensity.value = 1
backgroundRenderMode.value = 'tiled'
upDirection.value = 'original'
materialMode.value = 'original'

isPreview.value = true
} catch (error) {
console.error('Error initializing standalone 3D viewer:', error)
useToastStore().addAlert('Failed to load 3D model')
Comment on lines +315 to +316
Copy link
Contributor

@DrJKL DrJKL Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: There's a lot of state set in the try, would any of it need to be reset if there's an issue?

Copy link
Contributor

@DrJKL DrJKL Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or could the try/catch be scoped more tightly?

}
}

const exportModel = async (format: string) => {
if (!load3d) return

Expand All @@ -289,6 +343,8 @@ export const useLoad3dViewer = (node: LGraphNode) => {
}

const restoreInitialState = () => {
if (!node) return

const nodeValue = node

needApplyChanges.value = false
Expand Down Expand Up @@ -324,7 +380,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
}

const applyChanges = async () => {
if (!sourceLoad3d || !load3d) return false
if (!node || !sourceLoad3d || !load3d) return false

const viewerCameraState = load3d.getCameraState()
const nodeValue = node
Expand Down Expand Up @@ -378,6 +434,10 @@ export const useLoad3dViewer = (node: LGraphNode) => {
return
}

if (!node) {
return
}

try {
const resourceFolder =
(node.properties['Resource Folder'] as string) || ''
Expand All @@ -403,6 +463,10 @@ export const useLoad3dViewer = (node: LGraphNode) => {
return
}

if (!node) {
return
}

try {
const resourceFolder =
(node.properties['Resource Folder'] as string) || ''
Expand Down Expand Up @@ -460,9 +524,11 @@ export const useLoad3dViewer = (node: LGraphNode) => {
materialMode,
needApplyChanges,
isPreview,
isStandaloneMode,

// Methods
initializeViewer,
initializeStandaloneViewer,
exportModel,
handleResize,
handleMouseEnter,
Expand Down