Three.js – WebGL Bibliothek zum Erstellen interaktiver 3D-Szenen als Webanwendung

Three.js ermöglicht die Erstellung von GPU-beschleunigten 3D-Animationen mittels JavaScript. Diese laufen ohne Plugin im Browser. Zeit, sich das mal anzusehen.

Die Bibliothek wurde erstmals 2010 von Ricardo Cabello veröffentlicht. Seit dem entwickelte sie sich zu einer der beliebtesten, wenn es um die Darstellung von 3D-Szenen und Animationen im Browser geht. Anders als z.B. bei Unity werden dabei auch mobile Endgeräte unterstützt.

Spiele, Visualisierungen, interaktive Anwendungen – auf der offiziellen Webseite sind zahlreiche Referenzprojekte aufgelistet, welche die Power der Bibliothek zeigen. Dazu stellen uns die Entwickler viele Code-Beispiele zur Verfügung.

So ist es ganz einfach, ein Mesh zu erstellen oder zu laden und darzustellen. Das wollen wir mal in einer kleinen Webanwendung demonstrieren.

Beispiel – Natürlich ein Cube

Zuerst laden wir die Bibliothek und die benötigten Helper. OrbitControls ermöglicht es uns, per Maus oder Gesten durch die Szene zu navigieren.

<script src="three/build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>

Nun benötigen wir ein paar globale Variablen und ein paar Funktionen.

var camera, scene, renderer, controls;
var mesh;

var time = 0;
var clock = new THREE.Clock();

init();
animate();

Jetzt können wir uns um die Initialisierung kümmern. Zunächst benötigen wir eine Szene und eine Camera.

function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.x = 0;
camera.position.y = 100;
camera.position.z = 500;
...
}

Jetzt erstellen wir ein Mesh und laden eine Textur dafür. Den Mesh fügen wir der Szene hinzu.

var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Jetzt benötigen wir den Renderer.

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

Und nun noch die Controls.

controls = new THREE.OrbitControls( camera, renderer.domElement );

Zum Schluss fügen wir alles dem DOM hinzu.

document.body.appendChild(renderer.domElement);

Jetzt können wir uns der animate-Funktion widmen.

function animate() {
requestAnimationFrame(animate);
render();
}

Nun müssen wir noch Festlegen, wann das Bild neu gerendert werden soll. Das soll immer dann passieren, wenn wir mit der Maus drehen oder zoomen. Dazu legen wir ein Delta der Zeit fest und updaten die Controls.

function render() {
var delta = clock.getDelta();
time += delta * 0.5;
controls.update( delta );
renderer.render(scene, camera);
}

Und das war es schon. Wie das ganze in Aktion ausschaut, sieht man hier.

Ich hoffe wie immer, dieses erstbeste Beispiel war hilfreich.