Hoe maak je een moderne UI met Spline

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.

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!