De naam ERIK VAN DE BLAAK staat in veertien chroomletters boven een roze neonraster dat eindeloos naar de horizon loopt, terwijl sterren op de camera af vliegen. Er zit geen video of voorgerenderd beeld in: Three.js 0.160 rekent elk beeld live uit in de browser.
De letters komen uit een lettertype in JSON-formaat (Droid Sans Bold) dat Three.js met de FontLoader laadt. Zolang dat bestand binnenkomt, staat er een laadscherm met INITIALIZING SYSTEM... Elke letter is daarna een eigen TextGeometry van 0,2 diep met een afgeschuinde rand, en rond zijn eigen midden gecentreerd, dus hij draait om zijn eigen as. Het materiaal is een MeshPhysicalMaterial: volledig metaal, licht ruw (0,2), met een laklaag (clearcoat) erover en een zwakke cyaan gloed.
Bij het laden groeien de letters één voor één van niets tot volle grootte, in anderhalve seconde met een verende GSAP-animatie (elastic.out), telkens 0,05 seconde na de vorige. Daarna gaat elke letter op en neer volgens een sinus, met een kleine faseverschuiving per letter, zodat er een golf door de naam loopt. Tegelijk draaien de letters langzaam rond met een lichte schommeling.
De weg is een plat vlak van 80 bij 400 eenheden. Het raster wordt één keer getekend op een canvas van 1024 bij 1024 pixels: zwart, met felroze lijnen (#ff00aa) om de 128 pixels, 4 pixels dik en met een schaduwgloed. Die textuur herhaalt twee keer in de breedte en tien keer in de lengte. Het vlak zelf beweegt niet; de code schuift de textuur elke seconde 0,6 op, en dat geeft de indruk van een weg zonder einde. Het raster geeft zelf licht, en een bloom-nabewerking (UnrealBloomPass, sterkte 1,2, drempel 0) legt daar een gloed omheen. Exponentiële mist laat de verte in het donker verdwijnen, en een cyaan lamp schijnt van onderen de scène in.
Erboven vliegen 3000 sterren, samen één Points-object. Elke frame schuift elke ster een basisstap plus een eigen willekeurige snelheid naar de camera. Is een ster de camera voorbij, dan begint hij opnieuw ver weg op een nieuwe plek. Na elke ronde gaan de bijgewerkte posities opnieuw naar de GPU.
Beweeg je de muis, dan schuift de camera mee: maximaal twee eenheden opzij en een halve omhoog of omlaag. Elke frame legt hij 5 procent van de resterende afstand af, zodat de beweging vloeiend uitloopt, en hij blijft steeds op de letters gericht. De demo luistert alleen naar de muis; op een touchscreen staat de camera stil. Alles staat in één PHP-bestand, met Three.js en GSAP 3.12.5 via een importmap van jsDelivr.
De letters komen uit een lettertype in JSON-formaat (Droid Sans Bold) dat Three.js met de FontLoader laadt. Zolang dat bestand binnenkomt, staat er een laadscherm met INITIALIZING SYSTEM... Elke letter is daarna een eigen TextGeometry van 0,2 diep met een afgeschuinde rand, en rond zijn eigen midden gecentreerd, dus hij draait om zijn eigen as. Het materiaal is een MeshPhysicalMaterial: volledig metaal, licht ruw (0,2), met een laklaag (clearcoat) erover en een zwakke cyaan gloed.
Bij het laden groeien de letters één voor één van niets tot volle grootte, in anderhalve seconde met een verende GSAP-animatie (elastic.out), telkens 0,05 seconde na de vorige. Daarna gaat elke letter op en neer volgens een sinus, met een kleine faseverschuiving per letter, zodat er een golf door de naam loopt. Tegelijk draaien de letters langzaam rond met een lichte schommeling.
De weg is een plat vlak van 80 bij 400 eenheden. Het raster wordt één keer getekend op een canvas van 1024 bij 1024 pixels: zwart, met felroze lijnen (#ff00aa) om de 128 pixels, 4 pixels dik en met een schaduwgloed. Die textuur herhaalt twee keer in de breedte en tien keer in de lengte. Het vlak zelf beweegt niet; de code schuift de textuur elke seconde 0,6 op, en dat geeft de indruk van een weg zonder einde. Het raster geeft zelf licht, en een bloom-nabewerking (UnrealBloomPass, sterkte 1,2, drempel 0) legt daar een gloed omheen. Exponentiële mist laat de verte in het donker verdwijnen, en een cyaan lamp schijnt van onderen de scène in.
Erboven vliegen 3000 sterren, samen één Points-object. Elke frame schuift elke ster een basisstap plus een eigen willekeurige snelheid naar de camera. Is een ster de camera voorbij, dan begint hij opnieuw ver weg op een nieuwe plek. Na elke ronde gaan de bijgewerkte posities opnieuw naar de GPU.
Beweeg je de muis, dan schuift de camera mee: maximaal twee eenheden opzij en een halve omhoog of omlaag. Elke frame legt hij 5 procent van de resterende afstand af, zodat de beweging vloeiend uitloopt, en hij blijft steeds op de letters gericht. De demo luistert alleen naar de muis; op een touchscreen staat de camera stil. Alles staat in één PHP-bestand, met Three.js en GSAP 3.12.5 via een importmap van jsDelivr.
Meer werk
Operation Iron Thunder
Een WO2-tankgame in de browser: een Sherman met vijf bemanningsleden in Normandië, juli 1944. Uitstappen, vechten, rusten in de kerk. three.js.
Interactive World Globe
Een 3D-wereldbol van 2000 lichtpunten, gebouwd met Three.js. Kies Nederland, Suriname of Engeland en de bol draait naar dat land, met een korte tekst erbij.
The Art of Eight Limbs — Muay Thai, Muay Boran en Lethwei
Geïllustreerd eerbetoon aan Muay Thai, Muay Boran en Lethwei: acht geschilderde scènes, logo's in Thais en Birmees schrift, dieren en heilige tatoeages.