3D Openpose Editor

To use the 3D Openpose Editor within the Stable Diffusion WebUI, follow these steps:

1. Open the Extension tab in your WebUI.
2. Navigate to the Available tab.
3. If your WebUI is outdated, update the Extension index URL to: https://raw.githubusercontent.com/AUTOMATIC1111/stable-diffusion-webui-extensions/master/index.json.
4. Click the Load from: button.
5. Locate 3D Openpose Editor and click the Install button.
6. Go to the Installed tab and click Apply and restart UI.

Use the following mouse controls to navigate the 3D view:

• Rotate Camera: Left-click on an empty area and move the mouse.
• Move Camera (Pan): Right-click on an empty area and move the mouse.

You can edit the 3D model's pose using these methods:

• Rotate Joints: Click any joint to select it. Hold one of the appearing colored circles and move the mouse to rotate that specific joint.
• Fine-tune Hands: Click a red dot to select a hand bone. Hold one of the red circles and move the mouse to rotate the hand bones.
• Move Entire Body: Press the X key to toggle Move Mode, which allows you to reposition the entire body in the scene.
• Delete Body: Press the D key to remove the entire body from the scene.

To use the 3D Openpose Editor within the Stable Diffusion WebUI, follow these steps:

1. Open the Extension tab in WebUI.
2. Navigate to the Available tab.
3. If your WebUI is outdated, update the Extension index URL to: https://raw.githubusercontent.com/AUTOMATIC1111/stable-diffusion-webui-extensions/master/index.json.
4. Click the Load from: button.
5. Locate the 3D Openpose Editor and click the Install button.
6. Go to the Installed tab and click Apply and restart UI.

Adjust the pose of the model using these interaction methods:

• Rotate Body Joints: Click on any joint to select it. Hold down one of the colored circles that appear and move the mouse to rotate that specific joint.
• Hand Editing: Click on the red dot to select hand bones. Hold down one of the red circles and move the mouse to rotate the hand bones.
• Move Entire Body: Press the X key to switch to Move Mode, which allows you to reposition the entire body in the scene.

Edit the pose of the 3D model using these controls:

• Rotate Joints: Left-click a joint to select it, then click and drag one of the colored circles to rotate the joint.
• Edit Hands: Click a red dot to select a hand bone, then click and drag one of the colored circles to fine-tune the hand position.

Use the following mouse controls to navigate the editor's viewport:

• Rotate Scene: Click and hold the blank space, then move the mouse while holding the left mouse button.
• Move Scene: Click and hold the blank space, then move the mouse while holding the right mouse button.

Customize the model's physical properties and the resulting image dimensions:

• Modify Body Shape: Click on the body to select it, then click Body Parameters in the menu. From there, you can adjust parameters such as height, weight, and limb lengths.
• Change Output Resolution: Use the menu to adjust the Width or Height settings to control the resolution of the generated output.

Use these hotkeys for quick actions:

• X key: Switch to movement mode to move the entire body.
• D key: Delete the entire body.

Use these keyboard shortcuts for quick model management:

• Delete Body: Press the D key to delete the entire body from the scene.

The editor uses a postMessage mechanism to communicate between the editor's iframe and the parent WebUI window.

1. Outgoing (Editor to WebUI): The editor calls ft(), which uses contentWindow.postMessage to send commands with the format { cmd: 'openpose-3d', method: '...', type: 'call' | 'event', payload: ... }.
2. Incoming (WebUI to Editor): The editor listens for message events on the window. It routes incoming messages based on the method name.
   • If type === 'return', it executes a callback stored in a local registry (k).
   • If type === 'event', it executes an event handler stored in a local registry (N).

Developers can register handlers using ht({ methodName: callback }).

The BodyEditor class is the main entry point for the 3D Openpose Editor. It manages the Three.js scene, rendering, camera controls, and body manipulation. To initialize it, provide a main canvas for the editor and an optional previewCanvas for the preview view.

Parameters:

• canvas: The HTMLCanvasElement used for the main editor view.
• previewCanvas: The HTMLCanvasElement used for the preview view.
• parentElem: The element to attach keyboard event listeners to (defaults to document).
• statsElem: An optional Element to attach the performance stats monitor to.

const editor = new BodyEditor({
    canvas: document.getElementById('editor-canvas') as HTMLCanvasElement,
    previewCanvas: document.getElementById('preview-canvas') as HTMLCanvasElement,
    parentElem: document,
    statsElem: document.getElementById('stats-container')
});