3D beach

Insights

Ontdek extra dimensies op je website

🛠 Frontend development

Sinds Three.js, de welbekende Javascript 3D library, besloten heeft om een React library te maken, is het veel stabieler en vlotter geworden om 3D websites te maken. Hierdoor barst het tegenwoordig online met nieuwe creaties om je site op een innovatieve manier te laten overspoelen met creativiteit

Hoe react het makkelijker maakt

Al voor een langere tijd hou ik me graag bezig met 3D modelling in mijn vrije tijd. Zowel met zelf creaties te maken, als het volgen van andere makers voor inspiratie. Zo heb ik dan ook opgemerkt dat er steeds vaker 3D portfolio websites gemaakt worden zodat deze creators op een innovatieve manier hun werk kunnen voorstellen.

Om dit soort creatieve websites te maken wordt vaak three.js gebruikt. Het is een cross-browser javascript library dat het mogelijk maakt om via WebGL 3D animatie te tonen. Hiermee kan je dan je eigen canvas genereren en eindeloze objecten creëren.

Als je al ervaring hebt met Three.js zal je snel opmerken dat React ervoor zorgt dat het proces veel makkelijker verloopt. Zo lost het namelijk veel van de standaardinstellingen op en maakt het goed gebruik van de React tools. Zo heb je dit voorbeeld waar een standaard box met een standaard materiaal aangemaakt wordt in R3F (React Three Fiber):

Als je al ervaring hebt met Three.js zal je snel opmerken dat React ervoor zorgt dat het proces veel makkelijker verloopt. Zo lost het namelijk veel van de standaardinstellingen op en maakt het goed gebruik van de React tools. Zo heb je dit voorbeeld waar een standaard box met een standaard materiaal aangemaakt wordt in R3F (React Three Fiber). Terwijl dit heel simpel lijkt in React, gebeurt er op de achtergrond al heel wat aanpassingen door de verwerking van three.js naar R3F.

react-three-fiber

Na het installeren van R3F kan je gebruik maken van het Canvas component dat definieert waar je scene gebeurt. Als je al ervaring hebt met 3D constructies kan je vanuit de volgende code afleiden dat een point light gebruikt wordt als lichtweergave op de positie 3 X, 5 Y, 12 Z. Dit is een licht dat vanuit een punt in alle richtingen wordt uitgestraald. Daarnaast wordt er een bol met een rode materiaalkleur toegevoegd op het canvas met zijn standaardwaarden.

react-three-fiber

Zoals je al misschien hebt opgemerkt zijn classes instantiated. Ze kunnen hierdoor one-time constructor arguments en properties ontvangen. De drie argumenten die hier meegegeven worden zijn de breedte, lengte en diepte van het object. De properties kunnen dan andere resultaten geven zoals het wel of niet zichtbaar te maken. De enigste juiste manier om de objecten in te laden is door het declaratief te schrijven. Als je dat niet doet, zullen de properties van het object altijd gerecreerd worden.

Met deze introductie naar React Three Fiber ben je alvast voorbereid om in de wereld van 3D websites te springen. De community van deze library is zeer actief en op de website van three.js staat honderden voorbeelden van wat anderen hiermee bereikt hebben.

🎙

Elke dag komen er nieuwe innovatieve mogelijkheden om je creativiteit in een website te steken.

LanderLander Roozeleer
Lander

Lander

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.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

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.

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. 🤓