[refactor] remove node as dependency in 3d node (#6707)

## Summary

This PR refactors the Load3d 3D rendering system to remove its direct
dependency on LGraphNode, making it a more decoupled and reusable
component. The core rendering engine is now framework-agnostic and can
be used in any context, not just within LiteGraph nodes.

## Changes

1. Decoupled Load3d from LGraphNode
  - Before: Load3d directly accessed node.widgets and node.properties
- After: Load3d accepts optional parameters and callbacks, delegating
node integration to the calling code

2. Event-Driven State Management
  - Removed internal storage from Load3d core components
- Camera, controls, and view helper managers now emit cameraChanged
events instead of directly storing state
- External code (e.g., useLoad3d) listens to events and handles
persistence to node.properties

3. Reactive Dimension Updates

- Introduced getDimensions callback to support reactive dimension
updates
- Fixes the issue where dimension changes in vueNodes mode required a
refresh
- The callback is invoked on every render to get fresh width/height
values

4. Improved Configuration System

- Load3DConfiguration now accepts properties: Dictionary<NodeProperty |
undefined> instead of custom storage
  interface
  - Uses official LiteGraph type definitions (Dictionary, NodeProperty)
  - More semantic parameter naming: storage → properties

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6707-refactor-remove-node-as-dependency-in-3d-node-2ab6d73d365081ffac1cdce354781ce8)
by [Unito](https://www.unito.io)

Author: jtydhr88

src/composables/useLoad3d.ts

@@ -7,6 +7,7 @@ import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type {
   AnimationItem,
   CameraConfig,
+  CameraState,
   CameraType,
   LightConfig,
   MaterialMode,
@@ -16,8 +17,10 @@ import type {
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 import { useLoad3dService } from '@/services/load3dService'
 
 type Load3dReadyCallback = (load3d: Load3d) => void
@@ -68,17 +71,34 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     const node = rawNode as LGraphNode
 
     try {
-      load3d = new Load3d(containerRef, {
-        node
-      })
-
       const widthWidget = node.widgets?.find((w) => w.name === 'width')
       const heightWidget = node.widgets?.find((w) => w.name === 'height')
 
       if (!(widthWidget && heightWidget)) {
         isPreview.value = true
       }
 
+      load3d = new Load3d(containerRef, {
+        width: widthWidget?.value as number | undefined,
+        height: heightWidget?.value as number | undefined,
+        // Provide dynamic dimension getter for reactive updates
+        getDimensions:
+          widthWidget && heightWidget
+            ? () => ({
+                width: widthWidget.value as number,
+                height: heightWidget.value as number
+              })
+            : undefined,
+        onContextMenu: (event) => {
+          const menuOptions = app.canvas.getNodeMenuOptions(node)
+          new LiteGraph.ContextMenu(menuOptions, {
+            event,
+            title: node.type,
+            extra: node
+          })
+        }
+      })
+
       await restoreConfigurationsFromNode(node)
 
       node.onMouseEnter = function () {
@@ -487,8 +507,26 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
         hasRecording.value = recordingDuration.value > 0
       }
     },
-    animationListChange: (newValue: any) => {
+    animationListChange: (newValue: AnimationItem[]) => {
       animations.value = newValue
+    },
+    cameraChanged: (cameraState: CameraState) => {
+      const rawNode = toRaw(nodeRef.value)
+      if (rawNode) {
+        const node = rawNode as LGraphNode
+        if (!node.properties) node.properties = {}
+        const cameraConfigProp = node.properties['Camera Config']
+
+        if (cameraConfigProp) {
+          ;(cameraConfigProp as CameraConfig).state = cameraState
+        } else {
+          node.properties['Camera Config'] = {
+            cameraType: cameraConfig.value.cameraType,
+            fov: cameraConfig.value.fov,
+            state: cameraState
+          }
+        }
+      }
     }
   } as const
 

src/composables/useLoad3dViewer.ts

@@ -4,6 +4,7 @@ import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type {
   BackgroundRenderModeType,
+  CameraState,
   CameraType,
   MaterialMode,
   UpDirection
@@ -20,7 +21,7 @@ interface Load3dViewerState {
   cameraType: CameraType
   fov: number
   lightIntensity: number
-  cameraState: any
+  cameraState: CameraState | null
   backgroundImage: string
   backgroundRenderMode: BackgroundRenderModeType
   upDirection: UpDirection
@@ -183,9 +184,19 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     sourceLoad3d = source
 
     try {
+      const width = node.widgets?.find((w) => w.name === 'width')
+      const height = node.widgets?.find((w) => w.name === 'height')
+
       load3d = new Load3d(containerRef, {
-        node: node,
-        disablePreview: true,
+        width: width ? (toRaw(width).value as number) : undefined,
+        height: height ? (toRaw(height).value as number) : undefined,
+        getDimensions:
+          width && height
+            ? () => ({
+                width: width.value as number,
+                height: height.value as number
+              })
+            : undefined,
         isViewerMode: true
       })
 
@@ -253,16 +264,6 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         upDirection: upDirection.value,
         materialMode: materialMode.value
       }
-
-      const width = node.widgets?.find((w) => w.name === 'width')
-      const height = node.widgets?.find((w) => w.name === 'height')
-
-      if (width && height) {
-        load3d.setTargetSize(
-          toRaw(width).value as number,
-          toRaw(height).value as number
-        )
-      }
     } catch (error) {
       console.error('Error initializing Load3d viewer:', error)
       useToastStore().addAlert(
@@ -283,19 +284,9 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     try {
       isStandaloneMode.value = true
 
-      const mockNode = {
-        widgets: [
-          { name: 'width', value: 800 },
-          { name: 'height', value: 600 }
-        ],
-        properties: {},
-        graph: null,
-        type: 'AssetPreview'
-      } as unknown as LGraphNode
-
       load3d = new Load3d(containerRef, {
-        node: mockNode,
-        disablePreview: true,
+        width: 800,
+        height: 600,
         isViewerMode: true
       })
 

src/extensions/core/load3d.ts

@@ -317,7 +317,7 @@ useExtensionService().registerExtension({
       const cameraConfig = node.properties['Camera Config'] as any
       const cameraState = cameraConfig?.state
 
-      const config = new Load3DConfiguration(load3d)
+      const config = new Load3DConfiguration(load3d, node.properties)
 
       const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
       const width = node.widgets?.find((w) => w.name === 'width')
@@ -444,7 +444,7 @@ useExtensionService().registerExtension({
     const onExecuted = node.onExecuted
 
     useLoad3d(node).waitForLoad3d((load3d) => {
-      const config = new Load3DConfiguration(load3d)
+      const config = new Load3DConfiguration(load3d, node.properties)
 
       const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
 

src/extensions/core/load3d/CameraManager.ts

@@ -5,8 +5,7 @@ import {
   type CameraManagerInterface,
   type CameraState,
   type CameraType,
-  type EventManagerInterface,
-  type NodeStorageInterface
+  type EventManagerInterface
 } from './interfaces'
 
 export class CameraManager implements CameraManagerInterface {
@@ -17,7 +16,6 @@ export class CameraManager implements CameraManagerInterface {
   // @ts-expect-error unused variable
   private renderer: THREE.WebGLRenderer
   private eventManager: EventManagerInterface
-  private nodeStorage: NodeStorageInterface
 
   private controls: OrbitControls | null = null
 
@@ -45,12 +43,10 @@ export class CameraManager implements CameraManagerInterface {
 
   constructor(
     renderer: THREE.WebGLRenderer,
-    eventManager: EventManagerInterface,
-    nodeStorage: NodeStorageInterface
+    eventManager: EventManagerInterface
   ) {
     this.renderer = renderer
     this.eventManager = eventManager
-    this.nodeStorage = nodeStorage
 
     this.perspectiveCamera = new THREE.PerspectiveCamera(
       this.DEFAULT_PERSPECTIVE_CAMERA.fov,
@@ -82,17 +78,7 @@ export class CameraManager implements CameraManagerInterface {
 
     if (this.controls) {
       this.controls.addEventListener('end', () => {
-        const cameraState = this.getCameraState()
-
-        const cameraConfig = this.nodeStorage.loadNodeProperty(
-          'Camera Config',
-          {
-            cameraType: this.getCurrentCameraType(),
-            fov: this.perspectiveCamera.fov
-          }
-        )
-        cameraConfig.state = cameraState
-        this.nodeStorage.storeNodeProperty('Camera Config', cameraConfig)
+        this.eventManager.emitEvent('cameraChanged', this.getCameraState())
       })
     }
   }

src/extensions/core/load3d/ControlsManager.ts

@@ -3,25 +3,20 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
 import {
   type ControlsManagerInterface,
-  type EventManagerInterface,
-  type NodeStorageInterface
+  type EventManagerInterface
 } from './interfaces'
 
 export class ControlsManager implements ControlsManagerInterface {
   controls: OrbitControls
-  // @ts-expect-error unused variable
   private eventManager: EventManagerInterface
-  private nodeStorage: NodeStorageInterface
   private camera: THREE.Camera
 
   constructor(
     renderer: THREE.WebGLRenderer,
     camera: THREE.Camera,
-    eventManager: EventManagerInterface,
-    nodeStorage: NodeStorageInterface
+    eventManager: EventManagerInterface
   ) {
     this.eventManager = eventManager
-    this.nodeStorage = nodeStorage
     this.camera = camera
 
     const container = renderer.domElement.parentElement || renderer.domElement
@@ -44,15 +39,7 @@ export class ControlsManager implements ControlsManagerInterface {
             : 'orthographic'
       }
 
-      const cameraConfig = this.nodeStorage.loadNodeProperty('Camera Config', {
-        cameraType: cameraState.cameraType,
-        fov:
-          this.camera instanceof THREE.PerspectiveCamera
-            ? (this.camera as THREE.PerspectiveCamera).fov
-            : 75
-      })
-      cameraConfig.state = cameraState
-      this.nodeStorage.storeNodeProperty('Camera Config', cameraConfig)
+      this.eventManager.emitEvent('cameraChanged', cameraState)
     })
   }