From afdb94f12f8bb86a76ce25db42b38972ddc1ec82 Mon Sep 17 00:00:00 2001 From: Terry Jia Date: Thu, 20 Mar 2025 10:28:35 -0400 Subject: [PATCH] [3d] refactor legacy code by using new vue style (#3161) --- src/components/load3d/Load3D.vue | 4 ++-- src/components/load3d/Load3DAnimation.vue | 4 ++-- .../load3d/Load3DAnimationScene.vue | 6 +++--- src/components/load3d/Load3DControls.vue | 5 +++-- src/components/load3d/Load3DScene.vue | 7 +++---- .../load3d/controls/ModelControls.vue | 5 +++-- src/extensions/core/load3d.ts | 20 +++++++++++++------ src/extensions/core/load3d/Load3d.ts | 10 +++++++--- src/extensions/core/load3d/ModelManager.ts | 17 ++++++++++++++-- src/extensions/core/load3d/interfaces.ts | 4 +++- src/extensions/core/saveMesh.ts | 6 +++--- src/services/load3dService.ts | 11 +++++----- 12 files changed, 64 insertions(+), 35 deletions(-) diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue index 960234e8c..f2d6f60b7 100644 --- a/src/components/load3d/Load3D.vue +++ b/src/components/load3d/Load3D.vue @@ -7,7 +7,7 @@
() diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue index f688f4bad..f4bcaa04c 100644 --- a/src/components/load3d/Load3DScene.vue +++ b/src/components/load3d/Load3DScene.vue @@ -13,17 +13,16 @@ import Load3d from '@/extensions/core/load3d/Load3d' import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation' import { CameraType, - Load3DAnimationNodeType, - Load3DNodeType, MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces' import { t } from '@/i18n' +import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' import { useLoad3dService } from '@/services/load3dService' const props = defineProps<{ node: LGraphNode - type: Load3DNodeType | Load3DAnimationNodeType + inputSpec: CustomInputSpec backgroundColor: string showGrid: boolean lightIntensity: number @@ -135,7 +134,7 @@ onMounted(() => { node.value as LGraphNode, // @ts-expect-error fixme ts strict error container.value, - props.type + props.inputSpec ) handleEvents('add') }) diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue index d64f0274c..4dbbc0929 100644 --- a/src/components/load3d/controls/ModelControls.vue +++ b/src/components/load3d/controls/ModelControls.vue @@ -100,13 +100,14 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue' import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces' import { t } from '@/i18n' +import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' const vTooltip = Tooltip const props = defineProps<{ + inputSpec: CustomInputSpec upDirection: UpDirection materialMode: MaterialMode - isAnimation: boolean edgeThreshold?: number }>() @@ -141,7 +142,7 @@ const materialModes = computed(() => { //'depth' disable for now ] - if (!props.isAnimation) { + if (!props.inputSpec.isAnimation && !props.inputSpec.isPreview) { modes.push('lineart') } diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts index 5f57397d3..9ca858529 100644 --- a/src/extensions/core/load3d.ts +++ b/src/extensions/core/load3d.ts @@ -75,7 +75,9 @@ useExtensionService().registerExtension({ const inputSpec: CustomInputSpec = { name: 'image', - type: 'Load3D' + type: 'Load3D', + isAnimation: false, + isPreview: false } const widget = new ComponentWidgetImpl({ @@ -117,7 +119,7 @@ useExtensionService().registerExtension({ const height = node.widgets?.find((w: IWidget) => w.name === 'height') const sceneWidget = node.widgets?.find((w: IWidget) => w.name === 'image') - if (modelWidget && width && height && cameraState && sceneWidget) { + if (modelWidget && width && height && sceneWidget) { config.configure('input', modelWidget, cameraState, width, height) sceneWidget.serializeValue = async () => { @@ -213,7 +215,9 @@ useExtensionService().registerExtension({ const inputSpec: CustomInputSpec = { name: 'image', - type: 'Load3DAnimation' + type: 'Load3DAnimation', + isAnimation: true, + isPreview: false } const widget = new ComponentWidgetImpl({ @@ -254,7 +258,7 @@ useExtensionService().registerExtension({ const width = node.widgets?.find((w: IWidget) => w.name === 'width') const height = node.widgets?.find((w: IWidget) => w.name === 'height') - if (modelWidget && width && height && cameraState && sceneWidget) { + if (modelWidget && width && height && sceneWidget) { const config = new Load3DConfiguration(load3d) config.configure('input', modelWidget, cameraState, width, height) @@ -306,7 +310,9 @@ useExtensionService().registerExtension({ PREVIEW_3D(node) { const inputSpec: CustomInputSpec = { name: 'image', - type: 'Preview3D' + type: 'Preview3D', + isAnimation: false, + isPreview: true } const widget = new ComponentWidgetImpl({ @@ -381,7 +387,9 @@ useExtensionService().registerExtension({ PREVIEW_3D_ANIMATION(node) { const inputSpec: CustomInputSpec = { name: 'image', - type: 'Preview3DAnimation' + type: 'Preview3DAnimation', + isAnimation: true, + isPreview: true } const widget = new ComponentWidgetImpl({ diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts index 28b53af7c..ad26c11d4 100644 --- a/src/extensions/core/load3d/Load3d.ts +++ b/src/extensions/core/load3d/Load3d.ts @@ -1,6 +1,8 @@ import { LGraphNode } from '@comfyorg/litegraph' import * as THREE from 'three' +import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' + import { CameraManager } from './CameraManager' import { ControlsManager } from './ControlsManager' import { EventManager } from './EventManager' @@ -43,7 +45,8 @@ class Load3d { constructor( container: Element | HTMLElement, options: Load3DOptions = { - node: {} as LGraphNode + node: {} as LGraphNode, + inputSpec: {} as CustomInputSpec } ) { this.node = options.node || ({} as LGraphNode) @@ -108,7 +111,8 @@ class Load3d { this.renderer, this.eventManager, this.getActiveCamera.bind(this), - this.setupCamera.bind(this) + this.setupCamera.bind(this), + options ) this.loaderManager = new LoaderManager(this.modelManager, this.eventManager) @@ -123,7 +127,7 @@ class Load3d { this.viewHelperManager.createViewHelper(container) this.viewHelperManager.init() - if (options && options.createPreview) { + if (options && !options.inputSpec?.isPreview) { this.previewManager.createCapturePreview(container) this.previewManager.init() } diff --git a/src/extensions/core/load3d/ModelManager.ts b/src/extensions/core/load3d/ModelManager.ts index ab13164a4..fc70cd9fc 100644 --- a/src/extensions/core/load3d/ModelManager.ts +++ b/src/extensions/core/load3d/ModelManager.ts @@ -12,6 +12,7 @@ import { ConditionalLineMaterial } from './conditional-lines/Lines2/ConditionalL import { ConditionalLineSegmentsGeometry } from './conditional-lines/Lines2/ConditionalLineSegmentsGeometry' import { EventManagerInterface, + Load3DOptions, MaterialMode, ModelManagerInterface, UpDirection @@ -41,6 +42,7 @@ export class ModelManager implements ModelManagerInterface { private activeCamera: THREE.Camera private setupCamera: (size: THREE.Vector3) => void private lineartModel: THREE.Group + private createLineartModel: boolean = false LIGHT_MODEL = 0xffffff LIGHT_LINES = 0x455a64 @@ -56,7 +58,8 @@ export class ModelManager implements ModelManagerInterface { renderer: THREE.WebGLRenderer, eventManager: EventManagerInterface, getActiveCamera: () => THREE.Camera, - setupCamera: (size: THREE.Vector3) => void + setupCamera: (size: THREE.Vector3) => void, + options: Load3DOptions ) { this.scene = scene this.renderer = renderer @@ -64,6 +67,14 @@ export class ModelManager implements ModelManagerInterface { this.activeCamera = getActiveCamera() this.setupCamera = setupCamera + if ( + options && + !options.inputSpec?.isPreview && + !options.inputSpec?.isAnimation + ) { + this.createLineartModel = true + } + this.normalMaterial = new THREE.MeshNormalMaterial({ flatShading: false, side: THREE.DoubleSide, @@ -657,7 +668,9 @@ export class ModelManager implements ModelManagerInterface { this.setupCamera(size) - this.setupLineartModel() + if (this.createLineartModel) { + this.setupLineartModel() + } } setupLineartModel(): void { diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts index 0c8fd1edc..6a47bd44b 100644 --- a/src/extensions/core/load3d/interfaces.ts +++ b/src/extensions/core/load3d/interfaces.ts @@ -8,6 +8,8 @@ import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader' import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader' import { STLLoader } from 'three/examples/jsm/loaders/STLLoader' +import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' + export type Load3DNodeType = 'Load3D' | 'Preview3D' export type Load3DAnimationNodeType = 'Load3DAnimation' | 'Preview3DAnimation' @@ -33,8 +35,8 @@ export interface EventCallback { } export interface Load3DOptions { - createPreview?: boolean node?: LGraphNode + inputSpec?: CustomInputSpec } export interface CaptureResult { diff --git a/src/extensions/core/saveMesh.ts b/src/extensions/core/saveMesh.ts index 8224f5a71..1990cc890 100644 --- a/src/extensions/core/saveMesh.ts +++ b/src/extensions/core/saveMesh.ts @@ -24,7 +24,9 @@ useExtensionService().registerExtension({ PREVIEW_3D(node) { const inputSpec: CustomInputSpec = { name: 'image', - type: 'Preview3D' + type: 'Preview3D', + isAnimation: false, + isPreview: true } const widget = new ComponentWidgetImpl({ @@ -66,8 +68,6 @@ useExtensionService().registerExtension({ if (load3d && modelWidget) { const filePath = fileInfo['subfolder'] + '/' + fileInfo['filename'] - console.log(filePath) - modelWidget.value = filePath const config = new Load3DConfiguration(load3d) diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts index 23ca1978d..95bb92554 100644 --- a/src/services/load3dService.ts +++ b/src/services/load3dService.ts @@ -3,6 +3,7 @@ import { toRaw } from 'vue' import Load3d from '@/extensions/core/load3d/Load3d' import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation' +import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2' export class Load3dService { private static instance: Load3dService @@ -20,7 +21,7 @@ export class Load3dService { registerLoad3d( node: LGraphNode, container: HTMLElement, - type: 'Load3D' | 'Load3DAnimation' | 'Preview3D' | 'Preview3DAnimation' + inputSpec: CustomInputSpec ) { const rawNode = toRaw(node) @@ -28,15 +29,15 @@ export class Load3dService { this.removeLoad3d(rawNode) } + const type = inputSpec.type + const isAnimation = type.includes('Animation') const Load3dClass = isAnimation ? Load3dAnimation : Load3d - const isPreview = type.includes('Preview') - const instance = new Load3dClass(container, { - createPreview: !isPreview, - node: rawNode + node: rawNode, + inputSpec: inputSpec }) rawNode.onMouseEnter = function () {