[3d] refactor legacy code by using new vue style (#3161)

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({

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()
     }

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 {

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 {

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)