A+ A A-

PV3D - Prima applicazione - 2a parte In evidenza

logoPV3DCreazione di una classe di base per Papervision3D

Nella lezione precedente si è appreso come è fatto una scena base è fatta, e come  creare classi  personalizzate. Ora che siamo appreso tutta questa teoria, è ora di sporcarsi le mani scrivendo del codice.
Avvia il tuo strumento preferito di authoring. Come prima applicazione costruiremo una scena 3D contenente una sfera che ruota sul suo asse y. Una sfera è fondamentalmente una "palla 3D" ed è instanziata in Papervision3D come una delle primitive di default.

Il documento della classe base.

Diamo un'occhiata alla classe che definisce la struttura base dell'applicazione della sfera rotante

package {
     import flash.display.Sprite;
   
      import org.papervision3d.cameras.Camera3D;
      import org.papervision3d.objects.primitives.Sphere;
      import org.papervision3d.render.BasicRenderEngine;
      import org.papervision3d.scenes.Scene3D;
      import org.papervision3d.view.Viewport3D;
     public class FirstApplication extends Sprite
     {
                private var scene:Scene3D;
                private var viewport:Viewport3D;
                private var camera:Camera3D;
                private var renderEngine:BasicRenderEngine;
                private var sphere:Sphere;
       
                public function FirstApplication()
                {
                          scene = new Scene3D();
                          camera = new Camera3D();
                          sphere = new Sphere();
                          scene.addChild(sphere);
                          viewport = new Viewport3D();
                          addChild(viewport);
                          renderEngine = new BasicRenderEngine();
                         renderEngine.renderScene(scene,camera,viewport);
               }
     }
}

Diamo uno sguardo al codice in dettaglio. Mentre lo facciamo, è possibile approfittarne per creare un nuovo progetto con una classe chiamata FirstApplication. Se si sta utilizzando  Flash Develop, non dimenticate di configurare il percorso dei sorgenti della libreria Papervision3D.
Precedentemente abbiamo imparato che abbiamo bisogno di una scena, una telecamera, una finestra, un oggetto 3D con un materiale e un motore di rendering, in modo da creare un immagine renderizzata sullo schermo. Ricordate che la classe  deve estendere Sprite di Flash.  Per rendere tutto ciò che ci serve disponibile all'interno della classe, abbiamo bisogno di importare prima.

import flash.display.Sprite;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

Ora che abbiamo importato le librerie che ci servono, definiamo le proprietà della classe.

    private   var  scene:Scene3D;
   private   var  viewport:Viewport3D;
   private   var  camera:Camera3D;
   private   var  renderEngine:BasicRenderEngine;
   private   var  sphere:Sphere;

Qui abbiamo solo definito le proprietà e i relativi tipi di classe, senza assegnare a loro alcun valore. Cosa che faremo all'interno del costruttore. Prima si deve creare il costruttore.

   public function FirstApplication()
    {
    }

Iniziamo con la creazione di una scena all'interno del costruttore. Una scena, come già sappiamo, è necessaria in quanto il contenitori dei nostri oggetti 3D. E 'molto facile per crearne una.

    scene = new Scene3D();

Tutto quello che dovete fare è creare un'istanza della classe Scene3D, senza alcun parametro.
Successivamente, aggiungete una Camera3D, che è facile come la creazione di una nuova scena.

    camera = new Camera3D();

Una telecamera può prendere i parametri quando si crea una nuova istanza, tuttavia, i valori predefiniti andranno bene per ora.
La scena e la telecamera sono inutili fintanto che non ci sono oggetti 3D nella scena. Per questo esempio verrà utilizzata una sfera , che è uno degli oggetti 3D built-in .

    sphere = new Sphere();

Una sfera, così come una Camera3D, prende i parametri quando si crea un'istanza. Tuttavia,
quando non le si passa alcun parametro, verrà creata una sfera di default.
Ora che abbiamo creato la nostra sfera, abbiamo bisogno di aggiungerla alla scena, altrimenti
non può essere vista dalla telecamera. Questo funziona esattamente nello stesso modo come l'aggiunta classica di oggetti all'elenco di visualizzazione in Flash, utilizzando il metodo addChild ().

    scene.addChild(sphere);

Ora che abbiamo una scena, una macchina fotografica, e una sfera, abbiamo bisogno di impostare la finestra della scena 3D, così possiamo vedere cosa sta succedendo lì dentro. Abbiamo bisogno di definire la nostra finestra e si aggiunge allo stage per renderlo visibile.

    viewport = new Viewport3D();
    addChild(viewport);

Durante la creazione di una nuova finestra, è possibile passarle parametri opzionali, ma i parametri di default sono di nuovo sufficienti, per ora.
Ora siamo ad un passo da pubblicare la nostra applicazione. In primo luogo abbiamo bisogno di azionre la nostra macchina fotografica. Questo viene fatto definendo il motore di rendering, il che renderizza la vista corrente della telecamera nella finestra di visualizzazione.

    renderEngine = new BasicRenderEngine();
    renderEngine.renderScene(scene,camera,viewport);sfera

Ora che il motore di rendering è definito abbiamo aggiunto un'istruzione per renderizzare l'immgine, siamo pronti a pubblicare questo progetto. dovrebbe apparire la seguente immagine di triangoli che formano una sorta di cerchio:

 

                 Prestare attenzione alle maiuscole e minuscole negli esempi. non
                 seguendo queste convenzioni potrebbe causare un errore. Un buon esempio
                 di questo è la definizione e l'istanziazione di una sfera come abbiamo fatto nel nostro                       
                 FirstApplication.
          var sphere:Sphere = new Sphere();
                 Qui vediamo che abbiamo definito una proprietà di classe denominata sphere
                 (minuscolo) di tipo Sphere (maiuscolo), contenente un'istanza di
                 Sphere (maiuscolo). Dare ad una variabile / proprietà lo stesso nome del
                 tipo di oggetto definito spesso causa confusione e problemi.

 

Il risultato di queste poche righe di codice può non apparire impressionante, ma in realtà questo è l'inizio di qualcosa che presto diventerà eccitante e non potrebbe mai essere comparato con un uso di Flash classico. Quando siete riusciti a compilare questa applicazione che mostra i triangoli, ce l'avete fatta a superare la parte più difficile di questo esempio. Continuiamo a costruire la vostra prima applicazione vedendo come possiamo aggiungere l'illusione del 3D al nostro oggetto, che appare ancora molto 2D.

Rifiniamo la vostra prima applicazione

Il look 2D è causato dal fatto che non c'è un'evidente prospettiva. Inoltre, la scena è piuttosto statica. Quando si ruota la sfera sopra uno dei suoi assi, avremo una megliore illusione  del 3D. Perché cambiando prospettiva, si aggiunge l'illusione di guardare una Sfera 3D. Ma prima di poter implementare la rotazione, abbiamo bisogno di aggiungere alcune righe in più di codice. In questa fase, abbiamo eseguito solo un rendering singolo, subito dopo che abbiamo definito il motore di rendering. Tuttavia, questo non è sufficiente in una scena reale 3D. Ricordati che abbiamo parlato della necessità di avere una cinepresa? Chiamando renderScene una volta solo renderiziamo  l'immagine una volta sola, come a una fotocamera che scatta una foto sola. Abbiamo quindi bisogno di scattare immagini (renderizzare) costantemente. Il modo più comune per farlo è con l'aggiunta di un listener di eventi ENTER_FRAME e renderizzare la scena ogni volta che un ENTER_FRAME viene inviato.

Abbiamo bisogno di importare la classe Event, in modo da poter "ascoltare" gli eventi ENTER_FRAME. Questo può essere ottenuto inserendo l'importazione seguente all'inizio della classe:

     import flash.events.Event;

Ora che la evento è disponibile, si può aggiungere un listner e porlo in "ascolto". Il posto giusto dopo la chiamata renderScene, come mostrato in grassetto nello snippet di codice seguente:

    renderEngine.renderScene(scene, camera, viewport);
    addEventListener(Event.ENTER_FRAME, render);

Su ogni evento ENTER_FRAME, un metodo chiamato renderer verrà attivato. Questo metodo deve essere attuato, insieme ad una chiamata renderScene, all'interno di questo metodo.
Aggiungere il codice seguente dopo il metodo di costruzione:

    private function render(e:Event):void
    {
       renderEngine.renderScene(scene, camera, viewport);
    }

Ogni volta che l'indicatore di riproduzione entra in un nuovo frame, la scena verra renderizzato di nuovo. Ma ciò in questo momento è solo uno spreco di risorse. Perché renderizzare la scena quando nulla è stato cambiato? Quindi, cominciamo a far ruotare la sfera intorno al suo asse y. Questo può essere ottenuto aumentando  costantemente l'angolo di rotazione attuale del della sfera sull'asse y, giusto prima di renderizzare la scena all'interno del nostro metodo render.

   private function render(e:Event):void
   {
       sphere.localRotationY +=1;
      renderEngine.renderScene(scene, camera, viewport);
   }

Ogni frame la rotazione attuale dell'oggetto aumenta di un grado.
Pubblicare la classe, porterà ad una animazione come mostrato nella seguente sequenza di screenshot:

sfere

Ultima modifica ilLunedì, 25 Giugno 2012 21:15
Vota questo articolo
(0 Voti)
Torna in alto