Suggerimento rapido visualizzazione di un modello 3D con Papervision3D

In questo suggerimento rapido daremo un'occhiata a come incorporare e visualizzare un modello 3D in Flash, utilizzando Papervision3D.

Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

introduzione

Per utilizzare questo tutorial è necessario avere un modello 3D, esportato come file .dae e la sua trama, come un file immagine.

Userò questo modello di mountain bike low-poly da 3DOcean, creato da OneManBand (che ha anche creato questo ordinato Object Viewer 3D in AIR).

Dovrai scaricare una copia di Papervision3D (puoi anche trovare una copia nei file sorgente)

Passaggio 1: creazione del file Flash

Crea un nuovo documento ActionScript 3 con dimensioni di 550x200px e imposta la frequenza fotogrammi su 30 fps. Inoltre, imposta la classe del documento su "EmbeddingDAE".

Crea un rettangolo che copra l'intero livello e riempilo con un gradiente radiale di #FFFFFF a # D9D9D9. Regola il gradiente con lo strumento Trasforma sfumatura, quindi assomiglia a questo:

Passaggio 2: impostazione della classe di documenti

Creare un nuovo file ActionScript 3 e denominarlo "EmbeddingDAE". Questa classe estenderà una classe da Papervision che ha tutte le funzionalità di base configurate.

Dato che stiamo per incorporare il modello 3D nel tuo SWF, dobbiamo assicurarci che il file sia stato completamente caricato prima di provare a utilizzarlo.

Ecco il codice per questo:

 package import flash.events.Event; import org.papervision3d.view.BasicView; public class EmbeddingDAE estende BasicView public function EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  funzione privata onFullyLoaded (e: Event): void

Passaggio 3: incorporare le risorse

Invece di ospitare le nostre risorse su un server web e caricarle da lì, stiamo semplicemente inserendole nel file SWF. Lo facciamo utilizzando Flex SDK Incorporare etichetta. Se non hai il Flex SDK o hai problemi con la versione preinstallata, puoi scaricarlo qui

Flash sa come gestire determinati tipi di file, come il mio .png file di texture, ma non conosce il .dae formato del file. Quindi dobbiamo impostare un parametro secondario, il tipo MIME, su application / octet-stream - questo significa che il file verrà trasformato in a ByteArray.

Quando si usa il Incorporare tag, dobbiamo riferirci al percorso relativo (o completo) del file e all'assegnazione di una classe a questo file. Più tardi possiamo creare un'istanza del file incorporato usando questa classe.

Qui puoi vedere il codice:

 public class EmbeddingDAE estende BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Incorpora (source = "bike_texture.png")] private var bikeTextureClass: Class; funzione pubblica EmbeddingDAE ()

Dovrai sostituire i percorsi in modo che corrispondano ai tuoi file.

Passaggio 4: gestione della trama

Per utilizzare la nostra texture con il nostro modello in Papervision3D, dobbiamo fare tre cose:

Crea un'istanza della trama come a Bitmap - quindi possiamo accedervi bitmapData.
Creare un Materiale con questo bitmapData -- questo funzionerà come una trama.
Creare un MaterialsList, che collegherà il nostro materiale al nostro modello. Avrà bisogno del nome del materiale usato per il modello. Se hai solo un file di texture (che è più comune) non devi preoccuparti di questo, usa solo "tutti".

Ecco il codice facendo questo (aggiunto a onFullyLoaded ()):

 var bitmap: Bitmap = new bikeTextureClass (); var bitmapMaterial: BitmapMaterial = new BitmapMaterial (bitmap.bitmapData); var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (bitmapMaterial, "all");

Ricorda di importare:

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

Passaggio 5: caricare il modello

Per caricare il nostro modello, dobbiamo fare quattro cose:

Crea una variabile per il nostro modello - pensa a questo come a una shell vuota.
Crea un'istanza di ByteArray contenente il nostro modello.
Crea un'istanza della variabile per il nostro modello - creando la shell.
Carica il nostro modello passando il ByteArray e il MaterialsList al nostro guscio vuoto.

Prima crea la variabile:

 private var bikeModelDAE: DAE;

Quindi fai il resto (aggiungendo a onFullyLoaded)

 var byteArray: ByteArray = new bikeModelClass (); bikeModelDAE = new DAE (); bikeModelDAE.load (byteArray, materialsList);

Ricorda di importare:

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

Passaggio 6: visualizzazione del modello

Ora tutto ciò che ci manca è riuscire a vedere il modello, che è un pezzo di torta. Sto anche regolando la posizione della fotocamera in modo da poter dare una buona occhiata a questo modello. Quindi sto dicendo a Papervision3D di ri-renderizzare ogni frame.

Ecco il codice (di nuovo aggiunto a onFullyLoaded ()):

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

Questo è come sarà:

Passaggio 7: aggiunta della rotazione

Ora possiamo vedere il modello, ma solo da un punto di vista. È un po 'noioso no? Aggiungiamo un po 'di rotazione! Qui abbiamo intenzione di sovrascrivere una funzione che viene chiamata ogni frame dal motore Papervision3D.

 sovrascrivi la funzione protetta onRenderTick (event: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

Eccolo ancora una volta:

Conclusione

Ora sai come aggiungere modelli 3D ai tuoi progetti Flash, ed è in realtà abbastanza semplice. Spero ti sia piaciuto leggere e l'ho trovato utile.

Grazie per aver letto!

Codice