Schneller Tipp Anzeigen eines 3D-Modells mit Papervision3D

In diesem Schnelltipp erfahren Sie, wie Sie ein 3D-Modell mit Papervision3D in Flash einbetten und anzeigen können.

Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:

Einführung

Um dieses Lernprogramm verwenden zu können, benötigen Sie ein 3D-Modell, das als .dae-Datei exportiert wird, und dessen Textur als Bilddatei.

Ich werde dieses Low-Poly-Mountainbike-Modell von 3DOcean verwenden, das von OneManBand erstellt wurde (der auch diesen schicken 3D-Objekt-Viewer in AIR erstellt hat)..

Sie müssen eine Kopie von Papervision3D herunterladen (Sie können auch eine Kopie in den Quelldateien finden)

Schritt 1: Erstellen der Flash-Datei

Erstellen Sie ein neues ActionScript 3-Dokument mit Abmessungen von 550x200px und setzen Sie die Bildrate auf 30 Bilder pro Sekunde. Legen Sie auch die Dokumentenklasse auf "EmbeddingDAE" fest..

Erstellen Sie ein Rechteck, das die gesamte Bühne abdeckt, und füllen Sie es mit einem radialen Farbverlauf von #FFFFFF bis # D9D9D9. Passen Sie den Verlauf mit dem Verlaufstransformations-Werkzeug an, sodass es wie folgt aussieht:

Schritt 2: Einrichten der Dokumentenklasse

Erstellen Sie eine neue ActionScript 3-Datei und nennen Sie sie "EmbeddingDAE". Diese Klasse erweitert eine Klasse von Papervision, die alle grundlegenden Funktionen enthält.

Da wir das 3D-Modell in Ihre SWF-Datei einbetten, müssen Sie sicherstellen, dass die Datei vollständig geladen wurde, bevor Sie sie verwenden.

Hier ist der Code dafür:

 package import flash.events.Event; import org.papervision3d.view.BasicView; public class EmbeddingDAE erweitert BasicView public function EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  private Funktion onFullyLoaded (e: Event): void

Schritt 3: Einbetten der Ressourcen

Anstatt unsere Ressourcen auf einem Webserver zu hosten und von dort aus zu laden, werden wir sie einfach in die SWF-Datei einbetten. Wir machen dies mit dem Flex SDK Einbetten Etikett. Wenn Sie nicht über das Flex SDK verfügen oder Probleme mit der vorinstallierten Version haben, können Sie es hier herunterladen

Flash kann mit bestimmten Dateitypen wie my umgehen .png Texturdatei, weiß aber nicht die .Dae Datei Format. Deshalb müssen wir einen sekundären Parameter, den MIME-Typ, auf setzen Anwendung / Oktettstrom - Dies bedeutet, dass die Datei in eine Datei umgewandelt wird ByteArray.

Bei Verwendung der Einbetten An diesem Tag müssen wir uns auf den relativen (oder vollständigen) Pfad der Datei beziehen und dieser Datei eine Klasse zuweisen. Später können wir mit dieser Klasse eine Instanz der eingebetteten Datei erstellen.

Hier können Sie den Code sehen:

 public class EmbeddingDAE erweitert BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Embed (source = "bike_texture.png")] private var bikeTextureClass: Class; öffentliche Funktion EmbeddingDAE ()

Sie müssen die Pfade ersetzen, damit sie mit Ihren eigenen Dateien übereinstimmen.

Schritt 4: Umgang mit der Textur

Um unsere Textur mit unserem Modell in Papervision3D zu verwenden, müssen wir drei Dinge tun:

Erstellen Sie eine Instanz der Textur als Bitmap - so können wir auf seine zugreifen BitmapData.
Ein ... kreieren Material mit diesem BitmapData -- Dies funktioniert wie eine Textur.
Ein ... kreieren Materialliste, Das wird unser Material mit unserem Modell verknüpfen. Es wird der Name des für das Modell verwendeten Materials benötigt. Wenn Sie nur eine Texturdatei haben (was am häufigsten vorkommt), müssen Sie sich nicht darum kümmern, verwenden Sie einfach "all"..

Hier ist der Code, der dies tut (hinzugefügt zu onFullyLoaded ()):

 var-Bitmap: Bitmap = new bikeTextureClass (); var bitmapMaterial: BitmapMaterial = neues BitmapMaterial (bitmap.bitmapData); var materialsList: MaterialsList = neue MaterialsList (); materialsList.addMaterial (bitmapMaterial, "all");

Denken Sie daran zu importieren:

 import flash.display.Bitmap; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.utils.MaterialsList;

Schritt 5: Laden Sie das Modell

Um unser Modell zu laden, müssen wir vier Dinge tun:

Erstellen Sie eine Variable für unser Modell - betrachten Sie dies als leere Hülle.
Erstellen Sie eine Instanz von ByteArray enthält unser Modell.
Erstellen Sie eine Instanz der Variablen für unser Modell - die Shell erstellen.
Laden Sie unser Modell, indem Sie die ByteArray und das Materialliste zu unserer leeren Hülle.

Erstellen Sie zuerst die Variable:

 private var bikeModelDAE: DAE;

Dann machen Sie den Rest (Hinzufügen zu) onFullyLoaded)

 var byteArray: ByteArray = new bikeModelClass (); bikeModelDAE = new DAE (); bikeModelDAE.load (byteArray, materialsList);

Denken Sie daran zu importieren:

 import flash.utils.ByteArray; import org.papervision3d.objects.parsers.DAE;

Schritt 6: Anzeigen des Modells

Jetzt fehlt uns nur noch die Möglichkeit, das Modell zu sehen, das ein Kinderspiel ist. Ich justiere auch die Position der Kamera, damit wir dieses Modell gut sehen können. Dann sage ich Papervision3D, jedes Bild erneut zu rendern.

Hier ist der Code (wieder zu hinzufügen onFullyLoaded ()):

 this.scene.addChild (bikeModelDAE); this.camera.z = 500; this.startRendering ();

So wird es aussehen:

Schritt 7: Rotation hinzufügen

Jetzt können wir das Modell nur von einem Standpunkt aus sehen. Das ist ein bisschen langweilig, nicht wahr? Lass etwas Rotation hinzufügen! Hier überschreiben wir eine Funktion, die jedes Frame von der Papervision3D-Engine aufgerufen wird.

 Geschützte Funktion onRenderTick überschreiben (event: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

Hier ist es noch einmal:

Fazit

Jetzt wissen Sie, wie Sie 3D-Modelle zu Ihren Flash-Projekten hinzufügen, und das ist eigentlich ganz einfach. Ich hoffe, es hat Ihnen Spaß gemacht, es zu lesen und fand es nützlich.

Danke fürs Lesen!

Code