XR-Anwendungen mit KI gestalten

Wie die KI mit Three.JS, BabylonJS oder A-Frame Welten erstellt

Mitarbeiter des Teams des MPZ LKL beschäftigen sich z.Z. intensiv mit der Aufgaben, KI zur Erstellung von interaktiven XR-Anwendungen für die VR-Brille anzuwenden. Als hervorragendes Tool hat sich der Coding-Assistent von den Gemini-Gems erwiesen. Dieser beherrscht das „Coden“ von XR-Anwendungen in den gängigen Skriptsprachen: Three.JS, BabylonJS und auch A-Frame! Der Coding-Assistent führt den Anwender im Dialog bis zur fertigen XR-Anwendung.

Das Integrieren von komplexen, animierten 3D-Objekten oder Sound-Dateien ist kein Problem. Im Laufe des Dialogs gibt der der Coding-Assistent sogar Hinweise zur Verbesserung des Handling und/oder der Performance der XR-Anwendung.

Die Copy-Paste-bereiten HTML-Dateien können auf einen Server hochgeladen und gestartet werden. Zu beachten ist, dass bei der Benutzung von LernSax-Webseiten die Datei nicht im VR/XR-Modus unter der VR-Brille gestartet werden kann, da LernSax nur http aber keine https-Protokolle zur Verfügung stellt!

Beispiele:

---

Ostereier sammeln

Hier hat der Coding-Assistent den folgenden Prompt erhalten:

Erstelle eine XR-Ostereier-Suche, bei der 5 schöne Ostereier eingesammelt und in einen Osterkorb gelegt werden sollen. Wenn alle 5 Eier im Korb sind gibt es eine schöne Belohnung!

Nun begann der Dialog – Schritt für Schritt wurden Probleme ausgemerzt bis zum fertigen Ergebnis:

Link: https://tiburski.de/MPZ/xr-ostern/xr-ostereiersuche_objekte.html

Nach und nach wurden die folgenden Teile integriert:

Wer mit dieser Welt weiter experimentieren möchte – hier sind alle benötigten Dateien!

---

Zahlenreihen üben I (Zielscheibe)

Prompt:

Entwickle ein XR-Lernspiel zum kleinen 1×1 für Kinder im Grundschulalter.
Das Spiel soll in einer immersiven XR-Umgebung stattfinden und besonders einfach, motivierend und kindgerecht bedienbar sein.
Ziel: Die Spielerinnen und Spieler üben das kleine Einmaleins durch aktives Handeln, nicht nur durch Auswählen von Antworten.
Anforderungen:
Erstelle ein Spielkonzept mit 3 Schwierigkeitsstufen.
Nutze visuelle XR-Interaktion: Greifen, Sortieren, Zuordnen, Stapeln, Sammeln oder Werfen.
Jede Aufgabe soll eine Rechenaufgabe des kleinen 1×1 enthalten.
Gib sofortiges Feedback bei richtig/falsch.
Integriere motivierende Elemente wie Punkte, Sterne, Zeitbonus oder Levelfortschritt.
Baue eine Lernlogik ein, die zuerst leichte Reihen, dann gemischte Aufgaben und am Ende kleine Challenges nutzt.
Das Spiel soll editierbare Inhalte unterstützen, damit Lehrkräfte eigene Aufgabenpakete anlegen können.
Achte auf eine sehr einfache, barrierearme Bedienung.
Erstelle zusätzlich ein UI-Konzept, ein Interaktionskonzept und eine kurze technische Struktur für Umsetzung in XR/WebXR.

Daraus entwickelte sich die folgende Anwendung:

Link: https://tiburski.de/MPZ/xr-mathe-club/xr-mathe-club-zielscheibe.html

Wer mit dieser Welt weiter experimentieren möchte – hier sind alle benötigten Dateien!

In der HTML-Datei den Level-Block suchen, anpassen, speichern und neu hochladen:

  const levels = [
    { name: "Level 1: 2er Reihe", tasks: [{q:"1 x 2", a:2}, {q:"2 x 2", a:4}, {q:"3 x 2", a:6}] },
    { name: "Level 2: 5er Reihe", tasks: [{q:"1 x 5", a:5}, {q:"2 x 5", a:10}, {q:"3 x 5", a:15}] },
    { name: "Level 3: Das Finale", tasks: [{q:"4 x 4", a:16}, {q:"8 x 2", a:16}, {q:"3 x 3", a:9}] }
  ];

---

Zahlenreihen üben II (Defender)

Prompt:

Ich denke jetzt an ein Spiel zu den Reihen des kleinen 1×1. Es soll eine Reihe angegeben werden z.B. die Dreier-Reihe. Nun kommen Zahlen von vorne auf den Nutzer zu geflogen. Alle durch 3 teilbaren Zahlen werden durchgelassen und ergeben einen Punkt. Nicht durch 3 teilbare Zahlen müssen mit einer Kugel am Controller abgewehrt werden und ergeben zehn Punkte. Trifft mich eine falsche Zahl wird von meinem Schutz-Schild von zehn jeweils eins abgezogen. Das Spiel endet, wenn mein Schutzschild bei 0 angekommen ist und ich von einer falschen Zahl getroffen werde oder wenn mein Punktestand 100 ist, dann kommt die nächste Zahlenreihe dran …

Im Laufe des Dialogs entstand daraus der folgende Math-Defender:

Link: https://tiburski.de/MPZ/xr-mathe-club/math-defender-final

Wer mit dieser Welt weiter experimentieren möchte – hier sind alle benötigten Dateien!

Hier werden automatisch Zufallszahlen generiert, die entweder durchgelassen oder weggeschlagen werden müssen. Nach Level 10 fällt die farbliche Markierung der Kugeln weg – da wird es dann spannend!

---

Synthwave-Demo

Zehn Fragen – ein kleines XR-Quiz mit Synthwave-Elementen – leicht editierbar!

Link: https://tiburski.de/MPZ/A-Frame/xr-quiz-Literatur.html

Wer mit dieser Welt weiter experimentieren möchte – hier sind alle benötigten Dateien!

In der HTML-Datei den Fragenblock suchen, anpassen, speichern und neu hochladen:

             this.quizData = [
                {q: "Wer schrieb 'Der kleine Prinz'?", a: "Antoine de Saint-Exupery", o: ["Jules Verne", "Victor Hugo", "Albert Camus", "Jean-Paul Sartre"]},
                {q: "Planetenbesuche vor der Erde?", a: "6", o: ["3", "10", "12", "5"]},
                {q: "Erste Zeichnung?", a: "Ein Schaf", o: ["Elefant", "Fuchs", "Stern", "Brunnen"]},
                {q: "Wer moechte gezaehmt werden?", a: "Der Fuchs", o: ["Schlange", "Hund", "Loewe", "Vogel"]},
                {q: "Geliebtes Objekt?", a: "Eine Rose", o: ["Computer", "Garten", "Pferd", "Goldfisch"]},
                {q: "In welcher Wueste Absturz?", a: "Sahara", o: ["Gobi", "Atacama", "Kalahari", "Namib"]},
                {q: "Was ist fuer Augen unsichtbar?", a: "Das Wesentliche", o: ["Sterne", "Liebe", "Wahrheit", "Glueck"]},
                {q: "Autor 'Reise Mittelpunkt Erde'?", a: "Jules Verne", o: ["H.G. Wells", "Conan Doyle", "Stoker", "Shelley"]},
                {q: "Heimat-Asteroid?", a: "B 612", o: ["Mars Alpha", "Zion", "Lummerland", "Eternia"]},
                {q: "Erstes Bild des Piloten?", a: "Boa mit Elefant", o: ["Hut", "Baum", "Haus", "Monster"]}
            ];

---

Die selbe XR-Anwendung, aber jetzt mit Fragen-Pool (10 Fragen aus 30 Fragen im Pool zufällig auswählen):

Link: https://tiburski.de/MPZ/A-Frame/xr-quiz-fragenpool.html

Der Fragenpool kann händisch oder mit einer geeigneten KI geändert werden. Im Fragenpool sind die Fragen ohne (!) Umlaute formuliert, weil das in der XR-Darstellung sonst zu Problemen führt:

Wer mit dieser Welt weiter experimentieren möchte – hier sind alle benötigten Dateien!

In der HTML-Datei den Fragenblock suchen, anpassen, speichern und neu hochladen:

let questionPool = [
{q: „Wer schrieb ‚Harry Potter‘?“, a: „J.K. Rowling“, o: [„Enid Blyton“, „Cornelia Funke“, „Astrid Lindgren“, „Ursula Le Guin“]},
{q: „Wie heisst Pippi Langstrumpfs Pferd?“, a: „Kleiner Onkel“, o: [„Hannes“, „Herr Nilsson“, „Rosinate“, „Blitz“]},
{q: „Wer lebt in einer Hoehle unter der Erde?“, a: „Ein Hobbit“, o: [„Ein Ork“, „Ein Elf“, „Ein Riese“, „Ein Zauberer“]},
{q: „In welches Land reist Alice?“, a: „Wunderland“, o: [„Narnia“, „Mittelerde“, „Auenland“, „Hogwarts“]},
{q: „Wer ist der Herr der Ringe?“, a: „Sauron“, o: [„Gandalf“, „Frodo“, „Saruman“, „Aragorn“]},
{q: „Wie heisst der Loewe in Narnia?“, a: „Aslan“, o: [„Simba“, „Alex“, „Mufasa“, „Shir Khan“]},
{q: „Wer schrieb ‚Die unendliche Geschichte‘?“, a: „Michael Ende“, o: [„Otfried Preussler“, „Erich Kaestner“, „James Kruess“, „Paul Maar“]},
{q: „Wie heisst Harry Potters Eule?“, a: „Hedwig“, o: [„Errol“, „Hermine“, „Fawkes“, „Pigwidgeon“]},
{q: „Wer stahl das Feuer der Goetter?“, a: „Percy Jackson“, o: [„Harry Potter“, „Katniss Everdeen“, „Eragon“, „Artemis Fowl“]},
{q: „Wer kaempft in ‚Tribute von Panem‘?“, a: „Katniss Everdeen“, o: [„Tris Prior“, „Bella Swan“, „Hermine Granger“, „Arya Stark“]},
{q: „Wie heisst der Drache in Eragon?“, a: „Saphira“, o: [„Smaug“, „Fuchur“, „Norbert“, „Grinsbart“]},
{q: „Wo wohnt Jim Knopf?“, a: „Lummerland“, o: [„Nimmerland“, „Auenland“, „Oz“, „Liliput“]},
{q: „Wer ist der beste Freund von Tom Sawyer?“, a: „Huckleberry Finn“, o: [„Joe Harper“, „Sid“, „Ben Rogers“, „Muck“]},
{q: „Wie heisst das Maedchen aus den Alpen?“, a: „Heidi“, o: [„Clara“, „Lotta“, „Momo“, „Wendy“]},
{q: „Wer schrieb ‚Emil und die Detektive‘?“, a: „Erich Kaestner“, o: [„Michael Ende“, „Paul Maar“, „Janosch“, „Karl May“]},
{q: „Wer hat eine Uhr im Bauch?“, a: „Das Krokodil (Peter Pan)“, o: [„Der Wal (Pinocchio)“, „Der Drache“, „Der Baer“, „Der Wolf“]},
{q: „Wie heisst der Hund von Tim?“, a: „Struppi“, o: [„Idefix“, „Pluto“, „Snoopy“, „Lassie“]},
{q: „Wer schrieb ‚Der goldene Kompass‘?“, a: „Philip Pullman“, o: [„Rick Riordan“, „C.S. Lewis“, „Christopher Paolini“, „R.L. Stine“]},
{q: „Wie heisst das Pferd von Lucky Luke?“, a: „Jolly Jumper“, o: [„Fury“, „Black Beauty“, „Tornado“, „Pegasus“]},
{q: „Welches Holz hat Pinocchios Nase?“, a: „Kiefer“, o: [„Eiche“, „Buche“, „Ahorn“, „Sandelholz“]},
{q: „Wer ist die Vogelscheuche in Oz?“, a: „Der Strohmann“, o: [„Der Blechmann“, „Der Loewe“, „Toto“, „Der Zauberer“]},
{q: „Wer schrieb ‚Charlie und die Schokoladenfabrik‘?“, a: „Roald Dahl“, o: [„David Walliams“, „Jeff Kinney“, „Tom Fletcher“, „Liz Pichon“]},
{q: „Wie heisst die Katze von Alice?“, a: „Grinsekatze“, o: [„Findus“, „Garfield“, „Tom“, „Salem“]},
{q: „Wer wohnt in der Baker Street 221B?“, a: „Sherlock Holmes“, o: [„Hercule Poirot“, „Dr. Watson“, „Arsene Lupin“, „James Bond“]},
{q: „Wer ist der Koenig der Diebe?“, a: „Scipio“, o: [„Prosper“, „Bo“, „Riccio“, „Mosca“]},
{q: „Wie heisst das Rentier von Sven?“, a: „Olaf“, o: [„Sven“, „Kristoff“, „Nils“, „Rudolph“]},
{q: „Wer schrieb ‚Tintenherz‘?“, a: „Cornelia Funke“, o: [„Kerstin Gier“, „Ursula Poznanski“, „Isabel Abedi“, „Sabine Ebert“]},
{q: „Wie heisst der Junge, der nicht erwachsen wird?“, a: „Peter Pan“, o: [„Robin Hood“, „Mowgli“, „Oliver Twist“, „Tarzan“]},
{q: „Wer kaempft gegen das ‚Nichts‘?“, a: „Atreju“, o: [„Bastian“, „Fuchur“, „Gmuerk“, „Artax“]},
{q: „Wer schrieb ‚Die Schatzinsel‘?“, a: „R.L. Stevenson“, o: [„Daniel Defoe“, „Jack London“, „Mark Twain“, „Jules Verne“]}
];

Beispiel für eine schnelle Änderung des Fragen-Sets:

Prompt:

Das hier ist ein Fragenset für eine XR-Anwendung zum Thema Jugendliteratur. Kannst du daraus ein Fragenset zum Einstieg in die Grundlagen der Physik erstellen … ? (FragenSet als Vorlage einfügen oder hochladen)

Ergebnis:

let questionPool = [
{q: „Was ist die Einheit der Kraft?“, a: „Newton“, o: [„Watt“, „Volt“, „Joule“, „Ampere“]},
{q: „Welche Kraft zieht Gegenstaende zur Erde?“, a: „Gravitation“, o: [„Magnetismus“, „Reibung“, „Zentrifugalkraft“, „Auftrieb“]},
{q: „Was ist die Masseinheit fuer den elektrischen Widerstand?“, a: „Ohm“, o: [„Volt“, „Ampere“, „Watt“, „Tesla“]},
{q: „Wie nennt man den Uebergang von fest zu gasfoermig?“, a: „Sublimation“, o: [„Schmelzen“, „Verdampfen“, „Erstarren“, „Kondensieren“]},
{q: „Welches Teilchen im Atom ist negativ geladen?“, a: „Elektron“, o: [„Proton“, „Neutron“, „Photon“, „Quark“]},
{q: „Was ist die Lichtgeschwindigkeit im Vakuum (ca.)?“, a: „300.000 km/s“, o: [„300.000 m/s“, „1.000 km/h“, „Soundgeschwindigkeit“, „150.000 km/s“]},
{q: „Wer formulierte die drei Gesetze der Bewegung?“, a: „Isaac Newton“, o: [„Albert Einstein“, „Galileo Galilei“, „Marie Curie“, „Max Planck“]},
{q: „Was misst ein Barometer?“, a: „Luftdruck“, o: [„Luftfeuchtigkeit“, „Temperatur“, „Windgeschwindigkeit“, „Hoehe“]},
{q: „Welche Farbe hat das kurzwelligste sichtbare Licht?“, a: „Violett“, o: [„Rot“, „Blau“, „Gruen“, „Gelb“]},
{q: „Was besagt das erste Gesetz der Thermodynamik?“, a: „Energieerhaltung“, o: [„Entropiezunahme“, „Massenerhaltung“, „Lichtbrechung“, „Relativitaet“]},
{q: „Welches Instrument misst die Stromstaerke?“, a: „Amperemeter“, o: [„Voltmeter“, „Ohmmeter“, „Barometer“, „Hygrometer“]},
{q: „Was ist die Einheit der Frequenz?“, a: „Hertz“, o: [„Dezibel“, „Pascal“, „Newton“, „Kelvin“]},
{q: „Wie nennt man die Ablenkung von Licht an Kanten?“, a: „Beugung“, o: [„Reflexion“, „Brechung“, „Streuung“, „Absorption“]},
{q: „Welches Metall leitet Strom am besten?“, a: „Silber“, o: [„Gold“, „Kupfer“, „Eisen“, „Aluminium“]},
{q: „Was ist die SI-Einheit der Temperatur?“, a: „Kelvin“, o: [„Celsius“, „Fahrenheit“, „Rankine“, „Reaumur“]},
{q: „Was passiert beim ‚Brechungsindex‘?“, a: „Licht aendert die Richtung“, o: [„Licht wird absorbiert“, „Licht wird schneller“, „Licht wird farblos“, „Licht verschwindet“]},
{q: „Wie nennt man die Traegheit einer Masse?“, a: „Inertia“, o: [„Beschleunigung“, „Impuls“, „Energie“, „Reibung“]},
{q: „Was ist die Einheit der elektrischen Spannung?“, a: „Volt“, o: [„Watt“, „Ampere“, „Coulomb“, „Ohm“]},
{q: „Welcher Stoff hat bei 4 Grad Celsius seine hoechste Dichte?“, a: „Wasser“, o: [„Quecksilber“, „Eisen“, „Alkohol“, „Oel“]},
{q: „Was beschreibt die Formel E=mc2?“, a: „Energie-Masse-Aequivalenz“, o: [„Fallbeschleunigung“, „Kinetische Energie“, „Elektrische Leistung“, „Waermekapazitaet“]},
{q: „Wie nennt man eine Linse, die Licht streut?“, a: „Konkavlinse“, o: [„Konvexlinse“, „Sammellinse“, „Objektiv“, „Prisma“]},
{q: „Was ist das Formelzeichen fuer die Masse?“, a: „m“, o: [„M“, „F“, „a“, „p“]},
{q: „Was ist ein Vakuum?“, a: „Ein luftleerer Raum“, o: [„Ein sehr kalter Raum“, „Ein Raum voller Gas“, „Ein magnetischer Raum“, „Ein schwarzes Loch“]},
{q: „Welche Energieform besitzt ein gespannter Bogen?“, a: „Potentielle Energie“, o: [„Kinetische Energie“, „Thermische Energie“, „Chemische Energie“, „Kernenergie“]},
{q: „Was ist die Einheit des Drucks?“, a: „Pascal“, o: [„Newton“, „Joule“, „Watt“, „Tesla“]},
{q: „Wie heisst der Fixpunkt beim Hebel?“, a: „Drehpunkt“, o: [„Lastarm“, „Kraftarm“, „Angel“, „Schwerpunkt“]},
{q: „Was ist die Einheit der Leistung?“, a: „Watt“, o: [„Joule“, „Newtonmeter“, „Voltampere“, „Hertz“]},
{q: „Welches Gas ist Hauptbestandteil der Luft?“, a: „Stickstoff“, o: [„Sauerstoff“, „CO2“, „Wasserstoff“, „Argon“]},
{q: „Wie nennt man die Geschwindigkeit pro Zeit?“, a: „Beschleunigung“, o: [„Impuls“, „Kraft“, „Weg“, „Leistung“]},
{q: „Was verhindert, dass ein Schiff sinkt?“, a: „Auftriebskraft“, o: [„Oberflaechenspannung“, „Dichte“, „Gewichtskraft“, „Viskositaet“]}
];

Link: xr-quiz-fragenpool-physik.html

(Generell Umlaute vermeiden! In den Zeilen 5 und 245 kann der Namen des Quiz angepasst werden und in der Zeile 50 kann die Drehgeschwindigkeit der Antworten angepasst werde!)

---

P.S.: Der gesamte Chatverlauf, der zu den fünf XR-Anwendungen geführt hat (am Besten mit Notepad++ öffnen):

chatverlauf.xml

---

Wir – das Team des MPZ LKL wünschen Ihnen viel Spaß und viel Erfolg beim Erstellen eigener XR-Anwendungen.