[3d] use vue to rewrite the UI for load3d

[jtydhr88]

no feature added, but used vue to rewrite the UI for load3d

┆Issue is synchronized with this Notion page by Unito

[huchenlei]

Are you sure we need to create a separate Vue app here? Mounting a new app will lost all configurations such as themes sync in the main app.

[jtydhr88]

I think I have to mount a new app to build UI on the top of threejs scence, which the only way I could figure it out...
currently, I don't use the configurations from main app in this UI yet.

[huchenlei]

Is that because the container is mounted directly under document? If you mount the container element under #vue-app, you should be able to mount the component under the main App instance.

[jtydhr88]

each threejs scene renderer is under its own node's "image" filed Widget's HTMLElement as container

const sceneWidget = node.widgets.find((w: IWidget) => w.name === 'image')
const container = sceneWidget.element

and then

const rendererDomElement: HTMLCanvasElement = this.renderer.domElement
container.appendChild(rendererDomElement)

it doesn't have only single Threejs scene, it depends how many load3d nodes dropped on workflow.

[jtydhr88]

Actually I understand your concerns, but looks like it requires refactoring almost the whole code of load3d node by replacing the existing implementation completely with vue I think.

[huchenlei]

Ah I see the issue is here:

ComfyUI_frontend/src/scripts/domWidget.ts

Lines 296 to 298 in 3d59d47

	if (!element.parentElement) {
	app.canvasContainer.append(element)
	}

All DOM widgets are actually outside of #vue-app, so you can not directly mount vue component in dom widget. We need to fix this issue definitely.

[huchenlei]

I am going to merge this PR first as to get DOM widgets under #vue-app actually requires good amount of refactoring.

[huchenlei]

BTW you can refer https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/.cursorrules for general style guidelines.