Share
I denne opplæringen lærer vi hvordan du laster og viser en 3DS-modellfil i Flash, ved hjelp av Away3D 4.0 beta og Stage3Ds GPU-maskinvareakselerasjon.
La oss se på det endelige resultatet vi vil jobbe for:
Klikk for å laste ned demofilene.
For å bruke denne opplæringen må du ha en 3D-modell (eksportert som en .3ds-fil) og dens tekstur (som en bildefil).
Jeg opprettet en enkel 3D-modell av en tekanne i Autodesk 3DS Max, og eksporterte den til en fil som heter Teapot.3DS sammen med sin egen teksturfil, teapot.jpg. Du kan finne begge filene i kilden nedlasting.
Du må laste ned en pakke SWC av Away3D 4.0.0 beta (du kan også finne denne SWC i kildefilene).
Og du må vite at Away3D 4.0.0 beta-versjonen bruker de nye Stage3D-funksjonene i Adobe Flash, noe som betyr at den kan bruke GPU til 3D grafikkakselerasjon.
Vi skal bygge denne demoen ved hjelp av ren AS3, kompilert i FlashDevelop (les mer om det her). FlashDevelop er et gratis AS3 IDE, selv om det kun er Windows. Hvis du foretrekker å bruke en annen IDE, vil du fortsatt kunne følge denne opplæringen.
Hvis du ikke allerede har det, må du laste ned og installere FlashDevelop. Åpne den og start et nytt AS3-prosjekt.
FlashDevelop vil opprette et tomt AS3 template prosjekt for deg. Vi bruker hovedklassen for all vår kode.
Gå inn på Prosjekt-menyen, velg Egenskaper og endre noen alternativer:
Hvis vi vil kjøre denne opplæringen fra HTML-embedkoden, må vi inkludere parameteren wmode = direkte i parametrene til Flash-objektet i HTML-filen. Det ser slik ut:
I denne opplæringen legger vi 3DS-filen fra lokal lagring (i stedet for fra en webserver), så vi må endre noen innstillinger i kategorien Compiler Options. Sett Bruk nettverkstjenester til Falsk.
Få away3d-kjerne-fp11_4_0_0_beta.swc fra kildefilene, eller last den ned fra Away3Ds nettsted.
Kopier den filen til prosjektet ditt lib katalog.
I FlashDevelop høyreklikker du SWC-filen, og velger Legg til i biblioteket.
La oss nå begynne å kode med vår Main.as fil. For å begynne, må vi importere de nødvendige biblioteksfiler for program for å konfigurere Away3D-motoren og Flash-komponentene. Det er ganske mange, så la oss få dem ut av veien:
// 3DS Model Viewer Tutorial // av Vu Hoang Minh - www.3dgameflash.com // Laget for active.tutsplus.com pakke // Away3D klasser importere away3d.cameras.lenses.PerspectiveLens; importere away3d.containers.ObjectContainer3D; importere away3d.containers.View3D; importere away3d.entities.Mesh; importere away3d.events.LoaderEvent; importere away3d.loaders.Loader3D; importere away3d.loaders.parsers.Max3DSParser; importere away3d.materials.TextureMaterial; importere away3d.textures.BitmapTexture; // Generelle Flash klasser for visning og samhandling importere flash.display.Bitmap; importer flash.display.MovieClip; importer flash.display.Shape; importer flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.geom.Vector3D; importer flash.text.TextField; // Klasser for lasting av 3DS-filen fra harddisken import flash.display.SimpleButton; importer flash.events.IOErrorEvent; importer flash.net.FileFilter; importer flash.net.FileReference; importere flash.net.URLRequest; importere flash.system.Security;
La oss komme i gang. Vi vil erklære de variablene vi skal trenge, initialisere 3D-motoren, og sette opp "Bla gjennom" -knappen og feilsøke utdatatekstfeltet.
Accentsconagua
offentlig klasse Hoved utvider Sprite private var-fil: FileReference; privat var view3d: View3D; privat laster: Loader3D; private var labelDebug: TextField; privat var objekt3d: Mesh; offentlig funksjon Main (): void // boilerplate loading code hvis (stadium) init (); ellers addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event = null): void // la oss laste inn en lokal fil Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // init 3D motor view3d = new View3D (); view3d.camera.lens = nytt PerspectiveLens (); view3d.camera.z = 100; addChild (View3D); // 3D loader initLoader (); // Knapp for å åpne filleseren var mcBrowse: MovieClip = ny MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = ny TextField (); labelBrowse.text = "Bla gjennom"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // feilsøkingsutgang labelDebug = ny TextField (); labelDebug.text = "..."; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // filfil = ny FileReference (); I linjene 25-29 initialiserer vi Away3D-grafikkomponentene. Vi oppretter en ny View3D (en beholder som lagrer kameraet og objektene), konfigurerer objektivet og kameraet, og legger det til i visningslisten.
Deretter lager vi en Bla gjennom-knapp: vi tegner bakgrunnen, legger til etiketten, konfigurerer den og legger den til i visningslisten.
For å gjøre det enkelt å holde oversikt over 3DS-lastetilstanden, lager vi en feilsøkingsetikett, som er et enkelt tekstfelt.
Endelig initialiserer vi en FileReference eksempel for å håndtere surfing for 3DS-filen.
Den neste viktige tingen vi må gjøre er å lage en 3D-modelllaster.
privat funksjon initLoader (): void // fjern alt removeEventListener (Event.ENTER_FRAME, onEnterFrame); mens (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);
Denne funksjonen har tre seksjoner:
Loader3D eksempel, og legg til lyttere til det som utløser når det bryr en feil når en 3D-fil er fullstendig lastet. For å gjøre det synlig legger vi det til View3Ds scene.Deretter legger vi til alle hendelseshåndteringsfunksjonene, som alle har noe å gjøre med å laste 3DS-filen.
privat funksjon 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 funksjon onSecurityError (e: Event): void labelDebug.text + = ".Sikkerhetsfeil!"; privat funksjon onIOError (e: IOErrorEvent): void labelDebug.text + = ".File ikke funnet Feil!"; privat funksjon onFileSelected (e: Event): void labelDebug.text = "File:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); privat funksjon onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); privat funksjon onError_loader (e: LoaderEvent): void trace ("Feil laster fil ..."); labelDebug.text + = ".Ladingfeil"; privat funksjon 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 brukeren klikker Bla gjennom-knappen, viser vi dialogboksen Filoversikt, som bruker en Filefilter for å begrense filene som vises til de med en .3ds forlengelse. Vi legger til flere hendelseslyttere i denne dialogboksen, slik at vi kan oppdage når en fil oppdages eller om det oppstår en feil.
Etter at en fil er valgt, laster vi den til FileReference eksempel at vi initialiserte tidligere. Når den har det lastet, vi kaller initLoader () funksjon som vi definerte i det forrige trinnet, som laster vår 3D-modell.
På dette tidspunktet er det to mulige stater vi kan fange:
mesh og legg det til scenen til View3D.For å frigjøre vårt minne og gjenbruke det senere, bør vi avhende vår laster.
På slutten av koden (forutsatt at filen er lastet) legger vi til en ENTER_FRAME arrangement, som vi skal bruke til å gjøre objektet. Vi skriver den håndterer nå.
Nå som alt har blitt initialisert, er vi klare til å gjengi alt. Hver ramme, vi gjør 3D-objektet yaw (roter) og ring til render () funksjon av View3D for å oppdatere skjermen.
privat funksjon onEnterFrame (e: Event): void object3d.yaw (1); // yaw av en enhet view3d.render ();
Nesten ferdig! Sett sammen din SWF med F5, og se ditt endelige resultat. Så interessant, riktig?
Du kan gjøre enn å bare rotere objektet - prøv å ringe object3d.moveFoward (10) eller object3d.pitch (1). Du kan til og med gjøre dette som svar på en musebevegelse eller et nøkkelpresse.
Bare for referanse, og for å sikre at du har brukt de riktige filnavnene og plasseringene for alt, er dette ditt FlashDevelop-prosjekt som skal se ut:
Vi har fullført første grunnleggende 3D-opplæringen om nyeste 3D Accelarate-funksjonen til Adobe. Jeg hjertelig velkommen alle leserne til å komme i kontakt med meg via kommentarene, eller via nettstedet mitt, når som helst. Takk for at du leste. Ser deg neste gang. Lykke til og ha det moro!
