mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
Summary Fully Refactored the Load3D module to improve architecture and maintainability by consolidating functionality into a centralized composable pattern and simplifying component structure. and support VueNodes system Changes - Architecture: Introduced new useLoad3d composable to centralize 3D loading logic and state management - Component Simplification: Removed redundant components (Load3DAnimation.vue, Load3DAnimationScene.vue, PreviewManager.ts) - Support VueNodes - improve config store - remove lineart output due Animation doesnot support it, may add it back later - remove Preview screen and keep scene in fixed ratio in load3d (not affect preview3d) - improve record video feature which will already record video by same ratio as scene Need BE change https://github.com/comfyanonymous/ComfyUI/pull/10025 https://github.com/user-attachments/assets/9e038729-84a0-45ad-b0f2-11c57d7e0c9a ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5765-refactor-refactor-load3d-2796d73d365081728297cc486e2e9052) by [Unito](https://www.unito.io)
165 lines
4.3 KiB
TypeScript
165 lines
4.3 KiB
TypeScript
import { toRaw } from 'vue'
|
|
|
|
import { nodeToLoad3dMap } from '@/composables/useLoad3d'
|
|
import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
|
|
import type Load3d from '@/extensions/core/load3d/Load3d'
|
|
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
|
import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
|
|
|
|
const viewerInstances = new Map<NodeId, any>()
|
|
|
|
export class Load3dService {
|
|
private static instance: Load3dService
|
|
|
|
private constructor() {}
|
|
|
|
static getInstance(): Load3dService {
|
|
if (!Load3dService.instance) {
|
|
Load3dService.instance = new Load3dService()
|
|
}
|
|
return Load3dService.instance
|
|
}
|
|
|
|
getLoad3d(node: LGraphNode): Load3d | null {
|
|
const rawNode = toRaw(node)
|
|
|
|
return nodeToLoad3dMap.get(rawNode) || null
|
|
}
|
|
|
|
getNodeByLoad3d(load3d: Load3d): LGraphNode | null {
|
|
for (const [node, instance] of nodeToLoad3dMap) {
|
|
if (instance === load3d) {
|
|
return node
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
removeLoad3d(node: LGraphNode) {
|
|
const rawNode = toRaw(node)
|
|
|
|
const instance = nodeToLoad3dMap.get(rawNode)
|
|
|
|
if (instance) {
|
|
instance.remove()
|
|
|
|
nodeToLoad3dMap.delete(rawNode)
|
|
}
|
|
}
|
|
|
|
clear() {
|
|
for (const [node] of nodeToLoad3dMap) {
|
|
this.removeLoad3d(node)
|
|
}
|
|
}
|
|
|
|
getOrCreateViewer(node: LGraphNode) {
|
|
if (!viewerInstances.has(node.id)) {
|
|
viewerInstances.set(node.id, useLoad3dViewer(node))
|
|
}
|
|
|
|
return viewerInstances.get(node.id)
|
|
}
|
|
|
|
removeViewer(node: LGraphNode) {
|
|
const viewer = viewerInstances.get(node.id)
|
|
|
|
if (viewer) {
|
|
viewer.cleanup()
|
|
}
|
|
|
|
viewerInstances.delete(node.id)
|
|
}
|
|
|
|
async copyLoad3dState(source: Load3d, target: Load3d) {
|
|
const sourceModel = source.modelManager.currentModel
|
|
|
|
if (sourceModel) {
|
|
const modelClone = sourceModel.clone()
|
|
|
|
target.getModelManager().currentModel = modelClone
|
|
target.getSceneManager().scene.add(modelClone)
|
|
|
|
target.getModelManager().materialMode =
|
|
source.getModelManager().materialMode
|
|
|
|
target.getModelManager().currentUpDirection =
|
|
source.getModelManager().currentUpDirection
|
|
|
|
target.setMaterialMode(source.getModelManager().materialMode)
|
|
target.setUpDirection(source.getModelManager().currentUpDirection)
|
|
|
|
if (source.getModelManager().appliedTexture) {
|
|
target.getModelManager().appliedTexture =
|
|
source.getModelManager().appliedTexture
|
|
}
|
|
}
|
|
|
|
const sourceCameraType = source.getCurrentCameraType()
|
|
const sourceCameraState = source.getCameraState()
|
|
|
|
target.toggleCamera(sourceCameraType)
|
|
target.setCameraState(sourceCameraState)
|
|
|
|
target.setBackgroundColor(source.getSceneManager().currentBackgroundColor)
|
|
|
|
target.toggleGrid(source.getSceneManager().gridHelper.visible)
|
|
|
|
const sourceBackgroundInfo = source
|
|
.getSceneManager()
|
|
.getCurrentBackgroundInfo()
|
|
if (sourceBackgroundInfo.type === 'image') {
|
|
const sourceNode = this.getNodeByLoad3d(source)
|
|
const sceneConfig = sourceNode?.properties?.['Scene Config'] as any
|
|
const backgroundPath = sceneConfig?.backgroundImage
|
|
if (backgroundPath) {
|
|
await target.setBackgroundImage(backgroundPath)
|
|
}
|
|
} else {
|
|
await target.setBackgroundImage('')
|
|
}
|
|
|
|
target.setLightIntensity(
|
|
source.getLightingManager().lights[1]?.intensity || 1
|
|
)
|
|
|
|
if (sourceCameraType === 'perspective') {
|
|
target.setFOV(source.getCameraManager().perspectiveCamera.fov)
|
|
}
|
|
}
|
|
|
|
handleViewportRefresh(load3d: Load3d | null) {
|
|
if (!load3d) return
|
|
|
|
load3d.handleResize()
|
|
|
|
const currentType = load3d.getCurrentCameraType()
|
|
|
|
load3d.toggleCamera(
|
|
currentType === 'perspective' ? 'orthographic' : 'perspective'
|
|
)
|
|
load3d.toggleCamera(currentType)
|
|
|
|
load3d.getControlsManager().controls.update()
|
|
}
|
|
|
|
async handleViewerClose(node: LGraphNode) {
|
|
const viewer = useLoad3dService().getOrCreateViewer(node)
|
|
|
|
if (viewer.needApplyChanges.value) {
|
|
await viewer.applyChanges()
|
|
|
|
// Sync configuration back to the node's UI
|
|
if ((node as any).syncLoad3dConfig) {
|
|
;(node as any).syncLoad3dConfig()
|
|
}
|
|
}
|
|
|
|
useLoad3dService().removeViewer(node)
|
|
}
|
|
}
|
|
|
|
export const useLoad3dService = () => {
|
|
return Load3dService.getInstance()
|
|
}
|