In diesem Blogpost berichte ich über Three JS. Auf das Thema bin ich in der Schule im Modul 152 gestossen. Unser Lehrer hat uns Three JS ein bisschen vorgestellt, worauf ich interessiert war, mehr davon zu lernen und es in ein Blogpost zu verfassen.

Was ist Three JS?

Three JS ist eine Open-Source JavaScript Library, die zur Darstellung von Grafiken in 3D- und 2D-Objekten im Webbrowser verwendet wird. Sie verwendet die WebGL API hinter der Szene. Mit Three JS kann man die GPU verwenden, um die Grafiken von 3D-Objekte auf im Webbrowser darzustellen. Da JavaScript verwendet wird, kann man auch mit anderen HTML-Elementen interagieren.

Was ist die WebGL?

WebGL steht für Web Graphic Library. Es ist die Web Version von OpenGL, einer plattformübergreifenden Grafik Library, die von den meisten Grafikkartentreibern implementiert wird. Diese Library ist ziemlich Low-Level und wird von einigen Spielen oder Grafikanwendungen auf Desktop-Computern, Laptops und Mobiltelefonen verwendet. Leider kann man in einem Web-Kontext aus Sicherheitsgründen nicht auf diese Art von Low-Level Library zugreifen. Das ist der Grund, warum WebGL erstellt wurde. WebGL ist eine Grafik Library, die für den Webbrowser entwickelt wurde. Man kann es von einer JavaScript-Webanwendung aus benutzen, um in 3D zu zeichnen, ähnlich wie man es in einer Desktop-Anwendung mit OpenGL tun würde. Allerdings ist WebGL ein Subset von OpenGL, so dass es mit einigen Einschränkungen kommt. WebGL zeichnet nur einfache Objekte, wie z.B. ein Viereck, Dreieck etc. Um etwas sinnvolles mit WebGL zu machen, braucht es viel Code. Hier kommt nun Three JS ins Spiel, was das alles sehr vereinfacht.

Wie funktioniert Three JS?

Um zu verstehen, wie Three JS auf funktioniert, kann man sich in die Lage eines Filmregisseurs versetzen. Um einen Film in Javascript zu drehen, werden mehrere Schlüsselelemente erstellt und manipuliert.

Scene

Man kann die Szene als die 3D Welt sehen, in der man arbeiten wird. Objekte werden in dieser Szene angeordnet und es werden so viele Objekte erstellt, wie viel man möchte. Dies geschieht über die Meshes.

Meshes

Meshes sind einfach die Objekte, die in der Szene vorhanden sein werden. Damit man aber die Objekte sehen kann, muss Licht auf sie geworfen werden. Dabei wird das Objekt gefilmt, wofür eine Kamera gebraucht wird.

Kamera

Wie im wirklichen Leben wird die Kamera einen Blickwinkel auf Ihre Szene zeigen. Man spricht hier vom Sichtfeld (FOV), um genau zu sein. Indem sich die Kamera bewegt, bewegen sich Objekte in oder aus dem Sichtfeld. Das, was mit der Kamera gefilmt wird, wird an die Rendering-Engine gesendet.

Rendering Engine

Die Rendering Engine nimmt die Szene und die Kamera als Parameter. Damit stellt sie alles in dem HTML5 Canvas dar. Die Rendering Engine erzeugt jedes Mal, wenn der Bildschirm aktualisiert wird, ein Bild. In der Regel sind das 60 Bilder pro Sekunde.

Code

Man kann soviel Theorie wie man will schreiben, im Endeffekt interessiert einem Programmierer am meisten, wie der Code dazu aussieht. Ich erstelle eine einfache Szene mit ein Würfel in der Mitte. Ich drehe die Kamera auch um den Würfel herum.

Zuerst importiere ich schnell Three JS auf meiner Seite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>

Nun erstelle ich die Szene, Rendering Engine und auch die Kamera als “Perspektiven Kamera”. Bei der Perspektiven Kamera kann ich Parameter mitgeben um mein Sichtfeld zu ändern.

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer()
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)

Nun erstelle ich ein Würfel mit Mesh. Um ein Objekt zu erstellen (in diesem Fall Würfel) braucht man zwei Sachen: Die Geometrische Figur des Objektes (hier einfach eine Box) und das Material. Unter Material versteht man die Farbe des Objektes oder man kann auch ein Bild als Material nehmen. Ich erstelle einfach ein rotes Würfel und füge es der Szene hinzu:

const geometry = new THREE.BoxGeometry(10, 10, 10)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000})
const cube = new THREE.Mesh(geometry, material)

scene.add(cube)
camera.position.z = 20

Jetzt setzen wir die Rendering Engine in Fullscreen und fügen es im HTML hinzu:

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

Zum Schluss animiere ich noch den Würfel. Ich erstelle eine Animationsfunktion , die in einer infinite Loop aufgerufen wird. Dabei wird jedes Mal folgendes in der Funktion ausgeführt:

Den Würfel um sich selbst rotieren lassen
Die Rendering Engine auffordern, ein Bild zu erzeugen und anzuzeigen
Dieselbe Animationsfunktion wieder aufrufen

function animate() {
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render(scene, camera)
    requestAnimationFrame(animate)
}

animate()

Somit bin ich fertig. Ich habe das Code in ein Codepen, damit man selbst noch rumspielen kann: