Zo zet je een afbeelding om in schone Three.js-code zonder zware meshes en neurale netwerkrommel

De meeste 3D-generatoren uit afbeeldingen produceren zware binaire bestanden. Het resultaat is een dicht mesh van honderdduizenden polygonen, vervaagde gebakken texturen, en geen mogelijkheid om iets handmatig aan te passen in code. Als je een eenvoudig model nodig hebt voor website-interactiviteit of een lichtgewicht scene in de browser, wil je niet een vijf-megabyte GLTF-bestand laden voor slechts één object.

Het img2threejs-project pakte het probleem vanuit een andere hoek aan. In plaats van fotogrammetrie en polygonen-mesh export, analyseert het de afbeelding en schrijft het procedurele TypeScript-code voor Three.js. Het model wordt samengesteld tijdens runtime uit basisprimitieven, shaders en wiskundige curves.

Wat er onder de motorkap zit

Het kernconcept is eenvoudig: het gegenereerde model zou broncode moeten zijn in plaats van een zwaar binair asset. Je voert het script één foto of kunstwerk in, en je krijgt een factory-functie createObjectNameModel() terug die een gewone THREE.Group retourneert.

Binnen dit object is de node-hiërarchie al gedefinieerd:

• Rotatiepunten (pivots) en sockets voor het bevestigen van items.
• Colliders voor klikafhandeling en fysica.
• Een update-methode in userData.tick voor continue achtergrondanimatie.
• Procedurele materialen die reageren op scèneverlichting in plaats van dat ze worden ingebakken.

De code is georganiseerd in duidelijke lagen. Je kunt het openen in een editor, een filetradius aanpassen, metaalruwheid veranderen, of animatielogica in een paar minuten herschrijven.

Waarom de LLM niet gek wordt van tokenverbruik

Als je een taalmodel dwingt om een Three.js-scène vanaf nul te schrijven op basis van een afbeelding, zal het snel door de hele context branden terwijl het blindelings coördinaten probeert te raden. De makers van img2threejs verdeelden het werk tussen deterministische scripts en neurale netwerk vision-agents zoals Claude Code of Codex.

Al het routinematige werk wordt uitbesteed aan een lokale pipeline in pure Python 3.10 met nul externe afhankelijkheden. Geen zware bibliotheken zoals Pillow of PyTorch: PNG-parsing en kleurwiskunde werken via de standaardmodules struct en zlib.

De scripts verwerken de mechaniek:

• Verdeel de referentie in materiaalzones en analyseer het kleurenpalet met de CIEDE2000-formule.
• Bouw een intermediaire objectspecificatie ObjectSculptSpec.
• Valideer componentafmetingen en blokkeer assemblage tot code-generatie als de beschrijving ontbrekende sleutelelementen heeft.
• Stel een vergelijkingschecklist samen (origineel naast de huidige render).

Het model besteedt tokens uitsluitend aan besluitvorming: het bekijkt het gekoppelde renderbeeld en zegt of de huidige stap validatie heeft doorstaan of dat de geometrie moet worden aangepast.

Assemblage volgt strikte fasen: van ruw concept naar structuur, dan naar vorm, materialen, verlichting en finale optimalisatie. Als het model probeert te valsspelen en iets tekent met een textuur die eigen geometrie zou moeten zijn, wijst de interne validatie de stap af en stuurt de code terug voor correctie.

Wat het systeem in de praktijk kan doen

De repository heeft een galerie met live voorbeelden waar je elk object in de browser kunt draaien en direct de gegenereerde TypeScript-code kunt bekijken.

De demos omvatten gedetailleerde wapenskins uit CS2, een BMX-fiets, oordopjes in een oplaadcase en een isometrische huis-diorama. Het gereedschap blinkt bijzonder uit bij harde oppervlakken. Kleine afschuiningen, schroefuitsparingen, paneelverbindingen en overgangen van mat plastic naar glans ontleden met hoge precisie in primitieven.

Een aparte generatie-branch is ontworpen voor personages en dieren. Het script markeert gezichtsanatomie ankerpunten en lichaamsproporties, met als doel silhouetherkenbaarheid te behouden, hoewel je geen fotorealistische menselijke scan als output zou moeten verwachten.

Hoe te draaien en uit te proberen

De snelste integratiemethode is om het project toe te voegen als een skill voor Claude Code of Codex. Clone simpelweg de repository naar de werkmap van de agent:

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

Daarna kun je een afbeelding toevoegen in de agent-chat en de opdracht aanroepen:

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

Als je de stappen handmatig via de terminal wilt uitvoeren, worden scripts rechtstreeks vanuit de forge-directory gestart:

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

Bij de output krijg je een kant-en-klare createMyModel.ts-bestand en een JSON-manifest met alle bouwparameters.

Eerlijke beperkingen

De projectauteurs zijn open over de grenzen van toepasbaarheid. Vanuit één foto is het onmogelijk om de verborgen kanten van een object 100% te reconstrueren. Als de referentie de achterkant van het item niet toont, spiegelt het systeem ofwel de voorgeometrie of maakt het een voorzichtige gok, waarbij het gebied wordt gemarkeerd als low-detail.

Het gereedschap zal geen professionele 3D-modelleur vervangen voor het maken van complexe AAA-personages met rigging. De niche is snelle generatie van interactieve items, omgevingen, widgets en diorama's waar nul bundelgewicht en volledige codeleesbaarheid cruciaal zijn.

Samenvatting

Het project verdient zeker een bladwijzer voor webontwikkelaars en indie-game-ontwikkelaars die Three.js gebruiken. Als je het beu bent om handmatig eenvoudige 3D-assets samen te stellen uit kubussen en cilinders of zware meshes te laden op landingspagina's, bespaart de img2threejs-aanpak uren routinematig werk. Je krijgt lichtgewicht, uitbreidbare code die perfect past in een getypte frontend.