[3d] redesign UI (#2686)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <huchenlei@proton.me>

src/extensions/core/load3d.ts

@@ -138,12 +138,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     let cameraState = node.properties['Camera Info']
 
     const config = new Load3DConfiguration(load3d)
@@ -151,15 +145,7 @@ app.registerExtension({
     const width = node.widgets.find((w: IWidget) => w.name === 'width')
     const height = node.widgets.find((w: IWidget) => w.name === 'height')
 
-    config.configure(
-      'input',
-      modelWidget,
-      material,
-      upDirection,
-      cameraState,
-      width,
-      height
-    )
+    config.configure('input', modelWidget, cameraState, width, height)
 
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
@@ -309,12 +295,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     let cameraState = node.properties['Camera Info']
 
     const config = new Load3DConfiguration(load3d)
@@ -322,15 +302,7 @@ app.registerExtension({
     const width = node.widgets.find((w: IWidget) => w.name === 'width')
     const height = node.widgets.find((w: IWidget) => w.name === 'height')
 
-    config.configure(
-      'input',
-      modelWidget,
-      material,
-      upDirection,
-      cameraState,
-      width,
-      height
-    )
+    config.configure('input', modelWidget, cameraState, width, height)
 
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
@@ -435,12 +407,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -460,7 +426,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure('output', modelWidget, material, upDirection)
+      config.configure('output', modelWidget)
     }
   }
 })
@@ -536,12 +502,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -561,7 +521,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure('output', modelWidget, material, upDirection)
+      config.configure('output', modelWidget)
     }
   }
 })

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -2,6 +2,7 @@ import type { IWidget } from '@comfyorg/litegraph'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { api } from '@/scripts/api'
 
 class Load3DConfiguration {
@@ -10,21 +11,11 @@ class Load3DConfiguration {
   configure(
     loadFolder: 'input' | 'output',
     modelWidget: IWidget,
-    material: IWidget,
-    upDirection: IWidget,
     cameraState?: any,
     width: IWidget | null = null,
-    height: IWidget | null = null,
-    postModelUpdateFunc?: (load3d: Load3d) => void
+    height: IWidget | null = null
   ) {
-    this.setupModelHandling(
-      modelWidget,
-      loadFolder,
-      cameraState,
-      postModelUpdateFunc
-    )
-    this.setupMaterial(material)
-    this.setupDirection(upDirection)
+    this.setupModelHandling(modelWidget, loadFolder, cameraState)
     this.setupTargetSize(width, height)
     this.setupDefaultProperties()
   }
@@ -46,13 +37,11 @@ class Load3DConfiguration {
   private setupModelHandling(
     modelWidget: IWidget,
     loadFolder: 'input' | 'output',
-    cameraState?: any,
-    postModelUpdateFunc?: (load3d: Load3d) => void
+    cameraState?: any
   ) {
     const onModelWidgetUpdate = this.createModelUpdateHandler(
       loadFolder,
-      cameraState,
-      postModelUpdateFunc
+      cameraState
     )
     if (modelWidget.value) {
       onModelWidgetUpdate(modelWidget.value)
@@ -60,26 +49,6 @@ class Load3DConfiguration {
     modelWidget.callback = onModelWidgetUpdate
   }
 
-  private setupMaterial(material: IWidget) {
-    material.callback = (value: 'original' | 'normal' | 'wireframe') => {
-      this.load3d.setMaterialMode(value)
-    }
-    this.load3d.setMaterialMode(
-      material.value as 'original' | 'normal' | 'wireframe'
-    )
-  }
-
-  private setupDirection(upDirection: IWidget) {
-    upDirection.callback = (
-      value: 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
-    ) => {
-      this.load3d.setUpDirection(value)
-    }
-    this.load3d.setUpDirection(
-      upDirection.value as 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
-    )
-  }
-
   private setupDefaultProperties() {
     const cameraType = this.load3d.loadNodeProperty(
       'Camera Type',
@@ -114,8 +83,7 @@ class Load3DConfiguration {
 
   private createModelUpdateHandler(
     loadFolder: 'input' | 'output',
-    cameraState?: any,
-    postModelUpdateFunc?: (load3d: Load3d) => void
+    cameraState?: any
   ) {
     let isFirstLoad = true
     return async (value: string | number | boolean | object) => {
@@ -131,9 +99,19 @@ class Load3DConfiguration {
 
       await this.load3d.loadModel(modelUrl, filename)
 
-      if (postModelUpdateFunc) {
-        postModelUpdateFunc(this.load3d)
-      }
+      const upDirection = this.load3d.loadNodeProperty(
+        'Up Direction',
+        'original'
+      )
+
+      this.load3d.setUpDirection(upDirection)
+
+      const materialMode = this.load3d.loadNodeProperty(
+        'Material Mode',
+        'original'
+      )
+
+      this.load3d.setMaterialMode(materialMode)
 
       if (isFirstLoad && cameraState && typeof cameraState === 'object') {
         try {

src/extensions/core/load3d/Load3d.ts

@@ -254,6 +254,7 @@ class Load3d {
 
   setUpDirection(direction: UpDirection): void {
     this.modelManager.setUpDirection(direction)
+
     this.renderer.render(
       this.sceneManager.scene,
       this.cameraManager.activeCamera