Share
In questo tutorial impareremo come caricare e visualizzare un file di modello 3DS in Flash, utilizzando l'accelerazione hardware Away3D 4.0 beta e Stage3D della GPU.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Clicca per scaricare i file demo.
Per utilizzare questo tutorial è necessario disporre di un modello 3D (esportato come file .3ds) e della sua trama (come file immagine).
Ho creato un semplice modello 3D di una teiera in Autodesk 3DS Max e l'ho esportato in un file chiamato Teapot.3DS insieme al suo file di texture separato, teapot.jpg. Puoi trovare entrambi i file nel download sorgente.
Dovrai scaricare un pacchetto SWC di Away3D 4.0.0 beta (puoi trovare questo SWC anche nei file sorgente).
E devi sapere che la versione beta di Away3D 4.0.0 utilizza le nuove funzionalità Stage3D di Adobe Flash, il che significa che può utilizzare la GPU per l'accelerazione grafica 3D.
Stiamo costruendo questa demo usando puro AS3, compilato in FlashDevelop (leggi di più qui). FlashDevelop è un IDE AS3 gratuito, sebbene sia solo per Windows. Se si preferisce utilizzare un altro IDE, sarà comunque possibile seguire questo tutorial.
Se non lo hai già fatto, assicurati di scaricare e installare FlashDevelop. Aprilo e inizia un nuovo progetto AS3.
FlashDevelop creerà per te un modello di template AS3 vuoto. Useremo la classe Main per tutto il nostro codice.
Vai nel menu Progetto, scegli Proprietà e modifica alcune opzioni:
Se vogliamo eseguire questo tutorial dal codice HTML incorporato, dobbiamo includere il parametro wmode = diretta nei parametri dell'oggetto Flash nel file HTML. Sembrerà come questo:
In questo tutorial caricheremo il file 3DS dalla memoria locale (piuttosto che da un server web), quindi dobbiamo modificare alcune impostazioni nella scheda Opzioni del compilatore. Impostato Utilizzare i servizi di rete a falso.
Ottenere Away3D-core-fp11_4_0_0_beta.swc dai file di origine, o scaricarlo dal sito di Away3D.
Copia quel file nel tuo progetto lib elenco.
In FlashDevelop, fare clic con il pulsante destro del mouse sul file SWC e selezionare Aggiungi alla libreria.
Ora iniziamo a programmare con il nostro Main.as file. Per iniziare, dobbiamo importare i file di libreria necessari per il programma per configurare il motore Away3D e i componenti Flash. Ce ne sono alcuni, quindi cerchiamo di toglierli di mezzo:
// 3DS Model Viewer Tutorial // di Vu Hoang Minh - www.3dgameflash.com // Creato per il pacchetto active.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; // Classi Flash generali per la visualizzazione e l'interazione 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; // Classi per caricare il file 3DS dal disco rigido import flash.display.SimpleButton; import flash.events.IOErrorEvent; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLRequest; import flash.system.Security;
Iniziamo. Dichiareremo le variabili di cui avremo bisogno, inizializzeremo il motore 3D e configuriamo il pulsante "Sfoglia" ed eseguiamo il debug del campo di testo dell'output.
Accentsconagua
public class Main extends Sprite file var privato: FileReference; private var view3d: View3D; loader var privato: Loader3D; private var labelDebug: TextField; private var object3d: Mesh; funzione pubblica Main (): void // boilerplate caricamento del codice if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); funzione privata init (e: Event = null): void // ci consente di caricare un file locale Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // init 3D engine view3d = new View3D (); view3d.camera.lens = new PerspectiveLens (); view3d.camera.z = 100; addChild (View3D); // caricatore 3D initLoader (); // Pulsante per aprire il browser dei file 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 = "Sfoglia"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // debug output 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 (); Nelle righe 25-29 inizializziamo i componenti grafici Away3D. Creiamo un nuovo View3D (un contenitore che memorizza la fotocamera e gli oggetti), ne configuriamo l'obiettivo e la fotocamera e lo aggiungiamo all'elenco di visualizzazione.
Dopodiché creiamo un pulsante Sfoglia: ne tracciamo lo sfondo, aggiungiamo la sua etichetta, lo configuriamo e lo aggiungiamo all'elenco di visualizzazione.
Per rendere più facile tenere traccia dello stato di caricamento di 3DS, creiamo un'etichetta di debug, che è un semplice campo di testo.
Infine, inizializziamo a File di riferimento istanza per gestire la navigazione per il file 3DS.
La prossima cosa importante che dobbiamo fare è creare un caricatore di modelli 3D.
funzione privata initLoader (): void // cancella tutto removeEventListener (Event.ENTER_FRAME, onEnterFrame); while (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // avvia un nuovo caricatore 3D Loader3D.enableParser (Max3DSParser); loader = new Loader3D (); loader.addEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.addEventListener (LoaderEvent.LOAD_ERROR, onError_loader); view3d.scene.addChild (caricatore); // config camera view3d.camera.lookAt (loader.position);
Questa funzione ha tre sezioni:
Loader3D istanza, e aggiungi ascoltatori ad esso che si attivano quando genera un errore quando un file 3D è completamente caricato. Per renderlo visibile, lo aggiungiamo al View3DLa scena di.Successivamente, aggiungeremo tutte le funzioni del gestore di eventi, che hanno tutte a che fare con il caricamento del file 3DS.
funzione privata onClick_mcBrowse (e: MouseEvent): void file.browse ([nuovo FileFilter ("3DS", "* .3ds")]); file.addEventListener (Event.SELECT, onFileSelected); file.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError); file.addEventListener (IOErrorEvent.IO_ERROR, onIOError); private function onSecurityError (e: Event): void labelDebug.text + = ".Security Error!"; funzione privata onIOError (e: IOErrorEvent): void labelDebug.text + = ".File non trovato Errore!"; funzione privata onFileSelected (e: Event): void labelDebug.text = "File:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); file.load (); funzione privata onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); funzione privata onError_loader (e: LoaderEvent): void trace ("Errore durante il caricamento del file ..."); labelDebug.text + = ".Loading Error"; funzione privata onComplete_loader (e: LoaderEvent): void trace ("File 3D caricato"); 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); Quando l'utente fa clic sul pulsante Sfoglia, viene visualizzata la finestra di dialogo Sfoglia file, che utilizza a FileFilter per limitare i file mostrati a quelli con a .3ds estensione. Aggiungiamo diversi listener di eventi a questa finestra di dialogo, in modo che possiamo rilevare quando viene rilevato un file o se si verifica un errore.
Dopo che un file è stato selezionato, lo carichiamo sul File di riferimento istanza che abbiamo inizializzato in precedenza. Una volta che ha caricato, noi chiamiamo il initLoader () funzione che abbiamo definito nel passaggio precedente, che carica il nostro modello 3D.
In questo momento, ci sono due possibili stati che possiamo cogliere:
Maglia e aggiungilo alla scena di View3D.Per liberare la memoria e riutilizzarla in un secondo momento, dovremmo disporre del nostro caricatore.
Alla fine del codice sopra (assumendo il file caricato) aggiungiamo un ENTER_FRAME evento, che useremo per rendere l'oggetto. Ora scriveremo questo gestore.
Ora che tutto è stato inizializzato, siamo pronti a renderlo tutto. Ogni fotogramma, faremo ruotare l'oggetto 3D (ruotare) e chiamare il render () funzione di View3D per aggiornare il display.
funzione privata onEnterFrame (e: Event): void object3d.yaw (1); // yaw di una unità view3d.render ();
Quasi fatto! Compila il tuo SWF con F5 e guarda il tuo risultato finale. Così interessante, giusto?
Puoi fare piuttosto che ruotare l'oggetto: prova a chiamare object3d.moveFoward (10) o object3d.pitch (1). Potresti anche farlo in risposta a un movimento del mouse o alla pressione di un tasto.
Solo per riferimento e per assicurarti di aver utilizzato i nomi file e le posizioni corrette per tutto, ecco come dovrebbe apparire il tuo progetto FlashDevelop:
Abbiamo completato il primo tutorial 3D di base sulla nuovissima funzione Accelarate 3d di Adobe. Accolgo un caloroso benvenuto a tutti i lettori per mettermi in contatto con me tramite i commenti, o tramite il mio sito Web, in qualsiasi momento. Grazie per aver letto. Arrivederci alla prossima. Buona fortuna e buon divertimento!
