[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/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