​Im Moment kann ich mein Projekt irgendwo im Internet speichern, muss mir aber dann die Seite merken und mich darauf verlassen, dass sie auch noch nach längerer Zeit vorhanden ist. Will ich auf Nummer sicher gehen und speichere meine Daten als zip-Datei auf meiner Festplatte, dann kann ich sie aber nicht einfach so wieder zurück in den Babylon-Editor holen, um sie weiter zu bearbeiten.

Warum finden wir nicht einen Weg, um gleich von vornherein alle Projekte auf der eigenen Festplatte (oder zum Beispiel einem USB-Stick) unterzubringen und auch dort zu bearbeiten? Dazu benötigen wir allerdings eigenes Werkzeug, denn irgendwo müssen wir ja unsere Quelltexte eintippen, und irgendwie wollen wir damit ein Programm zum Laufen bringen.

Zuerst einmal bringen wir die aktuellen Projekt-Daten auf dem eigenen Computer unter.

• Speichere vom Babylon-Playground aus dein aktuelles Projekt über Get.zip.

• Suche die Datei sample.zip (die normalerweise im Download-Ordner liegen sollte) und klicke mit der rechten Maustaste auf das Symbol. Im Kontextmenü wählst du Alles extrahieren und folgst dann den Anweisungen.

Wenn du den Anweisungen folgst, bekommst du einen Ordner mit dem Namen sample und darin eine Datei, die index.html​ heißt. Und in die schauen wir jetzt einmal hinein, denn darin steckt ja offenbar alles, was unser Projekt ausmacht.

Wie das Dateisymbol für index.html aussieht, hängt davon ab, welcher Browser dein Standard-Browser ist. (Ich benutze außer Microsoft Edge auch Google Chrome und Mozilla Firefox.)

Bei einem Doppelklick auf das Dateisymbol wird dein Standard-Browser gestartet und dich erwartet ein Ergebnis, das bei mir so aussieht:

Nun weißt du schon einmal, dass index.html offenbar so etwas wie eine Start-Datei​ ist. Tatsächlich kann die Datei auch einen anderen Namen haben, aber es spricht nichts dagegen, bei diesem zu bleiben. Wichtig ist die Kennung html.

Wenn wir uns den Inhalt von index.html anschauen wollen, benötigen wir einen Editor. Das kann ein ganz einfacher Texteditor sein, denn in der Datei steht ausschließlich Text.

• Klicke mit der rechten Maustaste auf das Symbol für index.html. Suche im Kontextmenü nach Öffnen mit und im Zusatzmenü nach Editor. Klicke darauf. (Wenn der Eintrag nicht vorhanden ist, suche danach mit Andere App auswählen.)

Nachdem der Editor gestartet ist, zeigt er auch Text an, aber den versteht man nicht unbedingt sofort; es sei denn, man kennt sich in HTML aus. Für unsere Zwecke reicht ein wenig Grundwissen.

Es wird viel mit spitzen Klammern gearbeitet (die du später auch als Zeichen für »größer« und »kleiner« kennenlernen wirst). Darin eingeschlossen sind jeweils Wörter wie html, head und body. In der Abbildung habe ich versucht, knapp zu erklären, was sie bedeuten.

html umschließt das gesamte HTML-Programm. Alles, was im Kopf-Teil (head) steht, wird für alle Projekte so bleiben – bis auf eine Ausnahme, den Titel. Das meiste, was im Rumpf-Teil (body) steht, geht uns etwas an, denn da finden wir auch unser aktuelles JavaScript-Programm.

Wenn es dich interessiert, können wir uns alles noch etwas näher anschauen, aber nur das Wichtigste. Beginnen wir mit dem head-Teil:​​

Zuerst werden einige Eigenschaftsangaben zum HTML-Text gemacht​, über die du hier nichts weiter wissen musst (sogenannte Meta-Daten):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Dann kommt der Titel für die Anzeige im Browser:​

<title>My Project</title>

Es ist die einzige Stelle, an der du etwas ändern darfst. Das habe ich bereits getan (da stand vorher »Babylon.js sample code«).

Die nächste Zeile ist die wichtigste. Sie bindet die Babylon Engine (aus dem Internet) mit ein:​​

<script src="http://www.babylonjs.com/babylon.js"></script>

Es folgen Angaben über das Aussehen (style) der Seite im Browser, die unter anderem die Darstellung im Browserfenster betreffen:​

<style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style>

Fassen wir bis hierhin mal die HTML-Wörter zusammen, die du bis jetzt kennst:

Die Datei, die wir jetzt haben, lässt sich außerhalb eines Browsers und ohne Internet-Zugang bearbeiten und speichern. Anschließend kann sie über einen Browser gestartet werden. Und wenn JavaScript-Quelltext drinsteckt, werden die Anweisungen auch im Browser ausgeführt.

Das klingt doch schon mal gut. Aber es gibt noch einiges zu klären. So stört es mich, dass man die Babylon Engine immerzu aus dem Internet »herbeiholen« muss. Deshalb würde ich die folgende Zeile:​

<script src="http://www.babylonjs.com/babylon.js"></script>

gerne so ändern:

<script src="...