Autor: Theodore
Live ausprobieren Über dieses Projekt
Playroom ist eine Wohnzimmer-Arcade, die im Browser läuft. Die Seite öffnet sich auf einem Spieltisch im Stil von 1989 – Röhrenmonitor, Konsole, Controller und eine bereits eingesteckte Snake-Cartridge –, den man drehen und in Ruhe betrachten kann; ein Klick auf die Konsole oder POWER ON fährt die Kamera auf den Bildschirm zu, durch die Röhre hindurch und in eine Bibliothek mit drei Cartridges.
Alle drei Spiele sind Playroom-Originale: Bei Snake geht es um rhythmisch verkettete Bissen, Breakout bringt drei Ziegelstufen und Power-ups, und Blocks macht das Stapeln mit einem Landungsgeist und Sieben-Steine-Beuteln vorhersehbar. Kein Konto, keine Updates, keine Speicherstände – Highscores bleiben in deinem Browser, und Musik und Effekte lassen sich mit einer Taste abschalten.
Das gesamte Projekt hängt nur von Three.js und Vite ab, ohne Backend und ohne Umgebungsvariablen; sechs GLB-Hardwaremodelle und ein einziges Tripo-Gesichtszeichen-Decal bilden die komplette Asset-Liste. Steht kein WebGL zur Verfügung, übernimmt ein Textmenü, und die Spiele bleiben vollständig spielbar.
Highlights
- Ziehe, um das gesamte Wohnzimmer-Setup zu umkreisen – Röhrenmonitor, Konsole, Controller und Cartridge –, und klicke dann auf die Konsole oder POWER ON: Die Kamera fährt auf den Bildschirm zu und taucht durch den Röhrenmonitor in die Cartridge-Bibliothek ein.
- Drei Cartridges, drei originale Spiele: Snake mit einer 5×-Kette innerhalb von fünf Sekunden und goldener Frucht für 50 Punkte; Breakout mit drei Ziegelstufen sowie den Power-ups W (breiteres Paddle) und 3 (dreifacher Ball); Blocks mit Sieben-Steine-Beuteln, einem Landungsgeist und Kombo-Boni.
- Pfeiltasten / WASD und Leertaste am Desktop, P für Pause und ESC zum Verlassen, Touch-Steuerung auf dem Smartphone; Highscores bleiben ausschließlich in deinem eigenen Browser.
- Jedes Spiel hat seine eigene Chiptune-Schleife und eigene Soundeffekte, in den Menüs läuft der CC-BY-4.0-Track „Trip Of Your Smile“; steht kein WebGL zur Verfügung, weicht die Arcade auf Textschaltflächen aus und bleibt spielbar.
Technische Analyse
3D-Assets · Sechs GLB-Hardwareteile, zur Laufzeit neu gebunden
Röhrenmonitor, Konsole, Controller und drei Cartridges werden als sechs GLB-Dateien ausgeliefert (exportiert mit dem GLTFExporter von Three.js, Low-Poly mit je 128–384 Dreiecken). GLTFLoader lädt sie parallel, und jede Instanz ist ein tiefer Klon: Die beim Export gesetzten Zentrierungs-Offsets werden auf null gesetzt, Materialien pro Instanz geklont, und jedes Mesh wirft und empfängt Schatten. Die Etikettplatte der Cartridge wird über ihren exportierten lokalen Offset gefunden, cartridge-label benannt und auf eine per Canvas gemalte Cover-Textur umgemappt; das Pixel-Maskottchen wird aus benannten Knoten gerigged – mascot-body, beide Arme, Antenne und ein Logo-Decal mit dem Tripo-Gesichtszeichen, bei dem Tone Mapping und Depth Write deaktiviert sind, damit das flache Decal scharf bleibt.
Die Asset-Schicht hält außerdem einen Austauschplatz bereit: Zeigt das Feld controller in public/models/manifest.json auf eine beliebige GLB-Datei, skaliert fitProp sie anhand der Bounding Box auf 2,54 Einheiten Breite, setzt sie auf den Boden, zentriert sie und übernimmt die Position des ursprünglichen Controllers – ein eigener (zum Beispiel mit Tripo generierter) Controller lässt sich einsetzen, ohne eine Zeile Code anzufassen.
Bildschirm und Etiketten · Canvas-Texturen als UI
Die Szene lädt keine einzige externe Textur. Die Bildröhre ist eine 1024×700 große CanvasTexture: Der Ruhebildschirm (PLAYROOM SYSTEM / PLAYER ONE / PRESS START) wird Bild für Bild auf einem 2D-Kontext gezeichnet und zugleich als map und emissiveMap verwendet, damit die Röhre leuchtet. Jedes Cartridge-Cover ist ein eigenes 640×610-Canvas, das zur Laufzeit aus Farbe, Tintenfarbe, Nummer und Slogan des jeweiligen Spiels im Katalog gemalt wird – Pixelgrafik und Titelschrift inklusive.
Beim Einschalten tauscht ein Bildschirm-Lebenszyklus-Controller das Material gegen eine Datenstrom-Textur, während die Kamera auf einer Kugelbahn um den Bildschirmmittelpunkt zur Vorderseite der Röhre zurückschwenkt, heranfährt und beim Durchqueren des Glases zur Bibliothek schneidet; unter prefers-reduced-motion entfällt die gesamte Fahrt zugunsten eines direkten Wechsels.
Interaktion · Zeigergesten, Raycast-Picking und filmische Kamerafahrt
In der Schreibtischansicht ist ein und dieselbe Zeigersequenz zugleich Orbit-Drag und Klick: Der Gesten-Controller merkt sich theta / phi beim Drücken, wertet Bewegung über einem Schwellwert als Ziehen und alles andere als Klick. Treffer werden mit einem Raycaster aufgelöst – am Schreibtisch wirkt das gesamte Setup als Einschaltknopf, in der Bibliothek wandert der Treffer die Elternkette hinauf bis zu dem Knoten, der eine gameId trägt. Beim Loslassen friert der Orbit nie ein; ein filmischer Controller blendet den manuellen Versatz zurück in ein langsames automatisches Schwingen.
Wird eine Cartridge angefahren oder fokussiert, hebt sie sich um 0,24, neigt sich mit leichtem Rollen nach vorn und schaltet das Pixel-Maskottchen in die Pose des jeweiligen Spiels, während jede Cartridge in ihrer eigenen Sinusphase wippt. Jede Interpolation in der Render-Schleife nutzt das bildratenunabhängige Easing 1 − e^(−5·dt), sodass langsame Frames nie zu Sprüngen führen.
Spiele und Audio · Eigenständige 2D-Sessions und synthetisierter Klang
Die drei Spiele sind reine Logikmodule (create / step / input); eine Session-Schicht zeichnet sie auf ein eigenständiges 2D-Canvas – 480×480 für Snake und Breakout, 300×540 für Blocks. requestAnimationFrame wird nur im laufenden Zustand angefordert, Pause stoppt die Frames also buchstäblich, und eine Obergrenze von 250 ms pro Schritt verhindert Tunneling nach einem Tab-Wechsel. Spielereignisse (Fressen, Ziegel, Reihe, Power-up, Level) speisen eine Partikeleffekt-Schicht und werden nach Priorität zu einem einzigen Sound-Cue zusammengefasst.
Sämtlicher Klang wird live mit Web-Audio-Oszillatoren synthetisiert: eine 16-Schritte-Chiptune-Melodie pro Spiel (82–120 BPM) und gut zwanzig Cues aus Frequenzgleitern plus Hüllkurven, begrenzt auf 64 Stimmen. Der Menütrack ist eine CC-BY-4.0-Aufnahme, die bei fehlgeschlagenem Download auf die synthetisierte Schleife zurückfällt; bei verstecktem Tab wird der Ton stummgeschaltet, und der Audio-Kontext wird erst nach dem ersten Klick entsperrt. Highscores landen im localStorage und fallen auf den Arbeitsspeicher zurück, wenn der Speicher verweigert wird – ein fehlgeschlagenes Speichern unterbricht nie ein Spiel.
