In unseren Browsern haben wir heute Anwendungsmöglichkeiten, von denen wir vor 5 oder 10 Jahren nicht einmal geträumt haben. Komplette 3D-Animationen laufen in unseren Browsern und die interaktiven Homepages bieten ein viel umfassenderes Erlebnis für uns an. Weil gerade einige Virtual Reality-Unternehmen von Social Media-Kanälen gekauft werden, ist jetzt der perfekte Zeitpunkt um in die Arbeit mit 3D einzusteigen. Es ist einfach großartig, wie wir 3D-Animationen mit einfachen Java-Script erzeugen können, Netze und Materialen eingeschlossen. Natürlich, aber auch wenn das alles möglich ist, benötigen wir immer noch eine Menge Quellcodes und das ist dann der Punkt, an dem Three.js ins Spiel kommt, womit wir eine einfache 3D-Umgebung mit viel weniger Codes erzeugen können.
Browser-Kompatibilität
Leider wird 3D, weil es eben noch neu ist, noch nicht von allen Browsern unterstützt. Momentan müssen wir uns auf Chrome, Safari und Firefox beschränken. Aber später, wird der Support für IE sicher verbessert, aber derzeit brauchen wir noch eine Ersatzfunktion für die Microsoft-Jünger.
Einfach mal anfangen
Zuerst müssen wir uns auf der Three.js-Homepage die neueste Version der Library herunterladen. Als nächstes müsst ihr in eurem Dokumentenkopf darauf verweisen, wie ihr es mit jeder anderen JavaScript-Datei auch machen würdet, und schon kann es losgehen.
Die erste Umgebung erschaffen
Das Erste was wir machen müssen, um alles mit Three.js zu rendern, ist, uns eine Szene zu erschaffen mit einer Kamera und einem Renderer. Fangen wir mit der Umgebung an:
var scene = new THREE.Scene();
Als nächstes brauchen wir eine Kamera. Denkt daran, dass ist dann die Ansicht, aus welcher der User auf die Szene schaut. Three.js hält dazu eine Menge Optionen bereit, aber der Einfachheit halber benutzen wir hier nur eine Perspektivkamera.
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
Diese Methode enthält vier Parameter: Der Erste ist das Gesichtsfeld, der Zweite ist das Bildverhältnis (ich empfehle, dieses immer auf das Ansichtsfenster des Users auszurichten), die nahe Schnittfläche und zuletzt noch die entfernte Schnittfläche. Die letzten zwei Parameter grenzen die Render-Ränder ein, so dass Objekte die zu nah oder zu weit entfernt sind, nicht gezeichnet werden, was dann wiederum Ressourcen verschwenden würde.
Als Nächstes richten wir den WebGL Renderer ein:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Wie ihr also sehen könnt, ist das Erste, was ihr tun müsst, euch eine Instanz des Renderers zu erschaffen, dann dessen Größe aus Sicht des Users zu definieren und am Ende alles einer Seite hinzuzufügen, um eine neue Arbeitsumgebung zu schaffen, mit der wir weiterarbeiten können.
Einige Objekte hinzufügen
Nun haben wir erst einmal die grundlegende Umgebung erschaffen. Nun machen wir uns daran, unser erstes 3D-Objekt zu erstellen.
Das wird in diesem Tutorial ein einfacher Zylinder sein:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
Diese Methode benötigt also vier Parameter: Zuerst kommt der obere Zylinderdurchmesser und dann der untere Zylinderdurchmesser. Der dritte Faktor ist die Höhe und zum Schluss kommt die Anzahl der Höhensegmente.
Wir haben jetzt die Maße des Zylinders definiert. Nun müssen wir ihn in ein Material einwickeln, so dass er dann wie ein Bildschirmobjekt aussieht:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );
Dieser Code fügt für unseren Zylinder ein einfaches Material hinzu, in diesem Fall in blauer Farbe. Wir setzen hier wireframe auf true, weil so das Objekt einfach klarer angezeigt wird, wenn wir es dann einmal animiert haben.
Dann müssen wir den Zylinder noch in unsere Szene einfügen. Das geht so:
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
Das Letzte, was wir noch tun müssen, bevor wir die Szene rendern, ist, die Kameraposition einzurichten:
camera.position.z = 20;
Wie ihr nun sehen könnt, ist das eingebundene JavaScript extrem simpel. Das liegt daran, dass Three.js sich um all diesen komplizierten Kram kümmert, so dass wir das nicht machen müssen.
Die Szene rendern
Wenn ihr nun eure Datei im Browser testet, werdet ihr feststellen, dass gar nichts passiert. Das liegt daran, dass wir den Befehl zum Rendern der Szene noch nicht gegeben haben. Dafür benötigen wir folgenden Code:
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
Wenn ihr euch nun das Ganze im Browser anschaut, dann werdet ihr feststellen, dass der Zylinder zwar gerendert wurde, aber das ist nicht unbedingt sehr aufregend. Um die Szene nun wirklich aufzubessern, müsst ihr mit dem Animieren anfangen, was wir mit ein paar kleinen Änderungen in unserer Render-Funktion machen können:
function render() {
requestAnimationFrame(render);
cylinder.rotation.z += 0.01;
cylinder.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
Wenn ihr das Ergebnis nun erneut im Browser testet, dann werdet ihr einen richtig animierten Zylinder sehen.
Zusammenfassung
Wenn ihr ein Demo sehen wollt und etwas mit dem Code herumspielen wollt, dann könnt ihr das hier machen.
Wie ihr sehen könnt, haben wir für diese (zugegebenermaßen einfache) Szene weniger als zwei Dutzend Code-Zeilen gebraucht, und nur ein kleines bisschen Mathematik.
Wenn ihr euch die Beispiele auf der Three.js-Homepage anseht, werdet ihr dort wirklich großartige Arbeiten finden.
Die großartige JavaScript-Library bedient wirklich das Einsteigerlevel, so dass jeder, der die Basics für JavaScript beherrscht, auch damit arbeiten kann.
Bilder: © Stefan Weiß – FUTURELAB / Flickr.com