Share
In deze zelfstudie leren we hoe we een 3DS-modelbestand in Flash kunnen laden en weergeven, met behulp van Away3D 4.0 beta en Stage3D's GPU hardwareversnelling.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Klik om de demo-bestanden te downloaden.
Om deze tutorial te gebruiken, moet je een 3D-model hebben (geëxporteerd als een .3ds-bestand) en de structuur ervan (als een afbeeldingsbestand).
Ik heb een eenvoudig 3D-model van een theepot gemaakt in Autodesk 3DS Max en geëxporteerd naar een bestand met de naam Teapot.3DS samen met zijn afzonderlijke textuurbestand, teapot.jpg. Je kunt beide bestanden vinden in de brondownload.
U moet een pakket SWC van Away3D 4.0.0 beta downloaden (u kunt deze SWC ook vinden in de bronbestanden).
En u moet weten dat de Away3D 4.0.0-bètaversie de nieuwe Stage3D-functies van Adobe Flash gebruikt, wat betekent dat deze de GPU voor 3D-grafische versnelling kan gebruiken.
We gaan deze demo bouwen met pure AS3, gecompileerd in FlashDevelop (lees hier meer over). FlashDevelop is een gratis AS3 IDE, hoewel het alleen Windows is. Als u liever een andere IDE gebruikt, kunt u deze zelfstudie nog steeds volgen.
Als je dit nog niet hebt, download en installeer dan FlashDevelop. Open het en start een nieuw AS3-project.
FlashDevelop maakt een leeg AS3-sjabloonproject voor u. We gebruiken de hoofdklasse voor al onze code.
Ga naar het projectmenu, kies Eigenschappen en verander een paar opties:
Als we deze zelfstudie willen uitvoeren vanuit de HTML-insluitcode, moeten we de parameter opnemen wmode = rechtstreekse in de parameters van het Flash-object in het HTML-bestand. Het ziet er als volgt uit:
In deze zelfstudie laden we het 3DS-bestand van lokale opslag (in plaats van van een webserver), dus moeten we sommige instellingen wijzigen op het tabblad Compileeropties. set Gebruik netwerkdiensten naar vals.
Krijgen Away3D-core-fp11_4_0_0_beta.swc van de bronbestanden, of download het van de Away3D-site.
Kopieer dat bestand naar uw project lib directory.
Klik in FlashDevelop met de rechtermuisknop op het SWC-bestand en kies Toevoegen aan bibliotheek.
Laten we nu gaan coderen met onze Main.as het dossier. Om te beginnen moeten we de benodigde bibliotheekbestanden voor het programma importeren om de Away3D-engine en de Flash-componenten in te stellen. Er zijn er nogal wat, dus laten we ze uit de weg ruimen:
// 3DS Model Viewer Tutorial // door Vu Hoang Minh - www.3dgameflash.com // Gemaakt voor active.tutsplus.com package // Away3D classes 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; // Algemene Flash-klassen voor weergave en interactie 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 voor het laden van het 3DS-bestand van de harde schijf importeren flash.display.SimpleButton; import flash.events.IOErrorEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.system.Security;
Laten we beginnen. We zullen de variabelen declareren die we nodig zullen hebben, de 3D-engine initialiseren en de knop "Bladeren" instellen en het veld voor de foutopsporing van de foutopsporing.
Accentsconagua
public class Hoofd breidt privé var-bestand: FileReference uit; private var view3d: View3D; private var loader: Loader3D; private var labelDebug: TextField; privé var object3d: Mesh; public function Main (): void // boilerplate loading code if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private function init (e: Event = null): void // staat ons toe om een lokaal bestand Security.allowDomain ("*") te laden; removeEventListener (Event.ADDED_TO_STAGE, init); // init 3D engine view3d = nieuwe View3D (); view3d.camera.lens = new PerspectiveLens (); view3d.camera.z = 100; addChild (View3D); // 3D loader initLoader (); // Knop om bestandsbrowser te openen var mcBrowse: MovieClip = nieuwe MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = new TextField (); labelBrowse.text = "Bladeren"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // debug output-labelDebug = new TextField (); labelDebug.text = "..."; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // bestandsbestand = nieuw FileReference (); In regel 25-29 initialiseren we de grafische componenten van de Away3D. We maken een nieuwe View3D (een container waarin de camera en objecten worden opgeslagen), configureren de lens en camera en voegen deze toe aan de displaylijst.
Daarna maken we een knop Bladeren: we tekenen de achtergrond, voegen het label toe, configureren het en voegen het toe aan de displaylijst.
Om het gemakkelijk te maken de 3DS-laadstatus bij te houden, maken we een debug-label, wat een eenvoudig tekstveld is.
Ten slotte initialiseren we een FileReference bijvoorbeeld om browsen voor het 3DS-bestand af te handelen.
Het volgende belangrijke wat we moeten doen is een 3D-modellader maken.
private function initLoader (): void // wis alles removeEventListener (Event.ENTER_FRAME, onEnterFrame); while (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // init nieuwe 3D-lader Loader3D.enableParser (Max3DSParser); loader = nieuwe 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);
Deze functie heeft drie secties:
Loader3D bijvoorbeeld en luisteraars eraan toevoegen die worden geactiveerd wanneer een fout wordt gegenereerd wanneer een 3D-bestand volledig is geladen. Om het zichtbaar te maken, voegen we het toe aan de View3Dzijn scène.Vervolgens voegen we alle gebeurtenishandlerfuncties toe, die allemaal iets te maken hebben met het laden van het 3DS-bestand.
privéfunctie 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 function onSecurityError (e: Event): void labelDebug.text + = ".Security Error!"; private function onIOError (e: IOErrorEvent): void labelDebug.text + = ".File not found Error!"; private function onFileSelected (e: Event): void labelDebug.text = "Bestand:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); private function onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); private function onError_loader (e: LoaderEvent): void trace ("Fout bij laden van bestand ..."); labelDebug.text + = ".Laadfout"; private function onComplete_loader (e: LoaderEvent): void trace ("3D File loaded"); 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 (); loader = null; addEventListener (Event.ENTER_FRAME, onEnterFrame); Wanneer de gebruiker op de knop Bladeren klikt, wordt het dialoogvenster Bladeren door bestanden weergegeven FileFilter om de weergegeven bestanden te beperken tot die met een .3ds uitbreiding. We voegen verschillende gebeurtenislisteners toe aan dit dialoogvenster, zodat we kunnen detecteren wanneer een bestand wordt gedetecteerd of een fout optreedt.
Nadat een bestand is geselecteerd, laden we het in de FileReference instantie die we eerder hebben geïnitialiseerd. Als het eenmaal is loaded, we noemen het initLoader () functie die we in de vorige stap hebben gedefinieerd, waardoor ons 3D-model wordt geladen.
Op dit moment zijn er twee mogelijke staten die we kunnen vangen:
maas en voeg het toe aan de scène van View3D.Om ons geheugen vrij te maken en later opnieuw te gebruiken, moeten we over onze lader beschikken.
Aan het einde van bovenstaande code (ervan uitgaande dat het bestand is geladen) voegen we een toe ENTER_FRAME evenement, die we zullen gebruiken om het object te renderen. We zullen die handler nu schrijven.
Nu alles is geïnitialiseerd, zijn we klaar om alles weer te geven. Bij elk frame laten we het 3D-object ronddraaien (draaien) en bellen met het render () functie van View3D om het scherm bij te werken.
private function onEnterFrame (e: Event): void object3d.yaw (1); // yaw door een eenheid view3d.render ();
Bijna klaar! Stel uw SWF samen met F5 en zie uw eindresultaat. Zo interessant, toch?
U kunt doen dan alleen het object draaien - proberen te bellen object3d.moveFoward (10) of object3d.pitch (1). U kunt dit zelfs doen als reactie op een muisbeweging of een toetsdruk.
Alleen ter referentie en om ervoor te zorgen dat u de juiste bestandsnamen en locaties voor alles hebt gebruikt, hier is wat uw FlashDevelop-project eruit zou moeten zien:
We hebben de eerste standaard 3D-zelfstudie afgerond over de nieuwste 3D Accelarate-functie van Adobe. Ik heet alle lezers van harte welkom om contact met mij op te nemen via de opmerkingen of via mijn website, op elk gewenst moment. Bedankt voor het lezen. Tot de volgende keer. Veel succes en veel plezier!
