Hoe maak je een moderne UI met Spline

Wanneer je surft naar de website van Spline heb je de mogelijkheid om de software te downloaden of te gebruiken in de browser. Nadat je de keuze hebt gemaakt, zal je eerst een account moeten aanmaken om Spline te kunnen gebruiken.

Dan kom je op de startscherm terecht. Er is niet veel te zien: een navigatiemenu, een lege dashboard en enkele bestanden uit de library van Spline, blader eens erdoor om te zien wat de mogelijkheden zijn van deze tool. De andere pagina’s kan je eens rustig bekijken wanneer je tijd hebt. We maken een nieuw bestand door op de blauwe knop in de rechter bovenhoek te klikken.

De interface ziet eruit als volgt:

1. Een overzicht van alle objecten die toegevoegd zijn aan de scène. Objecten kunnen worden hernoemd, gegroepeerd, herschikt, enz…

2. Een menubalk om te kiezen welk type object je wil toevoegen aan de scène met daarnaast knoppen voor een preview van je scène, het exporteren en het afspelen van een eventuele animatie. Hierover zal ik later in de post meer uitleg over geven.

3. De huidige instellingen van de camera.

4. De parameters van een object of die van de omgeving als er geen object is geselecteerd.

Als je in de menubalk op het plus icoontje klikt kan je een keuze maken uit een lijst van beschikbare 2d en 3d vormen. Na je keuze kan het object toegevoegd worden door te klikken en te slepen. Daarna kan je de parameters aanpassen om de gewenste vorm te bereiken. De interessantste parameter voor mij is de “Material”, hiermee kan je de textuur van het object aanpassen. Zo kan je niet enkel de kleur aanpassen, maar ook een gradient laag toevoegen, een glas effect geven, enz. Neem tijd en probeer elke optie eens uit.

Tip: Als je gewenste vorm er niet tussenstaat, kan je ze zelf tekenen met de pen tool (zie menubalk) ! Door te klikken en te slepen kan je organische vormen tekenen. En je kan een 3d object ervan maken door bij de parameters de optie “extrusion” aan te passen.

Tip: Je kan de camera op verschillende manieren bewegen:

1. Option/alt + slepen: van camerahoek veranderen

2. Spatie + slepen: camera bewegen zonder de hoek te veranderen

3. Camera instellingen: blauw = vooraanzicht, rood = zijaanzicht, groen = bovenaanzicht. Je kan ook switchen tussen “Orthographic” en “Perspective”.

Lichtbronnen kunnen op dezelfde manier als 3d objecten toegevoegd worden en parameters zoals kleur, grootte, richting kunnen aangepast worden.

Een andere coole feature is de mogelijkheid om te animeren gekoppeld aan een user event zoals een “hover”. Eerst klik je op het object die je wil animeren. In het rechterveld zie je de parameter “States”, door op het plus icoontje te klikken voeg je een state toe (de base state is het vertrekpunt van de animatie en de state die je aanmaakt is het eindpunt van de animatie). Als “state 1” is aangeduid kan je de parameters zoals schaal, rotatie en positie aanpassen. Nu dat je hebt gekozen hoe de animatie moet eindigen kan een event toegevoegd worden. Onder “States” heb je “Events”. Druk op het plus icoontje en kies het type event. Ik heb voor deze tutorial gekozen voor “Mouse Hover” en bij type transition “Spring”. 

Tip: In dit voorbeeld heb ik maar één state en event toegevoegd, maar het is mogelijk om meerdere states en events aan te maken!

Als je scène klaar is, is het tijd om deze te exporteren om te kunnen gebruiken in je project. Je hebt verschillende opties: als een openbaar url, als een web content of als een afbeelding/video. Wanneer je kiest voor een url, maakt Spline voor jou een unieke link aan waarmee je je opgeslagen scène in de browser kan bekijken. Hierbij heb je ook direct de keuze om een iframe-element te kopiëren. Als je kiest voor web content, download je een folder met daarin een html-, javascript- en json-bestand met de nodige code om je scène te kunnen tonen. Als laatste kan je kiezen voor een afbeelding of video, de formaten zijn: jpg, png, webM, mp4, gif of image sequence.

Tip: Om de interactiviteit te beperken kan je sommige opties uitvinken. Zo kan je bijvoorbeeld “Rotate” uitvinken zodat de gebruiker niet van camerahoek van de scène kan veranderen.

Om de geëxporteerde scène te gebruiken is simpel: voeg de iframe, afbeelding of video toe in je code. Buiten deze tutorial heb ik enkele uren gewerkt aan een redesign van Messenger en in dit voorbeeld heb ik een iframe-element in een div-element geplaatst en in de achtergrond gezet.

Over het algemeen ben ik heel hard onder de indruk van deze tool. Vergeleken met andere 3d programma’s zoals Cinema 4d of Blender ontbreken er wat functionaliteiten, maar voor iemand zonder ervaring met zulke softwares zoals ik is Spline de ideale tool om te beginnen met 3d modellen. Ik kijk uit naar de verdere ontwikkeling van deze tool!