Från bild till 3D-modell i webbläsaren

Det är nyttigt att ha tråkigt ibland!

Jag spenderade nyligen en mobilfri helg hos mina svärföräldrar. Tanken var egentligen bara att ta det lugnt och tillåta mig själv att ha lite tråkigt. Det finns ett värde i att låta tankarna vandra utan distraktioner. Det var just då en rad nya idéer började dyka upp.

Min första tanke var att försöka förstå hur Three.js fungerar och om det gick att bygga något snabbt under en enda helg. Idén blev att skapa en enkel 3D scen direkt i webbläsaren.

Först funderade jag på att återskapa en 3D modell av en sportbil. Samma typ som jag såg svepa förbi ute på landet när jag var liten. En liten ledtråd till vilken modell det handlar om är den karaktäristiska boxermotorn. Resultatet blev faktiskt långt över förväntan. Tyvärr är bilens form skyddad av upphovsrätt.

För att slippa krångla med rättigheter får projektet i stället handla om en klassisk motocrossmotorcykel från 70-talet.

Nano Banana bildgenerator

I mitten av augusti 2025 dök en anonym bildgenerator upp på plattformen LMArena och började snabbt dominera rankingen. Den klättrade hela 171 Elo poäng och slog etablerade modeller som DALL·E 3 och Midjourney. Modellen imponerade framför allt genom att kunna göra mycket precisa och professionella bildredigeringar på bara några sekunder.

Det visade sig senare vara en medveten strategi från Google. I stället för en traditionell lansering fick modellen först bevisa sin styrka genom ren prestation i jämförelser mot andra modeller. Den första versionen blev snabbt känd som Nano Banana. Senare kom en förbättrad version kallad Nano Banana Pro och idag finns den senaste generationen Nano Banana 2. Den är rejält vässad och betydligt mer kapabel.

Så tog jag fram motocrossbilden

Jag började med att experimentera med en gammal bild på mig själv och min tidigare motocrossmotorcykel. Jag bad bildgeneratorn göra om bilden till en klassisk modell från 70-talet i rött med gul nummerplåt. Föraren skulle ha gul tröja, svarta byxor och gul hjälm. Resultatet syns i omslagsbilden längst upp.

För att få en tydligare bild bad jag den också generera en version med vit bakgrund. Den skulle dessutom vara i action, alltså att föraren kör motorcykeln i hög fart.

En person i gul tröja och gul hjälm kör en klassisk röd motocross från 70-talet i hög fart

Det är imponerande hur bra Nano Banana 2 är jämfört med tidigare versioner. Samtidigt märker jag att resultatet ofta blir ännu bättre när modellen får en riktig bild att utgå från. När modellen själv måste fylla i många detaljer blir resultatet lätt lite fel här och där.

Samma metod fungerar också bra med gamla analoga bilder. Modellen kan till exempel färglägga svartvita foton eller förbättra kvaliteten.

Från bilder till 3D modell via Rodin

Nästa steg var att skicka bilderna till Rodin. Rodin är en AI modell som är tränad för att generera 3D modeller direkt från bilder eller textbeskrivningar. I stället för att modellera allt för hand analyserar modellen referensbilderna och försöker bygga upp en tredimensionell version av objektet. Man kan ladda upp en eller flera bilder som den använder som utgångspunkt när den skapar både formen och texturerna.

Resultatet blir en färdig 3D modell som går att exportera till exempelvis en .glb fil. Det är ett kompakt format som fungerar väldigt bra på webben eftersom både modell och texturer kan packas i en enda fil.

Three.js i korthet

Three.js är ett JavaScript-bibliotek som förenklar användningen av WebGL. WebGL är ett lågnivågränssnitt som kommunicerar direkt med enhetens grafikprocessor (GPU) för att rendera avancerad hårdvaruaccelererad 3D-grafik i webbläsaren. WebGL använder normalt enhetens grafikprocessor, men kan i vissa fall även köras via mjukvarurendering om en GPU saknas eller inte är tillgänglig. Man kan tänka på WebGL som den underliggande motorn som utför alla tunga matematiska beräkningar, medan Three.js fungerar mer som en regissör som gör det möjligt att bygga en scen med virtuella kameror, ljus och 3D-objekt på ett mer lättanvänt sätt.

Playground

Här är resultatet. För några år sedan hade det här varit ett betydligt mer tidskrävande projekt. Idag räcker det ofta med några bra verktyg och lite experimenterande.