Vizualizați modele 3DS cu Away3D 4.0 Beta

Î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.


Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:

Faceți clic pentru a descărca fișierele demo.


Introducere

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.


Pasul 1: Creați un proiect nou

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.


Pasul 2: Opțiuni de compilatoare

Accesați meniul Proiect, alegeți Proprietăți și schimbați câteva opțiuni:

  1. Setați platforma țintă în Flash Player 11.1.
  2. Schimbați dimensiunea SWF la 550x400px.
  3. Setați culoarea de fundal în negru.
  4. Modificați FPS la 40.

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.


Pasul 3: Adăugați Biblioteca Away3D

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ă.


Pasul 4: Importuri

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;

Pasul 5: Inițializarea programului

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.


Pasul 6: Inițierea încărcătorului 3D

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:

  1. În primul rând, noi clarificăm totul, în cazul în care programul nostru a început înainte.
  2. După aceasta, inițiază un nou 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 View3Dscena.
  3. Pentru a ne asigura că putem vedea obiectul de îndată ce se încarcă, îi spunem camerei să o privească.

Pasul 7: Efectuați toate evenimentele

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:

  • Una este starea "eroare", ceea ce înseamnă că programul nostru nu poate încărca fișierul model 3D (probabil că calea este incorectă sau că fișierul de textură al hărții este greșit ...).
  • Celălalt este evenimentul "încărcat cu succes", pe care am aruncat fișierul încărcat la un 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.


Pasul 8: Porniți buclă

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 (); 

Pasul 9: Compilați și executați!

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:


Concluzie

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!

Cod