- Eine 3D-Portfolio-Website des Webentwicklers Bruno Simon, die eine interaktive Umgebung bietet, in der Nutzer mit einem Auto fahren und die Welt erkunden
- Auf Basis von Three.js aufgebaut und mit Echtzeit-3D-Rendering umgesetzt, das sowohl WebGL als auch WebGPU nutzt
- Die Website enthält spielerische Elemente wie ein Achievement-System, geheime Elemente und die Besuchernachrichten-Funktion (Whisper)
- Der komplette Code und die Blender-Dateien sind auf GitHub unter der MIT-Lizenz veröffentlicht, die Musik kann unter der CC0-Lizenz frei genutzt werden
- Als Beispiel für die Verbindung von Webtechnologien und kreativer Interaktion zeigt sie die Möglichkeiten von 3D-Web-Erlebnissen
Überblick über Bruno Simons 3D-Portfolio
- Ein interaktives Portfolio, in dem man eine webbasierte 3D-Welt erkundet und dabei die Projekte und Experimente des Erstellers erlebt
- Nutzer können ein Auto steuern, sich durch den virtuellen Raum bewegen und mit verschiedenen Objekten interagieren
- Der Satz „Don’t break anything!“ schafft eine spielerisch-lockere Entdeckeratmosphäre
- Unterstützt werden sowohl Tastatursteuerung mit WASD, Pfeiltasten, Leertaste, Enter usw. als auch Touch- und Gamepad-Eingaben
- Es gibt verschiedene Steuerungsfunktionen wie Fahren, Springen, Bremsen, Booster, Hupe und Federung
Spielerische Elemente und Achievement-System
- Die Website enthält 38 Achievements, die durch bestimmte Aktionen freigeschaltet werden können
- Beispiele: „Traveler“ (alle Bereiche besucht), „Cookie Clicker“ (1000 Cookies akzeptiert), „Flip of faith“ (erfolgreicher Backflip) usw.
- Enthalten sind verschiedenste Bedingungen wie Fahrstrecke, Wetter-Erlebnisse oder das Zerstören explosiver Kisten
- Zeit bis zum Achievement und Fortschritt werden in Echtzeit angezeigt, außerdem gibt es eine serverseitige Rangliste (Leaderboard)
- Ist der Server offline, können Punkte allerdings nicht gespeichert werden
Whisper- und Community-Funktionen
- Besucher können über die Whisper-Funktion kurze Nachrichten hinterlassen
- Maximal 30 Zeichen, pro Nutzer ist eine Nachricht möglich
- Wenn neue Nachrichten hinzukommen, werden ältere gelöscht
- Beleidigungen sind verboten, außerdem kann eine Länderflagge ausgewählt werden
- Ist der Whisper-Server offline, ist die Nachrichtenfunktion deaktiviert
Tech-Stack und Open-Source-Aufbau
- Das 3D-Rendering wurde mit Three.js umgesetzt
- Three.js ist eine von mr.doob entwickelte Bibliothek und unterstützt dank TSL (Three.js Shading Language), das von Sunag ergänzt wurde, sowohl WebGL als auch WebGPU
- Als Physik-Engine kommt Rapier zum Einsatz, für Audio Howler.js, bei den Schriftarten werden Amatic SC und Nunito verwendet
- Der gesamte Quellcode ist auf GitHub (brunosimon/folio-2025) veröffentlicht und steht unter der MIT-Lizenz
- Blender-Dateien sind ebenfalls enthalten und können frei angepasst und zu Lernzwecken verwendet werden
- Der Server-Code ist aus Sicherheitsgründen nicht öffentlich, das Portfolio funktioniert jedoch auch ohne Server
Musik und zusätzliche Materialien
- Die Hintergrundmusik wurde von Kounine speziell für das Portfolio produziert
- Sie wird unter der CC0-Lizenz veröffentlicht und kann frei heruntergeladen und wiederverwendet werden
- Bereitgestellt im GitHub-Repository unter dem Pfad
/static/sounds/musics
- Über den Online-Kurs Three.js Journey werden außerdem Lernmaterialien zu Three.js angeboten
- Behandelt wird der gesamte Prozess der Erstellung von 3D-Webprojekten mit Three.js
- In einer YouTube-Devlog-Serie wird der Entwicklungsprozess des Portfolios dokumentiert
- Auch nach der Fertigstellung wird weiter an dem letzten Video gearbeitet
Gesamte Bedeutung
- Bruno Simons Portfolio ist ein Beispiel für die Verbindung von Webtechnologien, spielerischer Interaktion und künstlerischem Ausdruck
- Durch Open Source und freie Lizenzen kann es als 3D-Webprojekt zum Lernen und Wiederverwenden genutzt werden
- Als praktisches Beispiel für das Three.js-Ökosystem und WebGPU-basiertes Rendering zeigt es die Richtung der nächsten Generation von Webgrafik
Noch keine Kommentare.