In diesem Beitrag
img2threejs: Vom Bild zu editierbarem Three.js-Code
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 beschreibt diesen Ansatz.
Quellen geprüft: . 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. 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 beschreibt den Ablauf vom groben Grundmodell über Struktur, Form, Materialien, Oberflächendetails und Beleuchtung bis zu Interaktion und Optimierung. Praktisch läuft das so:
- Der Agent untersucht das Referenzbild und hält sichtbare Merkmale sowie Unsicherheiten fest.
- Er beschreibt Bauteile, Materialien und ihre Beziehungen in einer Spezifikation.
- Code baut die aktuelle Stufe auf; der Browser rendert das Ergebnis.
- Der Agent vergleicht das Rendering mit der Vorlage und korrigiert Mängel, bevor er weiterarbeitet.
Der geprüfte Generator für die TypeScript-Factory 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 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 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 doctorErsetze 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 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 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 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 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 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 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 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 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 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 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 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 hilft dir, die Übergabe zu definieren. Die Fallstudie zu 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 der passende Ausgangspunkt. Besprich ein Produkt, seine benötigten Interaktionen und die Zielgeräte, damit der Pilot zu einer klaren Abnahmeentscheidung führt.