Three.js - JavaScript-Bibliothek für 3D-Animationen

Anders als bei zweidimensionalen Animationen im HTML5-Canvas-Element ist die Erstellung von 3D-Animationen für Browser nicht ganz trivial. Diese basieren auf der 3D-Grafik-Programmierschnitstelle WebGL. Damit sich der Nutzer nicht mit den dunklen Tiefen dieser Schnittstelle auseinandersetzen muss, haben findige Entwickler JavaScript-Bibliotheken zusammengestellt, die dem Ersteller von 3D-Animationen einen Großteil der Kernerarbeit abnehmen. Eine der bekanntesten dieser Bibliotheken ist three.js. Um den Einsatz und die Nutzung dieser Bibliothek soll es an dieser Stelle gehen.

Browserunterstützung

Bevor wir uns in erstmal vorsichtig dem eigentlichen Thema annähern noch ein Hinweis. §d-Grafik mit WebGL gehört zu den Dingen, die bisher die geringste Unterstützung durch aktuelle Webbrowser aufweisen. Nutzer des Internetexplorer haben ganz schlechte Karten, denn selbst der Internet Explorer 10 unterstützt WebGL nicht, erst mit der Version 11 von Microsofts Browser ist Besserung zu erwarten. Ideal ist die Unterstützung hingegen beim Chrome Browser und auch bei Opera. Bis zur Version 12.1 (der letzten mit Presto-Engine) muss WebGL extra aktiviert werden. Der aktuelle Firefox unterstützt WebGL nicht vollständig. Details findet man auf http://caniuse.com/#feat=webgl.

Download

Sämtliche mit tree.js in Zusammenhang stehenden Dateien sind auf Github abgelegt. In der Version R60 umfasst das Download-Paket beinahe 80 MB. Doch keine Sorge, nur der geringste Teil dieses Paketes umfasst die eigentliche JavaScript-Bibliothek. Die minimierte Version (three.min.js) ist 411.282 Byte groß, die gut lesbare und kommentierte Version (three.js) hat eine Größe von 814.534 Byte. Beide findet man im Unterverzeichnis /build. Außerdem findet man im Downloadpaket:

  • eine umfangreiche Dokumentation (Verzeichnis /docs)
  • einen Editor für 3D-Objekte (Verzeichnis /editor)
  • viele Beispiele (Verzeichnis /examples)
  • der Quellcode für tree.js (Verzeichnis /src)
  • verschiedene Tests, z.b. mit Benchmarks (Verzeichnis /test)
  • verschiedene weitere Werkzeuge und Hilfsmittel (Verzeichnis /utils)

Tutorial/Anleitung

Damit der Einstieg möglichst leicht fällt, habe ich ein Tutorial in mehreren Schritten erstellt. Zum ersten Teil des Tutorials