So wandeln Sie ein Bild in sauberen Three.js-Code um – ohne schwere Meshes und neuronale Netzwerke

Die meisten 3D-Generatoren, die Bilder in 3D-Modelle umwandeln, geben schwere Binärdateien aus. Das Ergebnis ist ein dichtes Mesh aus Hunderttausenden von Polygonen, verschmierten gebackenen Texturen und keine Möglichkeit, etwas im Code manuell anzupassen. Wenn Sie ein einfaches Modell für Website-Interaktivität oder eine leichtgewichtige Szene im Browser benötigen, möchten Sie keine fünf Megabyte große GLTF-Datei nur für ein Objekt laden.

Das Projekt img2threejs hat das Problem aus einem anderen Blickwinkel betrachtet. Statt Photogrammetrie und Polygon-Mesh-Export analysiert es das Bild und erzeugt prozeduralen TypeScript-Code für Three.js. Das Modell wird zur Laufzeit aus grundlegenden Primitiven, Shadern und mathematischen Kurven zusammengesetzt.

Was steckt unter der Haube

Das Kernkonzept ist einfach: Das erzeugte Modell sollte Quellcode sein, anstatt ein schweres Binär-Asset. Sie geben dem Skript ein einzelnes Foto oder Kunstwerk, und Sie erhalten eine Factory-Funktion createObjectNameModel(), die ein reguläres THREE.Group zurückgibt.

Innerhalb dieses Objekts ist die Knotenhierarchie bereits definiert:

• Rotationspunkte (Pivots) und Sockets zum Anbringen von Gegenständen.
• Collider für Klick-Handling und Physik.
• Eine Update-Methode in userData.tick für kontinuierliche Hintergrundanimation.
• Prozedurale Materialien, die auf Szenenbeleuchtung reagieren, anstatt eingebrannt zu sein.

Der Code ist in klaren Schichten organisiert. Sie können ihn in einem Editor öffnen, einen Verrundungsradius anpassen, Metallrauheit ändern oder Animationslogik in ein paar Minuten umschreiben.

Warum der LLM nicht verrückt wird vor Token-Verbrauch

Wenn Sie ein Sprachmodell zwingen, eine Three.js-Szene von Grund auf basierend auf einem Bild zu schreiben, wird es schnell den gesamten Kontext verbrauchen, indem es blind Koordinaten errät. Die Ersteller von img2threejs haben die Arbeit zwischen deterministischen Skripten und neuronalen Netzwerk-Visionsagenten wie Claude Code oder Codex aufgeteilt.

Die gesamte Routinearbeit wird auf eine lokale Pipeline in reinem Python 3.10 ohne externe Abhängigkeiten ausgelagert. Keine schweren Bibliotheken wie Pillow oder PyTorch: PNG-Parsing und Farbrechnungen funktionieren über die Standardmodule struct und zlib.

Die Skripte übernehmen die Mechanik:

• Das Referenzbild in Materialzonen aufteilen und die Farbpalette mit der CIEDE2000-Formel analysieren.
• Eine Zwischenobjektspezifikation ObjectSculptSpec erstellen.
• Komponentenabmessungen validieren und die Zusammenstellung blockieren, bis die Code-Generierung erfolgt, wenn die Beschreibung wichtige Elemente fehlen.
• Eine Vergleichscheckliste zusammenstellen (Original neben dem aktuellen Render).

Das Modell verwendet Tokens ausschließlich für Entscheidungen: Es schaut sich das gepaarte Renderbild an und sagt, ob der aktuelle Schritt die Validierung bestanden hat oder ob die Geometrie angepasst werden muss.

Die Zusammenstellung folgt strikten Phasen: vom groben Entwurf zur Struktur, dann zur Form, Materialien, Beleuchtung und finalen Optimierung. Wenn das Modell versucht zu mogeln und etwas mit einer Textur zu zeichnen, das ehrliche Geometrie sein sollte, lehnt die interne Validierung den Durchgang ab und sendet den Code zur Korrektur zurück.

Was das System in der Praxis leisten kann

Das Repository enthält eine Galerie mit Live-Beispielen, in der Sie jedes Objekt im Browser drehen und sofort den erzeugten TypeScript-Code anzeigen können.

Die Demos umfassen detaillierte Waffen-Skins aus CS2, ein BMX-Fahrrad, Ohrhörer in einem Ladeetui und ein isometrisches Haus-Diorama. Das Tool eignet sich besonders gut für Hard-Surface-Objekte. Kleine Abschrägungen, Schraubenaussparungen, Paneelverbindungen und Übergänge von mattem Kunststoff zu Hochglanz zerlegen sich mit hoher Präzision in Primitive.

Ein separater Generierungszweig ist für Charaktere und Tiere konzipiert. Das Skript markiert anatomische Ankerpunkte des Gesichts und Körperproportionen und versucht, die Silhouetten-Erkennbarkeit zu erhalten, obwohl Sie am Ausgang keinen fotorealistischen menschlichen Scan erwarten sollten.

Wie man es ausführt und ausprobiert

Die schnellste Integrationsmethode ist, das Projekt als Skill für Claude Code oder Codex hinzuzufügen. Klonen Sie einfach das Repository in den Arbeitsordner des Agenten:

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

Danach können Sie ein Bild im Agent-Chat anhängen und den Befehl aufrufen:

/img2threejs Собери этот предмет в виде модели Three.js, сохрани пропорции и цвета.

Wenn Sie die Schritte manuell über das Terminal ausführen möchten, werden Skripte direkt aus dem Forge-Verzeichnis gestartet:

python3 forge/stage1_intake/probe_image.py reference.png
python3 forge/stage2_spec/new_pre_spec_assessment.py "MyModel" --image reference.png --out assessment.json
python3 forge/stage2_spec/new_sculpt_spec.py "MyModel" --image reference.png --assessment assessment.json --out spec.json
python3 forge/stage2_spec/validate_sculpt_spec.py spec.json --strict-quality
python3 forge/stage3_build/generate_threejs_factory.py spec.json --out src/createMyModel.ts

Als Ausgabe erhalten Sie eine fertige createMyModel.ts-Datei und ein JSON-Manifest mit allen Build-Parametern.

Ehrliche Einschränkungen

Die Projektautoren sind offen über die Grenzen der Anwendbarkeit. Aus einem einzelnen Foto ist es unmöglich, die verborgenen Seiten eines Objekts zu 100% zu rekonstruieren. Wenn die Referenz nicht die Rückseite des Objekts zeigt, spiegelt das System entweder die Vorderseitengeometrie oder macht eine vorsichtige Schätzung und markiert den Bereich als detailarm.

Das Tool wird keinen professionellen 3D-Modelierer ersetzen, um komplexe AAA-Charaktere mit Rigging zu erstellen. Seine Nische ist die schnelle Generierung von interaktiven Objekten, Umgebungen, Widgets und Dioramen, bei denen null Bundle-Gewicht und vollständige Codelesbarkeit entscheidend sind.

Zusammenfassung

Das Projekt verdient definitiv ein Lesezeichen für Webentwickler und Indie-Spielentwickler, die Three.js verwenden. Wenn Sie es leid sind, einfache 3D-Assets manuell aus Würfeln und Zylindern zusammenzubauen oder schwere Meshes auf Landingpages zu laden, spart der img2threejs-Ansatz Stunden routinemäßiger Arbeit. Sie erhalten leichten, erweiterbaren Code, der perfekt in ein typisiertes Frontend passt.