Insights
Ontdek extra dimensies op je website
- 0 minuten leestijd
- 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.
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.
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.
Op zoek naar inspiratie?
Wij zorgen voor gepast advies op het vlak van frontend development.