Lokal Entwickeln mit Code Editor

Eine relativ einfache Möglichkeit auf dem eigenen PC Anwendungen mit A-Frame zu entwickeln, ist ein Text-Editor.

Einer der bekanntesten Text-Editoren ist Microsoft Word, der jedoch für formatierten Fließtext ausgerichtet ist. Spezielle Quelltext-Editoren sind jedoch für das Schreiben von Code viel besser geeignet.

Quelltext-Editoren haben eine Autoergänzung für Code und können Fehler (Bugs) anzeigen. Das funktioniert in etwa wie die Rechtschreibprüfung bei Word.
Außerdem wird der Code automatisch eingefärbt, was die Lesbarkeit erhöht.

Darüber hinaus unterstützen viele Editoren inzwischen die Probe-Ansicht des geschriebenen Quelltextes als HTML Seite, ohne dass man diese zunächst irgendwo hochladen muss. Somit können wir unseren Code direkt testen.

Wir empfehlen für einen ersten Schritt die lokale Entwicklung auf dem eigenen PC, da Plattformen wie Glitch nicht immer ganz zuverlässig arbeiten. Denken Sie aber daran, dass A-Frame und AR.JS beide Internet-Anbindung benötigen. Obwohl Sie lokal auf dem eigenen PC entwicklen, brauchen Sie zur Ausführung trotzdem eine Internetverbindung.

Es gibt eine Vielzahl an unterschiedlichen Editoren.

Sehr häufig verwendet wird der freie Quellcode Editor Visual Studio Code von Microsoft. Kurs VS Code.

Andere Editoren wären Notepad++ oder Atom.

Wegen seiner hohen Verbreitung wollen wir uns hier auf Visual Studio Code beziehen. Es läuft unter Windows, macOS und Linux.

Sie können Visual Studio Code hier kostenfrei herunterladen:

https://code.visualstudio.com/

VS Code wird oft verwechselt mit dem sehr viel umfangreicheren Visual Studio von Microsoft. Bei Visual Studio handelt es sich um eine vollständige integrierte Entwicklungsumgebung, die für unsere Zwecke jedoch zu aufwendig ist.

Extensions

Der Funktionsumfang von VS Code lässt sich noch mit Erweiterungen, sogenannten Extensions, ausbauen.

Besonders nützlich ist die Erweiterung Live Server. Mit ihr lassen sich HTML Seiten in einer Probeansicht im Browser anzeigen, als würden sie auf einem Server liegen. Dies ist für die Entwicklung sehr praktisch und vor allem zeitsparend.

Eine weitere Extension speziell für A-Frame ist A-Frame Completion. Da A-Frame ein Framework und keine Programmiersprache ist, kennt VS Code die Syntax von A-Frame nicht und kann somit auch keine Autoergänzung oder Fehlerkontrolle durchführen. Mit dieser Erweiterung wird zumindest eine Autoergänzung möglich. Fehler im Code können aber leider durch diese Erweiterung nicht automatisch erkannt werden.

Video-Tutorial

3d Objekte auf lokalem PC mit VS Code einbinden

In diesem Video wird gezeigt, wie man in VS Code 3d Objekte auf dem eigenen PC einbinden kann.

Tutorials zu VS Code

Bei Youtube finden sich eine Vielzahl an Einführungsvideos, die VS Code detaillierter vorstellen.

Hier nur ein Beispiel:

https://youtu.be/eXFiKu3GRZE