Spline

Insights

Hoe maak je een moderne UI met Spline

🛠 Frontend development

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

Setup en interface

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.

Spline Setup

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.

Spline New File

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.

Spline Interface

3D objecten

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

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

Animatie

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!

Exporteren

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.

Integratie

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.

Spline Code

Slot

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! 

Kei

Kei

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓

Nx Workspace

🛠 Frontend development

NX workspace: Opzetten met Angular

Nx workspace is een tool om monorepos te builden van elke grootte voor frameworks zoals Angular, React als backend technologieën zoals Next en Express. De belangrijkste doelen van NX zijn het versnellen van de workflow met minimale inspanning en een goede developer experience creeëren. Om deze doelen goed te illustreren kijken we dus best ook even wat de voordelen zijn van het werken met monorepos.