201026Apr

Three.js: Canvas-3D-Engine in JavaScript

Der Programmierer Richardo Cabello (Mr.doob) dürfte vielen bereits seit seinem Ball Pool-Experiment bekannt sein. Der ActionScript- und JavaScript-Entwickler hatte zuletzt das Zeichenprogramm Harmony veröffentlicht, mit dem sich prozedurale Effekte erzielen lassen.
Nun hat Richardo Cabello eine erste 3D-Engine in JavaScript entwickelt, die Canvas- und SVG-Elemente für die dreidimensionale Darstellung nutzt. Die Engine nennt sich "Three.js" und kann getestet werden. In einem Blog-Eintrag schreibt der Entwickler über die Entstehung des Projekts.

Three.js

Mit der Bibliothek sind geometrische 3D-Transformationen und Partikelsysteme möglich. Auf der GitHub-Seite der Engine gibt es diverse Demonstrationen der Bibliothek. Diese sind zum Teil noch sehr rechenaufwendig, funktionieren aber dennoch sehr gut. Die Dokumentation stellen momentan die vom Entwickler konzipierten Beispiele dar, zu denen auch das "Cube Example" zählt.
Ein ähnliches Projekt ist CanvasMol. Dabei handelt es sich primär um eine Bibliothek zur Berechnung von dreidimensionalen Molekülen, die aus verschiedenen Formaten erstellt werden können.

CanvasMol

Die beiden Demonstrationen sind sicherlich noch nicht ganz ausgereift — sie zeigen aber eindrucksvoll, was mit JavaScript jetzt schon möglich ist.

UPDATE
Mittlerweile ist Three.js ausgereift und stellt in erster Linie eine WebGL-Engine da. Dreidimensionale Szenen können durch einen Canvas-, einen SVG- oder einen WebGL-Renderer darsgestellt werden.