Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-28 02:34:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

[3d] fully convert load 3d nodes into vue (#2590)

Browse Source
This commit is contained in:
Terry Jia
2025-02-16 20:15:49 -05:00
committed by GitHub
parent 9ebb5b2a0c
commit b2375a150c
11 changed files with 877 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/extensions/core/load3d.ts
View File

@@ -1,8 +1,11 @@
// @ts-strict-ignore
import { IWidget } from '@comfyorg/litegraph'
import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
import { nextTick } from 'vue'
import { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
import PrimeVue from 'primevue/config'
import { createApp, h, nextTick, render } from 'vue'
import Load3D from '@/components/load3d/Load3D.vue'
import Load3DAnimation from '@/components/load3d/Load3DAnimation.vue'
import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
@@ -21,51 +24,54 @@ app.registerExtension({
const container = document.createElement('div')
container.classList.add('comfy-load-3d')
const load3d = useLoad3dService().registerLoad3d(
node,
container,
'Load3D'
)
/* Hold off for now
const mountComponent = () => {
const vnode = h(Load3D, {
node: node,
type: 'Load3D'
})
node.onMouseEnter = function () {
if (load3d) {
load3d.refreshViewport()
}
render(vnode, container)
}
*/
node.onResize = function () {
if (load3d) {
load3d.handleResize()
}
}
let controlsApp = createApp(Load3D, {
node: node,
type: 'Load3D'
})
controlsApp.mount(container)
const origOnRemoved = node.onRemoved
node.onRemoved = function () {
if (load3d) {
load3d.remove()
/*
render(null, container)
container.remove()
*/
if (controlsApp) {
controlsApp.unmount()
controlsApp = null
}
useLoad3dService().removeLoad3d(node)
origOnRemoved?.apply(this, [])
}
node.onDrawBackground = function () {
load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
}
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = '.gltf,.glb,.obj,.mtl,.fbx,.stl'
fileInput.style.display = 'none'
fileInput.onchange = async () => {
if (fileInput.files?.length) {
const modelWidget = node.widgets?.find(
(w: IWidget) => w.name === 'model_file'
) as IStringWidget
const uploadPath = await Load3dUtils.uploadFile(
load3d,
useLoad3dService().getLoad3d(node),
fileInput.files[0],
fileInput
).catch((error) => {
@@ -88,7 +94,8 @@ app.registerExtension({
})
node.addWidget('button', 'clear', 'clear', () => {
load3d.clearModel()
useLoad3dService().getLoad3d(node).clearModel()
const modelWidget = node.widgets?.find(
(w: IWidget) => w.name === 'model_file'
)
@@ -97,6 +104,8 @@ app.registerExtension({
}
})
//mountComponent()
return {
widget: node.addDOMWidget(inputName, 'LOAD_3D', container)
}
@@ -177,40 +186,43 @@ app.registerExtension({
container.classList.add('comfy-load-3d-animation')
const load3d = useLoad3dService().registerLoad3d(
node,
container,
'Load3DAnimation'
)
/*
const mountComponent = () => {
const vnode = h(Load3DAnimation, {
node: node,
type: 'Load3DAnimation'
})
node.onMouseEnter = function () {
if (load3d) {
load3d.refreshViewport()
}
render(vnode, container)
}
*/
node.onResize = function () {
if (load3d) {
load3d.handleResize()
}
}
let controlsApp = createApp(Load3DAnimation, {
node: node,
type: 'Load3DAnimation'
})
controlsApp.use(PrimeVue)
controlsApp.mount(container)
const origOnRemoved = node.onRemoved
node.onRemoved = function () {
if (load3d) {
load3d.remove()
/*
render(null, container)
container.remove()
*/
if (controlsApp) {
controlsApp.unmount()
controlsApp = null
}
useLoad3dService().removeLoad3d(node)
origOnRemoved?.apply(this, [])
}
node.onDrawBackground = function () {
load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
}
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = '.fbx,glb,gltf'
@@ -221,7 +233,7 @@ app.registerExtension({
(w: IWidget) => w.name === 'model_file'
) as IStringWidget
const uploadPath = await Load3dUtils.uploadFile(
load3d,
useLoad3dService().getLoad3d(node),
fileInput.files[0],
fileInput
).catch((error) => {
@@ -244,7 +256,7 @@ app.registerExtension({
})
node.addWidget('button', 'clear', 'clear', () => {
load3d.clearModel()
useLoad3dService().getLoad3d(node).clearModel()
const modelWidget = node.widgets?.find(
(w: IWidget) => w.name === 'model_file'
)
@@ -253,6 +265,8 @@ app.registerExtension({
}
})
//mountComponent()
return {
widget: node.addDOMWidget(inputName, 'LOAD_3D_ANIMATION', container)
}
@@ -342,39 +356,42 @@ app.registerExtension({
container.classList.add('comfy-preview-3d')
const load3d = useLoad3dService().registerLoad3d(
node,
container,
'Preview3D'
)
/*
const mountComponent = () => {
const vnode = h(Load3D, {
node: node,
type: 'Preview3D'
})
node.onMouseEnter = function () {
if (load3d) {
load3d.refreshViewport()
}
render(vnode, container)
}
*/
node.onResize = function () {
if (load3d) {
load3d.handleResize()
}
}
let controlsApp = createApp(Load3D, {
node: node,
type: 'Preview3D'
})
controlsApp.mount(container)
const origOnRemoved = node.onRemoved
node.onRemoved = function () {
if (load3d) {
load3d.remove()
}
/*
render(null, container)
useLoad3dService().removeLoad3d(node)
container.remove()
*/
if (controlsApp) {
controlsApp.unmount()
controlsApp = null
}
origOnRemoved?.apply(this, [])
}
node.onDrawBackground = function () {
load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
}
//mountComponent()
return {
widget: node.addDOMWidget(inputName, 'PREVIEW_3D', container)
@@ -447,40 +464,32 @@ app.registerExtension({
container.classList.add('comfy-preview-3d-animation')
const load3d = useLoad3dService().registerLoad3d(
node,
container,
'Preview3DAnimation'
)
let controlsApp = createApp(Load3DAnimation, {
node: node,
type: 'Preview3DAnimation'
})
node.onMouseEnter = function () {
if (load3d) {
load3d.refreshViewport()
}
}
controlsApp.use(PrimeVue)
node.onResize = function () {
if (load3d) {
load3d.handleResize()
}
}
controlsApp.mount(container)
const origOnRemoved = node.onRemoved
node.onRemoved = function () {
if (load3d) {
load3d.remove()
/*
render(null, container)
container.remove()
*/
if (controlsApp) {
controlsApp.unmount()
controlsApp = null
}
useLoad3dService().removeLoad3d(node)
origOnRemoved?.apply(this, [])
}
node.onDrawBackground = function () {
load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
}
return {
widget: node.addDOMWidget(
inputName,

9
src/extensions/core/load3d/Load3DConfiguration.ts
View File

@@ -88,17 +88,22 @@ class Load3DConfiguration {
this.load3d.toggleCamera(cameraType)
const showGrid = this.load3d.loadNodeProperty('Show Grid', true)
this.load3d.toggleGrid(showGrid)
const showPreview = this.load3d.loadNodeProperty('Show Preview', true)
this.load3d.togglePreview(showPreview)
const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828')
this.load3d.setBackgroundColor(bgColor)
const lightIntensity = this.load3d.loadNodeProperty('Light Intensity', '5')
const lightIntensity = this.load3d.loadNodeProperty('Light Intensity', 5)
this.load3d.setLightIntensity(lightIntensity)
const fov = this.load3d.loadNodeProperty('FOV', '75')
const fov = this.load3d.loadNodeProperty('FOV', 75)
this.load3d.setFOV(fov)
}

112
src/extensions/core/load3d/Load3d.ts
View File

@@ -8,11 +8,14 @@ import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
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 { App, createApp } from 'vue'
import Load3DControls from '@/components/load3d/Load3DControls.vue'
import { useToastStore } from '@/stores/toastStore'
interface Load3DOptions {
createPreview?: boolean
node?: LGraphNode
}
class Load3d {
scene: THREE.Scene
perspectiveCamera: THREE.PerspectiveCamera
@@ -51,14 +54,15 @@ class Load3d {
targetHeight: number = 1024
showPreview: boolean = true
node: LGraphNode = {} as LGraphNode
protected controlsApp: App | null = null
protected controlsContainer: HTMLDivElement
private listeners: { [key: string]: Function[] } = {}
constructor(
container: Element | HTMLElement,
options: { createPreview?: boolean } = {}
options: Load3DOptions = {
node: {} as LGraphNode
}
) {
this.node = options.node || ({} as LGraphNode)
this.scene = new THREE.Scene()
this.perspectiveCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
@@ -140,53 +144,30 @@ class Load3d {
this.createCapturePreview(container)
}
this.controlsContainer = document.createElement('div')
this.controlsContainer.style.position = 'absolute'
this.controlsContainer.style.top = '0'
this.controlsContainer.style.left = '0'
this.controlsContainer.style.width = '100%'
this.controlsContainer.style.height = '100%'
this.controlsContainer.style.pointerEvents = 'none'
this.controlsContainer.style.zIndex = '1'
container.appendChild(this.controlsContainer)
this.mountControls(options)
this.handleResize()
this.startAnimation()
}
protected mountControls(options: { createPreview?: boolean } = {}) {
const controlsMount = document.createElement('div')
controlsMount.style.pointerEvents = 'auto'
this.controlsContainer.appendChild(controlsMount)
this.controlsApp = createApp(Load3DControls, {
backgroundColor: '#282828',
showGrid: true,
showPreview: options.createPreview,
lightIntensity: 5,
showLightIntensityButton: true,
fov: 75,
showFOVButton: true,
showPreviewButton: options.createPreview,
onToggleCamera: () => this.toggleCamera(),
onToggleGrid: (show: boolean) => this.toggleGrid(show),
onTogglePreview: (show: boolean) => this.togglePreview(show),
onUpdateBackgroundColor: (color: string) =>
this.setBackgroundColor(color),
onUpdateLightIntensity: (lightIntensity: number) =>
this.setLightIntensity(lightIntensity),
onUpdateFOV: (fov: number) => this.setFOV(fov)
})
this.controlsApp.directive('tooltip', Tooltip)
this.controlsApp.mount(controlsMount)
addEventListener(event: string, callback: Function) {
if (!this.listeners[event]) {
this.listeners[event] = []
}
this.listeners[event].push(callback)
}
setNode(node: LGraphNode) {
this.node = node
removeEventListener(event: string, callback: Function) {
if (this.listeners[event]) {
this.listeners[event] = this.listeners[event].filter(
(cb) => cb !== callback
)
}
}
emitEvent(event: string, data?: any) {
if (this.listeners[event]) {
this.listeners[event].forEach((callback) => callback(data))
}
}
storeNodeProperty(name: string, value: any) {
@@ -339,8 +320,6 @@ class Load3d {
this.perspectiveCamera.fov = fov
this.perspectiveCamera.updateProjectionMatrix()
this.renderer.render(this.scene, this.activeCamera)
this.storeNodeProperty('FOV', fov)
}
if (
@@ -351,6 +330,8 @@ class Load3d {
this.previewCamera.updateProjectionMatrix()
this.previewRenderer.render(this.scene, this.previewCamera)
}
this.emitEvent('fovChange', fov)
}
getCameraState() {
@@ -430,11 +411,6 @@ class Load3d {
setMaterialMode(mode: 'original' | 'normal' | 'wireframe' | 'depth') {
this.materialMode = mode
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.showLightIntensityButton.value =
mode == 'original'
}
if (this.currentModel) {
if (mode === 'depth') {
this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace
@@ -528,6 +504,8 @@ class Load3d {
})
this.renderer.render(this.scene, this.activeCamera)
this.emitEvent('materialModeChange', mode)
}
}
@@ -608,14 +586,10 @@ class Load3d {
)
this.viewHelper.center = this.controls.target
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.showFOVButton.value =
this.getCurrentCameraType() == 'perspective'
}
this.storeNodeProperty('Camera Type', this.getCurrentCameraType())
this.handleResize()
this.updatePreviewRender()
this.emitEvent('cameraTypeChange', cameraType)
}
getCurrentCameraType(): 'perspective' | 'orthographic' {
@@ -627,9 +601,9 @@ class Load3d {
toggleGrid(showGrid: boolean) {
if (this.gridHelper) {
this.gridHelper.visible = showGrid
this.storeNodeProperty('Show Grid', showGrid)
}
this.emitEvent('showGridChange', showGrid)
}
togglePreview(showPreview: boolean) {
@@ -637,9 +611,9 @@ class Load3d {
this.showPreview = showPreview
this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
this.storeNodeProperty('Show Preview', showPreview)
}
this.emitEvent('showPreviewChange', showPreview)
}
setLightIntensity(intensity: number) {
@@ -659,7 +633,7 @@ class Load3d {
}
})
this.storeNodeProperty('Light Intensity', intensity)
this.emitEvent('lightIntensityChange', intensity)
}
startAnimation() {
@@ -771,10 +745,6 @@ class Load3d {
this.controls.dispose()
this.viewHelper.dispose()
this.renderer.dispose()
if (this.controlsApp) {
this.controlsApp.unmount()
this.controlsApp = null
}
this.renderer.domElement.remove()
this.scene.clear()
}
@@ -1044,11 +1014,7 @@ class Load3d {
this.renderer.setClearColor(new THREE.Color(color))
this.renderer.render(this.scene, this.activeCamera)
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.backgroundColor.value = color
}
this.storeNodeProperty('Background Color', color)
this.emitEvent('backgroundColorChange', color)
}
}

73
src/extensions/core/load3d/Load3dAnimation.ts
View File

@@ -6,6 +6,11 @@ import { createApp } from 'vue'
import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
import Load3d from '@/extensions/core/load3d/Load3d'
interface AnimationItem {
name: string
index: number
}
class Load3dAnimation extends Load3d {
currentAnimation: THREE.AnimationMixer | null = null
animationActions: THREE.AnimationAction[] = []
@@ -22,53 +27,17 @@ class Load3dAnimation extends Load3d {
super(container, options)
}
protected mountControls(options: { createPreview?: boolean } = {}) {
const controlsMount = document.createElement('div')
controlsMount.style.pointerEvents = 'auto'
this.controlsContainer.appendChild(controlsMount)
this.controlsApp = createApp(Load3DAnimationControls, {
backgroundColor: '#282828',
showGrid: true,
showPreview: options.createPreview,
animations: [],
playing: false,
lightIntensity: 5,
showLightIntensityButton: true,
fov: 75,
showFOVButton: true,
showPreviewButton: options.createPreview,
onToggleCamera: () => this.toggleCamera(),
onToggleGrid: (show: boolean) => this.toggleGrid(show),
onTogglePreview: (show: boolean) => this.togglePreview(show),
onUpdateBackgroundColor: (color: string) =>
this.setBackgroundColor(color),
onTogglePlay: (play: boolean) => this.toggleAnimation(play),
onSpeedChange: (speed: number) => this.setAnimationSpeed(speed),
onAnimationChange: (selectedAnimation: number) =>
this.updateSelectedAnimation(selectedAnimation),
onUpdateLightIntensity: (lightIntensity: number) =>
this.setLightIntensity(lightIntensity),
onUpdateFOV: (fov: number) => this.setFOV(fov)
})
this.controlsApp.use(PrimeVue)
this.controlsApp.directive('tooltip', Tooltip)
this.controlsApp.mount(controlsMount)
}
updateAnimationList() {
if (this.controlsApp?._instance?.exposed) {
if (this.animationClips.length > 0) {
this.controlsApp._instance.exposed.animations.value =
this.animationClips.map((clip, index) => ({
name: clip.name || `Animation ${index + 1}`,
index
}))
} else {
this.controlsApp._instance.exposed.animations.value = []
}
let updatedAnimationList: AnimationItem[] = []
if (this.animationClips.length > 0) {
updatedAnimationList = this.animationClips.map((clip, index) => ({
name: clip.name || `Animation ${index + 1}`,
index
}))
}
this.emitEvent('animationListChange', updatedAnimationList)
}
protected async setupModel(model: THREE.Object3D) {
@@ -146,10 +115,6 @@ class Load3dAnimation extends Load3d {
}
this.animationActions = [action]
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.selectedAnimation.value = index
}
}
clearModel() {
@@ -165,10 +130,7 @@ class Load3dAnimation extends Load3d {
this.isAnimationPlaying = false
this.animationSpeed = 1.0
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.animations.value = []
this.controlsApp._instance.exposed.selectedAnimation.value = 0
}
this.emitEvent('animationListChange', [])
super.clearModel()
}
@@ -181,10 +143,6 @@ class Load3dAnimation extends Load3d {
this.isAnimationPlaying = play ?? !this.isAnimationPlaying
if (this.controlsApp?._instance?.exposed) {
this.controlsApp._instance.exposed.playing.value = this.isAnimationPlaying
}
this.animationActions.forEach((action) => {
if (this.isAnimationPlaying) {
action.paused = false
@@ -231,4 +189,5 @@ class Load3dAnimation extends Load3d {
}
}
export { AnimationItem }
export default Load3dAnimation