Kursprojekt: Transformhelper – Egen hjälpklass till Three.js (WebGL)

Three.js är ett JavaScriptbibliotek för att skapa och visa 3D-datorgrafik. Källkoden för Three.js finns tillgänglig på GibHub för andra programmerare att använda – samt bidra till utveckligen av biblioteket. Som projektarbete i kursen TNM061 arbetade jag, Erik Åkesson, Emma Nilsson och Tobias Olsson för att skapa ett bidrag till kodbasen.

I Three.js finns olika hjälpverktyg som visualiserar vad och varför något händer i en scen. Exempelvis fanns hjälpverktygen Axishelper och Spotlighthelper tillgängliga redan. En Transformhelper, som vi kom att kalla vår helper, sakandes. Vi bestämde att syftet för en sådan helper skulle vara att visualisera vilka transformationer som tillämpats för ett objekt. Detta skulle vara användbart i t ex en situation när man inte förstår varför ett objekt roterar på ett oönskat sätt. Med vår helper skulle det bli tydligt vad som försigår, kanske att objektet i fråga är ett child-object till ett annat objekt som i sin tur roterar.

Exempel på en helper som fanns redan sen innan ( Spotlighthelper )
Här visas hur vår helper genom att rita ut färgstarka pilar, linjer och roterande kulor för att visualisera transformationerna på det mellanstora objektet C. Slutsatser som kan dras är att C roterar runt y-axeln – både runt den lokala axeln men även som i en omloppsbana då C även äver en translation + rotation från det centrala objektet. Vi kan även se att objektet C skalas ned i y-led och skalas upp i x-led.

Det var en rolig och nyttig utmaning att anpassa egen kod till ett redan existerande API. Efter projektet sa vi att vi skulle ta tag i att pusha upp koden till den officiella kodbasen – när vi städat upp lite så koden är effektiv, buggfri och läsbar, det är väl snarare den uppgiften vi har pushat upp lite 😉

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *