Erstellen Sie 3D-Effekte mit der Stardust Particle Engine

In meinem vorherigen Tutorial Shoot Out Stars mit der Stardust Particle Engine habe ich den grundlegenden Arbeitsablauf von Stardust erklärt. Dieses Mal gehen wir weiter und untersuchen ein paar Techniken, um echte 3D-Partikeleffekte zu erzeugen!


Einführung

Wir beginnen mit einer Demonstration der Verwendung der nativen 3D-Engine von Stardust. Dann zeige ich Ihnen, wie Sie Stardust dazu bringen, mit Papervision3D zu arbeiten. Wir erstellen 3D-Partikeleffekte mit der Particle-Klasse von Papervision3D und der DisplayObject3D-Klasse.


Vorher…

Wir werden dort weitermachen, wo wir im ersten Tutorial aufgehört haben. Letztes Mal haben wir Stern- und Kreispartikel erstellt, die aus einem Punkt herausschießen, auf eine maximale Größe anwachsen und dann zu nichts schrumpfen, während wir uns im Laufe der Zeit allmählich langsamer bewegen (als Dämpfungseffekt bezeichnet). Diesmal machen wir dasselbe, aber in 3D. Anstelle der Teilchen, die sich im Kreis bewegen, bewegen sie sich in einer Kugel.


Schritt 1: Erstellen Sie ein neues Flash-Dokument

Erstellen Sie wie zuvor ein neues Flash-Dokument mit den Abmessungen 640 x 400, einer Bildrate von 60 Bildern pro Sekunde und einem dunklen Hintergrund (ich habe einen dunkelblauen Verlauf verwendet)..


Schritt 2: Zeichnen Sie die Partikel

Zeichnen Sie einen Stern und einen weißen Kreis, und konvertieren Sie sie getrennt in Symbole. Dies sind die beiden Symbole, die wir später als Partikel verwenden werden. Benennen Sie das Sternsymbol "Stern" und das Kreissymbol "Kreis", die für ActionScript mit denselben Klassennamen exportiert werden.

(Wenn Sie kein Künstler sind, können Sie die Quelle oben auf der Seite herunterladen und meine Symbole aus der Bibliothek meiner FLA verwenden.)


Schritt 3: Erstellen Sie die Pause-Schaltfläche

Klicken Fenster> Komponenten Um das Komponentenfenster aufzurufen, ziehen Sie einen Button aus dem Ordner der Benutzeroberfläche auf die Bühne. Setzen Sie das Label auf "Pause" und nennen Sie es "pause_btn". Wir werden diese Schaltfläche verwenden, um die 3D-Partikeleffekte anzuhalten. Dadurch können Benutzer die Kamera drehen, um einen besseren Eindruck der 3D-Umgebung zu erhalten.


Schritt 4: Erstellen Sie die Dokumentenklasse

Erstellen Sie eine neue Dokumentenklasse und nennen Sie sie StarParticles3D.

 package import flash.display.Sprite; öffentliche Klasse StarParticles3D erweitert Sprite öffentliche Funktion StarParticles () 

Sie sind sich nicht sicher, wie Sie eine Dokumentenklasse verwenden? Lesen Sie diesen Quick Tip.


3D-Initialisierer und -Aktionen

Die drei Hauptpakete in Stardust sind:

  • idv.cjcat.stardust.common: enthält allgemeine Elemente für 2D- und 3D-Partikeleffekte.
  • idv.cjcat.stardust.twoD: enthält spezifische Elemente für 2D-Partikeleffekte.
  • idv.cjcat.stardust.threeD: enthält spezifische Elemente für 3D-Partikeleffekte.

Im vorigen Tutorial haben wir Initialisierer und Aktionen aus den Paketen common und twoD verwendet. In diesem Lernprogramm verwenden wir immer noch Elemente aus dem allgemeinen Paket, nicht jedoch das TwoD-Paket. Stattdessen verwenden wir Elemente aus dem threeD-Paket.

Die Klassenstruktur des 3D-Pakets ist fast dieselbe wie im TwoD-Paket, nur dass die Elemente eine zusätzliche Dimension haben. Ein 3D-Element hat den gleichen Namen wie sein 2D-Pendant, endet jedoch mit "3D". Zum Beispiel die Move3D Die Aktion im 3D-Paket aktualisiert die Partikelpositionen im 3D-Raum entsprechend den Geschwindigkeiten, genau wie das 2D-Gegenstück im 2D-Paket, das Bewegung Aktion.


Schritt 5: Verlängern Sie den Emitter

Erstellen Sie eine neue AS-Datei mit dem Namen StarEmitter.as; In ihm eine neue Klasse erstellen StarEmitter, was die Emitter3D-Klasse erweitert:

 package import idv.cjcat.stardust.threeD.emitters.Emitter3D; // Vergiss nicht das zu importieren! public class StarEmitter erweitert Emitter3D public function StarEmitter (clock: Clock) // übergibt das Clock-Objekt an den Konstruktor der Superklasse super (clock); 

Erinnern Sie sich an den Parameter Clock? Es wird verwendet, um die Geschwindigkeit der Partikelerzeugung zu steuern. Wir müssen es in die Konstruktorfunktion einschließen, damit wir ihm später eine Uhr übergeben können.

Da wir Benutzern erlauben, die Partikeleffekte anzuhalten, packen wir alle Aktionen in ein einziges CompositeAction-Objekt, bei dem es sich im Wesentlichen um eine Gruppe von Aktionen handelt. Durch Deaktivieren dieser einzelnen zusammengesetzten Aktion können wir alle zugrunde liegenden Aktionen "deaktivieren". Deklarieren Sie eine Variable für eine zusammengesetzte Aktion in der Emitterklasse. Wir werden auf diese Variable in der Dokumentenklasse zugreifen, also muss sie öffentlich sein:

 public var pausibleActions: CompositeAction;

Schritt 6: Deklarieren Sie die Partikelkonstanten

Deklarieren Sie Konstanten, die als Partikelparameter in der Emitterklasse verwendet werden. Den Zweck dieser Konstanten haben wir bereits im vorherigen Tutorial behandelt. Die meisten Namen sind selbsterklärend. Diese gehen in die Klasse, aber außerhalb der Konstruktorfunktion. Fühlen Sie sich frei, später hierher zurückzukehren und die Zahlen zu ändern, um die Auswirkungen zu sehen.

 private statische const LIFE_AVG: Number = 30; private statische const LIFE_VAR: Number = 10; private statische Konstante SCALE_AVG: Number = 1; private statische Konstante SCALE_VAR: Number = 0,4; private static const GROWING_TIME: Number = 5; private statische Konstante SHRINKING_TIME: Number = 10; private statische const SPEED_AVG: Number = 30; private statische const SPEED_VAR: Number = 10; private statische Konstante OMEGA_AVG: Number = 0; private statische Konstante OMEGA_VAR: Number = 5; private statische Konstante DÄMPFUNG: Zahl = 0,1;

Schritt 7: Der Switch-Initialisierer für Partikelanzeigeobjekte

Im vorherigen Tutorial habe ich gezeigt, wie Sie mit dem SwitchInitializer Partikel mit verschiedenen Anzeigeobjekten erstellen können. Ich habe den DisplayObjectClass-Initialisierer verwendet, der das Erscheinungsbild der Partikel mit Anzeigeobjekten initialisiert. Das war für 2D-Partikeleffekte; Hier verwenden wir das 3D-Pendant, den DisplayObject3D-Initialisierer.

Fügen Sie der Konstruktorfunktion des Emitters den folgenden Code hinzu:

 // Initialisierer für Stern- und Kreispartikel wechseln var doc1: DisplayObjectClass3D = new DisplayObjectClass3D (Star); var doc2: DisplayObjectClass3D = new DisplayObjectClass3D (Kreis); var si: SwitchInitializer = new SwitchInitializer ([doc1, doc2], [1, 1]); addInitializer (si);

Schritt 8: Fügen Sie die verbleibenden Initialisierer hinzu

Gleich wie im vorherigen Tutorial; Fügen Sie die anderen unten gezeigten Initialisierer hinzu. Einige von ihnen haben ähnliche Namen wie im vorherigen Tutorial, enden jedoch mit "3D"..

  • Der Position3D-Initialisierer initialisiert die Partikelpositionen. Genau wie sein 2D-Pendant, der Positionsinitialisierer, akzeptiert er einen Konstruktorparameter, ein Zonenobjekt. Dieses Mal akzeptiert es jedoch kein Zone-Objekt, das eine 2D-Zone darstellt. Stattdessen akzeptiert es ein Zone3D-Objekt, das eine Zone im 3D-Raum darstellt. Die SinglePoint3D-Klasse erweitert die Zone3D-Klasse und ist die 3D-Version der SinglePoint-Klasse.
  • Gleiches gilt für die Velocity3D-Klasse. Die SphereShell-Klasse ist im Wesentlichen die 3D-Version der SectorZone-Klasse. Hier setzen wir den Mittelpunkt der Kugelschale auf (0, 0, 0), den durchschnittlichen Radius auf SPEED_AVG und die Radiusvariation auf SPEED_VAR.
  • Die Rotation3D- und Omega3D-Initialisierer funktionieren genauso wie ihre 2D-Pendants Rotation und Omega. Bei den Konstruktorparametern gibt es jedoch einen kleinen Unterschied: Sie akzeptieren drei zufällige Objekte anstelle von einem. Das liegt daran, dass es jetzt im 3D-Raum drei Drehachsen gibt, so dass sie drei zufällige Drehwerte für diese Achsen benötigen. In diesem Beispiel erstellen wir "2D-Billboards" im 3D-Raum (d. H. Flache Objekte), sodass nur die Drehung für die Z-Achse sichtbar ist. Deshalb werden den ersten beiden Parametern, den Zufallsobjekten für die X- und Y-Achse, Nullwerte zugewiesen.

Dieser Code wird in die Konstruktorfunktion von StarEmitter übernommen:

 addInitializer (new Life (neues UniformRandom (LIFE_AVG, LIFE_VAR))); addInitializer (new Scale (neues UniformRandom (SCALE_AVG, SCALE_VAR))); addInitializer (neue Position3D (neuer SinglePoint3D ())); addInitializer (new Velocity3D (neue SphereShell (0, 0, 0, SPEED_AVG, SPEED_VAR))); addInitializer (neue Rotation3D (null, null, neue UniformRandom (0, 180))); addInitializer (neues Omega3D (null, null, neues UniformRandom (OMEGA_AVG, OMEGA_VAR)));

Schritt 9: Fügen Sie die Aktionen hinzu

Erstellen Sie eine zusammengesetzte Aktion und fügen Sie ihr einige Aktionen hinzu. Fügen Sie dann diese zusammengesetzte Aktion dem Emitter hinzu. Dadurch werden die Partikel die Aktionen ausführen. Sie haben diese Aktionen im vorherigen Tutorial (einige davon in 2D-Version) gesehen, daher werde ich sie nicht noch einmal erklären. Dieser Code wird wieder in die Konstruktorfunktion von StarEmitter übernommen:

 pausibleActions = new CompositeAction (); pausibleActions.addAction (new Age ()); pausibleActions.addAction (neues DeathLife ()); pausibleActions.addAction (new Move3D ()); pausibleActions.addAction (new Spin3D ()); pausibleActions.addAction (neue Damping3D (DAMPING)); pausibleActions.addAction (neue ScaleCurve (GROWING_TIME, SHRINKING_TIME)); addAction (pausibleActions);

Schritt 10: Zurück zur Dokumentenklasse

In Ordnung, wir sind mit dem Emitter fertig. Nun ist es Zeit, unsere Dokumentenklasse zu erstellen.

Erklären Sie zunächst Konstanten für den Radius der umlaufenden Kamera, den Abstand der Kamera vom Ursprung und die Sendergeschwindigkeit:

 private statische const CAMERA_RADIUS: Number = 250; private statische const PARTICLE_RATE: Number = 0.5;

(Konstanten befinden sich wie zuvor innerhalb der Klasse, aber außerhalb der Konstruktorfunktion.)

Deklarieren Sie dann Variablen für einen Emitter, eine stationäre Uhr und einen DisplayObjectRenderer3D (an derselben Stelle wie die Konstanten):

 Privater Var-Sender: StarEmitter; private Var-Uhr: SteadyClock; Privater Var-Renderer: DisplayObjectRenderer3D;

Initialisieren Sie im Konstruktor die Uhr, den Emitter und den Renderer. Legen Sie außerdem die Position und Richtung der Ausgangskamera fest, sodass der Ursprung angezeigt wird:

 // Die Uhr und die Uhr des Senders erstellen = new SteadyClock (PARTICLE_RATE); Sender = neuer StarEmitter (Uhr); // wir können dies tun, weil wir dem Konstruktor von StarEmitter einen clock-Parameter gegeben haben // den Renderer und seinen Container erstellen sprite var container: Sprite = new Sprite (); container.x = 320, container.y = 200; Renderer = neuer DisplayObjectRenderer3D (Container); renderer.addEmitter (Sender); // füge den Container der Bühne hinzu addChild (container); // füge die Pause-Schaltfläche erneut hinzu, so dass sie sich oberhalb des Containers befindet addChild (pause_btn); // die Ausgangsposition und -richtung der Kamera setzen renderer.camera.position.set (0, 0, -CAMERA_RADIUS); renderer.camera.direction.set (0, 0, CAMERA_RADIUS);

Schritt 11: Pause programmieren

Erstellen Sie eine Handlerfunktion in der Dokumentenklasse, um das Klickereignis der Pausentaste zu behandeln:

 private Funktion togglePause (e: MouseEvent): void if (e.target.label == "Pause") e.target.label = "Resume"; clock.ticksPerCall = 0; // Stoppen Sie die Uhr emitter.pausibleActions.active = false; // deaktiviere die Aktionen des Senders else e.target.label = "Pause"; clock.ticksPerCall = PARTICLE_RATE; // starte die Uhr neu emitter.pausibleActions.active = true; // reaktiviere die Aktionen des Emitters

… Dann registrieren Sie den Listener für die Pause-Schaltfläche in der Konstruktorfunktion:

 pause_btn.addEventListener (MouseEvent.CLICK, togglePause);

Schritt 12: Die Hauptschleife

Erstellen Sie einen Handler für das Ereignis ENTER_FRAME. Dies ist unsere Hauptschleife. Sie aktualisiert die Kameraposition durch Aufrufen der updateCamera () -Methode (die wir in einer Minute kodieren werden) und ruft die step () -Methode des Emitters auf, die die Partikeleffekte am Laufen hält:

 private Funktion mainLoop (e: Event): void updateCamera (); Emitter.step (); 

Registrieren Sie erneut einen Listener im Konstruktor:

 addEventListener (Event.ENTER_FRAME, mainLoop);

Schritt 13: Aktualisieren Sie die Kameraposition

Definieren Sie nun die im vorherigen Schritt aufgerufene updateCamera () -Methode. Dies wird verwendet, um die Kamera je nach Position der Maus im 3D-Raum zu bewegen. (Weitere Informationen zur Funktionsweise finden Sie in diesem Wikipedia-Artikel.)

Die zur Erzeugung von Theta und Phi verwendeten magischen Zahlen sind nur das Ergebnis von Versuch und Irrtum. Probieren Sie Ihre eigenen Gleichungen aus.

 private Funktion updateCamera (): void var theta: Number = 0.02 * (mouseX - 320); var phi: Anzahl = 0,02 * (mouseY - 200); phi = StardustMath.clamp (phi, -StardustMath.HALF_PI, StardustMath.HALF_PI); var x: Number = CAMERA_RADIUS * Math.cos (Theta) * Math.cos (Phi); var y: Number = CAMERA_RADIUS * Math.sin (phi); var z: Number = CAMERA_RADIUS * Math.sin (Theta) * Math.cos (Phi); renderer.camera.position.set (x, y, z); renderer.camera.direction.set (-x, -y, -z); 

Beachten Sie, dass ich die StardustMath.clamp () -Methode verwendet habe. Dadurch wird sichergestellt, dass der phi-Wert zwischen positiver und negativer halber PI bleibt.


Meilenstein: Native Stardust Engine abgeschlossen

Okay, wir sind fertig! Das ist alles, was wir tun müssen, damit ein 3D-Emitter mit der nativen 3D-Engine von Stardust arbeitet. Schauen wir uns das Ergebnis an. Sie können auf die Pause-Schaltfläche klicken, um den Partikeleffekt anzuhalten, und die Maus bewegen, um die Kamera zu umkreisen:

Demo Online ansehen

Wenn Sie den vollständigen Quellcode sehen möchten, schauen Sie im Ordner "01 - Stardust Native 3D Engine" im Quellcode nach.


Zeit für Papervision3D

Ein Umstieg von der ursprünglichen 3D-Engine von Stardust auf Papervision3D ist einfach. Wir müssen nur einen anderen Renderer und Anzeigeobjekt-Initialisierer verwenden.

(Noch nie Papervision3D verwendet? Schauen Sie sich dieses Anfänger-Tutorial an.)

Zuerst verwenden wir die Particle-Klasse von Papervision3D. Sie sind vielleicht nicht damit vertraut. Ich werde Ihnen später zeigen, wie Sie die allgemeinere DisplayObject3D-Klasse verwenden.


Schritt 14: Ändern Sie den Anzeigeobjekt-Initialisierer

Ändern Sie den folgenden Code in der Emitter-Klasse:

 var doc1: DisplayObjectClass3D = new DisplayObjectClass3D (Star); var doc2: DisplayObjectClass3D = new DisplayObjectClass3D (Kreis);

zu diesem:

 var mat1: MovieParticleMaterial = neues MovieParticleMaterial (neuer Stern ()); var mat2: MovieParticleMaterial = neues MovieParticleMaterial (neuer Kreis ()); var doc1: PV3DParticle = neues PV3DParticle ([mat1]); var doc2: PV3DParticle = neues PV3DParticle ([mat2]);

Wie Sie vielleicht bereits wissen, können wir mit der MovieParticleMaterial-Klasse Anzeigeobjekte als Erscheinungsbild von Partikeln in Papervision3D verwenden. Wir erstellen eine Stern- und Kreis-Instanz, die als Partikelmaterial verwendet wird. Der PV3DParticle-Initialisierer ersetzt den DisplayObjectClass3D-Initialisierer. Sein Konstruktor akzeptiert ein Array von Parametern, die alle zu einem Particles-Objekt hinzugefügt werden.

Dies ist alles, was wir bezüglich des Emitters tun müssen. Als Nächstes ändern wir die Dokumentenklasse.


Schritt 15: Papervision3D-Umgebung einrichten

Der Zielcontainer für unseren Renderer ist kein Sprite-Objekt mehr. Stattdessen erstellen wir Partikel in einem Partikelobjekt. Wir müssen den Typ des Renderers von DisplayObjectRenderer3D auf PV3DParticleRenderer umstellen.

Deklarieren Sie die folgenden Variablen für Objekte, die sich auf Papervision3D beziehen:

 private var-Szene: SceneObject3D; private var-Partikel: Partikel; private Var-Kamera: Camera3D; private var origin: DisplayObject3D; private var renderEngine: BasicRenderEngine; privates Ansichtsfenster: Viewport3D;

Der Code im Konstruktor der Dokumentklasse lautet jetzt:

 initPV3D (); //das ist neu! clock = new SteadyClock (PARTICLE_RATE); Sender = neuer StarEmitter (Uhr); Renderer = neuer PV3DParticleRenderer (Partikel); //das ist neu! renderer.addEmitter (Sender); pause_btn.addEventListener (MouseEvent.CLICK, togglePause); addEventListener (Event.ENTER_FRAME, mainLoop);

Die Methode initPV3D () richtet die Papervision3D-Umgebung ein. Hier ist der Code:

 private Funktion initPV3D (): void // Die Szene erstellen Szene = neu SceneObject3D (); // Erstelle die Partikel objecticles = new Particles (); // Die Kamera erstellen und ihre Position initialisieren camera = new Camera3D (); Kamera.Position.x = 0; camera.position.y = 0; camera.position.z = -CAMERA_RADIUS; // ein DO3D erstellen, das den Ursprung darstellt origin = new DisplayObject3D (); ursprung.x = ursprung.y = ursprung.z = 0; // Richten Sie die Kamera auf den Ursprung camera.target = origin; scene.addChild (Ursprung); scene.addChild (Partikel); // das Render-Modul und den Viewport erstellen renderEngine = new BasicRenderEngine (); Darstellungsbereich = neuer Darstellungsbereich3D (640, 400); // füge den Viewport der Bühne hinzu addChild (Viewport); // füge die Pause-Schaltfläche erneut hinzu, so dass sie sich über dem Viewport befindet addChild (pause_btn); 

Schritt 16: Die neue Hauptschleife

Jetzt aktualisiert Stardust nur die Eigenschaften der 3D-Objekte. Die Render-Engine von Papervision3D übernimmt die Rendering-Verantwortung. So sieht unsere neue Hauptschleife aus:

 private Funktion mainLoop (e: Event): void updateCamera (); Emitter.step (); renderEngine.renderScene (Szene, Kamera, Darstellungsbereich); //das ist neu! 

Schritt 17: Aktualisieren der Kamera

Nun, da wir die Kamera von Papervision3D verwenden, müssen wir auch die updateCamera () -Methode ändern:

 private Funktion updateCamera (): void var theta: Number = 0.02 * (mouseX - 320); var phi: Anzahl = 0,02 * (mouseY - 200); phi = StardustMath.clamp (phi, -StardustMath.HALF_PI, StardustMath.HALF_PI); var x: Number = CAMERA_RADIUS * Math.cos (Theta) * Math.cos (Phi); var y: Number = -CAMERA_RADIUS * Math.sin (phi); // Beachten Sie, dass dies jetzt negativ ist var z: Number = CAMERA_RADIUS * Math.sin (Theta) * Math.cos (Phi); camera.x = x; // Wir aktualisieren jede der Eigenschaften x, y, z der Kamera von PV3D separat. camera.y = y; camera.z = z; 

Meilenstein: Papervision3D mit Partikeln abgeschlossen

Okay, wir haben erfolgreich die native 3D-Engine von Stardust auf Papervision3D umgestellt. Lassen Sie uns nun das Ergebnis überprüfen. Beachten Sie den Pixeleffekt auf den Partikeln. Das liegt daran, dass Papervision3D zunächst Vektorobjekte in Bitmaps zeichnet, bevor sie als Partikelmaterial verwendet werden.

Demo Online ansehen

Den gesamten Quellcode finden Sie im Ordner "02 - Papervision3D Particles".


Die DisplayObject3D-Klasse von Papervision3D

Bisher haben wir mit "2D-Werbetafeln" gearbeitet - flache Objekte wie Papier. Es können "echte" 3D-Partikelobjekte wie die DisplayObject3D-Objekte von Papervision3D erstellt werden. Wir müssen nur einen anderen Initializer verwenden. Jetzt kommen wir zum letzten Teil dieses Tutorials. Wir erstellen rote und blaue Würfelpartikel.


Schritt 18: Ändern Sie erneut den Anzeigeobjekt-Initialisierer

Wir werden den Initialisierer bezüglich des Partikelaussehens zum letzten Mal ändern.

Vorher deklarieren Sie eine LightObject3D-Variable in der Emitterklasse. Wir verwenden FlatShadeMaterial für die DisplayObject3D-Objekte, für die eine Lichtquelle erforderlich ist. Deklarieren Sie außerdem die folgenden Konstanten - wir verwenden diese als Parameter für das FlastShadeMaterial und zur Bestimmung der Würfelgröße:

 öffentliches var Licht: LightObject3D; private statische const LIGHT_COLOR_1: uint = 0xCC3300; privates statisches const LIGHT_COLOR_2: uint = 0x006699; private statische Konstante AMBIENT_COLOR_1: uint = 0x881100; private statische Konstante AMBIENT_COLOR_2: uint = 0x002244; privates statisches const CUBE_SIZE: Number = 15;

Ändern Sie nun den folgenden Code in der Emitter-Klasse:

 var mat1: MovieParticleMaterial = neues MovieParticleMaterial (neuer Stern ()); var mat2: MovieParticleMaterial = neues MovieParticleMaterial (neuer Kreis ()); var doc1: PV3DParticle = neues PV3DParticle ([mat1]); var doc2: PV3DParticle = neues PV3DParticle ([mat2]);

zu diesem:

 light = new LightObject3D (); var mat1: FlatShadeMaterial = neues FlatShadeMaterial (light, LIGHT_COLOR_1, AMBIENT_COLOR_1); var mat2: FlatShadeMaterial = neues FlatShadeMaterial (light, LIGHT_COLOR_2, AMBIENT_COLOR_2); var matList1: MaterialsList = neue MaterialsList (all: mat1); var matList2: MaterialsList = neue MaterialsList (all: mat2); var params1: Array = [matList1, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE]; var params2: Array = [matList2, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE]; var doc1: PV3DDisplayObject3DClass = neue PV3DDisplayObject3DClass (Cube, params1); var doc2: PV3DDisplayObject3DClass = neue PV3DDisplayObject3DClass (Cube, params2);

Das neue Erscheinungsbild der Partikel wird als rote und blaue 3D-Würfel initialisiert. Der erste Konstruktorparameter für den Initialisierer PV3DDisplayObject3DClass ist die Klasse, die wir für die Partikel instanziieren möchten (hier ist es die Cube-Klasse), und der zweite Parameter ist ein Array von Konstruktorparametern für diese Cube-Klasse.


Schritt 19: Die drei Drehachsen

Da wir bisher mit "2D-Werbetafeln" gearbeitet haben, war nur die Drehung um die Z-Achse von Bedeutung. Jetzt, da wir mit echten 3D-Objekten arbeiten, müssen wir drei Random-Objektverweise an die Rotation3D- und Omega3D-Konstruktoren übergeben, einen für jede Achse.

Ändern Sie den folgenden Code in der Emitter-Klasse:

 addInitializer (neue Rotation3D (null, null, neue UniformRandom (0, 180))); addInitializer (neues Omega3D (null, null, neues UniformRandom (OMEGA_AVG, OMEGA_VAR)));

zu diesem:

 var rotationRandom: UniformRandom = neues UniformRandom (0, 180); var omegaRandom: UniformRandom = neues UniformRandom (OMEGA_AVG, OMEGA_VAR); addInitializer (neue Rotation3D (RotationRandom, RotationRandom, RotationRandom)); addInitializer (neues Omega3D (OmegaRandom, OmegaRandom, OmegaRandom));

Schritt 20: Ändern Sie die Dokumentenklasse

Anstatt ein Particles-Objekt als Partikelbehälter zu verwenden, verwenden wir diesmal ein DisplayObject3D als Container. Deklarieren Sie eine Variable für diesen Container in der Dokumentenklasse:

 privater var-Container: DisplayObject3D;

Außerdem benötigen wir einen anderen Renderer-Typ zum Erstellen von Partikeln im neuen Container. Ändern Sie den Typ des Renderers von PV3DParticleRenderer in PV3DDisplayObject3DRenderer. Der Code im Konstruktor der Dokumentklasse sollte jetzt wie folgt aussehen:

 initPV3D (); clock = new SteadyClock (PARTICLE_RATE); Sender = neuer StarEmitter (Uhr); Renderer = neuer PV3DDisplayObject3DRenderer (Container); // das hat sich geändert! renderer.addEmitter (Sender); pause_btn.addEventListener (MouseEvent.CLICK, togglePause); addEventListener (Event.ENTER_FRAME, mainLoop);

Schritt 21: Ändern Sie die Methode initPV3D ()

In der initPV3D () - Funktion müssen wir nun die Containervariable initialisieren und der Szene hinzufügen. Fügen Sie diese beiden Zeilen am Ende dieser Funktion hinzu:

 container = new DisplayObject3D (); scene.addChild (Container);

Schritt 22: Ändern Sie die updateCamera () -Methode

In der updateCamera () -Methode möchten wir, dass das Licht der Kamera folgt, sodass wir die Illusion haben, dass das Licht immer aus unseren Augen "schießt". Ändern Sie den folgenden Code:

 camera.x = x; camera.y = y; camera.z = z;

zu diesem:

 emitter.light.x = Kamera.x = x; emitter.light.y = camera.y = y; emitter.light.z = camera.z = z;

Jetzt befindet sich die Lichtquelle immer an derselben Stelle wie die Kamera.


Meilenstein: Papervision3D mit DisplayObject3D abgeschlossen

Ja, wir sind endlich mit diesem Tutorial fertig. Keine Kodierung mehr Werfen wir einen Blick auf unser Endergebnis mit ausgefallenen roten und blauen 3D-Würfeln!

Demo Online ansehen

Den Quellcode dafür finden Sie im Ordner "Papervision3D DisplayObject3D".


Fazit

Der Arbeitsablauf für die Erstellung von 3D-Partikeleffekten mit Stardust entspricht in etwa dem für 2D-Effekte. Sie wählen einfach einen anderen Satz von Initialisierern, Aktionen und Renderern. Stardust unterstützt auch andere 3D-Engines, einschließlich ZedBox und ND3D. Die Verwendung ist fast gleich. Sie müssen nur einen anderen Satz von Initialisierern und Renderern verwenden. Sie können die Klassen Initializer, Action und Renderer sogar erweitern, um mit beliebigen 3D-Engines zu arbeiten!

Jetzt haben Sie die Grundlagen. Warum gehen Sie nicht zu den in Schritt 6 erstellten consts und spielen mit ihnen, um die Effekte zu sehen?

Ich hoffe, dieses Tutorial hilft Ihnen, Stardust besser zu verstehen, und macht Sie mit dem Workflow von Stardust vertraut. Danke fürs Lesen!