În acest tutorial vom învăța cum să încărcați și să afișați un fișier model 3DS în Flash, utilizând Away3D 4.0 beta și accelerarea hardware a GPU-ului Stage3D.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Faceți clic pentru a descărca fișierele demo.
Pentru a utiliza acest tutorial, va trebui să aveți un model 3D (exportat ca fișier .3ds) și textura sa (ca fișier imagine).
Am creat un model 3D simplu de ceainic în Autodesk 3DS Max și l-am exportat într-un fișier numit Teapot.3DS împreună cu fișierul separat de textură, teapot.jpg. Puteți găsi ambele fișiere în descărcarea sursei.
Va trebui să descărcați un pachet SWC de Away3D 4.0.0 beta (puteți găsi și acest SWC în fișierele sursă).
Și trebuie să știți că versiunea Away3D 4.0.0 beta utilizează noile caracteristici Stage3D ale Adobe Flash, ceea ce înseamnă că poate folosi GPU pentru accelerarea grafică 3D.
Vom construi acest demo folosind AS3 pur, compilat în FlashDevelop (citiți mai multe despre el aici). FlashDevelop este un AS3 IDE gratuit, deși este numai Windows. Dacă preferați să utilizați un alt IDE, veți putea continua acest tutorial.
Dacă nu aveți deja, asigurați-vă că descărcați și instalați FlashDevelop. Deschideți-l și începeți un nou proiect AS3.
FlashDevelop va crea pentru dvs. un proiect șablon AS3 gol. Vom folosi clasa principală pentru codul nostru.
Accesați meniul Proiect, alegeți Proprietăți și schimbați câteva opțiuni:
Dacă doriți să executați acest tutorial din codul de încorporare HTML, trebuie să includeți parametrul wmode = directă
în parametrii obiectului Flash din fișierul HTML. Va arăta astfel:
În acest tutorial vom încărca fișierul 3DS din spațiul de stocare local (mai degrabă decât de la un server web), așa că trebuie să schimbăm unele setări în fila Opțiuni Compilator. A stabilit Utilizați serviciile de rețea la Fals.
obține away3d-core-fp11_4_0_0_beta.swc
din fișierele sursă sau să le descărcați de pe site-ul Away3D.
Copiați fișierul în proiectul dvs. lib director.
În FlashDevelop, faceți clic dreapta pe fișierul SWC și alegeți Adăugați la Bibliotecă
.
Acum să începem codarea cu noi Main.as
fişier. Pentru a începe, trebuie să importați fișierele de bibliotecă necesare programului pentru a configura motorul Away3D și componentele Flash. Sunt destul de puține, deci hai să le scoatem din cale:
// Tutorial pentru vizualizarea modelului 3DS // de Vu Hoang Minh - www.3dgameflash.com // Creat pentru pachetul activ.tutsplus.com // 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; // Clase generale Flash pentru afișarea și interacțiunea de import flash.display.Bitmap; import flash.display.MovieClip; import flash.display.Shape; import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import flash.geom.Vector3D; import flash.text.TextField; // Clase pentru încărcarea fișierului 3DS de pe hard disk import flash.display.SimpleButton; import flash.events.IOErrorEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.system.Security;
Să începem. Vom declara variabilele de care avem nevoie, vom inițializa motorul 3D și vom seta butonul "Răsfoire" și câmpul de text pentru depanare.
public class principal Extinde Sprite fișier privat var: FileReference; privat var view3d: View3D; încărcător privat var: Loader3D; private var labelDebug: TextField; privat var object3d: Mesh; funcția publică Main (): void // boilerplate codul de încărcare dacă (etapa) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); funcția privată init (e: Event = null): void // ne permite să încărcăm un fișier local Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // afișarea init 3D a motorului3d = vizualizare nouă 3D (); view3d.camera.lens = new PerspectiveLens (); view3d.camera.z = 100; addChild (view3d); // încărcător 3D initLoader (); // Buton pentru deschiderea browserului de fișiere var mcBrowse: MovieClip = new MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = TextField nou (); labelBrowse.text = "Răsfoiți"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = adevărat; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // debug de ieșire labelDebug = new TextField (); labelDebug.text = "..."; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // Fișier fișier = Fișier nou ();
În liniile 25-29, inițializăm componentele grafice Away3D. Creați un nou View3D (un container care stochează camera și obiecte), configurați obiectivul și camera foto și adăugați-l în lista de afișare.
Apoi, facem un buton Răsfoire: extragem fundalul, adăugăm eticheta, îl configurem și îl adăugăm în lista de afișare.
Pentru a facilita monitorizarea stării de încărcare 3DS, facem o etichetă de depanare, care este un câmp de text simplu.
În cele din urmă, inițializăm a Fișier de referință
instanță pentru a gestiona navigarea pentru fișierul 3DS.
Următorul lucru important pe care trebuie să-l facem este să creezi un încărcător de model 3D.
funcția privată initLoader (): void // șterge toate removeEventListener (Event.ENTER_FRAME, onEnterFrame); în timp ce (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // Init încărcător 3D nou Loader3D.enableParser (Max3DSParser); încărcător = nou Loader3D (); loader.addEventListener (LoaderEvent.RESOURCE_COMPLETE, peComplete_loader); loader.addEventListener (LoaderEvent.LOAD_ERROR, peError_loader); view3d.scene.addChild (încărcător); // config camera view3d.camera.lookAt (loader.position);
Această funcție are trei secțiuni:
Loader3D
instanță și adăugați ascultători la acesta care declanșează când apare o eroare când un fișier 3D a fost încărcat complet. Pentru ao face vizibilă, o adăugăm la View3D
scena.Apoi, vom adăuga toate funcțiile de gestionare a evenimentelor, care au toate de-a face cu încărcarea fișierului 3DS.
funcția privată onClick_mcBrowse (e: MouseEvent): void file.browse ([new FileFilter ("3DS", "* .3ds")]); file.addEventListener (eveniment.SELECT, onFileSelected); fișier.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError); file.addEventListener (IOErrorEvent.IO_ERROR, peIoError); funcția privată onSecurityError (e: Event): void labelDebug.text + = ".Security Error!"; funcția privată onIOError (e: IOErrorEvent): void labelDebug.text + = ".File nu a fost găsit Eroare!"; funcția privată onFileSelected (e: Eveniment): void labelDebug.text = "Fișier:" + file.name; file.removeEventListener (eveniment.SELECT, onFileSelected); file.addEventListener (eveniment.COMPLETE, onFileLoaded); file.load (); funcția privată onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); funcția privată onError_loader (e: LoaderEvent): void trace ("Eroare la încărcarea fișierului ..."); labelDebug.text + = ".Loading Error"; funcția privată onComplete_loader (e: LoaderEvent): void trace ("Fișier 3D încărcat"); labelDebug.text + = ".Complete.Rendering ..."; loader.removeEventListener (LoaderEvent.RESOURCE_COMPLETE, peComplete_loader); loader.removeEventListener (LoaderEvent.LOAD_ERROR, peError_loader); object3d = Mesh (loader.getChildAt (0)); view3d.scene.addChild (object3d); loader.dispose (); încărcător = null; addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);
Când utilizatorul face clic pe butonul Răsfoire, afișăm dialogul File Browse, care utilizează a FileFilter
pentru a restricționa fișierele afișate celor cu a .3ds
extensie. Adăugăm mai mulți ascultători de evenimente în acest dialog, astfel încât să putem detecta momentul detectării unui fișier sau apariția unei erori.
După ce un fișier a fost selectat, îl încărcăm pe Fișier de referință
exemplu pe care am inițializat-o mai devreme. Odată ce o are încărcat, noi numim initLoader ()
funcție pe care am definit-o în etapa anterioară, care încarcă modelul nostru 3D.
În acest moment, există două stări posibile pe care le putem prinde:
Plasă
și adăugați-o la scena View3D
.Pentru a ne elibera memoria și a reutiliza mai târziu, ar trebui să eliminăm încărcătorul nostru.
La sfârșitul codului de mai sus (presupunând că fișierul este încărcat) adăugăm un ENTER_FRAME
eveniment, pe care îl vom folosi pentru a face obiectul. Vom scrie acel handler acum.
Acum că totul a fost inițializat, suntem gata să facem totul. Fiecare cadru va face ca obiectul 3D să se rotească (rotiți) și să apeleze face()
funcția de View3D
pentru a actualiza afișajul.
funcția privată onEnterFrame (e: Event): void object3d.yaw (1); // rotiți cu o unitate view3d.render ();
Aproape gata! Compilați SWF-ul cu F5 și vedeți rezultatul final. Atât de interesant, corect?
Puteți face decât să rotiți obiectul - încercați să apelați object3d.moveFoward (10)
sau object3d.pitch (1)
. Ați putea chiar să faceți acest lucru ca răspuns la o mișcare a mouse-ului sau la o apăsare-cheie.
Doar pentru referință și pentru a vă asigura că ați folosit numele de fișiere și locațiile corecte pentru toate lucrurile, iată cum ar trebui să arate proiectul dvs. FlashDevelop:
Am terminat primul tutorial de bază 3D pe cea mai nouă funcție 3D Accelarate a Adobe. Apreciez cu căldură pe toți cititorii să mă contacteze prin comentarii sau prin site-ul meu, oricând. Vă mulțumim pentru lectură. Ne vedem data viitoare. Noroc si sa te distrezi!