Coden in A-Frame

Jetzt, wo wir den Aufbau von A-Frame kennengelernt haben, können wir beginnen Inhalte zu manipulieren und selbst zu erstellen.

Wir rufen dafür das Beispiel aus dem vorherigen Kapitel auf der Code-Plattform Glitch auf:

https://glitch.com/~aframe

Die Seite benötigt meist zwischen 15 und 45 Sekunden um zu laden.

Hier sehen wir wieder das Beispiel mit den vier einfachen Objekten (türkise Box, gelber Zylinder, rote Kugel, grüne Fläche):

Sie sollten nun diese folgende Ansicht haben.

Über die Maus können Sie sich mit gedrückter linker Maustaste in der virtuellen Umgebung umschauen. Mit den Tasten W A S und D können Sie sich sogar in ihr bewegen.

Nun wollen wir die Umgebung entsprechend anpassen. Klicken Sie dafür unten rechts auf den Button "Remix your Own".
Das Projekt wird nun kopiert.

Sie sollten nun diese folgende Ansicht haben.

Klicken Sie in der linken Menüleiste auf index.html um sich den Code anzeigen zu lassen.

Der ganze Ablauf wird in diesem Video dargestellt.

Den Code bearbeiten

Nun können wir ein wenig im Code herumprobieren, z.B. in dem wir eine der Entities löschen oder deren Position ändern.

Das Bearbeiten des Code zeigen wir in diesem Video.

Bitte beachten Sie, dass A-Frame keine Programmiersprache ist, daher gibt es keine automatische Fehlerkontrolle. Sehr leicht kann man sich vertippen mit der Auswirkung, dass der Befehl nicht ausgeführt oder sogar die ganze Seite nicht geladen wird.
Leider erhält man meist keinerlei Hinweise, wo das Problem liegen könnte.
Überprüfen Sie daher immer unbedingt die richtige Schreibweise in Ihrem Code.

Weitere Informationen finden Sie unter Fehlersuche und Debugging.

Als nächstes schauen wir uns die Eigenschaften der Entities, die sogenannten Components, nocheinmal exemplarisch genauer an.