mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
7a11dc59b6
## 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)
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import * as THREE from 'three'
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
|
|
|
import {
|
|
type ControlsManagerInterface,
|
|
type EventManagerInterface
|
|
} from './interfaces'
|
|
|
|
export class ControlsManager implements ControlsManagerInterface {
|
|
controls: OrbitControls
|
|
private eventManager: EventManagerInterface
|
|
private camera: THREE.Camera
|
|
|
|
constructor(
|
|
renderer: THREE.WebGLRenderer,
|
|
camera: THREE.Camera,
|
|
eventManager: EventManagerInterface
|
|
) {
|
|
this.eventManager = eventManager
|
|
this.camera = camera
|
|
|
|
const container = renderer.domElement.parentElement || renderer.domElement
|
|
this.controls = new OrbitControls(camera, container)
|
|
this.controls.enableDamping = true
|
|
}
|
|
|
|
init(): void {
|
|
this.controls.addEventListener('end', () => {
|
|
const cameraState = {
|
|
position: this.camera.position.clone(),
|
|
target: this.controls.target.clone(),
|
|
zoom:
|
|
this.camera instanceof THREE.OrthographicCamera
|
|
? (this.camera as THREE.OrthographicCamera).zoom
|
|
: (this.camera as THREE.PerspectiveCamera).zoom,
|
|
cameraType:
|
|
this.camera instanceof THREE.PerspectiveCamera
|
|
? 'perspective'
|
|
: 'orthographic'
|
|
}
|
|
|
|
this.eventManager.emitEvent('cameraChanged', cameraState)
|
|
})
|
|
}
|
|
|
|
dispose(): void {
|
|
this.controls.dispose()
|
|
}
|
|
|
|
handleResize(): void {}
|
|
|
|
update(): void {
|
|
this.controls.update()
|
|
}
|
|
|
|
updateCamera(camera: THREE.Camera): void {
|
|
const position = this.controls.object.position.clone()
|
|
const target = this.controls.target.clone()
|
|
|
|
this.camera = camera
|
|
this.controls.object = camera
|
|
this.controls.target = target
|
|
camera.position.copy(position)
|
|
this.controls.update()
|
|
}
|
|
reset(): void {
|
|
this.controls.target.set(0, 0, 0)
|
|
this.controls.update()
|
|
}
|
|
}
|