Eindeutig eine der coolsten 3D-Websites überhaupt

 (bruno-simon.com)
30 Punkte von GN⁺ 2025-12-10 | 4 Kommentare | Auf WhatsApp teilen
  • 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

Verwandte Beiträge

4 Kommentare

 
m00nlygreat 2025-12-10

Ist doch einfach nur ein Spiel ..
 
wedding 2025-12-10

Der Entwicklungsleiter, der meine Meinung ignorierte, für das Kernprojekt des Unternehmens tjs zu verwenden, und stattdessen den Einsatz von babylon.js durchsetzen wollte ... Der Entwicklungsleiter, der für seine Entscheidung nicht einmal Verantwortung übernahm, sondern sogar Firma und Personal abzog und eine neue Firma gründete ... Sie leben gut, nicht wahr?
 
xguru 2025-12-10

Ich hatte die Seite zum Testen nur kurz offen … und schon hebt mein M1 MacBook ab. Aber beeindruckend ist sie trotzdem.
 
GN⁺ 2025-12-10
Hacker-News-Kommentare
  • Der Lade-Kreis war schon voll, aber tatsächlich dauerte es noch ein paar Sekunden mehr
    Nach 1–2 Aktualisierungen lief es gut, und insgesamt ist es großartige Arbeit
    Es wäre nur schön, wenn man noch weiter herauszoomen könnte. Lob an Bruno
  • Für Leute, bei denen das Laden langsam ist: Das ist eine Portfolio-Website, auf der man mit einer jeepähnlichen Karre in einer gemütlichen Spielwelt mit AWSD-Steuerung herumfährt
    Es gibt kleine Tempel-Objekte, die jeweils ein Social-Media-Profil symbolisieren; wenn man mit dem Auto dagegenfährt, kippen sie um, aber die Links bleiben weiterhin anklickbar
    Es gibt auch globalen Status, etwa dass beim Hineinfahren in ein Portal der Zähler für „Opfer für den Gott des Chaos darbringen“ steigt
    Insgesamt ist der Art-Style konsistent, und nach etwa 5 Minuten Erkunden wirkte das Ganze ziemlich ausgereift
    Allerdings passt es wohl eher zu einer sehr gut gemachten Portfolio-Website als zu „der coolsten 3D-Website“, wie der HN-Titel behauptet
    • Ich habe es auf dem iPhone per Touch gesteuert, und es fühlte sich an wie Genshin Impact
    • Es funktionierte überraschend gut sogar im ddg-Browser auf iOS. Ziemlich beeindruckend
    • Ich wollte fragen, ob AWSD ein Tippfehler für WASD ist
  • Wenn ich 25 Jahre zurückgehen würde, hätte mein 15-jähriges Ich vermutlich Dutzende Stunden in so ein „Spiel“ gesteckt
    So war es auch bei dem Gratis-Spiel Chex Quest, das früher in Müslipackungen lag
    Heute habe ich mir die Seite etwa 30 Sekunden angesehen, „cool“ gedacht und sie dann sofort wieder geschlossen
    Wahrscheinlich liegt es an (A) einer veränderten Bewertung von Zeit, (B) gestiegenen Ansprüchen an Immersion in Spielen oder (C) daran, dass ich ohnehin schon zu viel Zeit mit Spielen verbracht habe
    • Ich mochte ChexQuest auch wirklich sehr. Ich habe es vor Kurzem sogar noch einmal gespielt und bei RE-PC in Seattle sofort eine CD für 1 Dollar gekauft, als ich sie gesehen habe
    • Früher war der Zugang zu Spielen wohl viel geringer als heute. Jetzt gibt es viel reichhaltigere Spiele wie Lonely Mountain: Downhill
    • Ich habe heutzutage oft ein Schuldgefühl, wenn ich nichts tue, und am Ende bekomme ich deshalb gar nichts richtig hin
    • Am Ende liegt es vielleicht einfach daran, älter geworden zu sein
    • Diese Seite erinnert mich an The Messenger, das früher einmal auf HN war. Das gefällt mir vielleicht sogar besser
  • Die Seite ist cool, aber nicht innovativ
    In den letzten 10 Jahren gab es unzählige three.js-/babylon.js-Demos, und das hier liegt ungefähr in den oberen 10 %
    Es macht Spaß und ist hochwertig, aber es bringt nichts Neues und ist ineffizient in der Informationsvermittlung
    Verglichen mit Indie-3D-Spielen ist es in Sachen Ausgereiftheit immer noch ein gutes Stück entfernt
    • Mein Browser-Tab ist abgestürzt
    • Der OP hat nicht „am innovativsten“, sondern die „coolste“ Website gesagt. Ich würde gern ähnliche Demos auf vergleichbarem Niveau sehen, falls du welche teilen kannst
  • Brunos Threejs-Kurs ist hervorragend. Ich bin gerade bei etwa zwei Dritteln, und er ist systematisch aufgebaut und gut dokumentiert
    Wenn die Empfehlung eines threejs-Anfängers etwas zählt: klare Empfehlung
  • In Chrome funktionierte es nicht und der Tab fror ein
    • Bei mir lief es in Chrome auf W11 und MacOS 15.7.2 problemlos
    • In Firefox unter Linux lief es ebenfalls perfekt
    • In Chrome unter Linux ist die WebGPU-Unterstützung deaktiviert. Siehe Dokument zum Implementierungsstatus
    • In Edge hing es kurz, kam dann aber zurück und zeigte die 3D-Szene an
    • Unter Windows lief es in Chrome Version 142.0.7444.177 ohne Probleme
  • Ich war überrascht, dass es auch auf Mobilgeräten gut funktionierte
    Allerdings tauchte beim Fahren mit dem Finger auf iOS oft das Long-Press-Menü auf, was die Immersion störte
  • Es war wirklich kaum zu glauben, wie spaßig und originell die Seite war
    Man merkte die Liebe zum Detail und den Spielspaß, und ich habe mit meinem Sohn das Renn-Minispiel gespielt
    Ich habe mich gefragt, wie Leute auf 20 Sekunden kommen. Gibt es vielleicht einen Speed-Boost?
    • Die Umschalttaste ist der Boost. Auf der Tastatur in der Nähe des Startpunkts sieht man die Steuerung
  • Der Kurs ist großartig, aber diese Website löst bei mir nicht dieselbe Begeisterung aus
    Ich finde, der wahre Wert einer Technik liegt darin, ob man mit ihr Dinge tun kann, die vorher nicht möglich waren
    Wenn ein Mensch aus der Steinzeit eine Stahlaxt entdeckt, ist zum Beispiel nicht die Axt selbst, sondern die Metallurgie das Entscheidende
    Genauso sind wichtiger als Bitcoin die kryptografischen Techniken, und wichtiger als threejs ist, was man damit auf neue Weise erschaffen kann
    Persönlich habe ich das Gefühl, dass man mit threejs, react-three-fiber, Shadern usw. noch sehr viel mehr machen kann
    Für mich bedeutet „cool“, dass es einen die Welt anders sehen lässt
    Als Beispiel würde ich diese CodePen-Demo nennen
  • Es ist zwar cool, aber die UX als Website ist nicht besonders gut
    Ich hatte eine Innovation im Erkundungserlebnis erwartet, die den Einsatz von 3D rechtfertigt, und genau das war enttäuschend