[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74422":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},74422,"ComfyUI-qwenmultiangle","jtydhr88\u002FComfyUI-qwenmultiangle","jtydhr88","A ComfyUI custom node for 3D camera angle control. Provides an interactive Three.js viewport to adjust camera angles and outputs formatted prompt strings for multi-angle image generation.","",null,"JavaScript",1216,70,7,0,8,19,49,24,80.95,false,"master",true,[],"2026-06-12 04:01:15","# ComfyUI-qwenmultiangle\n\n**Language \u002F 语言 \u002F 言語 \u002F 언어:** [English](README.md) | [中文](README_zh.md) | [日本語](README_ja.md) | [한국어](README_ko.md)\n\nA ComfyUI custom node for 3D camera angle control. Provides an interactive Three.js viewport to adjust camera angles and outputs formatted prompt strings for multi-angle image generation.\n![img.png](img.png)\n## Features\n\n- **Interactive 3D Camera Control** - Drag handles in the Three.js viewport to adjust:\n  - Horizontal angle (azimuth): 0° - 360°\n  - Vertical angle (elevation): -30° to 60°\n  - Zoom level: 0 - 10\n- **Quick Select Dropdowns** - Three dropdown menus for quickly selecting preset camera angles:\n  - Azimuth: front view, quarter views, side views, back view\n  - Elevation: low-angle, eye-level, elevated, high-angle shots\n  - Distance: wide shot, medium shot, close-up\n- **Real-time Preview** - Connect an image input to see it displayed in the 3D scene as a card with proper color rendering\n- **Camera View Mode** - Toggle `camera_view` to preview the scene from the camera indicator's perspective, with interactive orbit controls (drag to rotate, scroll to zoom)\n- **Prompt Output** - Outputs formatted prompts compatible with [Qwen-Image-Edit-2511-Multiple-Angles-LoRA](https:\u002F\u002Fhuggingface.co\u002Ffal\u002FQwen-Image-Edit-2511-Multiple-Angles-LoRA)\n- **Bidirectional Sync** - Slider widgets, 3D handles, and dropdowns stay synchronized\n- **Multi-language Support** - UI labels available in English, Chinese, Japanese, and Korean (auto-detected from ComfyUI settings)\n\n## Installation\n\n1. Navigate to your ComfyUI custom nodes folder:\n   ```bash\n   cd ComfyUI\u002Fcustom_nodes\n   ```\n\n2. Clone this repository:\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fjtydhr88\u002FComfyUI-qwenmultiangle.git\n   ```\n\n3. Restart ComfyUI\n\n4. Download LoRA from https:\u002F\u002Fhuggingface.co\u002Ffal\u002FQwen-Image-Edit-2511-Multiple-Angles-LoRA\u002Ftree\u002Fmain into your lora folder\n\n## Development\n\nThis project uses Vue 3, TypeScript, and Vite for building the frontend. The 3D viewport is built with Three.js. The backend uses ComfyUI's V3 node API.\n\n### Prerequisites\n\n- Node.js 18+\n- npm\n\n### Build\n\n```bash\n# Install dependencies\nnpm install\n\n# Build for production\nnpm run build\n\n# Build with watch mode (for development)\nnpm run dev\n\n# Type check\nnpm run typecheck\n```\n\n### Project Structure\n\n```\nComfyUI-qwenmultiangle\u002F\n├── src\u002F\n│   ├── main.ts                        # Extension entry point (Vue app mounting)\n│   ├── App.vue                        # Root Vue component\n│   ├── CameraWidget.ts               # Headless Three.js camera control engine\n│   ├── i18n.ts                        # Internationalization (en\u002Fzh\u002Fja\u002Fko)\n│   ├── types.ts                       # TypeScript type definitions\n│   ├── components\u002F\n│   │   ├── SceneCanvas.vue            # Three.js canvas container\n│   │   └── ControlPanel.vue           # Dropdown controls & value display\n│   └── composables\u002F\n│       └── useCameraWidget.ts         # Reactive state bridge (Vue ↔ Three.js)\n├── js\u002F                                # Build output (committed for distribution)\n│   ├── main.js\n│   └── assets\u002F\n│       └── main.css\n├── nodes.py                           # ComfyUI V3 node definition\n├── __init__.py                        # Python module init\n├── package.json\n├── tsconfig.json\n└── vite.config.mts\n```\n\n## Usage\n\n1. Add the **Qwen Multiangle Camera** node from the `image\u002Fmultiangle` category\n2. Optionally connect an IMAGE input to preview in the 3D scene\n3. Adjust camera angles by:\n   - Dragging the colored handles in the 3D viewport\n   - Using the slider widgets\n   - Selecting preset values from the dropdown menus\n4. Toggle `camera_view` to see the preview from the camera's perspective\n5. The node outputs a prompt string describing the camera angle\n\n### Widgets\n\n| Widget | Type | Description |\n|--------|------|-------------|\n| horizontal_angle | Slider | Camera azimuth angle (0° - 360°) |\n| vertical_angle | Slider | Camera elevation angle (-30° to 60°) |\n| zoom | Slider | Camera distance\u002Fzoom level (0 - 10) |\n| default_prompts | Checkbox | **Deprecated** - Kept for backward compatibility only, has no effect |\n| camera_view | Checkbox | Preview scene from camera's perspective |\n\n### 3D Viewport Controls\n\n| Handle | Color | Control |\n|--------|-------|---------|\n| Ring handle | Pink | Horizontal angle (azimuth) |\n| Arc handle | Cyan | Vertical angle (elevation) |\n| Line handle | Gold | Zoom\u002Fdistance |\n\nThe image preview displays as a card - front shows the image, back shows a grid pattern when viewed from behind.\n\n### Camera View Mode Controls\n\nWhen `camera_view` is enabled, you can interactively control the camera using mouse:\n\n| Action | Control |\n|--------|---------|\n| Drag left\u002Fright | Rotate horizontally (azimuth) |\n| Drag up\u002Fdown | Rotate vertically (elevation) |\n| Scroll up | Zoom in (increase distance) |\n| Scroll down | Zoom out (decrease distance) |\n\nAll interactions respect the same limits as the sliders:\n- Azimuth: 0° - 360° (wraps around)\n- Elevation: -30° to 60°\n- Distance: 0 - 10\n\nChanges made via orbit controls automatically sync with the slider widgets.\n\n### Quick Select Dropdowns\n\nThree dropdown menus are available in the 3D viewport for quickly selecting preset camera angles:\n\n| Dropdown | Options |\n|----------|---------|\n| Horizontal (H) | front view, front-right quarter view, right side view, back-right quarter view, back view, back-left quarter view, left side view, front-left quarter view |\n| Vertical (V) | low-angle shot, eye-level shot, elevated shot, high-angle shot |\n| Distance (Z) | wide shot, medium shot, close-up |\n\nSelecting a preset will automatically update the 3D handles and slider widgets.\n\n### Internationalization\n\nThe UI labels are automatically translated based on your ComfyUI language setting:\n\n| Language | Code |\n|----------|------|\n| English | en |\n| Chinese (Simplified) | zh |\n| Japanese | ja |\n| Korean | ko |\n\nThe output prompt is always in English regardless of the UI language.\n\n### Output Prompt Format\n\nThe node outputs prompts in the format required by [Qwen-Image-Edit-2511-Multiple-Angles-LoRA](https:\u002F\u002Fhuggingface.co\u002Ffal\u002FQwen-Image-Edit-2511-Multiple-Angles-LoRA):\n\n```\n\u003Csks> {azimuth} {elevation} {distance}\n```\n\nExamples:\n- `\u003Csks> front view eye-level shot medium shot`\n- `\u003Csks> right side view high-angle shot close-up`\n- `\u003Csks> back-left quarter view low-angle shot wide shot`\n\n#### Supported Values\n\n| Parameter | Values |\n|-----------|--------|\n| Azimuth | `front view`, `front-right quarter view`, `right side view`, `back-right quarter view`, `back view`, `back-left quarter view`, `left side view`, `front-left quarter view` |\n| Elevation | `low-angle shot` (-30°), `eye-level shot` (0°), `elevated shot` (30°), `high-angle shot` (60°) |\n| Distance | `close-up`, `medium shot`, `wide shot` |\n\n## Credits\n\n### Original Implementation\n\nThis ComfyUI node is based on [qwenmultiangle](https:\u002F\u002Fgithub.com\u002Famrrs\u002Fqwenmultiangle), a standalone web application for camera angle control.\n\nThe original project was inspired by:\n- [multimodalart\u002Fqwen-image-multiple-angles-3d-camera](https:\u002F\u002Fhuggingface.co\u002Fspaces\u002Fmultimodalart\u002Fqwen-image-multiple-angles-3d-camera) on Hugging Face Spaces\n- [fal.ai - Qwen Image Edit 2511 Multiple Angles](https:\u002F\u002Ffal.ai\u002Fmodels\u002Ffal-ai\u002Fqwen-image-edit-2511-multiple-angles\u002F)\n\n## Related Projects\n\n- [ComfyUI-qwenmultiangle-plus](https:\u002F\u002Fgithub.com\u002Fcjlang2020\u002FComfyUI-qwenmultiangle-plus) - Another modified version based on this project\n\n## License\n\nMIT\n","ComfyUI-qwenmultiangle 是一个用于3D摄像机角度控制的自定义节点，提供了一个交互式的Three.js视口来调整摄像机角度，并输出格式化的提示字符串以生成多角度图像。其核心功能包括通过拖动视口中的手柄调整水平、垂直角度及缩放级别，快速选择预设角度的下拉菜单，实时预览连接的图像输入，以及从摄像机视角预览场景。此外，该插件支持多语言界面，并与Qwen-Image-Edit-2511-Multiple-Angles-LoRA兼容。适用于需要精确控制3D模型或图像展示角度的设计和开发场景，如虚拟现实体验构建、产品展示设计等。",2,"2026-06-11 03:50:04","high_star"]