Share
I den här handledningen lär vi oss hur du laddar och visar en 3DS-modellfil i Flash, med hjälp av Away3D 4.0 beta och Stage3Ds GPU-hårdvaruacceleration.
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Klicka för att ladda ner demofilerna.
För att använda denna handledning måste du ha en 3D-modell (exporterad som en .3ds-fil) och dess textur (som en bildfil).
Jag skapade en enkel 3D-modell av en tekanna i Autodesk 3DS Max, och exporterade den till en fil med namnet Teapot.3DS tillsammans med sin separata texturfil, teapot.jpg. Du kan hitta båda filerna i källnedladdningen.
Du måste ladda ner ett paket SWC av Away3D 4.0.0 beta (du kan också hitta denna SWC i källfilerna).
Och du behöver veta att Away3D 4.0.0 beta-versionen använder de nya Stage3D-funktionerna i Adobe Flash, vilket innebär att den kan använda GPU för 3D-grafikacceleration.
Vi ska bygga denna demo med ren AS3, sammanställd i FlashDevelop (läs mer om det här). FlashDevelop är ett gratis AS3 IDE, även om det bara är Windows. Om du föredrar att använda en annan IDE, kommer du fortfarande att kunna följa denna handledning.
Om du inte redan har det, se till att ladda ner och installera FlashDevelop. Öppna den och starta ett nytt AS3-projekt.
FlashDevelop skapar ett tomt AS3 mallprojekt för dig. Vi använder huvudklassen för all vår kod.
Gå till projektmenyn, välj Egenskaper och ändra några alternativ:
Om vi vill köra den här handledningen från HTML-inbäddningskoden måste vi inkludera parametern wmode = direkt i parametrarna för Flash-objektet i HTML-filen. Det ser ut så här:
I denna handledning laddar vi 3DS-filen från lokal lagring (i stället för från en webbserver), så vi måste ändra vissa inställningar på fliken Kompilatoralternativ. Uppsättning Använd nätverkstjänster till Falsk.
Skaffa sig Away3D-core-fp11_4_0_0_beta.swc från källfilerna, eller ladda ner den från Away3Ds webbplats.
Kopiera den filen till ditt projekt lib katalog.
I FlashDevelop högerklickar du på SWC-filen och väljer Lägg till i biblioteket.
Nu ska vi börja kodning med vår Main.as fil. Till att börja med måste vi importera nödvändiga biblioteksfiler för program för att installera Away3D-motorn och Flash-komponenterna. Det finns en hel del, så låt oss få dem ur vägen:
// 3DS Model Viewer Handledning // av Vu Hoang Minh - www.3dgameflash.com // Skapad för active.tutsplus.com paket // Away3D klasser importera away3d.cameras.lenses.PerspectiveLens; importera away3d.containers.ObjectContainer3D; importera away3d.containers.View3D; importera away3d.entities.Mesh; importera away3d.events.LoaderEvent; importera away3d.loaders.Loader3D; importera away3d.loaders.parsers.Max3DSParser; importera away3d.materials.TextureMaterial; importera away3d.textures.BitmapTexture; // Allmänna Flash klasser för visning och interaktion import flash.display.Bitmap; importera flash.display.MovieClip; importera flash.display.Shape; importera flash.display.Sprite; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.geom.Vector3D; importera flash.text.TextField; // Klasser för att ladda 3DS-filen från hårddisken import flash.display.SimpleButton; importera flash.events.IOErrorEvent; importera flash.net.FileFilter; importera flash.net.FileReference; importera flash.net.URLRequest; importera flash.system.Security;
Låt oss börja. Vi kommer att deklarera de variabler som vi behöver, initiera 3D-motorn och ställa in "Bläddra" -knappen och felsöka utmatningstextfältet.
Accentsconagua
public class Main utökar Sprite private var fil: FileReference; privat var view3d: View3D; privat lastare: Loader3D; privat var labelDebug: TextField; privat var object3d: Mesh; allmän funktion Main (): void // boilerplate loading code om (stadium) init (); annars addEventListener (Event.ADDED_TO_STAGE, init); privat funktion init (e: Event = null): void // tillåter oss att ladda en lokal fil Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // init 3D engine view3d = new View3D (); view3d.camera.lens = new PerspectiveLens (); view3d.camera.z = 100; addChild (View3D); // 3D Loader initLoader (); // Knapp för att öppna filbläsaren var mcBrowse: MovieClip = new MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = nytt TextField (); labelBrowse.text = "Bläddra"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // debug output labelDebug = ny TextField (); labelDebug.text = "..."; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // file file = new FileReference (); I linjerna 25-29 initierar vi Away3D-grafikkomponenterna. Vi skapar en ny View3D (en behållare som lagrar kameran och objekten), konfigurerar linsen och kameran och lägger den till i visningslistan.
Därefter gör vi en bläddringsknapp: vi ritar bakgrunden, lägger till etiketten, konfigurerar den och lägger till den i visningslistan.
För att göra det lätt att hålla koll på 3DS-laddningstillståndet gör vi en debug-etikett, som är ett enkelt textfält.
Slutligen initierar vi en Filreferens instans för att hantera bläddring för 3DS-filen.
Nästa viktiga sak vi måste göra är att skapa en 3D-modelllastare.
privat funktion initLoader (): void // rensa all removeEventListener (Event.ENTER_FRAME, onEnterFrame); medan (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // init ny 3D-loader Loader3D.enableParser (Max3DSParser); Loader = Ny Loader3D (); loader.addEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.addEventListener (LoaderEvent.LOAD_ERROR, onError_loader); view3d.scene.addChild (loader); // config kamera view3d.camera.lookAt (loader.position);
Den här funktionen har tre sektioner:
Loader3D exempel och lägg till lyssnare på det som utlöser när det bränder ett fel när en 3D-fil har laddats helt. För att göra det synligt lägger vi till det i View3Ds scen.Därefter lägger vi till alla händelsehanteringsfunktioner, som alla har något att göra med att ladda 3DS-filen.
privat 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); privat funktion onSecurityError (e: Event): void labelDebug.text + = ".Säkerhetsfel!"; privat funktion onIOError (e: IOErrorEvent): void labelDebug.text + = ".File inte hittat fel!"; privat funktion onFileSelected (e: Event): void labelDebug.text = "Fil:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); privat funktion onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); privat funktion onError_loader (e: LoaderEvent): void trace ("Fel vid laddning av fil ..."); labelDebug.text + = ".Ladingfel"; privat funktion 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); När användaren klickar på knappen Bläddra, visar vi dialogrutan File Browse, som använder en Filefilter för att begränsa filerna som visas till de med en .3ds förlängning. Vi lägger till flera händelsehörare i den här dialogrutan, så att vi kan upptäcka när en fil detekteras eller om ett fel uppstår.
När en fil har valts laddar vi den till Filreferens exempel som vi initialiserade tidigare. En gång har den lastad, vi kallar initLoader () funktion som vi definierade i föregående steg, som laddar vår 3D-modell.
Vid denna tid finns det två möjliga stater vi kan fånga:
Maska och lägg till den till scenen för View3D.För att befria vårt minne och återanvända det senare, bör vi sköta vår lastare.
I slutet av ovanstående kod (förutsatt att filen laddats) lägger vi till en ENTER_FRAME händelse som vi ska använda för att göra objektet. Vi skriver nu den hanteraren.
Nu när allt har initierats är vi redo att göra allt. Varje ram gör vi 3D-objektet yaw (rotera) och ringa göra() funktion av View3D för att uppdatera displayen.
privat funktion onEnterFrame (e: Event): void object3d.yaw (1); // yaw av en enhet view3d.render ();
Nästan klar! Kompilera din SWF med F5 och se ditt slutresultat. Så intressant, rätt?
Du kan göra än att bara rotera objektet - försök att ringa object3d.moveFoward (10) eller object3d.pitch (1). Du kan till och med göra det som svar på en musrörelse eller en nyckelpress.
Bara för referens, och för att säkerställa att du har använt rätt filnamn och platser för allt, här är vad ditt FlashDevelop-projekt ska se ut:
Vi har slutfört den första grundläggande 3D-handledningen om Adobes senaste 3D Accelarate-funktion. Jag välkomnar alla läsare att komma i kontakt med mig via kommentarerna, eller via min hemsida, när som helst. Tack för att du läser. Vi ses nästa gång. Lycka till och ha kul!
