Three.js

Bei Three.js handelt es sich um eine Javascript-library, die es ermöglicht einfacher 3D-Grafiken oder 3D-Spiele zu programmieren. Einbinden lässt sie sich in eine .html-Datei z.B. mit

<script src="www.ratsgymnasium-pe.de/Training/js/threejs/Three.js"></script>

Ein Beispielcode ist folgender:

var scene = new THREE.Scene(); // erzeugt eine Szene, in der alles passieren soll
 
var verhaeltnis =window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75,verhaeltnis,1,10000); // erzeugt die Kamera
camera.position.z =500; // Positioniert Kamera
scene.add (camera);     // Kamera wird zur Szene hinzugefügt
 
var renderer = new THREE.CanvasRenderer(); // erzeugt den Renderer
// ein renderer erzeugt die dinge, die die Kamera aufnimmt
renderer.setSize(window.innerWidth, window.innerHeight); // setzt Größe des Renderers
document.body.appendChild(renderer.domElement); // fügt dem body der Seite den Inhalt zu
 
renderer.render(scene,camera);

Diese Seite ist jedoch vollkommen leer, weil wir der Szene keine Elemente hinzugefügt haben. Ein Objekt besteht dabei immer aus einer Form , z.B.

var kugelform = new THREE.SphereGeometry(100); 

und einem Material, dass die Form umhüllt, z.B.

 var kugelmaterial = new THREE.MeshNormalMaterial();

Als letztes setzt man die Bestandteile zusammen, fügt es zur Szene hinzu

var kugel = new.THREE.Mesh(kugelform,kugelmaterial);
scene.add(kugel);

und setzt den gesamten Code vor dem rendern der Szene und der Camera. Somit sieht man eine Kugel.

Die folgenden Funktionen erzeugen Formen unterschiedlicher Körper.

Die Funktion THREE.SphereGeometry(x,y,z) kann einen oder drei Inputs haben. Der erste (oder einzige) Input beschreibt die Größe der Kugel. Der zweite ist die Anzahl der Segmente um die Kugel herum (von links nach rechts) und der dritte Input schließlich die Anzahl der Segmente von oben nach unten.

Die Funktion THREE.CubeGeometry(x,y,z) hat stets 3 Inputs. Der Würfel, der entstehen soll, wird dann x px breit, y px hoch und z px tief. Wenn keine Rotation dem Objekt hinzugefügt wurde, kann es passieren, dass man nur ein Rechteck sieht, dann sollte man eine Rotation hinzufügen:

var box = (new THREE.CubeGeometry(100,100,100), new THREE.MeshNormalMaterial());
box.rotation.set(0.5,0.5,0);

Die Funktion THREE.CylinderGeometry(x,y,z,a) erwartet 3 oder 4 Inputs. Die Figur wird oben x px breit, unten y px breit und z px hoch sein. Optional kann man die Anzahl der Segmente um die Figur herum auf a setzen. So lässt sich also mit

 var pyramidenform = new THREE.CylinderGeometry(1,100,100,4); 

eine Pyramide erzeugen.

THREE.TorusGeometry(a,b,c,d,e) hat 2, 4 oder 5 Inputs. Dabei steht a für den Außendurchmesser und b für den Innendurchmesser des Torus (auch bekannt als Donut). c bestimmt optional die Anzahl der Innensegmente und d die Anzahl der Außensegmente. Mit dem letzten optionalen Input kann man bestimmen, wie groß der Anteil des Donuts der gezeichnet werden soll ist, abhängig von PI. Dabei entspricht 2* Pi einem ganzen Torus. Dementsprechend würde nur ein halber gezeichnet werden, würde man e entsprechend auf PI setzen.

Außerdem lassen sich nicht nur 3D- Figuren erzeugen, sondern auch Ebene Flächen erzeugen. Dieses geschieht zum Beispiel mit der THREE.PlaneGeometry(x,y) Funktion. Die Fläche wird schließlich x px breit und y px hoch. Ebenso gibt es eine CircleGeometry(x) Funktion für einen flachen Kreis.

Alternativ zum Canvas-Renderer gibt es den WebGL-Renderer, der es zulässt mit Licht, Schatten und mehr Materialvarianten zu arbeiten. Jedoch haben nicht alle aktuell am Netz verbundenen Rechner die Möglichkeit auf WebGL zurückzugreifen, daher ist es für manche besser beim Canvas-Renderer zu bleiben. Den WebGL-Renderer kann man folgendermaßen benutzen:

var renderer = new THEE.WebGLRenderer();

Alternativ zur PerspectiveCamera bietet Threejs die Möglichkeit eine orthografische Kamera zu nutzen. Orthografische Kameras haben beispielsweise in 2D-Spielen deutliche Vorteile oder in Spielen, bei denen große Distanzen auf den Screen gebracht werden.

var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.OrthographicCamera(-width/2,width/2,height/2,-height/2,1,10000);

Im Vergleich zur PerspectiveCamera werden die Grenzen statt dem Verhältnis eingefügt.

Bisher wurde nur das MeshBasicMaterial() als normales Material erwähnt. Da Körper mit dieser Umhüllung nicht die schönsten sind, besteht zunächst einmal die Möglichkeit, die Farbe zu ändern:

 koerper.color.setRGB(0.36,0.54,0.66);

Dabei stehen die Zahlen jeweils für prozentuale Anteile der Farben rot, grün und blau.

Befindet man sich nun im WebGL-Renderer, so kann man mit Licht, Reflektion am Material und Schatten arbeiten.

Damit das Licht auf einem Körper gut strahlen kann und er nicht matt bleibt sollte man das THREE.MeshPhongMaterial() benutzen und eine Lichtquelle zur Szene hinzufügen.

var sonnenlicht = new THREE.DirectionalLight();
sonnenlicht.intensity =0.5;
sonnenlicht.position.set (100,100,100);
scene.add(sonnenlicht);

Benutzt man nun das MeshPhongMaterial, so ändert man die Farbe anders als beim MeshBasicMaterial, nämlich folgendermaßen:

 koerper.emissive.setRGB(0.8,0.1,0.1);

Dadurch strahlt die Farbe mehr, als beim color-Attribut. Weiterhin lässt sich die Lichtspiegelung des Körpers durch das specular-Attribut angeben:

 koerper.specular.setRGB(0.9,0.9,0.9);

Um Schatten zu verwenden muss man diese im Renderer aktivieren:

render.shadowMapEnabled = true;

Weiterhin muss man in dem Programm mitteilen, welches Objekt durch welches Licht auf welchen anderen Körper oder Boden der Schatten geworfen werden soll. Da dieses einiges an Rechnerleistung verwendet, sollte man diesbezüglich sparsam sein.

scene.add(koerper);
scene.add(sonnenlicht);
koerper.castShadow = true;
sonnenlicht.castShadow = true;
 
scene.add(boden);
boden.receiveShadow = true;