Sfat rapid Afișarea unui model 3D cu Papervision3D

În acest sfat rapid vă vom arăta cum să încorporați și să afișați un model 3D în Flash, folosind Papervision3D.

Rezultatul final al rezultatelor

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

Introducere

Pentru a utiliza acest tutorial, va trebui să aveți un model 3D, exportat ca fișier .dae și textura acestuia, ca fișier imagine.

Voi folosi acest model de biciclete de munte de tip low poli, de la 3DOcean, creat de OneManBand (care a creat, de asemenea, acest obiect 3D de vizualizare în AIR).

Va trebui să descărcați o copie a lui Papervision3D (puteți găsi și o copie în fișierele sursă)

Pasul 1: Crearea fișierului Flash

Creați un nou document ActionScript 3 cu dimensiunile de 550x200px și setați rata de cadre la 30fps. De asemenea, setați clasa de documente la "EmbeddingDAE".

Creați un dreptunghi care acoperă întreaga scenă și umpleți-l cu un gradient radial de #FFFFFF la # D9D9D9. Reglați gradientul cu instrumentul de transformare a gradientului, astfel încât să pară următoarele:

Pasul 2: Configurarea clasei de documente

Creați un nou fișier ActionScript 3 și denumiți-l "EmbeddingDAE". Această clasă va extinde o clasă de la Papervision, care are toate funcționalitățile de bază stabilite.

Pe măsură ce vom încorpora modelul 3D în SWF, trebuie să vă asigurați că fișierul a fost încărcat complet înainte de a încerca să îl utilizați.

Iată codul pentru care:

 pachet import flash.events.Event; import org.papervision3d.view.BasicView; clasa publică EmbeddingDAE extinde BasicView funcția publică EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  funcția privată onFullyLoaded (e: Event): void

Pasul 3: Încorporarea resurselor

În loc să găzduim resursele noastre la un server web și să le încărcăm de acolo, pur și simplu le vom încorpora în SWF. Facem acest lucru utilizând SDK-ul Flex Încorporare etichetă. Dacă nu aveți SDK Flex sau aveți probleme cu versiunea preinstalată, o puteți descărca aici

Flash știe cum să se ocupe de anumite tipuri de fișiere, cum ar fi meu .png texture fișier, dar nu știe .dae tipul fisierului. Prin urmare, trebuie să setăm un parametru secundar, tipul MIME, la application / octet-stream - aceasta înseamnă că fișierul va fi transformat în a ByteArray.

Atunci când utilizați Încorporare , trebuie să trimitem calea relativă (sau completă) a fișierului și să atribuim o clasă acestui fișier. Mai târziu, putem crea o instanță a fișierului încorporat utilizând această clasă.

Aici puteți vedea codul:

 clasa publica EmbeddingDAE extinde BasicView [Embed (sursa = "mountain_bike.dae", mimeType = "aplicatie / octet-stream")] privat var bikeModelClass: Class; [Încorporați (sursa = "bike_texture.png")] private var bikeTextureClass: Class; funcția publică EmbeddingDAE ()

Va trebui să înlocuiți căile astfel încât să se potrivească cu propriile fișiere.

Pasul 4: Manipularea texturii

Pentru a folosi textura noastră cu modelul nostru în Papervision3D, trebuie să facem trei lucruri:

Creați o instanță a texturii ca a Bitmap - așa că putem avea acces la ei bitmapData.
Creeaza o Material cu asta bitmapData -- aceasta va funcționa ca o textura.
Creeaza o MaterialsList, care va lega materialul nostru de modelul nostru. Acesta va avea nevoie de numele materialului utilizat pentru model. Dacă aveți doar un fișier de textură (care este cel mai frecvent) nu trebuie să vă faceți griji despre acest lucru, trebuie doar să utilizați "toate".

Iată codul care face acest lucru (adăugat la onFullyLoaded ()):

 var bitmap: Bitmap = bicicleta nouăTextureClass (); var bitmapMaterial: BitmapMaterial = BitmapMaterial nou (bitmap.bitmapData); var materialsList: MaterialeList = newListsList (); materialsList.addMaterial (bitmapMaterial, "toate");

Nu uitați să importați:

 import flash.display.Bitmap; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.utils.MaterialsList;

Pasul 5: Încărcați modelul

Pentru a încărca modelul nostru, trebuie să facem patru lucruri:

Creați o variabilă pentru modelul nostru - gândiți-vă la aceasta ca o coajă goală.
Creați o instanță a ByteArray conținând modelul nostru.
Creați o instanță a variabilei pentru modelul nostru - creând coajă.
Încărcați modelul nostru prin trecerea lui ByteArray si MaterialsList la cochilia noastră goală.

Mai întâi creați variabila:

 privat var bikeModelDAE: DAE;

Apoi face restul (adăugând la onFullyLoaded)

 var byteArray var: ByteArray = bicicleta nouăModelClass (); bikeModelDAE = DAE nou (); bikeModelDAE.load (byteArray, materialsList);

Nu uitați să importați:

 import flash.utils.ByteArray; import org.papervision3d.objects.parsers.DAE;

Pasul 6: Afișarea modelului

Acum, tot ce lipsește este că putem vedea modelul, care este o bucată de prăjitură. De asemenea, ajustează poziția aparatului foto, astfel încât să putem vedea bine acest model. Apoi le spun lui Papervision3D să redea fiecare cadru.

Iată codul (adăugând din nou la onFullyLoaded ()):

 aceasta.scene.addChild (bikeModelDAE); this.camera.z = 500; this.startRendering ();

Aspectul va arata astfel:

Pasul 7: Adăugarea rotației

Acum putem vedea modelul, dar numai dintr-un punct de vedere. Asta e puțin plictisitor, nu-i așa? Să adăugăm o rotație! Aici vom trece peste o funcție care se numește fiecare cadru de către motorul Papervision3D.

 override funcția protejată onRenderTick (eveniment: Event = null): void super.onRenderTick (eveniment); bikeModelDAE.yaw (1);

Aici este din nou:

Concluzie

Acum știți cum să adăugați modele 3D la proiectele dvs. Flash și este de fapt destul de simplă. Sper că vă place să citiți și că ați fost de folos.

Vă mulțumim pentru lectură!

Cod