Jak przekształcić obraz w czysty kod Three.js bez ciężkich siatek i neuralnych śmieci

Większość generatorów 3D z obrazów generuje ciężkie pliki binarne. Rezultatem jest gęsta siatka setek tysięcy wielokątów, rozmazane wypieczone tekstury i brak możliwości ręcznej edycji czegokolwiek w kodzie. Jeśli potrzebujesz prostego modelu do interaktywności strony lub lekkiej sceny w przeglądarce, nie chcesz ładować pięciomegabajtowego pliku GLTF tylko dla jednego obiektu.

Projekt img2threejs podszedł do problemu z innej strony. Zamiast fotogrametrii i eksportu siatek wielokątów, analizuje obraz i generuje proceduralny kod TypeScript dla Three.js. Model jest składany w czasie działania z podstawowych prymitywów, shaderów i krzywych matematycznych.

Co kryje się pod maską

Główna koncepcja jest prosta: wygenerowany model powinien być kodem źródłowym, a nie ciężkim zasobem binarnym. Wprowadzasz do skryptu jedno zdjęcie lub grafikę, a otrzymujesz funkcję fabryczną createObjectNameModel() zwracającą zwykły obiekt THREE.Group.

Wewnątrz tego obiektu hierarchia węzłów jest już zdefiniowana:

• Punkty obrotu (przeguby) i gniazda do mocowania elementów.
• Kolizje do obsługi kliknięć i fizyki.
• Metoda aktualizacji w userData.tick do ciągłej animacji w tle.
• Proceduralne materiały reagujące na oświetlenie sceny, zamiast być wypieczone.

Kod jest zorganizowany w wyraźne warstwy. Możesz otworzyć go w edytorze, dostosować promień zaokrąglenia, zmienić chropowatość metalu lub przepisać logikę animacji w ciągu kilku minut.

Dlaczego LLM nie traci zmysłów przez zużycie tokenów

Jeśli zmusisz model językowy do napisania sceny Three.js od zera na podstawie obrazu, szybko wyczerpie cały kontekst, próbując na ślepo zgadywać współrzędne. Twórcy img2threejs podzielili pracę między deterministyczne skrypty a agentów wizyjnych opartych na sieciach neuronowych, takich jak Claude Code czy Codex.

Cała rutynowa praca jest odciążona do lokalnego potoku w czystym Pythonie 3.10 bez zewnętrznych zależności. Żadnych ciężkich bibliotek jak Pillow czy PyTorch: parsowanie PNG i obliczenia kolorów działają przez standardowe moduły struct i zlib.

Skrypty obsługują mechanikę:

• Dzielą referencję na strefy materiałowe i analizują paletę kolorów za pomocą wzoru CIEDE2000.
• Budują pośrednią specyfikację obiektu ObjectSculptSpec.
• Sprawdzają wymiary komponentów i blokują składanie aż do generacji kodu, jeśli opis nie zawiera kluczowych elementów.
• Składają listę kontrolną porównawczą (oryginał obok aktualnego renderu).

Model wydaje tokeny wyłącznie na podejmowanie decyzji: patrzy na sparowany obraz renderingu i mówi, czy bieżący krok przeszedł walidację, czy geometria wymaga poprawki.

Składanie przebiega przez ściśle określone etapy: od szkicu roboczego do struktury, następnie do formy, materiałów, oświetlenia i końcowej optymalizacji. Jeśli model próbuje oszukać i narysować coś teksturą, co powinno być uczciwą geometrią, wewnętrzna walidacja odrzuca przejście i odsyła kod do poprawki.

Co system potrafi w praktyce

Repozytorium zawiera galerię z działającymi przykładami, gdzie możesz obracać każdy obiekt w przeglądarce i natychmiast przeglądać wygenerowany kod TypeScript.

Demony obejmują szczegółowe skiny broni z CS2, rower BMX, słuchawki w etui ładującym i dioramę domu w izometrii. Narzędzie szczególnie dobrze radzi sobie z obiektami typu hard-surface. Małe fazowania, wycięcia na śruby, połączenia paneli i przejścia od matowego plastiku do błysku rozkładają się na prymitywy z wysoką precyzją.

Osobna gałąź generowania jest przeznaczona dla postaci i zwierząt. Skrypt oznacza punkty kotwiczne anatomii twarzy i proporcje ciała, próbując zachować rozpoznawalność sylwetki, choć nie powinieneś oczekiwać fotorealistycznego skanu człowieka na wyjściu.

Jak uruchomić i wypróbować

Najszybsza metoda integracji to dodanie projektu jako umiejętności dla Claude Code lub Codex. Po prostu sklonuj repozytorium do folderu roboczego agenta:

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

Po tym możesz załączyć obraz w czacie agenta i wywołać polecenie:

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

Jeśli chcesz uruchomić kroki ręcznie przez terminal, skrypty uruchamiane są bezpośrednio z katalogu forge:

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

Na wyjściu otrzymujesz gotowy plik createMyModel.ts i manifest JSON ze wszystkimi parametrami budowy.

Szczere ograniczenia

Autorzy projektu są otwarci co do granic stosowalności. Z jednego zdjęcia nie można w 100% zrekonstruować ukrytych stron obiektu. Jeśli referencja nie pokazuje tyłu przedmiotu, system albo odzwierciedla przednią geometrię, albo ostrożnie zgaduje, oznaczając obszar jako niską szczegółowość.

Narzędzie nie zastąpi profesjonalnego modelarza 3D do tworzenia złożonych postaci AAA z rigu. Jego niszą jest szybkie generowanie elementów interaktywnych, środowisk, widżetów i dioram, gdzie kluczowa jest zerowa waga pakietu i pełna czytelność kodu.

Podsumowanie

Projekt zdecydowanie zasługuje na zakładkę dla web developerów i twórców gier indie używających Three.js. Jeśli masz dość ręcznego składania prostych zasobów 3D z sześcianów i cylindrów lub ładowania ciężkich siatek na stronach docelowych, podejście img2threejs oszczędza godziny rutynowej pracy. Otrzymujesz lekki, rozszerzalny kod, który idealnie wpisuje się w typowany frontend.