Se 3DS Modeller Med Away3D 4,0 Beta

View 3DS Modeller Med Away3D 4.0 Beta
en
Del
7
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil vi lære å laste og vise en 3DS modell fil i Flash, bruker Away3D 4.0 beta og Stage3D GPU maskinvareakselerasjon.




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot.

Klikk for å laste ned demofilene



Innledning

Hvis du vil bruke denne opplæringen må du ha en 3D-modell (eksporteres som en .3 ds-fil) og tekstur (som en bildefil).

Jeg laget en enkel 3D-modell av en tekanne i Autodesk 3ds Max, og eksporteres til en fil som heter Teapot.3DS
sammen med sin egen tekstur fil, teapot.jpg
. Du kan finne både filer i kilde nedlasting.

Du må laste ned en pakke SWC av Away3D 4.0.0 beta (du kan også finne denne SWC i kildefilene).

Og du trenger å vite at Away3D 4.0.0 beta versjonen bruker de nye Stage3D funksjonene i Adobe Flash, noe som betyr at den kan bruke GPU for 3D-grafikkakselerasjon.

Vi kommer til å bygge denne demoen ved hjelp av ren AS3, utarbeidet i FlashDevelop (les mer om det her). FlashDevelop er en gratis AS3 IDE, selv om det er bare Windows. Hvis du foretrekker å bruke en annen IDE, vil du fortsatt være i stand til å følge denne opplæringen



Trinn 1:. Opprette et nytt prosjekt

Hvis du ikke allerede har det, være Husk å laste ned og installere FlashDevelop. Åpne den og starte en ny AS3 Project.

FlashDevelop vil skape en blank AS3 mal prosjekt for deg. Vi vil bruke hovedklassen for all koden vår



Trinn 2:. Iler alternativer

Gå inn på Prosjekt-menyen, velg Egenskaper og endre noen alternativer:
< ol>
Sett målplattform til Flash Player 11.1.

Endre SWF størrelse til 550x400px.

Sett bakgrunnsfargen til svart.

Endre FPS til 40.

Hvis vi ønsker å kjøre denne opplæringen fra HTML-koden, må vi inkludere parameter wmode = direkte i parametrene av Flash-objekt i HTML-filen. Det vil se slik ut:
< object width = "550" height = "400" data = "3DViewer.swf" type = "application /x-shockwave-flash" wmode = "direkte" > < param name = "src" value = "3DViewer.swf" /> < param name = "wmode" value = "direkte" /> < /object >

I denne opplæringen vil vi laste 3DS fil fra lokal lagring (i stedet for fra en web server), så vi må endre noen innstillinger i kategorien Iler alternativer. Set Bruk Network Services
til False




Trinn 3:. Legg Away3D Library

Get away3d-core -fp11_4_0_0_beta.swc fra kildefilene, eller laste den ned fra Away3D nettsted.

Kopier denne filen til prosjektets lib katalog.

I FlashDevelop, høyreklikker du på SWC-filen, og velg Legg til i bibliotek




Trinn 4:. Importen

La oss nå start koding med vår Main.as fil. For å begynne, må vi importere de nødvendige bibliotekfiler for programmet å sette opp Away3D motor og Flash-komponenter. Det er ganske mange, så la oss få dem ut av veien:
//3DS Model Viewer Tutorial //by Vu Hoang Minh - www.3dgameflash.com//Laget for active.tutsplus.com pakken {//Away3D klasser importere 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; //Generell Flash klasser for visning og interaksjon 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; //Klasser for lasting av 3DS-filen fra harddisken import flash.display.SimpleButton; import flash.events.IOErrorEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.system.Security;



Trinn 5: Initial Program

La oss komme i gang. Vi vil erklære de variablene som vi kommer til å trenge, initialisere 3D-motor, og sette opp "Browse" -knappen og avlusningsinformasjon tekstfeltet
public class Hoved strekker Sprite {private Var fil. FileReference; private Var View3D: View3D; private Var loader: Loader3D; private Var labelDebug: Textfield; private Var object3d: Mesh; offentlig funksjon main (): void {//boilerplate lasting kode if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); } Private funksjon init (e: Hendelses = null): void {//tillate oss å laste en lokal fil Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); //init 3D-motor View3D = new View3D (); view3d.camera.lens = nye PerspectiveLens (); view3d.camera.z = 100; addChild (View3D); //3D loader initLoader (); //Knapp for å åpne filbehandleren Var mcBrowse: MovieClip = new MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); Var labelBrowse: Textfield = new Textfield (); labelBrowse.text = "Browse"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); //avlusningsinformasjon 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 (); }

I linjene 25-29, initial vi Away3D grafikk komponenter. Vi skaper en ny View3D (en container som lagrer kameraet og gjenstander), konfigurere sin objektiv og kamera, og legge den til i listen skjerm

Etter at vi gjør en Browse-knappen. Vi trekke sin bakgrunn, legge etiketten, sette den opp og legge den til i listen displayet.

For å gjøre det enkelt å holde styr på 3DS lastetilstand, gjør vi en debug etikett, som er en enkel tekstfeltet.
< p> Til slutt initial vi en FileReference eksempel å håndtere surfer for 3DS fil



Trinn 6:. Initialise 3D Loader

Den neste viktige ting vi må gjøre er å lage en 3D-modell . loader
privat funksjon initLoader (): void {//klart alle removeEventListener (Event.ENTER_FRAME, onEnterFrame); while (view3d.scene.numChildren > 0) {view3d.scene.removeChild (view3d.scene.getChildAt (0)); } //Init ny 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 kamera view3d.camera.lookAt (loader.position); }

Denne funksjonen har tre deler:.


    Først må vi klare alt ut, i tilfelle vårt program har kjørt før

    Etter at initial vi en ny Loader3D eksempel, og legge lyttere til det som utløser når det branner en feil når en 3D-fil er helt lastet. For å gjøre det synlig, vi legger det til View3D scene.
  1. For å sikre at vi faktisk kan se objektet når den har lastet, forteller vi kameraet til å se på det.


    Trinn 7: Handle Alle hendelser

    Deretter vil vi legge alle hendelsesbehandling funksjoner, som alle har noe å gjøre med å legge 3DS-fil.
    privat funksjon onClick_mcBrowse (e: MouseEvent): void {file.browse ([new Filefilter ("3DS", "* .3 ds")]); file.addEventListener (Event.SELECT, onFileSelected); file.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError); file.addEventListener (IOErrorEvent.IO_ERROR, onIOError); } Private funksjon onSecurityError (e: Hendelses): void {labelDebug.text + = ".Security Feil!"; } Private funksjon onIOError (e: IOErrorEvent): void {labelDebug.text + = "! .File Ikke funnet feil"; } Private funksjon onFileSelected (e: Hendelses): void {labelDebug.text = "Fil:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); } Private funksjon onFileLoaded (e: Hendelses): void {file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); } Private funksjon onError_loader (e: LoaderEvent): void {trace ("Feil ved lasting File ..."); labelDebug.text + = ".Loading Error"; } Private 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 på knappen Bla gjennom, viser vi Fil Bla Dialog, som bruker en Filefilter for å begrense filene som vises til de med en .3 ds forlengelse. Vi legger flere hendelsen lyttere til denne dialogen, slik at vi kan oppdage når en fil blir oppdaget, eller hvis det oppstår en feil.

    Etter en fil er valgt, laster vi det til FileReference eksempel at vi initialisert tidligere. Når den har lastet
    , vi kaller den initLoader () funksjon som vi definerte i forrige trinn, som laster vår 3D-modell.

    På denne tiden, er det to mulige tilstander vi kan fange :

    Den ene er "feil" tilstand, noe som innebærer at vårt program kan ikke laste 3D-modellen fil (kanskje banen er feil, eller teksturkartet filen er feil ...)
    Den andre er "loaded vellykket" event, hvorpå vi kastet lastet filen til en Mesh og legge den til åstedet for View3D.

    For å frigjøre vår hukommelse og bruke det senere, bør vi kvitte vår laster.

    På slutten av koden ovenfor (forutsatt at fil lastet) vi legge til en ENTER_FRAME arrangement, som vi skal bruke til å gjengi objektet. Vi skal skrive at behandleren nå



    Trinn 8:. Start Render Loop

    Nå som alt er blitt initialisert, er vi klare til å gjengi det hele. Hver ramme, vil vi lage 3D-objektet yaw (rotere) og ringe render () funksjon av View3D å oppdatere skjermen
    privat funksjon onEnterFrame (e: Hendelses):. Void {object3d.yaw (1); //yaw med en enhet view3d.render (); }



    Trinn 9: kompilere og kjøre

    Nesten ferdig! Kompilere SWF med F5, og se det endelige resultatet. ? Så interessant, ikke sant

    Du kan gjøre enn bare å rotere objektet - prøve å ringe object3d.moveFoward (10) eller object3d.pitch (1). Du kan også gjøre dette som svar på en musebevegelse eller et tastetrykk.

    Bare for referanse, og for å sikre at du har brukt riktig filnavn og steder for alt, her er hva din FlashDevelop prosjektet bør se som:



    Konklusjon

    Vi er ferdig med første grunnleggende 3D tutorial på nyeste 3d Accelarate funksjon av Adobe. Jeg hjertelig velkommen alle lesere til å komme i kontakt med meg via kommentarfeltet, eller via min nettside, helst. Takk for lesing. Ser deg neste gang. Lykke til og ha det gøy! Anmeldelser