Ontdek extra dimensies op je website

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):

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.