THREE.js, eine Einführung in das 3D-Webdesign

In der heutigen digitalen Welt gibt es zahlreiche innovative Webdesigns, die darauf abzielen, Nutzer auf vielseitige Arten und Weisen anzusprechen. Zwar ist mit CSS, Bildern und Grafiken so einiges möglich, aber leider stößt man dann doch recht schnell an die Grenzen dieser Technologien, gerade wenn man dem Nutzer einen Eindruck von Tiefe auf der Website vermitteln möchte. Hier kommt THREE.js ins Spiel. Mit THREE.js könnt ihr 3D-Modelle mühelos in eure Website integrieren und eurem Design eine neue Dimension verleihen. In diesem Blogbeitrag schauen wir uns genauer an, was THREE.js ist, welche Funktionen es bietet und wie ihr es nutzen könnt, um eure Website auf das nächste Level zu heben.

Was genau ist eigentlich THREE.js?

THREE.js ist eine Bibliothek für JavaScript und ist, wie bereits in der Einleitung erwähnt, dafür gedacht 3D-Modelle auf Webseiten zu integrieren. Es nutzt WebGL, eine JavaScript-API die dafür verantwortlich ist, die Modelle zu rendern, also darzustellen. Vorteilhaft ist, dass WebGL ohne die Nutzung zusätzlicher Plugins in modernen Browsern nativ funktioniert. Es hat außerdem Zugriff auf die GPU, was die Renderzeit erheblich reduzieren kann.
Während Blender oder Cinema4D komplette 3-D-Modellierungsprogramme sind, dient Three.js speziell dazu, 3D-Szenen im Browser darzustellen. Mit THREE.js lassen sich Szenen erstellen, Objekte wie z.B. Geometrien, Lichtquellen und Kameras erzeugen und platzieren, Materialien und Texturen zuweisen und vieles mehr. Die erstellte Szene kann dann in einem HTML canvas Element gerendert und auf der Website per diesem an die gewünschte Position gesetzt werden, was es sehr flexibel und unkompliziert im Einsatz macht.
Zwar können die Objekte bei THREE.js selbst erstellt und dann eingebunden werden, aber die Möglichkeiten sind begrenzter als bei den anderen Softwarelösungen. THREE.js bietet keine GUI, in der gearbeitet werden kann, sondern die Objekte müssen per Code erstellt werden. Dies ist zwar möglich, jedoch deutlich aufwendiger. Es sollte gerade bei komplexeren Objekten und Szenen auf eine vollständige Modellierungssoftware zurückgegriffen werden, um die Arbeit zu erleichtern. Da THREE.js durch WebGL eine einfache Möglichkeit bietet, die Modelle per Formaten wie GLTF oder OBJ-Datei zu importieren, ist dies jedoch kein Problem und mit wenigen Schritten erledigt.

Setup

Um mit THREE.js starten zu können benötigt ihr erst einmal Node. Node wird zum Erstellen und Ausführen von lokalen Servern per npx und zum Installieren und Verwalten von Paketen per npm verwendet.

Außerdem braucht ihr noch eine Datei index.html, in der das HTML5-Grundgerüst steht und eine main.js, in der ihr dann euren THREE.js Code schreibt. Wenn alles so weit erstellt wurde, könnt ihr loslegen THREE.js zu installieren. Dafür gibt es mehrere Möglichkeiten wie ihr dies machen könnt.

1. Per Package Manager
   
   Mit einem Package Manager wie z.B. npm kann three js einfach im Terminal mit:
   npm install three
   installiert werden. Npm kümmert sich dann um die zu installierende Pakete.
   
   Zudem wird ein Entwicklungsserver benötigt, den ihr z.B. mit vite aufsetzen könnt. Vite könnt ihr auch einfach mit eurem Package Manager installieren:
   npm install vite
   und mit
   npx vite
   startet ihr dann euren Entwicklungsserver und ihr seid bereit loszulegen.
   
   

2. Per CDN
   
   Ein CDN ist ein Server, der die Dateien für User bereitstellt und diese dann per Anfrage an sie ausliefert. Damit ist es möglich, dass die Dateien nicht lokal auf dem Server gehostet werden müssen, sondern diese einfach per Anfrage eingebunden werden können. Dazu muss aber angemerkt werden, dass dadurch eine gewisse Abhängigkeit zu diesem CDN besteht und wenn dort z.B. der Server nicht erreichbar ist, hat dies direkte Auswirkungen auf die eigene Website. Dort stehen die Ressourcen dann auch nicht mehr zur Verfügung. Das Einbinden per CDN funktioniert per Importmap im HTML head Bereich.

   <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js" } } </script>

Damit werden die Importe in der js Datei wie „import three“ per CDN eingebunden.

Nun müssen die Dateien nur noch auf einem lokalen Server laufen den ihr mit

npx serve .

starten könnt.

Falls ihr eine genauere Beschreibung benötigt, könnt ihr bei der offiziellen Three.js Dokumentation nachschauen dort ist das Thema nochmal etwas ausführlicher beschrieben.

Anlegen eines THREE.js Projektes

Der Kern, indem ihr euer 3D-Modell auf der Website präsentiert, ist das HTML canvas Element. Dort wird später eure Szene gerendert und in diesem Tutorial erzeugen wir das canvas Objekt direkt im HTML-Code an der gebrauchten Stelle. In der Index.html ergänzen wir jetzt den canvas im body.

<canvas id="canvas"> </canvas>

Außerdem binden wir die main.js Datei ein, in der später unser THREE.js code liegt.

<script src= "./main.js" type="module" defer></script>

Nun können wir mit dem erstellen unserer THREE.js Szene beginnen. In der main.js importieren wir zuerst das three module und erzeugen eine Szene.

import * as THREE from "three" const scene = new THREE.Scene()

Eine Szene beinhaltet alle Objekte, die auf dem Canvas angezeigt werden sollen und bietet sozusagen das Elternobjekt.

Für diese Szene werden wir nun ein paar Objekte erstellen wie z.B. einen Würfel und einen Zylinder.

const cubeGeometry = new THREE.BoxGeometry(1,1,1)
const cylinderGeometry = new THREE.CylinderGeometry(1,1,1,30)
const materialBlue= new THREE.MeshBasicMaterial({color: 0x0000ff})
const materialRed = new THREE.MeshBasicMaterial({color: 0xff0000})

Das Mesh Objekt besitzt 2 Parameter, die Geometrie und das Material des Objektes, welche wir vor dem Erzeugen des Meshes erstellen müssen. Bei der Geometrie haben uns für die Box und den Zylinder entschieden, aber THREE.js bietet noch viele weitere Geometrien. Eine Liste aller möglichen vordefinierten Geometrien findet ihr in den THREE.js docs.

Der Zweite Parameter ist das Material dem wir hier nur eine Farbe als Eigenschaft mitgeben. Auch hier bietet euch THREE.js aber deutlich mehr Möglichkeiten wie z.B. eine Alpha-, Roughness- oder Texture -Map um nur ein paar zu nennen.

Mit diesen 2 Parametern kann das Mesh Objekt nun erzeugt und nachdem wir sie positioniert haben der Szene hinzugefügt werden.

const cube = new THREE. Mesh(cubeGeometry,materialRed);
const cylinder = new THREE.Mesh(cylinderGeometry,materialBlue)
cube.position.x = 1
cylinder.position.x = -1
scene.add(cube,cylinder)


Jetzt wo die Szene bereit ist, müssen wir eine Kamera erstellen, durch die die Szene betrachtet wird.

const camera = new THREE.PerspectiveCamera(75,2,0.1,10)
camera.position.z = 3

75 ist das field of view in ° also in welchem Winkel die Kamera sieht. 2 ist der Aspekt des Canvas und 0.1 bis 10 sind Einheiten, ab wann die Kamera etwas sieht, bis wie weit sie sieht. Alles, was außerhalb der Sichtweite und Sichtbreite der Kamera liegt, wird nicht gerendert. Wir verändern außerdem noch die Position der Kamera auf der z-Achse damit sie an der richtigen Position ist um die Szene zu Rendern.
Das Einzige, was jetzt noch fehlt, ist der Renderer der die Szene mit der Kamera auf den Canvas bringt.

const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#canvas"),
antialias:true
})
renderer .render(scene,camera)

Nachdem der Renderer aufgerufen wurde sehen wir nun unsere gerenderte Szene mit dem Zylinder und Würfel. Wir haben die Szene einmal gerendert und in den canvas geladen. Um die Objekte aber jetzt interaktiv zu machen, müssen wir die Szene ständig rendern. Dazu können wir eine kleine Funktion schreiben

function renderLoop(){
requestAnimationFrame(renderLoop)
cube.rotation.z -= 0.01
cube.rotation.x -= 0.001
cylinder.rotation.x += 0.005
renderer.render(scene,camera)
}



die Funktion renderLoop ruft immer wieder die Funktion requestAnimationFrame auf, die den Browser anfragt für einen Animation-Frame. Danach werden die Rotationen von Würfel und Zylinder verändert und die Scene wird neu gerendert, was die Objekte rotieren lässt.
Wir sind inzwischen am Ende des Tutorials angelangt und haben unser erstes kleines Projekt in THREE.js umgesetzt. Gerne könnt ihr noch mit den verschiedenen Geometrien und Materialien herumprobieren und eure Szene individueller gestalten. Wenn ihr noch Inspiration braucht für euer nächstes THREE.js Projekt könnt ihr euch auf three.js Beispiele anschauen, was alles möglich ist.

Ich hoffe, ihr habt durch diesen Beitrag einen kleinen Einblick in THREE.js bekommen und vielleicht habt ihr auch schon ein paar Ideen wie ihr eure Website mit diesem Tool auf das nächste Level heben könnt.

Titelbild von Pexels auf Pixabay