Spielerando

Three.js-Spiel mit KI: Gib ihr die aktuelle Doku

Bei einem Three.js-Spiel mit KI gibst du deiner KI zuerst die Anweisungen, die die Bibliothek selbst für KI-Werkzeuge bereitstellt, denn sonst schreibt sie womöglich veralteten Code. Three.js zeichnet 3D im Browser, du musst also auch früh entscheiden, wie Dinge aneinanderstoßen.

Was three.js ist und was nicht

Die GitHub-Seite nannte es am 2. November 2026 eine JavaScript-3D-Bibliothek und nennt als Ziel eine einfache, schlanke, browserübergreifende 3D-Bibliothek für alle Zwecke. Sie steht unter MIT-Lizenz. Three.js bringt Szene, Kamera, Licht und Objekte auf eine Webseite. Physik oder Spiele erwähnt die Seite nicht, und das sagt schon einiges.

Eine Engine nimmt dir viel vom Spiel ab. Bei three.js schreibst du, oder vielmehr deine KI, vieles selbst: Bewegung, Kollisionen, Menüs, Level. Dafür ist dein Spiel eine Webseite, die sich mit einem Klick öffnet, ohne großes Programm drumherum.

Für ein großes 3D-Spiel mit Figuren und Welten erspart dir eine Engine viel Ärger. Für eine eigenwillige kleine Idee, die jeder per Link öffnen kann, ist three.js wunderbar. Unser 3D-Ratgeber zeigt, wie du in beiden Fällen erst mit Kisten arbeitest.

Warum alter Code die erste Falle ist

Three.js gibt es schon lange. Entsprechend viel alter Beispielcode existiert, und deine KI hat ihn gelesen. Die Datei des Projekts für KI-Werkzeuge unter threejs.org/docs/llms.txt enthält einen Abschnitt „Instructions for Large Language Models“. Er verlangt Import Maps, einen modernen Weg, die Bibliothek zu laden, und markiert ein altes Lademuster als falsch. Außerdem nennt er WebGLRenderer als Standard für breite Browser-Unterstützung und verlangt die neueste Version.

Gib deiner KI also diese Adresse. Viele Coding-Werkzeuge können sie öffnen. Kann deins das nicht, öffne sie selbst und füge den Text ein.

Spielerando hilft bei einer anderen Frage, nämlich wie sich eine Mechanik verhalten sollte: Es gibt deiner KI über eine MCP-Verbindung Baupläne, fertigen Code und ein Wiki. Es braucht ein kostenloses Konto mit Google oder E-Mail und sieht sich dein Spiel oder deinen Code nicht an (Details).

Die frühe Entscheidung: Wie stoßen Dinge zusammen?

Three.js zeichnet Dinge, hält sie aber nicht davon ab, durcheinander hindurchzugehen. Dafür hast du drei Wege.

Weg Gut für Preis
Einfache eigene Regeln Boote im Kanal, Autos auf der Strecke, alles auf einem flachen Weg Du musst jeden Fall bedenken
Eine Physik-Bibliothek Stapeln, Kippen, Dinge, die abprallen Mehr zu laden und mehr, was schiefgehen kann
Eine Spiele-Engine Vieles davon zugleich Du verlässt three.js

Paper Boat Canal ist ein erfundenes Spiel: Du steuerst ein gefaltetes Papierboot durch einen Kanal, und jeder Stoß gegen die Wand weicht es auf. Hier zählen nur die Wände, der erste Weg reicht also völlig. KI-Werkzeuge greifen trotzdem oft zu einer Physik-Bibliothek, weil das gründlich klingt. Frag zuerst nach dem Grund.

Das Boot eignet sich auch gut für ein Diagramm, im Textformat Mermaid, das mermaid.live aufzeichnet. So kleine Regeln lassen sich leicht durchgehen, und die KI sieht die 3D-Ansicht nicht so wie du. Das Diagramm gibt ihr also etwas Genaues, woran sie sich prüfen kann.

Das sagst du deiner KI

Bau Paper Boat Canal mit three.js. Lies vor dem Code https://threejs.org/docs/llms.txt. Kannst du das nicht öffnen, sag es mir, dann füge ich es ein. Sag mir, welche Anweisungen daraus hier gelten und welche three.js-Version du nimmst und warum.

Das Spiel: Ich steuere ein Papierboot mit den Tasten links und rechts durch einen Kanal. Die Strömung schiebt es voran. Jeder Stoß gegen eine Wand weicht es weiter auf, und ganz aufgeweicht sinkt es.

Schreib vor dem Coden ein Mermaid-Diagramm des Boots: schwimmt, stößt an, aufgeweicht, gesunken, Neustart. Prüfe, ob ein Stoß nicht doppelt zählen kann und ob das Boot immer das Ziel erreicht oder sinkt. Bau danach.

Schreib die Kollisionsregeln selbst, ohne Physik-Bibliothek, außer du zeigst mir einen konkreten Grund, warum dieses Spiel eine braucht. Zeig mir die Zeilen, die einen Stoß erkennen. Sag, was du im Browser gesehen und was du nur angenommen hast.

Oder spar dir das und schließ den MCP an: Dann findet deine KI das alles von selbst.MCP anschließen

So prüfst du es

  • Schramme an einer Wand entlang. Das Aufweichen sollte pro Stoß einmal steigen, nicht in jedem Moment.
  • Stoß in flachem Winkel gegen die Wand. Das Boot darf nicht hindurchrutschen.
  • Öffne es auf dem Handy. Entscheide jetzt, ob Handys zählen und wie man dort steuert.
  • Lade die Seite neu. Alles sollte frisch beginnen, mit trockenem Boot.

Quellen

Stand: 2026-11-02