Wir benutzen in diesem Buch den ICE Code Editor zum Programmieren. Der ICE Code Editor läuft direkt in einem Browser. Wir können unseren Programmcode eintippen und sehen sofort die Ergebnisse.

Öffne zuerst den ICE Code Editor unter http://gamingJS.com/ice mit dem Webbrowser Chrome von Google. Das sollte dann ungefähr so aussehen:

Abbildung 1.1 Der ICE Code Editor in Google Chrome

Das sich drehende Ding mit den vielen Seitenflächen ist ein Beispiel für die Sachen, die wir in diesem Buch machen wollen. In diesem Kapitel legen wir ein neues Projekt namens Formen an.

Um im ICE Code Editor ein neues Projekt anzulegen, klicken wir auf den Menü-Button in der oberen rechten Ecke des Bildschirms (das ist das Kästchen mit den drei waagerechten Strichen) und wählen New aus dem Menü.

Abbildung 1.2 Das geöffnete Menü

Tippe den Namen des Projekts, Formen, in das Textfeld ein und klicke dann auf Save. Das Template (ein Template ist eine Vorlage) lässt du einfach auf 3D starter project stehen.

Abbildung 1.3 Wir legen ein neues Projekt an.

Denk dran, dass die Projekte in diesem Buch nicht funktionieren, wenn du den ICE Code Editor im Internet Explorer benutzt. Einige der Übungen klappen zwar mit Mozilla Firefox, am besten wäre es aber, wenn du für alle unsere Projekte bei einem einzigen Browser (Google Chrome) bleibst.

Wenn der ICE ein neues 3D-Projekt öffnet, gibt es in der Datei schon eine Menge Code. Wir schauen uns diesen Code später genauer an. Im Moment wollen wir jedoch unser Programmierabenteuer auf Zeile 20 beginnen. Suche nach der Zeile, auf der START CODING ON THE NEXT LINE steht.

Abbildung 1.4 Hier legst Du los.

Tippe in Zeile 20 Folgendes ein:

var shape = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
scene.add(ball);

Sobald du damit fertig bist, solltest du etwas Cooles sehen:

Abbildung 1.5 Hier hat sich schon etwas getan.

Der Ball, den wir eingetippt – der Ball, den wir programmiert – haben, ist im ICE aufgetaucht. Herzlichen Glückwunsch! Du hast gerade dein erstes JavaScript-Programm geschrieben!

Mach dir erst einmal keine Sorgen um die Struktur des Codes. Du wirst dich in Kapitel 7, damit vertraut machen. Im Moment wollen wir die 3D-Programmierung betrachten, die wir gerade durchgeführt haben.

3D-Dinge bestehen aus zwei Teilen: der Form und etwas, das diese Form bedeckt. Die Kombination aus beidem, der Form und ihrer Umhüllung, trägt in der 3D-Programmierung einen besonderen Namen: Mesh (Gitter oder auch Gewebe).

Mesh ist ein schickes Wort für ein 3D-Ding. Meshes brauchen Formen (manchmal als Geometrie bezeichnet) und etwas, um sie zu umhüllen (sogenanntes Material). Wir schauen uns in diesem Kapitel verschiedene Formen an. Zu unterschiedlichen Umhüllungen für unsere Formen kommen wir erst in Kapitel 12, Mit Licht und Material arbeiten.

Sobald wir ein Mesh haben, fügen wir es der Szene hinzu. Die Szene ist die Stelle in der 3D-Programmierung, an der gezaubert wird. Es ist die Welt, in der alles passiert. In diesem Fall ist es der Ort, an dem unser Ball herumlungert und auf Freunde wartet. Fügen wir der Szene einige weitere Formen hinzu, damit der Ball nicht so allein ist.

Bisher haben wir nur eine Art von Form gesehen: eine Kugel. Formen können einfach sein: Würfel, Pyramiden, Kegel und Kugeln. Formen können aber auch komplexer sein, wie Gesichter oder Autos. In diesem Buch bleiben wir bei einfachen Formen. Wenn wir so etwas wie Bäume bauen, kombinieren wir einfache Formen, wie Kugeln und Zylinder miteinander.

Kugeln herstellen

Bälle werden in der Geometrie und der 3D-Programmierung als Kugeln (oder mathematisch korrekt als Sphären) bezeichnet. Es gibt zwei Möglichkeiten, die Form einer Kugel in JavaScript zu kontrollieren.

Größe: SphereGeometry(100)

Zunächst einmal können wir eine Kugel kontrollieren, indem wir beschreiben, wie groß sie ist. Wir schufen einen Ball, dessen Radius 100 war, als wir new THREE.SphereGeometry(100) sagten. Was passiert, wenn du den Radius auf 250 änderst?

var shape = new THREE.SphereGeometry(250);
var cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
scene.add(ball);

❶ An dieser Stelle müsstest du die Größe der Kugel ändern.

Sie sollte jetzt viel größer werden:

Abbildung 1.6 Die Kugel ist gewachsen.

Was passiert, wenn du die 250 zu 10 änderst? Wie du sicher erraten hast, wird sie viel kleiner. Das ist also eine Möglichkeit, um die Form einer Kugel zu kontrollieren. Welche andere Möglichkeit hast du?

Nicht klobig: SphereGeometry(100, 20, 15)

Wenn du auf den Hide Code-Button im ICE klickst, bemerkst du sicher, dass unsere Kugel eigentlich kein wirklich glatter Ball ist:

Abbildung 1.7 Eigentlich keine Kugel, sondern ein kugelförmiges Gebilde aus Flächen

Du kannst den Code ganz leicht ein- und ausblenden

Wenn du in der oberen rechten Ecke des ICE-Fensters auf den weißen Hide Code-Button klickst, siehst du nur den Spielbereich und die Objekte im Spiel. So wirst du in späteren Kapiteln auch die Spiele bedienen. Um den Code wieder hervorzuzaubern, klickst du auf den weißen Show Code-Button im ICE Code Editor.

Computer sind nicht in der Lage, tatsächlich einen Ball herzustellen. Stattdessen tun sie nur so, indem sie einen Haufen Quadrate (und manchmal auch Dreiecke) so zusammensetzen, dass das Ganze dann aussieht wie ein Ball. Normalerweise erhalten wir die richtige Anzahl an Segmenten, sodass es ähnlich genug wirkt.

Manchmal aber möchten wir, dass der Ball ein bisschen glatter wirkt. Dazu fügen wir auf der SphereGeometry()-Zeile zusätzliche Werte hinzu:

var shape = new THREE.SphereGeometry(100, 20, 15);
var cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
scene.add(ball);

❶ Die erste Zahl ist die Größe, die zweite Zahl ist die Anzahl der Segmente um die Kugel herum, und die dritte Zahl ist die Anzahl der Segmente nach oben und unten.

Dies sollte eine Kugel ergeben, die viel glatter ist:

Abbildung 1.8 So sieht es schon viel besser aus.

Spiel doch noch ein bisschen mit diesen Zahlen herum. Du lernst gerade eine ganze Menge, und durch ein wenig Experimentieren wirst du noch mehr erfahren!

Ändere die Segmentierung nur, wenn Du unbedingt musst

Die Anzahl der Segmente, die wir erhalten, ohne dass wir SphereGeometry anweisen, mehr zu benutzen, ist vielleicht nicht so toll, aber du solltest sie nur ändern, wenn du unbedingt musst. Je mehr Segmente in einer Form sind, desto schwerer muss der Computer arbeiten, um sie zu zeichnen. Wie du später sehen wirst, ist es meist einfacher für den Computer, etwas glatt wirken zu lassen, wenn du eine andere Hülle für die Form wählst.

Wenn du weiter machen möchtest, schiebe den Ball aus dem Weg, indem du seine Position festlegst:

var shape = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
scene.add(ball);

 ball.position.set(-250,250,-250);

❶ Die drei Zahlen verschieben den Ball nach links, nach oben und nach hinten. Kümmere dich im Augenblick nicht darum, was diese Zahlen genau machen – wir reden über Positionen, wenn wir in Kapitel 3, Projekt: Einen Avatar herstellen, damit beginnen, Spielecharaktere zu bauen.

Mit der Würfelform Kisten herstellen

Als Nächstes erzeugen wir einen Würfel, also im Prinzip eine Kiste. Es gibt drei Möglichkeiten, die Form eines Würfels zu ändern: Du kannst ihn in der Breite, in der Höhe und in der Tiefe ändern.

Größe: CubeGeometry(300, 100, 20)

Um eine Kiste herzustellen, schreiben wir unter das, was wir für unseren Ball benutzt haben, weiteren JavaScript-Code. Tippe Folgendes ein:

var shape = new THREE.CubeGeometry(100, 100, 100);
var cover = new THREE.MeshNormalMaterial();
var box = new THREE.Mesh(shape, cover);
scene.add(box);

Wenn du alles richtig gemacht hast, solltest du ... richtig, ein Quadrat sehen:

Abbildung 1.9 Ganz offensichtlich ein Quadrat

Hm, das ist langweilig. Warum sehen wir ein Quadrat statt einer Kiste? Die Antwort lautet: ... weil unsere Kamera, also unsere Perspektive, direkt auf eine Seite der Kiste gerichtet ist. Falls wir mehr von der Kiste sehen wollen, müssen wir entweder die Kamera verschieben oder die Kiste drehen. Drehen wir also die Kiste:

var shape = new THREE.CubeGeometry(100, 100, 100);
var cover = new THREE.MeshNormalMaterial();
var box = new THREE.Mesh(shape, cover);
scene.add(box);

box.rotation.set(0.5, 0.5, 0);

❶ Diese drei Zahlen drehen die Kiste entgegen dem Uhrzeigersinn nach unten und nach rechts.

In diesem Fall drehen wir 0.5 nach unten und 0.5 nach rechts:

Abbildung 1.10 Die verdeckten Flächen des Würfels werden sichtbar.

Probiere es selbst aus!

An das Drehen von Dingen muss man sich erst gewöhnen, deshalb solltest du ein bisschen mit den Werten herumspielen. Probiere kleinere und größere Zahlen aus. Eine volle Drehung erreichst du mit 6.3 (wir reden später über diese Zahl). Versuche einmal, zwei der Zahlen auf 0 und eine andere auf 0.1, dann auf 0.25 und schließlich auf 0.5 zu setzen. Wenn du die Zahlen schnell genug änderst, dann ist das fast so, als würde der Würfel herumwirbeln!

Mit einer Drehung von (0.5, 0.5, 0) müsste der Würfel so weit herumgedreht worden sein, dass man tatsächlich einen Würfel erkennen kann:

Abbildung 1.11 So sieht der Würfel im Code Editor aus.

Die Seiten der Kiste müssen nicht alle gleich groß sein. Unsere Kiste ist momentan 100 breit (von links nach rechts), 100 hoch (von oben nach unten) und 100 tief (von vorn nach hinten). Ändern wir sie so, dass sie 300 breit, 100 hoch und nur 20 tief ist:

var shape = new THREE.CubeGeometry(300, 100, 20);
var cover = new THREE.MeshNormalMaterial();
var box = new THREE.Mesh(shape, cover);
scene.add(box);
box.rotation.set(0.5, 0.5, 0);

Das sollte jetzt etwa so aussehen:

Abbildung 1.12 Aus dem Würfel ist jetzt eine lang-gezogene Kiste geworden.

Probiere noch einige andere Werte aus, um ein Gefühl dafür zu bekommen.

Ob du es glaubst oder nicht, du weißt jetzt schon eine ganze Menge über JavaScript und die 3D-Programmierung. Natürlich gibt es noch viel mehr zu lernen, aber du kannst jetzt bereits Bälle und Kisten herstellen. Du kannst sie schon verschieben und herumdrehen. Und dazu musstest du nur zehn Zeilen JavaScript-Code schreiben – wirklich toll! Schieben wir unsere Kiste aus dem Weg, damit wir mit noch mehr Formen spielen können:

var shape = new THREE.CubeGeometry(300, 100, 20);
var cover = new THREE.MeshNormalMaterial();
var box = new THREE.Mesh(shape, cover);
scene.add(box);
box.rotation.set(0.5, 0.5, 0);
box.position.set(250, 250, -250);

Zylinder für alle möglichen Formen

Ein Zylinder, manchmal auch Röhre genannt, ist eine überraschend nützliche Form in der 3D-Programmierung. Denk einmal darüber nach: Zylinder können als Baumstämme, Blechdosen oder auch als Räder benutzt werden ... Wusstest du, dass man mit Zylindern Kegel, Tannenbäume und sogar Pyramiden herstellen kann? Und so geht‘s!

Größe: CylinderGeometry(20, 20, 100)

Tippe die folgenden Zeilen unter dem Kistencode ein, um einen Zylinder herzustellen:

var shape = new THREE.CylinderGeometry(20, 20, 100);
var cover = new THREE.MeshNormalMaterial();
var tube = new THREE.Mesh(shape, cover);
scene.add(tube);

Wenn du das ein bisschen drehst (du erinnerst dich aus dem letzten Abschnitt noch daran, oder?), siehst du vermutlich so etwas Ähnliches (siehe Abbildung 1.13).

Mach dir keine Sorgen, solltest du nicht mehr wissen, wie man die Röhre dreht. Tippe einfach nach der Zeile mit scene.add(tube) dies hier ein:

tube.rotation.set(0.5, 0, 0);

Beim Herstellen eines Zylinders beschreiben die ersten beiden Zahlen, wie groß der Zylinder oben und unten ist. Die letzte Zahl gibt die Höhe des Zylinders an. Unser Zylinder ist also oben und unten jeweils 20 groß. Außerdem ist er 100 hoch.

Abbildung 1.13 Siehe da, ein Zylinder!

Was passiert, wenn du die ersten beiden Werte auf 100 und die letzte Zahl auf 20 änderst? Was passiert, wenn du die Spitze auf 1, das Unterteil auf 100 und die Höhe auf 100 stellst?

Probiere es selbst aus

Spiele mit diesen Zahlen ein bisschen herum und erlebe selbst, was du herstellen kannst!

Was hast du herausgefunden?

Ein flacher Zylinder ist eine Scheibe:

Abbildung 1.14 Die Welt ist eine Scheibe. ;-)

Und ein Zylinder, der entweder eine Spitze oder ein Unterteil mit der Größe 1 hat, ist ein Kegel:

Abbildung 1.15 Ein Zirkuszelt?

Es sollte klar sein, dass du mit Zylindern viel erreichen kannst, allerdings haben wir bisher gar nicht alles gesehen. Ein Trick ist noch übrig.

Pyramiden: CylinderGeometry(1, 100, 100, 4)

Hast du gemerkt, dass Zylinder klobig aussehen? Es sollte dich deshalb nicht überraschen, dass man die Grobheit von Zylindern kontrollieren kann. Wenn du zum Beispiel die Anzahl der Segmente bei der Scheibe auf 20 setzt, so wie hier:

var shape = new THREE.CylinderGeometry(100, 100, 10, 20);
var cover = new THREE.MeshNormalMaterial();
var tube = new THREE.Mesh(shape, cover);
scene.add(tube);
tube.rotation.set(0.5, 0, 0);

dann müsstest du so etwas sehen:

Abbildung 1.16 Ein ganz flacher Zylinder mit einem stark geglätteten Rand

Genau wie bei den Kugeln solltest du nur dann viele Segmente benutzen, wenn du das wirklich, wirklich brauchst.

Kannst du dir vorstellen, wie man das in eine Pyramide verwandeln könnte? Du hast schon alle Hinweise, die du brauchst.

Probiere es selbst aus!

Spiele mit unterschiedlichen Zahlen herum und schaue dir an, was passiert!

Hast du es herausbekommen? Keine Panik, falls nicht. Was wir machen, ist wirklich ziemlich raffiniert.

Du musst nämlich die Anzahl der Segmente, aus denen du einen Kegel herstellst, verringern. Wenn du die Spitze auf 1, das Unterteil auf 100, die Höhe auf 100 und die Anzahl der Segmente auf 4 setzt, bekommst du das:

Abbildung 1.17 Eine Pyramide

Es kommt dir vielleicht wie Schummelei vor, auf diese Weise eine Pyramide herzustellen, aber das bringt uns zu einem sehr wichtigen Tipp für alle Programmierungen:

Schummle, wann immer das möglich ist

Im wirklichen Leben solltest du nicht schummeln, aber bei der Programmierung – vor allem bei der 3D-Programmierung – solltest du immer nach einfacheren Methoden suchen, um etwas zu tun. Selbst wenn es eine übliche Methode für etwas gibt, könnte es einen besseren Weg geben.

Du warst bis hierher ganz klasse. Schiebe die Röhre genau wie den Würfel und die Kugel aus der Mitte heraus:

tube.position.set(250, -250, -250);

Wir kommen jetzt zu den letzten beiden Formen in diesem Kapitel.

Mit Ebenen flache Oberflächen bauen

Eine Ebene ist eine flache Oberfläche. Ebenen sind besonders für den Boden nützlich, man kann mit ihnen aber auch gut Türen und Ecken in unseren Spielen kennzeichnen.

PlaneGeometry(100, 100)

Da Ebenen einfach nur flache Quadrate sind, sind sie viel einfacher als die anderen Objekte, die wir bisher gesehen haben. Tippe Folgendes ein:

var shape = new THREE.PlaneGeometry(100, 100);
var cover = new THREE.MeshNormalMaterial();
var ground = new THREE.Mesh(shape, cover);
scene.add(ground);
ground.rotation.set(0.5, 0, 0);

Vergiss nicht die Drehung auf der letzten Zeile. Ebenen sind so dünn, dass du sie vielleicht gar nicht siehst, wenn du direkt auf sie blickst.

Die Zahlen beim Herstellen einer Ebene bezeichnen Breite und Tiefe. Eine Ebene, die 300 breit und 100 tief ist, könnte so aussehen:

Abbildung 1.18 Eine Ebene

Mehr musst du über Ebenen eigentlich gar nicht wissen. Schieb unsere Ebene aus dem Weg:

var shape = new THREE.PlaneGeometry(300, 100);
var cover = new THREE.MeshNormalMaterial();
var ground = new THREE.Mesh(shape, cover);
scene.add(ground);
ground.position.set(-250, -250, -250);

Kommen wir nun zur allerbesten Form auf der ganzen weiten Welt.

Mit einem Ring einen Donut zeichnen (leider nicht essbar)

Im Kauderwelsch der 3D-Programmierung wird ein Donut auch als Ring (oder Torus) bezeichnet. Für den einfachsten Ring müssen wir zwei Werte zuweisen: einen für den Abstand von der Mitte bis zur Außenkante und einen anderen für die Dicke der Röhre.

TorusGeometry(100, 25)

Tippe Folgendes in den ICE ein:

var shape = new THREE.TorusGeometry(100, 25);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);

Du solltest einen ziemlich unförmigen Donut sehen, so wie der in Abbildung 1.19.

Inzwischen weißt du vermutlich, wie du den Donut ein bisschen glatter hinbekommen kannst:

Abbildung 1.19 Ein unförmiger Donut

TorusGeometry(100, 25, 8, 25)

Genau wie die Kugel besteht die Donut-Form aus Segmenten. Die Segmente können um die innere Röhre herum größer oder kleiner gemacht werden. Für die Anzahl der Segmente fügen wir eine dritte Zahl ein, wenn wir die TorusGeometry definieren. Die Größe der Segmente an der Außenseite des Donuts bestimmen wir über eine vierte Zahl. Teste zum Beispiel einmal folgende Zahlen und schaue dir an, was passiert.

var shape = new THREE.TorusGeometry(100, 25, 8, 25);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);

Na, das ist mal ein gut aussehender Donut:

Abbildung 1.20 Ist er nicht zum Anbeißen?

TorusGeometry(100, 25, 8, 25, 3.14)

Wir können mit Donuts noch einen Trick ausprobieren. Setze zu der TorusGeometry-Form eine weitere Zahl, und zwar 3.14, hinzu:

var shape = new THREE.TorusGeometry(100, 25, 8, 25, 3.14);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);

Na so was! Der Donut ist halb aufgegessen.

Bevor wir unsere erste Programmiersitzung beenden, wollen wir etwas Cooles machen. Lassen wir alle unsere Formen wie verrückt herumwirbeln.

Gib im ICE nach all unseren Formen den folgenden Code ein:

var clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
var t = clock.getElapsedTime();
ball.rotation.set(t, 2*t, 0);
box.rotation.set(t, 2*t, 0);
tube.rotation.set(t, 2*t, 0);
ground.rotation.set(t, 2*t, 0);
donut.rotation.set(t, 2*t, 0);
renderer.render(scene, camera);
}
animate();

Kümmere dich erst einmal nicht darum, was dieser ganze Code bedeutet – wir schauen uns diese Zeilen weiter unten im Buch genauer an. Für den Augenblick reicht es, zu wissen, dass wir in bestimmten Zeitintervallen die Drehung der Form ändern. Nach jeder Änderung fordern wir das Render-Programm (Rendern bedeutet in der 3D-Geheimsprache Zeichnen oder Darstellen) auf, die aktuellen Formen auf dem Bildschirm neu zu zeichnen oder zu rendern.

Um dir die Dinge ein bisschen zu vereinfachen, findest du eine vollständige Version dieses Projekts in Abschnitt „Code: Einfache Formen herstellen“. Mit diesem Code kannst du deine Arbeit überprüfen, wenn Du die Übungen absolvierst. Allerdings solltest du den Code nicht einfach in den ICE kopieren. Es ist nicht möglich, das Programmieren zu lernen und zu verstehen, wenn du es nicht selbst machst.

Wow! Das war ziemlich irre. Wir haben schon eine Menge gelernt, und dabei haben wir gerade erst angefangen!

Wir wissen bereits, wie man Projekte im ICE Code Editor programmiert. Wir wissen, wie man viele unterschiedliche Formen herstellt. Wir können sogar schon Dinge mit JavaScript verschieben und drehen. Und was das Beste ist, wir brauchten nur 15 Zeilen Code, um nach dem Herstellen unserer Formen eine wirklich coole Animation zu schaffen. Das ist ein guter Anfang.

Nachdem wir einen ersten Vorgeschmack von 3D-Programmierung bekommen haben, wollen wir ein bisschen darüber reden, wie man in Webbrowsern programmiert.

Die JavaScript-Konsole in einem Browser ist die beste Freundin jedes Webprogrammierers. Sie verrät uns, wo wir Fehler gemacht haben.

Fangen wir damit an, einfache Sachen kaputt zu machen, über die der ICE Code Editor uns berichten kann.

Ein rotes X neben deinem Code bedeutet, dass der ICE ein Problem erkennt, das verhindert, dass dein Code ausgeführt wird. Lass uns ein bisschen wirklich mieses JavaScript schreiben, um das einmal zu demonstrieren. Gib unter START CODING ON THE NEXT LINE folgende Zeile ein.

bad()javascript

Das ist wirklich übles JavaScript!

Fragst du dich, wieso? Es ist übel, weil nach den Klammern niemals ein Wort folgen sollte. Wenn du solchen Code schreibst, zeigt der ICE neben der Zeile mit dem Problem ein rotes X, um zu signalisieren, dass diese Zeile korrigiert werden muss. Schiebst du den Mauszeiger über das rote X, wird sogar die eigentliche Fehlermeldung angezeigt, wie etwa »missing; before statement« (fehlendes; vor Statement).

Abbildung 2.3 Die Konsole verrät uns, dass hier ein Semikolon fehlt.

Der ICE wird dir nicht verraten, dass du Wörter hinter die Klammern geschrieben hat. Er weiß lediglich, dass am Ende der Zeile Klammern stehen sollten, was hier nicht der Fall war. Als er entdeckte, dass die Zeile nicht beendet worden war, löste er einen Fehler aus mit der Warnung: »He! Du hast das Semikolon am Ende der Zeile vergessen!« Wir müssen selbst herausfinden, wo die Zeile enden sollte.

Folgende Dinge kannst du in deinem Code überprüfen, wenn du ein rotes X siehst:

Im Gegensatz zu einem roten X hält ein gelbes Dreieck, das links neben deinem Code auftaucht, die Show nicht auf. Dein Code läuft vermutlich auch dann, wenn einige seiner Zeilen mit gelben Dreiecken markiert sind, allerdings läuft er vielleicht nicht korrekt. Am besten ist es, diese Dreiecke wieder loszuwerden.

Dafür schreiben wir noch ein bisschen schlechtes JavaScript (aber nicht zu schlecht). Entferne zuerst die bad()javascript-Zeile aus dem vorherigen Abschnitt und füge dann die folgenden Zeilen hinzu:

food;
eat(food);

In diesem Fall teilt uns der ICE mit dem gelben Dreieck mit, dass die food-Zeile nichts macht.

Abbildung 2.4 Eine Warnung

Wir können das Problem beheben, indem wir die food-Zeile in eine Zuweisung ändern:

food = 'Cookie';
eat(food);

Der ICE sollte die neue food-Zeile akzeptieren und keine Fehler mehr anzeigen. Doch auch wenn der ICE keine Probleme mehr feststellen kann, stimmt mit diesem Code etwas nicht.

An dieser Stelle hilft uns die JavaScript-Konsole weiter, weil wir mit ihr sehen, was das Programm tatsächlich macht. Sobald du die Konsole geöffnet hast, siehst du die Fehlermeldung, die dir mitteilt, dass eat() nicht definiert ist.

Abbildung 2.5 Der Browser weiß nicht, was mit eat gemeint ist.

Als der Browser versuchte, den schlechten JavaScript-Code auszuführen, merkte er, dass es ein Problem gab. Wir befahlen dem Browser in unserem Programm, die Funktion eat() auszuführen, sagten ihm aber nie, wie er das machen soll. Fehler, die gefunden werden, wenn man versucht, den Code auszuführen, heißen Laufzeitfehler (oder Runtime Errors).

Wir werden uns in Kapitel 5, Funktionen: Immer und immer wieder benutzen, näher mit Funktionen befassen. Im Augenblick reicht es aus, zu wissen, dass eine Funktion eine Methode ist, um Code zu schreiben, der immer wieder ausgeführt werden kann.

Die Fehler, die vom ICE mit dem roten X und dem gelben Dreieck gekennzeichnet werden, heißen Compile-Zeit-Fehler (Fehler zur Übersetzungszeit). Compile-Zeit-Fehler werden erfasst, wenn der Computer den Code liest und entscheidet, was er damit machen soll. Der Begriff Übersetzen bezieht sich auf den Computer, der entscheidet, was er mit dem Code machen soll.

Die JavaScript-Konsole hilft uns dabei, Laufzeitfehler zu beheben.

Um dieses Problem zu lösen, wollen wir unserem JavaScript-Programm sagen, wie man Essen isst. Dazu fügen wir eine Funktion hinzu, die nach der Zeile mit eat(food) das Essen erklärt.

food = 'Cookie';
eat(food);
function eat(food) {
console.log(food + "! Nam. Nam. Nam.");
}

Es sollte jetzt keine Compile-Zeit-Fehler im ICE und keine Laufzeitfehler in der JavaScript-Konsole geben, und in der Konsole müsste die Nachricht »Cookie! Nam. Nam. Nam.« auftauchen.

Bevor wir dieses Kapitel beschließen, schauen wir uns noch einige verbreitete Fehler bei der 3D-Programmierung an. Füge den folgenden Code nach der abschließenden geschweiften Klammer der eat()-Funktion hinzu:

var shape = new THREE.SpherGeometry(100);
var cover = new Three.MeshNormalMaterial();
var ball = new THREE.Mesh(shape, cover);
scene.ad(ball);

Du wirst bemerken, dass es für diesen Code im ICE keine Compile-Zeit-Fehler gibt. Der Browser liest den JavaScript-Code und sagt: »Jepp, das sieht für mich wie absolut einwandfreies JavaScript aus. Ich führe das jetzt aus!« Allerdings kommt es zu Problemen, wenn der Code tatsächlich ausgeführt wird, und du findest in der JavaScript-Konsole Laufzeitfehler.

Mögliche Fehlermeldung – Undefined Is Not a Function

Schauen wir uns zuerst einmal an, was schiefgegangen ist. Öffne die JavaScript-Konsole, falls sie noch nicht geöffnet ist. Darin solltest du eine sehr wenig hilfreiche Nachricht sehen.

Abbildung 2.6 Fehlermeldungen in der Konsole können verwirrend sein.

Diese Nachricht versucht, uns mitzuteilen, dass SphereGeometry falsch geschrieben ist. Überprüfe den Code. Es stellt sich heraus, dass wir ein e vergessen und stattdessen SpherGeometry eingetippt hatten. Die Nachricht in der JavaScript-Konsole hat uns dabei eigentlich nicht viel genützt.

Es gibt hier zwei Probleme, die enträtselt werden müssen. Erstens verrät uns undefined is not a function eigentlich nichts und ist auch nicht leicht zu verstehen. Selbst JavaScript-Experten werden davon verwirrt.

Das zweite Problem ist die Zeilennummer in der Fehlermeldung. In diesem Beispiel bedeutet gamingjs.com:25, dass der Browser glaubt, das Problem sei in Zeile 25 unseres Programms aufgetreten (bei dir könnten die Zeilennummern ein wenig anders sein). Allerdings steht das falsch geschriebene Wort nicht in Zeile 25 im ICE. Unser Problem tritt stattdessen in Zeile 28 auf. Und ja, auch das verwirrt JavaScript-Experten.

Zeilennummern in der Konsole sind nicht immer exakt

Der ICE bemüht sich wirklich, das mit den Zeilennummern in der Konsole richtig zu machen, und manchmal gelingt es ihm auch – es könnte sogar jetzt bei dir stimmen –, aber manchmal kann er auch um einige Zeilen danebenliegen. Beginne deine Suche immer an der exakten Zeilennummer. Falls es nicht so aussieht, als sei der Fehler dort zu finden, prüfe die nächsten benachbarten Zeilen.

Kommen wir zurück zur Fehlermeldung undefined is not a function, die sich in Wirklichkeit auf Zeile 28 im ICE bezieht. Dieser Fehler bedeutet, dass der Browser nach einer Funktion suchte, als er versuchte, unseren Code auszuführen, aber etwas fand, das er nicht kannte. THREE.SpherGeometry war nicht definiert, weil die tatsächliche Funktion THREE.SphereGeometry hieß.

Zum Glück lässt sich dieses Problem leicht beheben, weil wir nur ein e hinzufügen müssen.

Mögliche Fehlermeldung – Three Is Not Defined

Doch selbst nachdem wir SphereGeometry richtig geschrieben haben, erscheint auf dem Bildschirm kein Ball. Irgendetwas stimmt mit unserem Code immer noch nicht.

Wenn du in die JavaScript-Konsole schaust, solltest du so etwas sehen.

Abbildung 2.7 Wir kommen der Lösung des Problems schon näher.

Hier sagt uns die JavaScript-Konsole, dass uns offenbar entfallen ist, dass THREE immer in Großbuchstaben geschrieben werden sollte. So etwas wie Three gibt es nicht; wir haben es jedoch geschrieben, und die JavaScript-Konsole teilt uns das hier mit.

Dieser Fehler ist beim Arbeiten mit der 3D-Bibliothek ziemlich verbreitet. Versuche deshalb am besten, dir das für das nächste Mal zu merken, wenn du den Fehler siehst.

Wir können diesen Fehler beheben, indem wir Three im Code durch THREE ersetzen.

Mögliche Fehlermeldung – Undefined: No Method

Doch auch nachdem wir diese beiden Fehler entfernt haben, ist kein Ball zu sehen. Stattdessen finden wir in der Konsole eine weitere seltsame Fehlermeldung.

Abbildung 2.8 Es ist immer noch nicht richtig!

Kümmere dich nicht um den Object [object Object]-Teil der Meldung, der uns im Moment nichts Nützliches zu sagen hat.

In diesem Fall sagten wir dem Browser, dass es eine Methode namens ad() gäbe. Allerdings war er nicht in der Lage, irgendwelche Informationen dazu in der Datei zu finden. Die Lösung ähnelt der aus den vorherigen Beispielen. Die Methode, die wir haben sollten, heißt add(), nicht ad(). Mit anderen Worten, wir haben uns schon wieder verschrieben.

Nachdem du diese Zeile korrigiert hast, siehst du endlich einen Ball und die Meldung »Nam. Nam. Nam.« in der JavaScript-Konsole.

Abbildung 2.9 Hmm, das schmeckt!

Es ist überraschend einfach, einen Webbrowser zum Absturz zu bringen. Wenn du eine Kugel mit einer Million Segmenten herstellst, stürzt er ab. Wenn du eine rekursive Funktion ohne Stopppunkt schreibst (darüber reden wir in Kapitel 5), stürzt der Browser ab.

Wenn der Browser kaputt ist, geht der ICE Code Editor auch nicht mehr, oder?

Nun ja, aber das lässt sich leicht beheben: Füge ?e oder ?edit-only der URL hinzu, sodass du unter http://gamingjs.com/ice/?e loslegst. Das ist der Edit-only-Modus für den ICE (Nur-bearbeiten-Modus).

Korrigiere die letzte Sache, die du eingetippt hast, um den ICE abstürzen zu lassen, und entferne dann das Edit-only-Fragezeichen aus der URL. Du bist jetzt zurück bei http://gamingjs.com/ice/. Auch die Vorschau sollte nun wieder zu sehen sein.

Auf manchen Computern musst du vielleicht den Browser-Tab oder das Browserfenster schließen, bevor du das probieren kannst. Du kannst dann ein neues Fenster oder einen neuen Tab öffnen, in den du die ICE-URL für den Edit-only-Modus eingibst. Speziell auf Google Chromebooks läuft der Edit-only-Modus besser, wenn man so vorgeht.

Wir wissen jetzt, wie wir Formen herstellen können und wo wir nachschauen müssen, wenn etwas schiefgeht. Als Nächstes wollen wir mit unserem ersten Spiel beginnen, indem wir uns einen ganz eigenen Avatar bauen.