--- title: "img2threejs: Bild zu editierbarem Three.js-Code" canonical: https://wavect.io/de/blog/img2threejs-image-to-editable-3d/ language: de description: "img2threejs wandelt ein Bild in editierbaren Three.js-Code um. Prüfe Installation, TypeScript-Ausgabe, GLB-Grenzen und Abnahme für deinen Browser-Prototyp." image: "https://wavect.io/img/blog/headers/header_img2threejs-image-to-editable-3d.png" author: ["Kevin Riedl"] published: "2026-11-07" updated: "2026-11-07" reviewed: "2026-11-07" --- # img2threejs: Vom Bild zu editierbarem Three.js-Code [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 11 Min Lesezeit · 7. November 2026 Zuletzt geprüft 7. November 2026 [**Weiter**](/de/blog/ai-3d-model-generators-game-development-2026/) TL;DR img2threejs gibt einem Coding-Agenten einen Ablauf vor, um ein Referenzbild als editierbaren Three.js-Code nachzubauen. Die Ausgabe kann Änderungen an Materialien und einzelnen Teilen unterstützen. Passende Laufzeitparameter und produktive Interaktionen musst du weiterhin entwickeln. Dieser Leitfaden erklärt die Installation, die tatsächliche TypeScript-Factory und Grenzen beim GLB-Export. Beginne mit einem Objekt, einem Farbwechsel und einem beweglichen Teil. Prüfe danach Form, Konfigurationszustand und Leistung auf den Zielgeräten. Beispiel und Prüfungen sind Vorschläge, keine gemeldeten Rekonstruktionsergebnisse. Ein Produktfoto zeigt deine Schreibtischlampe. Ein Konfigurator braucht zusätzlich einen Schirm, dessen Farbe sich ändern lässt, und einen Lampenkopf, der sich um das richtige Gelenk dreht. Dafür muss das Modell aus getrennten Teilen bestehen, die deine Anwendung ansteuern kann. **img2threejs ist ein Agent-Skill, der ein Referenzbild als prozedurales Three.js-Modell in TypeScript nachbaut.** Er gibt deinem Coding-Agenten einen Ablauf mit mehreren Rekonstruktionsstufen vor. Als Ergebnis erhältst du prüfbaren, veränderbaren Quellcode und eine Objekthierarchie, auf der Interaktionen aufbauen können. Das [offizielle img2threejs-Repository](https://github.com/img2threejs/img2threejs) beschreibt diesen Ansatz. **Quellen geprüft: 7. November 2026.** Grundlage dieses Leitfadens sind die Projektdokumentation und der Generator-Quellcode zu Release v2.0.1. Das Lampenbeispiel und die Abnahmeprüfungen sind vorgeschlagene Übungen. Wir haben damit kein Bild rekonstruieren lassen und weder Geschwindigkeit noch Modelltreue oder Kosten gemessen. [img2threejs.org bezeichnet sich als separaten gehosteten Dienst](https://img2threejs.org/github). Dessen Native-Mesh-Pipeline und Download-Pakete gehören nicht zum hier beschriebenen GitHub-Skill. ## Was erzeugt img2threejs? **img2threejs erzeugt eine strukturierte Rekonstruktionsspezifikation und TypeScript-Code, der ein Three.js-Objekt aufbaut.** Dein Agent beurteilt die Bilder. Skripte prüfen die Spezifikation und steuern, wann die nächste Stufe beginnen darf. Eine Anwendung muss das fertige Modell darstellen und bedienbar machen. Die [Pipeline-Architektur](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/ARCHITECTURE.md) beschreibt den Ablauf vom groben Grundmodell über Struktur, Form, Materialien, Oberflächendetails und Beleuchtung bis zu Interaktion und Optimierung. Praktisch läuft das so: 1. Der Agent untersucht das Referenzbild und hält sichtbare Merkmale sowie Unsicherheiten fest. 2. Er beschreibt Bauteile, Materialien und ihre Beziehungen in einer Spezifikation. 3. Code baut die aktuelle Stufe auf; der Browser rendert das Ergebnis. 4. Der Agent vergleicht das Rendering mit der Vorlage und korrigiert Mängel, bevor er weiterarbeitet. Der geprüfte [Generator für die TypeScript-Factory](https://github.com/img2threejs/img2threejs/blob/v2.0.1/forge/stage3_build/generate_threejs_factory.py) leitet den Funktionsnamen vom Namen des Zielobjekts ab. Die Funktion nimmt ein Optionsobjekt entgegen und gibt eine `THREE.Group` zurück. Die Spezifikation wird in den Quellcode eingebaut. Die Datei importiert Three.js und Addon-Hilfsfunktionen; das Modell hat also weiterhin Laufzeitabhängigkeiten. ## Was bringt editierbarer TypeScript-Code für eine 3D-Webanwendung? **Im TypeScript-Code siehst du, wie das Objekt aufgebaut ist, und kannst die Teile ändern, die dein Konfigurator oder deine Animation braucht.** Prüfe das an einem konkreten Änderungswunsch, bevor du den Ablauf übernimmst. Lesbarer Code allein liefert noch keine passenden Bedienelemente. Der Generator stellt Zuordnungen der Komponenten über `root.userData.sculptRuntime` bereit. Der [Leitfaden zur Laufzeithierarchie](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/readiness/action_rigging.md) erklärt Drehpunkte für Bewegungen, Sockets als Anschlusspunkte und Collider-Beschreibungen. Eine Collider-Beschreibung ergänzt deine Anwendung noch nicht um eine Physiksimulation. | Gewünschte Änderung | Benötigte Umsetzung | Prüfung vor der Abnahme | | --- | --- | --- | | Farbe des Lampenschirms ändern | Das zugehörige Material über ein Bedienelement der Anwendung steuerbar machen | Andere Lampeninstanzen behalten ihre eigene Farbe | | Lampenkopf drehen | Einen benannten Drehpunkt mit vereinbarter Achse und Bewegungsgrenzen verwenden | Der Schirm dreht sich um sein Gelenk, ohne sich vom Arm zu lösen | | Armlänge ändern | Die Spezifikation anpassen und neu generieren oder gezielt einen Geometrieparameter ergänzen | Anschlüsse und Proportionen passen weiterhin zur vorgesehenen Variante | | Eine bestellbare Konfiguration auswählen | Die Szenensteuerung mit validiertem Anwendungszustand verbinden | Die sichtbare Kombination entspricht der gespeicherten Produktvariante | Beliebige Abmessungen stehen nicht automatisch als Factory-Optionen bereit. Lege fest, ob du künftige Änderungen in der Spezifikation oder direkt im TypeScript-Quellcode umsetzt. Eine erneute Generierung aus einer alten Spezifikation kann eine Korrektur wieder überschreiben. Prüfe den tatsächlich generierten Export und füge das Objekt deiner vorhandenen `scene` hinzu. Dateiname und Factory-Name dienen hier als Beispiel: ``` import { createDeskLampModel } from "./generated/desk-lamp"; const lamp = createDeskLampModel({ castShadow: true }); scene.add(lamp); ``` Damit wird das erzeugte Objekt Teil der Szene. Kameraposition, Rendering, Steuerung und das Freigeben ungenutzter Ressourcen bleiben Aufgaben deiner Anwendung. ## Wie installierst du img2threejs für deinen Coding-Agenten? **Installiere den Skill für einen unterstützten Coding-Agenten und starte diesen anschließend neu.** Die [Installationsanleitung](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/INSTALL.md) nennt macOS und Linux, Git, Node.js ab Version 18 sowie Python ab Version 3.10. Die Laufzeitversionen müssen zusätzlich die Anforderungen deines Agenten erfüllen. Der geprüfte Installer unterstützt Windows nicht. ``` npx --yes img2threejs@latest install --host codex npx --yes img2threejs@latest doctor ``` Ersetze `codex` je nach Host durch `claude`, `opencode` oder `hermes`. Für Hermes ist der zusätzliche Schritt zur Profilverknüpfung aus der Anleitung nötig. `doctor` prüft den Installationszustand, nicht die Qualität eines Modells. Blockiert ein bereits vorhandener, nicht vom Installer verwalteter Skill die Installation, prüfe zuerst den betroffenen Pfad. Die Befehle folgen der dokumentierten Installation; wir haben sie für diesen Artikel nicht ausgeführt. Halte das tatsächlich installierte Skill-Release und den Commit fest, denn `@latest` kann sich ändern. Das [npm-Paketmanifest](https://github.com/img2threejs/img2threejs/blob/v2.0.1/package.json) beschreibt ein Installer-CLI. Wenn du dieses Paket deiner Webanwendung hinzufügst, erhält sie dadurch keine API zur Bildumwandlung. ## Was solltest du dem Agent als Aufgabe geben? **Verlange von img2threejs ein Objekt mit benannten, veränderbaren Teilen und konkreten Prüfvorgaben.** Das [Bewertungsschema für geeignete Eingaben](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/intake/validation_rubric.md) bevorzugt erkennbare Silhouetten und eindeutig identifizierbare Objekte. Exakte Mesh-Extraktion und fertigungstaugliche Maßhaltigkeit schließt es aus. Nutze diesen von uns formulierten Testauftrag mit einem Referenzbild, das du dafür verwenden darfst. Ersetze die beispielhafte Höhe von 400 mm durch ein gemessenes Maß. Liefere Seiten- und Rückansichten mit, wenn diese Flächen für dein Produkt relevant sind. ``` Verwende den installierten img2threejs-Skill für ./reference.png. Baue die Schreibtischlampe als prozedurales Three.js-Modell in TypeScript. Ziel: ein interaktiver Produktprototyp im Browser. Eine Szeneneinheit entspricht einem Meter; Höhe in Neutralstellung: 0.4 Einheiten. Halte Fuß, Arm und Schirm getrennt identifizierbar. Gib dem Schirm einen benannten Drehpunkt am tatsächlichen Gelenk. Liste erschlossene Flächen und Maße vor ihrer Umsetzung auf. Fordere eine weitere Ansicht an, wenn ein nötiges Merkmal nicht bestimmbar ist. Bewahre die Rekonstruktionsspezifikation zusammen mit dem generierten Quellcode auf. Nenne die exportierte Factory und ihre tatsächlich verfügbaren Optionen. Rendere eine passende Referenzansicht sowie Seiten- und Rückansichten. Zeige eine Ansicht ohne Texturen, damit Materialdetails keine Geometriefehler verdecken. Führe einen Farbwechsel am Schirm und eine Gelenkbewegung vor. Nenne verbleibende Mängel, Abhängigkeiten und externe Assets oder Aufrufe. Halte zur Prüfung an, wenn die vereinbarte Interaktion einen anderen Asset-Workflow braucht. ``` Prüfe Silhouette und Gelenk, bevor du die Oberflächendetails verfeinerst. Eine Texturkorrektur kann ein falsch platziertes Gelenk nicht reparieren. Lege die akzeptierte Spezifikation und den Quellcode im selben Commit ab, damit ein anderer Entwickler die Änderung nachvollziehen kann. ## Wofür eignet sich prozedurales Image-to-3D? **Wir würden mit einem Browser-Prototyp beginnen, dessen einzelne Teile auf Eingaben reagieren müssen.** Eine Schreibtischlampe liefert dafür eine konkrete Änderungsaufgabe. Prüfe zuerst, ob die Rekonstruktion diese Aufgabe unterstützt, bevor du einen ganzen Katalog ähnlicher Objekte beauftragst. | Geplante Verwendung | Warum sich eine Prüfung lohnt | Wann sich die Entscheidung ändert | | --- | --- | --- | | Interaktiver Produktprototyp | Benannte Komponenten können Auswahl und Bewegung unterstützen | Fehlende Geometrie verhindert die benötigte Interaktion | | Stilisierte Erklärungsszene | Änderungen am Code können die für eine Erklärung wichtigen Merkmale hervorheben | Eine Annäherung würde den Mechanismus falsch darstellen | | Früher Konfigurator | Du kannst prüfen, wie Produktoptionen die Szene verändern | Die Szene kann gültige Varianten nicht konsistent darstellen | | Maßkritisches oder verformbares Asset | Ein Prototyp kann helfen, die Anforderung zu klären | Die Abnahme verlangt CAD-Genauigkeit, geprüfte Topologie oder spezielles Rigging | Der projektinterne [Workflow für die Ähnlichkeit von Charakteren](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/character/likeness_maximization.md) kann Referenzbilder auf prozedurale Geometrie projizieren. Eine TypeScript-Ausgabe belegt deshalb noch keinen texturfreien Ablauf. Prüfe die Abhängigkeiten des generierten Modells. Die [Plugin-Architektur](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/PLUGINS.md) trennt den Basisablauf von spezialisierten Erweiterungen. Bei Charakteren musst du weiterhin Rigging und Verformung prüfen, bevor die Hierarchie die gewünschte Bewegung unterstützen kann. Geht es dir um eine umfassendere Pipeline für Spiele-Assets, behandelt unser [Vergleich von KI-3D-Generatoren für die Spieleentwicklung](/de/blog/ai-3d-model-generators-game-development-2026/) die Werkzeugwahl, Topologie und Übergabe an die Engine. ## Kannst du das Ergebnis als GLB exportieren oder in Blender nutzen? **Three.js kann eine Szene als GLB exportieren. Prüfe das Ergebnis vor der Abnahme in Blender oder deinem vorgesehenen Zielsystem.** Die [offizielle Exporter-Referenz](https://threejs.org/docs/pages/GLTFExporter.html) führt unterstützte Szenendaten und Erweiterungen auf. Die Datei bewahrt nicht das TypeScript-Programm, das die Szene erzeugt hat. Teste nach dem Import Materialien, Animationen und Maßstab. Eigene Shader und Anwendungslogik brauchen eine gesonderte Lösung. Bewahre den Quellcode zusammen mit dem exportierten Asset auf. GLB-Dateien bleiben mit geeigneten Werkzeugen editierbar; prozeduraler Quellcode eröffnet einen weiteren Weg zur Pflege. Das optionale [img2glb-Plugin](https://github.com/img2threejs/plugin-img2glb/blob/main/SKILL.md) dokumentiert eine gehostete Image-to-Mesh-Erzeugung mit TRELLIS und eigenen Netzwerk- sowie Abhängigkeitsanforderungen. Dieser Weg generiert ein Mesh aus dem Bild. Er exportiert nicht das Ergebnis deiner prozeduralen Factory. ## Wie prüfst du ein generiertes Modell vor dem Einsatz? **Prüfe die img2threejs-Ausgabe in der Zielanwendung anhand der Änderung, die ein Nutzer ausführen muss.** Eine passende Referenzansicht kann eine falsche Rückseite oder einen falsch gesetzten Drehpunkt verdecken. Auch der [Leitfaden zur Selbstkorrektur](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/review/self_correction.md) weist darauf hin, dass ein bestandener zweidimensionaler Vergleich keine räumlich realistische Rekonstruktion belegt. Die folgenden Prüfungen sind Vorschläge, keine gemeldeten Testergebnisse. Vereinbare vor dem Versuch Zielgeräte und Leistungsgrenzen. Halte anschließend Beobachtungen und offene Mängel fest. | Prüfpunkt | Aufgabe | Aufzubewahrender Nachweis | | --- | --- | --- | | Form und Maßstab | Referenz-, Seiten- und Rückansicht vergleichen; die vereinbarte Gesamthöhe prüfen | Beschriftete Aufnahmen, Messergebnis und Liste erschlossener Bereiche | | Editierbare Geometrie | Eine Armabmessung in der vereinbarten Ausgangsdatei ändern | Prüfbarer Diff und weiterhin passende Anschlüsse am Modell | | Unabhängige Materialien | Zwei Lampeninstanzen anzeigen und nur einen Schirm umfärben | Die zweite Instanz bleibt unverändert | | Bewegliche Teile | Den Kopf über den vorgesehenen Bewegungsbereich führen | Korrekte Gelenkachse sowie dokumentierte Überschneidungen oder Grenzen | | Produktzustand | Eine Konfiguration auswählen, speichern und erneut laden | Bedienelemente und Szene zeigen dieselbe gültige Variante | | Leistung auf Zielgeräten | Auf dem langsamsten unterstützten Gerät laden und bedienen | Gemessene Startzeit, Frame-Zeit, Draw Calls und Speichernutzung im Vergleich zu den vereinbarten Grenzen | | Lebenszyklus | Den Viewer wiederholt öffnen, verlassen und erneut öffnen | Keine anwachsende Zahl an GPU-Ressourcen der Anwendung oder doppelt angelegte Steuerungen | | Fallback | Tastatursteuerung verwenden und die 3D-Darstellung deaktivieren | Produktinformationen und Konfiguration bleiben nutzbar | Der [Three.js-Leitfaden zum Freigeben von Ressourcen](https://threejs.org/manual/pages/cleanup.html) erklärt, dass ungenutzte Geometrien, Materialien und Texturen ausdrücklich freigegeben werden müssen. Es reicht nicht, ein Objekt aus der Szene zu entfernen. Halte fest, wem eine Ressource gehört, damit du nichts freigibst, was ein anderes Modell noch verwendet. Nimm diese Prüfungen in deine [Qualitätssicherung für KI-generierten Code](/de/blog/qa-for-ai-generated-code/) auf. Eine Geometrieabnahme kann einen Fehler beim Speichern der Konfiguration übersehen. Ein erfolgreicher TypeScript-Build wiederum erkennt keine falsche Form. ## Was kostet ein img2threejs-Workflow? **Plane Agentennutzung, verworfene Versuche und die Integration eines akzeptierten Assets ein.** Das [Dokument zu Token-Kosten](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/TOKEN_COST.md) bezeichnet seine Zahlen als technische Schätzungen. Wir würden sie daher nicht als Preisangebot für einen Produktionseinsatz verwenden. Erfasse im Piloten das Ergebnis, die Agentennutzung, die menschliche Arbeitszeit in Minuten und verbleibende Mängel. Vergleiche das mit deinem bisherigen Modellierungsablauf. Beurteile die Modelltreue anhand des Einsatzzwecks: Für einen Prototyp gelten andere Abnahmekriterien als für einen Katalog, den Kunden nutzen. Lokale Dateien sagen noch nicht aus, wo dein Agent Bilder verarbeitet. Prüfe Host, Modell-Endpunkt und optionale Plugin-Aufrufe, bevor du vertrauliche Produktvorlagen bereitstellst. ## Wann würden wir img2threejs einsetzen? **Probiere img2threejs aus, wenn dein Browser-Prototyp editierbare Einzelteile braucht und dein Team die Rekonstruktion prüfen kann.** Beginne mit einem Objekt und einer sinnvollen Interaktion. Behalte den Ablauf bei, wenn sein Quellcode die nächste freigegebene Änderung leichter umsetzbar und prüfbar macht. Unser [Leitfaden vom KI-Prototyp zum produktiven System](/de/software-development-guide/vibe-coded-prototype-to-production/) hilft dir, die Übergabe zu definieren. Die [Fallstudie zu Hyperstate AI](/de/case-studies/hyperstate-ai/) zeigt angrenzende Erfahrung mit KI-Anwendungen. Der Bericht dokumentiert keine Arbeit mit img2threejs oder 3D-Modellierung. Für einen konkreten Viewer oder Konfigurator ist unsere [Entwicklung interaktiver 3D-Anwendungen](/de/services/interactive-3d-development/) der passende Ausgangspunkt. [Besprich ein Produkt, seine benötigten Interaktionen und die Zielgeräte](/de/contact/?intent=interactive-3d-development), damit der Pilot zu einer klaren Abnahmeentscheidung führt. ## Fragen zu img2threejs ### Ist img2threejs ein eigenständiges KI-Modell? Nein. Das geprüfte Projekt liefert einen Agent-Skill, unterstützende Skripte und einen Ablauf zur prozeduralen Rekonstruktion. Dein Coding-Agent übernimmt die Schlussfolgerungen und die visuelle Beurteilung. Bewerte den gewählten Agenten und den Workflow gemeinsam. Halte beide Versionen fest, wenn du ein akzeptiertes Ergebnis später wiederholen möchtest. ### Brauchst du eine lokale GPU? Die Installationsanleitung für den Basisablauf verlangt keine lokale GPU für die Inferenz. Die Hardwareanforderungen hängen davon ab, wo das Modell deines Agenten läuft und wie du die Szene renderst. Ein lokales Modell oder ein optionales Generierungs-Backend kann weitere Anforderungen mitbringen. Die Browserleistung musst du trotzdem auf dem Gerät prüfen, das deine Zielgruppe verwendet. ### Erzeugt img2threejs eine React-Three-Fiber-Komponente? Die Kernausgabe ist eine TypeScript-Factory, die eine Three.js Group zurückgibt, keine automatisch erzeugte React-Komponente. React Three Fiber kann vorhandene Objekte über seine [primitive-Integration](https://r3f.docs.pmnd.rs/api/objects) einbinden. Dabei wird das eingebundene Objekt nicht automatisch freigegeben. Plane, wie du den Anwendungszustand abbildest und Ressourcen verwaltest. Teste Mounting sowie Unmounting in deiner Anwendung. ### Rekonstruiert img2threejs die verdeckte Rückseite eines Objekts? Ein einzelnes Foto kann Flächen, die es nicht zeigt, nicht belegen. Behandle verdeckte Details als erschlossen, liefere bei Bedarf weitere Ansichten und prüfe das Ergebnis aus diesen Blickwinkeln. Für eine exakte Produktdarstellung brauchst du gemessene Referenzen und geeignete Ausgangs-Assets. Eine überzeugende Vorderseite rechtfertigt keine frei erfundene Rückseite. ### Brauchst du weiterhin Blender oder einen 3D-Artist? Das hängt vom abgenommenen Ergebnis ab. Einen geprüften Browser-Prototyp kannst du gegebenenfalls direkt in TypeScript pflegen. Kontrollierte Topologie, detailliertes Sculpting, Verformung oder eine bestimmte Export-Pipeline können weiterhin eine 3D-Fachkraft und passende Werkzeuge erfordern. Teste ein repräsentatives Asset, bevor du den Produktionsablauf deines Teams änderst. ### Ist img2threejs für kommerzielle Projekte nutzbar? Das geprüfte Repository steht unter der [Apache-2.0-Lizenz](https://github.com/img2threejs/img2threejs/blob/v2.0.1/LICENSE). Behalte die jeweils erforderlichen Hinweise bei und prüfe die Bedingungen der Abhängigkeiten sowie Modelldienste. Die Softwarelizenz erteilt keine Erlaubnis, beliebige Referenzfotos, Marken oder abgebildete Designs nachzubilden. Halte die Berechtigungen fest, die du für dein konkretes Asset benötigst. Architektur und Plattformen ## Weiterlesen Framework-, Plattform- und Systementscheidungen mit langfristiger Delivery-Wirkung. [Hier starten**Smart-City-Architektur: MQTT, LoRaWAN, Kubernetes und Terraform**](/de/blog/smart-city-architecture-best-practices-2026/) - [Organoid: KI für Materialdatenblätter und Produktauskünfte](/de/blog/organoid-ai-material-specification-opportunities/) - [ING-B: KI für Elektroplanung und Revisionsprüfung](/de/blog/ing-b-ai-electrical-engineering-opportunities/) - [Odoo und n8n: Aufträge idempotent anlegen](/de/blog/odoo-n8n-idempotency-recovery/) - [HubSpot und Odoo: Wer darf Kundendaten ändern?](/de/blog/hubspot-odoo-customer-data-ownership/) - [Odoo-Angebote aus E-Mail und PDF: Artikel und Preise prüfen](/de/blog/odoo-email-pdf-quotation-review/) [Nächster Artikel**Organoid: KI für Materialdatenblätter und Produktauskünfte**](/de/blog/organoid-ai-material-specification-opportunities/) [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 11 Min Lesezeit · 7. November 2026 Zuletzt geprüft 7. November 2026 [**Weiter**](/de/blog/ai-3d-model-generators-game-development-2026/)