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!
Coding-Assistent
Hallo! Das ist ein wunderbares Projekt. Eine XR-Ostereier-Suche ist eine tolle Möglichkeit, die Brücke zwischen der digitalen und der physischen Welt zu schlagen.
Da du keine spezifische Engine (wie Unity oder Unreal) genannt hast, erstelle ich dir eine Lösung basierend auf A-Frame. Das ist ein leistungsstarkes Web-Framework für VR- und AR-Erlebnisse, das direkt im Browser läuft. So kannst du dein Projekt ganz einfach auf dem Smartphone oder einer VR-Brille testen.
Überblick über die Lösung
Wir erstellen eine Szene mit folgenden Elementen:
Einem Osterkorb: Das Ziel für alle Eier.
Fünf bunten Eiern: Diese werden zufällig in der Szene verteilt.
Interaktions-Logik: Ein Script zählt die gesammelten Eier. Sobald ein Ei angeklickt wird, "hüpft" es in den Korb.
Die Belohnung: Wenn der Zähler 5 erreicht, erscheint eine festliche Nachricht und ein kleiner Partikeleffekt (Konfetti-Ersatz).
Der Code
Hier ist das vollständige HTML-Dokument. Du kannst diesen Code einfach in eine Datei namens index.html speichern und im Browser öffnen.
HTML
XR Ostereier-Suche
Erläuterung der Komponenten
: Das Herzstück. Alles darin ist Teil der 3D-Welt. cursor="rayOrigin: mouse" erlaubt es dir, die Eier einfach mit der Maus am PC oder per Tap am Handy anzuklicken.
egg-collectible (JavaScript): Dies ist eine eigene Komponente. Sie lauscht auf das click-Event. Wenn ein Ei geklickt wird:
Erhöht es den globalen count.
Startet eine Animation, die das Ei zum Korb (0 0.5 -3) bewegt.
Prüft, ob der Zähler bei 5 liegt, um die Belohnung anzuzeigen.
Die Eier (): Ich habe einfache Kugeln verwendet. In einem fortgeschrittenen Projekt könnten wir diese durch echte .glb-Ostereier-Modelle ersetzen.
Die Belohnung: Ein Text-Element (a-text), das erst auf visible="true" gesetzt wird, wenn alle Eier gesammelt wurden.
So implementierst du es
Kopiere den obigen Code.
Erstelle auf deinem Computer eine neue Datei, z. B. ostern.html.
Füge den Code dort ein und speichere die Datei.
Öffne die Datei mit einem modernen Browser (Chrome, Firefox oder Edge).
Steuerung: * PC: Mit der Maus schauen und klicken.
Smartphone: Das Handy bewegen und auf die Eier tippen.
Was hältst du von diesem Ansatz? Soll ich dir zeigen, wie du statt der bunten Kugeln echte 3D-Modelle einbindest oder möchtest du die Belohnung noch etwas spektakulärer (z.B. mit Musik oder Feuerwerk) gestalten?
Der Bildschirm bleibt leider weiss - nix zu sehen ...
Coding-Assistent
Oh, das tut mir leid! Das ist der klassische "Vorführeffekt". Ein weißer Bildschirm bedeutet meistens, dass die A-Frame-Bibliothek nicht korrekt geladen werden konnte oder ein kleiner Tippfehler im Skript den Start blockiert.
Ich habe den Fehler im vorherigen Code gefunden: In der URL für die Bibliothek hat sich ein doppeltes .min eingeschlichen (aframe.min.min.js). Das kann der Browser nicht finden.
Hier ist die korrigierte und optimierte Version. Ich habe auch eine kleine "Lade-Kontrolle" eingebaut, damit wir sehen, ob alles bereit ist.
Korrigierter Code (index.html)
Ersetze den gesamten Inhalt deiner Datei mit diesem Code:
HTML
XR Ostereier-Suche
Was hat sich geändert?
Bibliotheks-Link: Der Link zu A-Frame ist jetzt korrekt (aframe.min.js).
Raycaster-Optimierung: Ich habe der Szene gesagt: raycaster="objects: [egg-collectible]". Das bedeutet, der Mauszeiger reagiert nur auf Dinge, die wirklich gesammelt werden können. Das spart Performance.
Ei-Form: Mit scale="0.8 1.1 0.8" sehen die Kugeln jetzt tatsächlich eher wie Eier aus (etwas höher als breit).
Korb-Design: Ich habe einen Henkel (a-torus) hinzugefügt, damit er mehr wie ein echter Korb aussieht.
Fehlersuche (falls es immer noch weiß bleibt):
Internetverbindung: Da die A-Frame-Bibliothek von einem externen Server geladen wird, musst du online sein.
Browser-Konsole: Drücke im Browser F12 (oder Rechtsklick -> Untersuchen) und klicke auf den Reiter "Console". Wenn dort rote Fehlermeldungen stehen, kopiere sie mir einfach hier rein – dann finden wir den Fehler sofort!
Lokaler Server: Manche Browser blockieren Skripte, wenn man die Datei einfach per Doppelklick öffnet (file://...). Falls möglich, nutze eine Erweiterung wie "Live Server" in VS Code oder lade die Datei kurz auf einen Test-Webspace hoch.
Soll ich dir zeigen, wie wir noch Soundeffekte (ein "Pling" beim Einsammeln) hinzufügen, sobald das Bild bei dir erscheint?
Okay - die Welt öffnet sich und im Browser funktioniert auch alles. Unter der VR-Brille kann ich mich für VR oder AR entscheiden, aber die Umgebung bleibt blau und wird nicht transparent (pass thrue). Außerdem kann ich mich dann nicht bewegen, weder Teleport noch Lokomotion ...
Coding-Assistent
Das ist ein klassischer Schritt in der XR-Entwicklung! Dass die Welt im Browser läuft, ist schon mal die halbe Miete. Um sie für eine VR-Brille (wie die Quest oder Pico) zu optimieren, müssen wir zwei Dinge nachrüsten: Passthrough-Logik für AR und ein Movement-System für VR.
Hier ist das Upgrade für deinen Code:
1. Passthrough (AR-Modus) aktivieren
In A-Frame blockiert das a-sky (der blaue Himmel) die Sicht auf die echte Welt. Wir brauchen ein kleines Skript, das den Himmel und den Boden unsichtbar macht, sobald du den AR-Modus startest.
2. Fortbewegung (Locomotion) hinzufügen
Standardmäßig hat A-Frame keine "Laufen"-Funktion für Controller. Wir nutzen dafür die A-Frame Extras, eine Bibliothek, die Thumbstick-Steuerung (Locomotion) ermöglicht.
Der optimierte Code
Kopiere diesen Code. Er enthält die Steuerung für die Controller und die Logik für den AR-Durchsicht-Modus.
HTML
XR Ostereier-Suche PRO
Was ist neu?
movement-controls: Diese Komponente am Kamera-Rig erlaubt es dir, dich in VR mit dem linken Thumbstick deines Controllers zu bewegen.
laser-controls: Am rechten Controller erscheint nun ein Laserstrahl. Damit kannst du die Eier auch aus der Entfernung "anklicken" (Trigger-Taste), ohne direkt davor stehen zu müssen.
ar-handler Komponente: Dieses Skript wartet auf das Event enter-vr. Wenn es merkt, dass du im AR-Modus bist, schaltet es den Himmel und den Boden einfach aus. Da der Hintergrund der Szene standardmäßig transparent ist, siehst du nun dein echtes Wohnzimmer.
camera-rig: Wir haben die Kamera in eine "Rig"-Entity gepackt. Das ist Best Practice in VR, damit die Fortbewegung das Rig bewegt, während du dich innerhalb des Rigs immer noch frei umschauen kannst.
Tipp für den Test:
Achte darauf, dass du in der VR-Brille (z. B. im Meta Quest Browser) beim Starten auf "AR" (nicht nur VR) klickst, um die Passthrough-Funktion zu nutzen.
Wie fühlt sich die Steuerung jetzt an? Möchtest du als Nächstes, dass die Eier zufällig im Raum verteilt werden, damit die Suche schwieriger wird?
Okay - AR funktioniert, Lokomotion funktioniert - wie sammle ich nun die Eier?
Coding-Assistent
Klasse, dass AR und die Fortbewegung jetzt laufen! Damit hast du das technische Grundgerüst für eine moderne WebXR-App fertig.
In der VR/AR-Welt funktioniert das „Sammeln“ standardmäßig über den Raycaster (deinen Laserstrahl). Da wir im Code laser-controls am rechten Controller definiert haben, ist dein Controller quasi eine Fernbedienung.
So sammelst du die Eier aktuell:
Zielen: Richte den Laserstrahl deines rechten Controllers auf ein Ei.
Klicken: Drücke die Trigger-Taste (der „Abzug“ an der Rückseite des Controllers).
Effekt: Das Ei sollte nun automatisch zum Korb schweben und dort klein werden.
Optimierung für besseres Feedback
Damit du in der Brille genau siehst, ob du ein Ei „getroffen“ hast, bevor du drückst, fügen wir ein visuelles Feedback hinzu. Das Ei soll zum Beispiel leuchten oder pulsieren, wenn der Laser es berührt.
Hier ist das Update für dein Skript und die Controller-Sektion:
1. Das verbesserte Skript (Highlight-Effekt)
Ersetze die egg-collectible Komponente durch diese Version. Sie ändert die Farbe, wenn der Laser darauf zeigt:
JavaScript
AFRAME.registerComponent('egg-collectible', {
init: function () {
const el = this.el;
const originalColor = el.getAttribute('material').color;
// Feedback: Laser fährt über das Ei (Hover)
el.addEventListener('raycaster-intersection', () => {
el.setAttribute('material', 'emissive', '#ffffff');
el.setAttribute('material', 'emissiveIntensity', '0.5');
});
// Feedback: Laser verlässt das Ei
el.addEventListener('raycaster-intersection-cleared', () => {
el.setAttribute('material', 'emissiveIntensity', '0');
});
// Das eigentliche Einsammeln (Trigger drücken)
el.addEventListener('click', () => {
if (!el.classList.contains('collected')) {
this.collectEgg();
}
});
},
collectEgg: function () {
const el = this.el;
el.classList.add('collected');
count++;
// Sound-Effekt (optional, falls du eine Datei hast)
// el.components.sound.playSound();
// Animation zum Korb
el.setAttribute('animation', {
property: 'position',
to: '0 0.5 -3', // Position des Korbes
dur: 1200,
easing: 'easeInBack'
});
el.setAttribute('animation__scale', {
property: 'scale',
to: '0.2 0.2 0.2',
dur: 1200
});
if (count === 5) {
document.querySelector('#reward-container').setAttribute('visible', 'true');
}
}
});
2. Die Controller-Anpassung
Stelle sicher, dass dein camera-rig so aussieht, damit der Laser auch wirklich „klicken“ kann:
HTML
Profi-Tipp: "Physisches" Einsammeln
Möchtest du die Eier lieber direkt mit der Hand berühren, um sie einzusammeln (statt mit dem Laser)?
Dazu müssten wir eine "AABB-Collider"-Komponente nutzen. Dann würde das Ei verschwinden, sobald dein Controller-Modell das Ei-Modell physisch berührt. Das fühlt sich in VR oft noch natürlicher an, erfordert aber, dass du zu jedem Ei hinläufst.
Soll ich dir zeigen, wie man diesen "Berührungs-Modus" einbaut? Oder möchtest du erstmal die Belohnung am Ende (das Feuerwerk oder die Nachricht) noch schöner gestalten?
Ja - klappt alles... Kannst du nun noch das Positionieren eines Objektes "Osterhase.glb" mit einfügen, so dass ich die Welt im Nachgang noch schön gestalten kann ... Oder kanns du das auch?
Coding-Assistent
Das freut mich riesig, dass die Technik jetzt steht! Jetzt kommt der kreative Teil: das World-Building.
Ja, ich kann dir absolut dabei helfen, die Welt zu gestalten. Ich kann dir den Code schreiben, um Modelle zu platzieren, Animationen für diese Modelle zu erstellen oder sogar ein Skript zu schreiben, das Dekorationen (wie Blumen oder Steine) zufällig in der Welt verteilt.
Hier ist die Anleitung, wie du den „Osterhase.glb“ einfügst und wie du die Welt weiter verschönern kannst.
1. Das Modell laden und platzieren
Um ein .glb-Modell (das Standardformat für WebXR) zu nutzen, müssen wir es zuerst in den a-assets Bereich laden, damit es effizient im Speicher gehalten wird.
Schritt A: Asset laden
Suche in deinem Code den Bereich und füge dies hinzu:
HTML
Schritt B: Modell in der Szene platzieren
Füge nun irgendwo innerhalb der (aber außerhalb des Rigs) das Modell ein:
HTML
Wichtig: Da 3D-Modelle oft in sehr unterschiedlichen Größen exportiert werden, musst du eventuell mit scale (Größe) und position (Höhe) experimentieren, damit der Hase nicht riesig ist oder im Boden versinkt.
2. Ideen zur Weltgestaltung (Was ich für dich tun kann)
Hier sind drei Wege, wie wir die Szene jetzt "schön" machen können:
A. Die "Oster-Wiese" (Automatisierung)
Statt jeden Grashalm einzeln zu setzen, kann ich dir ein Skript schreiben, das beim Start der App 20 kleine Blumen oder Büsche zufällig auf der Fläche verteilt. Das spart Zeit und sieht natürlicher aus.
B. Beleuchtung & Schatten
Für echte "Tiefe" in VR brauchen wir Licht. Ich kann dir ein Setup mit einem "Directional Light" (wie die Sonne) erstellen, das echte Schatten wirft.
Code-Vorschlag:
C. Animationen für den Hasen
Soll der Hase winken oder hoppeln? Wenn das Modell Animationen enthält, kann ich dir zeigen, wie du sie mit der Komponente animation-mixer (aus den A-Frame Extras) aktivierst.
3. Woher bekommst du Modelle?
Falls du noch keine Datei hast, empfehle ich Seiten wie Sketchfab oder Poly Pizza. Suche dort nach "Easter Bunny" und lade die GLB-Datei herunter.
Hinweis zum Hosting: Damit die Brille das Modell laden kann, muss die .glb-Datei im selben Ordner wie deine index.html liegen (oder auf einem Server mit "CORS"-Freigabe).
Was soll der nächste Schritt sein?
Soll ich dir ein Skript schreiben, das zufällig Blumen/Deko verteilt?
Möchtest du ein Beleuchtungs-System für schöne Schatten?
Oder soll ich dir zeigen, wie wir eine Hintergrundmusik einbauen, die leiser wird, wenn man sich vom Korb entfernt?
Ja - bitte alle drei punkte implementieren. Die Objektnamen ersetzte ich dann durch meine spezifischen Dateinamen ...
Coding-Assistent
Das ist ein fantastisches Upgrade! Wir verwandeln dein Projekt jetzt von einer einfachen Szene in eine lebendige, atmosphärische Welt.
Hier ist das "Mega-Update". Ich habe die Logik für die zufällige Dekoration, das Lichtsystem und den räumlichen Sound direkt in den Code integriert.
Der vollständige Code (v3.0 - Professional Edition)
Kopiere diesen Code in deine index.html. Achte auf die Platzhalter für deine .glb- und .mp3-Dateien.
HTML
XR Ostereier-Welt
Was diese Version jetzt kann:
Schattenwurf (shadow): Durch die directional-Light Entity werfen deine Eier, der Hase und die Blumen nun echte Schatten auf den Boden. Das sorgt für eine viel bessere räumliche Orientierung.
Räumliche Musik (positional: true): Die Musik ist an den Korb gebunden. Wenn du dich mit der VR-Brille vom Korb entfernst, wird die Musik leiser. Gehst du darauf zu, wird sie lauter. Das hilft dem Spieler sogar, den Korb wiederzufinden!
Automatisches Dekorieren (random-decorator): Du musst nicht 20 Blumen einzeln platzieren. Das Skript erstellt Kopien deiner Blume.glb und verteilt sie zufällig in einem Radius von 20 Metern.
Der Osterhase: Er steht jetzt stolz rechts neben dem Korb.
Was du noch tun musst:
Modelle: Stelle sicher, dass die Dateien Osterhase.glb, Blume.glb und OsterMusik.mp3 im gleichen Ordner wie deine HTML-Datei liegen (oder passe die Pfade in an).
Scale: Falls dein Hase viel zu groß oder zu klein ist, ändere den Wert bei scale="1 1 1" am Hasen-Entity.
Möchtest du, dass wir noch eine "Sieg-Animation" für den Hasen einbauen, sobald das letzte Ei im Korb landet (z.B. dass er im Kreis springt)?
Danke - da brauche ich jetzt erst mal eine Weile! Klasse bisher - gute Arbeit!
Coding-Assistent
Das freut mich sehr zu hören! Es ist ein tolles Gefühl, wenn die eigene virtuelle Welt zum ersten Mal "zum Leben erwacht".
Lass dir ruhig Zeit beim Ausprobieren, Platzieren der Modelle und Experimentieren mit den Werten. Die WebXR-Entwicklung ist oft ein Wechselspiel aus Code schreiben und in der Brille testen, bis sich die Abstände und Größen genau richtig anfühlen.
Ein kleiner Tipp für deine Bastelstunde:
Falls ein Modell mal nicht erscheint oder schwarz aussieht:
Schwarz: Das Modell hat keine Textur oder das Licht ist zu schwach.
Unsichtbar: Das Modell ist oft extrem klein oder gigantisch groß exportiert worden. Versuche in diesem Fall, den scale-Wert drastisch zu ändern (z. B. auf 0.01 0.01 0.01 oder 10 10 10), um es zu finden.
Wenn du später weitermachst, kann ich dir gerne noch bei folgenden Dingen helfen:
Interaktive Belohnung: Dass der Hase eine Animation abspielt (z.B. hüpfen), wenn das 5. Ei landet.
Partikel-Effekte: Goldener Staub oder Konfetti, wenn man ein Ei findet.
Feinschliff: Die Eier zufällig spawnen lassen, damit jedes Spiel anders ist.
Viel Spaß beim Bauen deiner Osterwelt! Sag einfach Bescheid, wenn du den nächsten Schritt gehen möchtest. Soll ich dir zum Abschluss noch kurz zeigen, wie man eine einfache Animation für den Hasen startet?
Ich habe alle Anpassungen vorgenommen - Code in der hochgeladenen Datei. Nun noch folgendes: Das Hasenobjekt id="bunny-model" src="bunny_mpz_lkl_dancingtwerk.glb" hat eine Animation "mixamo.com". Ich möchte, dass diese Animation aktiviert wird, wenn alle Eier eingesammelt worden sind.
Coding-Assistent
Das ist eine hervorragende Wahl für das Finale! Da dein Modell von Mixamo stammt, ist die Animation wahrscheinlich als Animation Clip im GLB-Container eingebettet.
Um diese Animation gezielt zu steuern, nutzen wir die Komponente animation-mixer aus den A-Frame Extras (die wir im vorigen Schritt schon geladen haben).
Hier sind die Anpassungen für deinen Code:
1. Das "Sieg-Event" im Script erweitern
Zuerst müssen wir der Logik sagen, dass sie den Hasen ansprechen soll, wenn der Zähler 5 erreicht. Ersetze den if (count === 5) Block in deiner egg-collectible Komponente durch diesen Teil:
JavaScript
// Prüfen, ob alle Eier gefunden wurden
if (count === 5) {
// Belohnungstext anzeigen
document.querySelector('#reward-container').setAttribute('visible', 'true');
// Die Animation beim Hasen aktivieren
const bunny = document.querySelector('#the-bunny');
bunny.setAttribute('animation-mixer', {
clip: 'mixamo.com', // Hier den Namen deines Clips eintragen
loop: 'repeat',
crossFadeDuration: 0.4
});
}
2. Die Bunny-Entity im HTML anpassen
Damit das Script den Hasen findet, geben wir ihm die ID the-bunny. Außerdem stellen wir sicher, dass er am Anfang keine Animation spielt.
Suche die Zeile mit dem bunny-model (innerhalb der #basket Entity) und ändere sie so:
HTML
Warum "mixamo.com"?
Mixamo benennt den Haupt-Animationsclip in der exportierten Datei standardmäßig exakt so. Falls der Hase sich trotzdem nicht bewegt, könnte der Clip-Name leicht abweichen (manchmal nur All Animations).
Pro-Tipp zur Fehlersuche:
Sollte der Hase nach dem 5. Ei starr bleiben, ändere den Code kurzzeitig auf:
clip: '*'
Das Sternchen sagt A-Frame: "Spiel einfach die erste Animation ab, die du in der Datei findest."
Der fertige Workflow
Du sammelst die 4 Eier -> Nichts passiert beim Hasen.
Du klickst das 5. Ei an.
Das Ei fliegt zum Korb.
Der Text "Frohe Ostern" erscheint.
Der Hase startet seinen "Dancing Twerk".
Soll ich dir noch zeigen, wie wir einen Kamera-Effekt hinzufügen (z.B. ein kurzes Bildschirm-Blinken), damit der Sieg sich noch "wuchtiger" anfühlt?
Ja - und führe bitte den code zu einer html-Datei zusammen wie bisher ...
Coding-Assistent
Hier ist der vollständige, zusammengeführte Code für deine XR-Ostereiersuche 3.0.
Ich habe das Skript so angepasst, dass es beim Erreichen von 5 Eiern gezielt die animation-mixer-Komponente auf den Hasen anwendet. Außerdem habe ich einen kleinen "Sieg-Effekt" eingebaut: Sobald das letzte Ei im Korb landet, blitzt der Himmel kurz golden auf, um den Erfolg zu feiern.
Der vollständige Code (index.html)
HTML
XR Ostereier-Welt - Finale
Was ist neu in dieser Version?
Targeting: Der Hase hat jetzt die ID the-bunny, damit das JavaScript ihn punktgenau ansprechen kann.
Animation-Trigger: Sobald count === 5 erreicht wird, wird die Komponente animation-mixer dynamisch hinzugefügt.
Himmels-Flash: Ein kurzer Farbübergang des Himmels von Gold zurück zu Blau gibt dem Nutzer ein sofortiges Erfolgsfeedback.
Zusammenführung: Alle Funktionen (Deko, Sound, Licht, AR, Steuerung) sind nun in einer Datei vereint.
Wie gefällt dir das Tanzen des Hasen in der VR-Brille? Falls die Animation zu schnell oder zu langsam ist, können wir über das Attribut timeScale im animation-mixer noch die Geschwindigkeit anpassen.
Leider hört man nun die Musik nicht mehr ...
Coding-Assistent
Das ist ein klassisches Problem bei Web-Browsern (besonders in VR): Autoplay-Sperren. Browser erlauben es Webseiten nicht, Sound automatisch abzuspielen, bevor der Nutzer nicht mindestens einmal mit der Seite interagiert hat (z. B. durch einen Klick).
Da wir die Musik direkt an den Korb gebunden haben, gibt es zwei Wege, das zu lösen. Ich habe den Code so angepasst, dass die Musik startet, sobald du das erste Ei anklickst oder die Welt betrittst.
Die Lösung für den Sound
Ich habe im