201303Jul

Three.js: Komfortable Partikel-Engine mit Anleitung

Über die Erstellung eines einfachen Partikel-Systems mit Three.js hatte ich bereits vor über einem Jahr berichtet: Die JavaScript-3D-Engine bietet mit "THREE.ParticleSystem" ein Basis-Objekt zur Erstellung von Partikel-Effekten an, die über ein Shader-Material visualisiert werden. Da dies in der Praxis durchaus etwas Denkarbeit erfordert, kann eine Anleitung wie die von Lee Stemkoski sehr behilflich sein. In seinem Artikel beschreibt er die Eigenschaften seiner Partikel-Engine, die zwar kompakt ist, aber dennoch sehr gut funktioniert.

Three.js - Komfortable Partikel-Engine mit Anleitung

So lassen sich mit der kleinen Engine verschiedene Effekte wie Feuer, Rauch, Regen oder Schnee simulieren. Jeder Partikel-Effekt basiert auf einer transparenten PNG-Grafik, die dann auf ein geometrisches Grundobjekt (Würfel oder Kugel) übertragen und bewegt wird. Die Steuerung der Bewegungen erfolgt bei dieser Engine über eine einfache Tween-Klasse, welche die Werte von definierten Eigenschaften interpoliert und auf die Partikel überträgt. Neben den eigentlichen Partikeln ist die Einstellung des Partikel-Emitters wichtig, da hier Anzahl und Lebensdauer der Partikel festgelegt werden. Die Quelldatei der Beispiele zeigt, wie wenig Code für die Erstellung der unterschiedlichen Partikel-Effekte notwendig ist. Der Quelltext der Engine ist ebenfalls übersichtlich und gibt Aufschluss über die Funktionsweise der Simulation.