Share
In diesem Lernprogramm erfahren Sie, wie Sie eine 3DS-Modelldatei in Flash laden und anzeigen, indem Sie die Away3D 4.0-Betaversion und die GPU-Hardwarebeschleunigung von Stage3D verwenden.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Klicken Sie hier, um die Demo-Dateien herunterzuladen.
Um dieses Tutorial verwenden zu können, benötigen Sie ein 3D-Modell (exportiert als .3ds-Datei) und dessen Textur (als Bilddatei)..
Ich habe in Autodesk 3DS Max ein einfaches 3D-Modell einer Teekanne erstellt und in eine Datei namens exportiert Teekanne.3DS zusammen mit seiner separaten Texturdatei, teapot.jpg. Sie finden beide Dateien im Quelldownload.
Sie müssen ein Paket SWC von Away3D 4.0.0 Beta herunterladen (Sie können dieses SWC auch in den Quelldateien finden).
Und Sie müssen wissen, dass die Beta3-Version von Away3D 4.0.0 die neuen Stage3D-Funktionen von Adobe Flash verwendet, was bedeutet, dass die GPU für die 3D-Grafikbeschleunigung verwendet werden kann.
Wir werden diese Demo mit reinem AS3 erstellen, das in FlashDevelop kompiliert wurde (lesen Sie hier mehr darüber). FlashDevelop ist eine kostenlose AS3-IDE, obwohl es nur Windows ist. Wenn Sie es vorziehen, eine andere IDE zu verwenden, können Sie diesem Lernprogramm trotzdem folgen.
Wenn Sie es noch nicht haben, laden Sie FlashDevelop unbedingt herunter und installieren Sie es. Öffnen Sie es und starten Sie ein neues AS3-Projekt.
FlashDevelop erstellt für Sie ein leeres AS3-Vorlagenprojekt. Wir werden die Main-Klasse für unseren gesamten Code verwenden.
Gehen Sie in das Menü Projekt, wählen Sie Eigenschaften und ändern Sie einige Optionen:
Wenn Sie dieses Tutorial vom HTML-Embed-Code aus ausführen möchten, müssen Sie den Parameter angeben wmode = direkt in den Parametern des Flash-Objekts in der HTML-Datei. Es wird so aussehen:
In diesem Lernprogramm laden wir die 3DS-Datei aus dem lokalen Speicher (und nicht von einem Webserver). Daher müssen wir einige Einstellungen auf der Registerkarte Compiler-Optionen ändern. einstellen Verwenden Sie Netzwerkdienste zu Falsch.
Erhalten away3d-core-fp11_4_0_0_beta.swc von den Quelldateien herunterladen oder von der Away3D-Site herunterladen.
Kopieren Sie diese Datei in Ihr Projekt lib Verzeichnis.
Klicken Sie in FlashDevelop mit der rechten Maustaste auf die SWC-Datei und wählen Sie Zur Bibliothek hinzufügen.
Beginnen wir nun mit unserem Programm Main.as Datei. Zu Beginn müssen wir die erforderlichen Bibliotheksdateien für das Programm importieren, um die Away3D-Engine und die Flash-Komponenten einzurichten. Es gibt einige, also lasst sie uns aus dem Weg räumen:
// Tutorial für den 3DS-Modell-Viewer // von Vu Hoang Minh - www.3dgameflash.com // Erstellt für das active.tutsplus.com-Paket // Away3D-Klassen import away3d.cameras.lenses.PerspectiveLens; import away3d.containers.ObjectContainer3D; import away3d.containers.View3D; import away3d.entities.Mesh; import away3d.events.LoaderEvent; import away3d.loaders.Loader3D; import away3d.loaders.parsers.Max3DSParser; import away3d.materials.TextureMaterial; import away3d.textures.BitmapTexture; // Allgemeine Flash-Klassen für Anzeige und Interaktion import flash.display.Bitmap; import flash.display.MovieClip; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; import flash.text.TextField; // Klassen zum Laden der 3DS-Datei von der Festplatte import flash.display.SimpleButton; import flash.events.IOErrorEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.system.Security;
Lass uns anfangen. Wir deklarieren die Variablen, die wir benötigen, initialisieren die 3D-Engine und richten die Schaltfläche "Durchsuchen" und das Debug-Ausgabetextfeld ein.
Accentsconagua
public class Main erweitert Sprite private var-Datei: FileReference; private var view3d: View3D; privater var loader: Loader3D; private var labelDebug: TextField; private var object3d: Mesh; public function Main (): void // Kennzeichenladecode if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private Funktion init (e: Event = null): void // erlaubt das Laden einer lokalen Datei Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // init 3D-Engine view3d = new View3D (); view3d.camera.lens = neue PerspectiveLens (); view3d.camera.z = 100; addChild (view3d); // 3D-Ladeprogramm initLoader (); // Schaltfläche zum Öffnen des Dateibrowsers var mcBrowse: MovieClip = new MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = neues TextField (); labelBrowse.text = "Durchsuchen"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // Debug-Ausgabe labelDebug = new TextField (); labelDebug.text = "…"; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // file file = new FileReference (); In den Zeilen 25-29 initialisieren wir die Away3D-Grafikkomponenten. Wir erstellen ein neues View3D (einen Container, in dem Kamera und Objekte gespeichert werden), konfigurieren das Objektiv und die Kamera und fügen es der Anzeigeliste hinzu.
Danach erstellen wir eine Schaltfläche zum Durchsuchen: Wir zeichnen den Hintergrund, fügen die Beschriftung hinzu, konfigurieren sie und fügen sie der Anzeigeliste hinzu.
Damit Sie den 3DS-Ladezustand leicht verfolgen können, erstellen wir ein Debug-Label, bei dem es sich um ein einfaches Textfeld handelt.
Zum Schluss initialisieren wir a Aktenzeichen Instanz zum Durchsuchen der 3DS-Datei.
Als nächstes müssen wir einen 3D-Modell-Loader erstellen.
private Funktion initLoader (): void // clear all removeEventListener (Event.ENTER_FRAME, onEnterFrame); while (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // init neuer 3D-Loader Loader3D.enableParser (Max3DSParser); loader = new Loader3D (); loader.addEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.addEventListener (LoaderEvent.LOAD_ERROR, onError_loader); view3d.scene.addChild (loader); // config camera view3d.camera.lookAt (loader.position);
Diese Funktion hat drei Abschnitte:
Loader3D Instanz und fügen Sie Listener hinzu, die ausgelöst werden, wenn ein Fehler ausgelöst wird, wenn eine 3D-Datei vollständig geladen wurde. Um es sichtbar zu machen, fügen wir es dem hinzu View3Ddie Szene.Als Nächstes fügen wir alle Event-Handler-Funktionen hinzu, die alle mit dem Laden der 3DS-Datei zu tun haben.
private Funktion onClick_mcBrowse (e: MouseEvent): void file.browse ([new FileFilter ("3DS", "* .3ds")]); file.addEventListener (Event.SELECT, onFileSelected); file.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError); file.addEventListener (IOErrorEvent.IO_ERROR, onIOError); private Funktion onSecurityError (e: Event): void labelDebug.text + = ".Security Error!"; private Funktion onIOError (e: IOErrorEvent): void labelDebug.text + = ".Datei nicht gefunden Fehler!"; private Funktion onFileSelected (e: Event): void labelDebug.text = "File:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); private Funktion onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); private Funktion onError_loader (e: LoaderEvent): void trace ("Fehler beim Laden der Datei ..."); labelDebug.text + = ".Loading Error"; private Funktion onComplete_loader (e: LoaderEvent): void trace ("3D-Datei geladen"); labelDebug.text + = ".Complete.Rendering…"; loader.removeEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.removeEventListener (LoaderEvent.LOAD_ERROR, onError_loader); object3d = Mesh (loader.getChildAt (0)); view3d.scene.addChild (object3d); loader.dispose (); Lader = Null; addEventListener (Event.ENTER_FRAME, onEnterFrame); Wenn der Benutzer auf die Schaltfläche "Durchsuchen" klickt, wird das Dialogfeld "Datei suchen" angezeigt, in dem a verwendet wird FileFilter um die gezeigten Dateien auf diejenigen mit einem zu beschränken .3ds Erweiterung. Wir fügen diesem Dialogfeld mehrere Ereignis-Listener hinzu, damit wir erkennen können, wann eine Datei erkannt wird oder wenn ein Fehler auftritt.
Nachdem eine Datei ausgewählt wurde, laden wir sie in die Aktenzeichen Instanz, die wir zuvor initialisiert haben. Sobald es hat geladen, wir nennen das initLoader () Funktion, die wir im vorherigen Schritt definiert haben, die unser 3D-Modell lädt.
Derzeit gibt es zwei mögliche Zustände, die wir erfassen können:
Mesh und füge es der Szene hinzu View3D.Um unser Gedächtnis freizugeben und später wiederzuverwenden, sollten wir unseren Lader entsorgen.
Am Ende des obigen Codes (vorausgesetzt, die Datei wurde geladen) fügen wir eine ENTER_FRAME Ereignis, das wir zum Rendern des Objekts verwenden. Wir werden diesen Handler jetzt schreiben.
Nun, da alles initialisiert wurde, sind wir bereit, alles zu rendern. Bei jedem Bild lassen wir das 3D-Objekt gieren (drehen) und nennen das machen() Die Funktion von View3D um die Anzeige zu aktualisieren.
private Funktion onEnterFrame (e: Event): void object3d.yaw (1); // Gier um eine Einheit view3d.render ();
Fast fertig! Kompilieren Sie Ihre SWF-Datei mit F5 und sehen Sie Ihr Endergebnis. So interessant, richtig?
Sie können das Objekt nicht nur drehen, sondern aufrufen object3d.moveFoward (10) oder object3d.pitch (1). Sie können dies sogar als Reaktion auf eine Mausbewegung oder einen Tastendruck tun.
Nur als Referenz und um sicherzustellen, dass Sie die richtigen Dateinamen und Speicherorte für alles verwendet haben, sollte Ihr FlashDevelop-Projekt so aussehen:
Wir haben das erste grundlegende 3D-Tutorial über die neueste 3D-Accelarate-Funktion von Adobe abgeschlossen. Ich heiße alle Leser herzlich willkommen, sich jederzeit über die Kommentare oder über meine Website mit mir in Verbindung zu setzen. Danke fürs Lesen. Bis zum nächsten Mal. Viel Glück und hab Spaß!
