So machst du ein 3D-Browserspiel

Beschreib die Welt, die Kamera und die Steuerung, halte den Umfang klein und bring eigene Modelle als GLB-Dateien mit; Go Bananas baut das Spiel mit three.js und fügt eine Handy-Steuerung hinzu.

Ein 3D-Spiel läuft im Browser wie jede andere Webseite, gezeichnet mit WebGL. Go Bananas baut 3D-Spiele mit three.js, der meistgenutzten 3D-Bibliothek im Web, du kannst also ein Rennspiel, ein Labyrinth oder eine kleine offene Welt beschreiben und ein paar Minuten später spielen. Diese Anleitung behandelt, was 3D schwieriger macht als 2D, wie du ein 3D-Spiel anfragst, wie du eigene 3D-Modelle und gescannte Szenen verwendest und wie es auf Handys flüssig läuft.

Warum 3D schwieriger ist als 2D

Drei Dinge werden schwieriger, sobald eine Dimension dazukommt:

Die Kamera. In 2D ist der Bildschirm die Welt. In 3D entscheidest du, wo die Kamera sitzt: hinter der Spielfigur, über der Szene oder im Kopf der Spielfigur. Eine schlechte Kamera macht ein gutes Spiel unspielbar.
Steuerung. Bewegung in 3D braucht sowohl Fortbewegung als auch Umsehen. Auf einer Tastatur sind das WASD oder Pfeiltasten plus Maus. Auf einem Handy sind es zwei Daumen auf einem flachen Bildschirm.
Leistung. Jeder Frame zeichnet jedes sichtbare Objekt. Detaillierte Modelle, große Texturen und viele Lichter bremsen ein Spiel, und Handys werden zuerst langsam.

Gute 3D-Spiele halten das im Griff: eine klare Kamera, eine einfache Steuerung und eine Welt in der Größe, die ein Handy zeichnen kann.

So macht Go Bananas 3D-Spiele

Wenn du ein 3D-Spiel anfragst, schreibt die KI es mit three.js, mit Loadern für 3D-Modelldateien. Sie folgt Regeln, die bei 3D wichtig sind:

Die Handy-Steuerung ist eingebaut. 3D-Spiele bekommen links auf dem Bildschirm einen virtuellen Joystick zum Bewegen, rechts Umsehen durch Ziehen und Aktions-Buttons von etwa 60 Pixeln Breite, damit Daumen sie treffen.
Tasten scrollen die Seite nicht. Pfeiltasten und Leertaste gehen an das Spiel, statt den Browser zu scrollen.
Das Spiel füllt den Bildschirm und passt sich an, wenn das Fenster oder das Handy gedreht wird.
Screenshots funktionieren. Das Vorschaubild des Spiels wird ein paar Sekunden nach dem Start des ersten Spiels aus der 3D-Szene aufgenommen.
Modelle lassen sich im Editor verschieben. Der Editor hat einen Tab 3D Position (3D-Position), in dem du die Modelle in der Szene platzieren kannst.

Ein 3D-Spiel anfragen

Nenn die Kamera, die Steuerung und das Ziel. Zum Beispiel:

Ein 3D-Spiel in der Third-Person-Ansicht, in dem du einen kleinen Roboter spielst, der eine schwebende Insel erkundet. Die Kamera folgt hinter dem Roboter. Sammle 10 leuchtende Kristalle, bevor die Sonne in 3 Minuten untergeht. Low-Poly-Stil mit sanften Farben.

Ein 3D-Labyrinth aus der Ego-Perspektive. Die Wände sind Hecken, der Boden ist Gras. Finde den Ausgang, bevor der Timer abläuft. Zeig einen kleinen Kompass, der zum Ausgang zeigt.

Ein paar Gewohnheiten helfen:

Wähl eine Kamera. „Kamera folgt von hinten“, „von oben“, „Ego-Perspektive“.
Halte die Welt klein. Eine Insel, eine Arena, eine Strecke. Ein fertiges kleines 3D-Spiel schlägt ein unfertiges großes, und jedes Spiel hat ein Größenbudget.
Wähl einen einfachen Stil. Low-Poly und flache Farben sehen sauber aus und laufen schnell. Wünsch dir „realistisch“ nur, wenn du eigene Modelle oder Szenen mitbringst.
Sag, was der Spieler alle paar Sekunden tut. Sammeln, ausweichen, rasen, zielen.

Eigene 3D-Modelle verwenden

Du kannst eigene Modelle hochladen und in jedem Spiel verwenden, das du machst. Lade sie im Erstellen-Bereich hoch (über den Button 📎 oder indem du die Datei in den Chat ziehst), im Tab Assets mit Upload Asset (Asset hochladen) oder im Editor. Du brauchst ein bestätigtes Konto.

Format	Was Go Bananas damit macht
GLB	Bleibt, wie es ist. Empfohlen.
glTF	Wird in eine einzelne GLB-Datei gepackt. Es muss eigenständig sein oder als ZIP mit seinen Dateien hochgeladen werden.
FBX	Wird in GLB umgewandelt. Texturen werden auf höchstens 512 mal 512 Pixel verkleinert; Animationen bleiben erhalten.
OBJ	Bleibt, wie es ist, aber ohne Materialien oder Texturen.
ZIP	Ein Paket aus einem Modell mit seinen Texturen und Buffern. Ein Modell wird übernommen.

GLB ist das Format der Wahl. Es enthält Mesh, Materialien, Texturen und Animationen in einer Datei, und die Website analysiert es beim Hochladen. Sie liest die Namen der Animationen, die Höhe und die Ausrichtung des Modells und berechnet daraus Skalierung, Drehung und Bodenversatz, damit das Modell aufrecht und in einer sinnvollen Größe steht. Diese Informationen gehen an die KI, damit dein Modell richtig herum, im richtigen Maßstab und auf dem Boden erscheint.

Um ein Modell zu verwenden, tippe @ in das Feld zum Erstellen oder Ändern und wähl es aus. Der Name des Modells steht in Anführungszeichen:

Mach "knight" zur Spielfigur. Wenn der Spieler die Leertaste drückt, spiel die Angriffsanimation des Ritters ab.

Im Code findet ein Spiel dein Modell unter window.GAME_ASSETS.models['knight'].url, wobei der Name der Dateiname ohne Endung ist. Wenn du die Datei in deinen Assets umbenennst, ändert sich dieser Name.

Limits: Jeder Upload darf bis zu 200 MB groß sein, und der Speicher deines Kontos fasst 100 MB bei einem kostenlosen Konto oder 1 GB bei Pro. Du kannst bis zu 20 Dateien pro Stunde hochladen.

Fotorealistische Szenen mit Gaussian Splats

Gaussian Splats sind eine neuere Art von 3D: Statt aus Dreiecken besteht eine Szene aus einer Wolke von Millionen weicher farbiger Punkte, die aus echten Fotos erfasst wurden. Sie sehen fotorealistisch aus, vor allem bei Orten und Objekten, die aus dem echten Leben gescannt wurden.

Go Bananas nimmt Splats auf drei Arten an:

PLY-Dateien aus Tools zur Splat-Aufnahme. Sie werden auf 500.000 Punkte ausgedünnt und in ein schnell ladendes Format gepackt.
SPZ-Dateien, ein kompaktes Splat-Format. Sie werden auf 300.000 Splats ausgedünnt.
Ein Foto. Lade im Erstellen-Bereich ein JPG oder PNG hoch und wähle Turn into 3D (In 3D umwandeln). Die Website macht aus dem einzelnen Foto eine Splat-Szene.

Du kannst Splats und Modelle im 3D-Viewer der Website ansehen, bevor du sie verwendest. Splat-Szenen sind tolle Kulissen: ein gescannter Raum für ein Escape-Spiel, eine echte Straße für eine Verfolgungsjagd. Sie haben keine Kollisionsformen wie modellierte Level, also beschreib, wo der Spieler laufen kann, oder setz einfache unsichtbare Wände um die Spielfläche.

3D-Spiele auf Handys schnell halten

Auf Handys bekommen 3D-Spiele zuerst Probleme. Diese Tipps halten dein Spiel flüssig:

Behalte die Polygonzahl im Blick. Eine Low-Poly-Figur aus ein paar Tausend Dreiecken reicht völlig. Szenen aus vielen detaillierten Modellen summieren sich schnell.
Halte Texturen klein. 512 oder 1024 Pixel pro Seite reichen für die meisten Spielobjekte. FBX-Uploads werden für dich auf 512 Pixel verkleinert; bei GLB verkleinere die Texturen vor dem Hochladen.
Nutz wenige Lichter und Schatten. Jedes Licht und jeder Schatten kostet Zeichenzeit. Ein Sonnenlicht mit einfachen Schatten sieht meist gut aus.
Verwende Modelle mehrfach. Zwanzig Kopien eines Baums sind günstiger als zwanzig verschiedene Bäume.
Vorsicht mit Splats. Selbst auf 300.000 oder 500.000 Punkte ausgedünnt ist eine Splat-Szene schwer. Eine Splat-Szene pro Spiel ist eine gute Grenze, und es lohnt sich, auf einem älteren Handy zu testen.
Teste auf einem echten Handy. Öffne das Spiel auf deinem Handy und probier die Steuerung mit den Daumen aus. Wenn sich Joystick oder Buttons beengt anfühlen, wünsch dir, dass sie größer werden.

Häufige 3D-Probleme beheben

Das Modell ist zu groß, zu klein oder liegt. Lade es als GLB hoch, damit die Website es vermessen kann, oder sag der KI: „Skalier "knight" auf die Hälfte seiner Größe und stell ihn aufrecht hin.“
Das Modell ist unsichtbar. Vielleicht steckt es im Boden oder ist hinter der Kamera. Frag: „Verschieb "knight" so, dass er vor der Kamera auf dem Boden steht“, oder nutz den Tab 3D Position.
Das OBJ hat keine Farben. OBJ-Dateien kommen ohne Materialien an. Wandle das Modell in GLB um und lade es noch einmal hoch.
Das Spiel ruckelt auf dem Handy. Wünsch dir weniger Objekte, weniger Details oder keine Schatten auf Handys.