Piano roteante texturizzato in Flash con Papervision3D
Già da prima che uscisse la versione 3.0 di ActionScript si sperimentava l’ambiente 3d con Flash, con vere e proprie librerie dedicate come Sandy e PaperVision.
Queste sperimentazioni davano già buoni risultati nella versione 2 dello script, a discapito delle performance.
Tempestivamente PaperVision è stata tradotta anche nella nuova versione del linguaggio, migliorandone enormemente le prestazioni.
Proprio di questo parleremo nel tutorial, esaminandone le classi base per realizzare un primo esperimento con un piano texturizzato.
Innanzitutto, se non l’avete ancora fatto, iscrivetevi alla mailing list del loro sito per ricevere via email l’accesso al repository da cui scaricare l’ultima versione del pacchetto di classi.
Fatto questo aprite Flash CS3, cliccate su Modifica->Preferenze, selezionate ActionScript come categoria.
In questa sezione cliccate sul bottone Impostazioni ActionScript 3.0 per accedere alla lista di percorsi dove verrà cercato il codice appena scaricato.
Cliccando sull’icona croce aggiungerete un nuovo percorso, con l’icona mirino cercherete questo percorso sul vostro computer.
Il percorso deve finire con le cartelle \as3\trunk\src.
Eseguite queste operazioni siamo pronti per cominciare a vedere il codice che creerà un piano 3d rotante texturizzato, eviterò di parlare delle nuove caratteristiche di AS3 per ovvie ragioni, per chi volesse studiarlo vi consiglio quest’ottimo manuale dell’Oreilly: Essential ActionScript 3.0.
Questo è il codice che andrà inserito nel file ProvaBitmapFileMaterial.as, il cui nome è lo stesso della classe da cui si istanzia il piano tridimensionale.
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.Plane;
import org.papervision3d.scenes.MovieScene3D;
In questa prima porzione importiamo le classi che ci servono, da notare Camera3D che ci servirà per il punto di vista della scena 3D, BitmapFileMaterial per caricare esternamente la texture con cui rivestire il piano, Plane per creare la figura tridimensionale e MovieScene3D per la scena in cui posizionare l’oggetto.
{
private var container :Sprite;
private var scene :MovieScene3D;
private var camera :Camera3D;
private var plane :Plane;
public function ProvaBitmapFileMaterial()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;
Cominciamo con il codice della classe dichiarando le variabili che ci serviranno per istanziare contenitore, scena, camera e piano.
A seguire c’è il costruttore della classe, nel cui codice avverranno la maggior parte delle operazioni.
Creiamo il contenitore dalla classe Sprite e posizioniamolo sullo Stage, dandogli le coordinate che vogliamo, quindi creiamo la scena instanziando una MovieScene3D passando come parametro il contenitore.
Fatto questo instanziamo il punto di vista con new Camera3D dandogli una posizione sull’asse Z, l’asse della profondità e un effetto zoom di 5.
material.doubleSided = true;
material.smooth = true;
plane = new Plane( material, 128, 128, 2, 2);
scene.addChild( plane );
Creiamo la texture caricando il file esterno, che dovrà trovarsi nella stessa posizione della classe: in caso contrario specifichiamone il percorso.
A material impostiamo la proprietà doubleSided con valore true per fare in modo che ruotando il piano la texture si veda su entrambi i lati, e poi con smooth ammorbidiamo l’effetto pixel del file.
Creiamo un piano instanziando la classe Plane, passando come parametri la texture, la larghezza, l’altezza e i segmenti orizzontali e verticali: possiamo aumentarne o diminuirne il numero, considerando che maggiori saranno i segmenti da cui è composto e migliore sarà la resa visiva, a discapito comunque delle performance.
Nel caso di un semplice piano bastano anche 2×2 segmenti, nel caso di una sfera, per esempio, maggiori sono e migliore sarà il suo aspetto.
Il piano appena creato deve essere aggiunto alla scena 3D.
}
private function onEnterFrame( event: Event ): void
{
plane.rotationX += 4.35;
plane.rotationY += 6.55;
plane.rotationZ += 0.55;
scene.renderCamera( camera );
}
}
}
Con quest’ultimo pezzo di codice si completa la classe.
Nel caso non volessimo animazione o interazione con l’oggetto 3D potremmo fermarci qui inserendo la riga scene.renderCamera( camera ); la quale renderizza una sola volta il piano nel filmato flash.
Ma la nostra intenzione è diversa quindi aggiungiamo un EventListener allo stage: ad ogni EnterFrame verrà eseguita la funzione onEnterFrame.
In questa funzione aumentiamo ad ogni frame il valore delle proprietà del piano che lo fanno ruotare nello spazio e renderizziamo ogni volta la situazione.
Per finire chiudiamo, funzione, classe e package.
Per vedere il nostro codice in azione, creiamo un nuovo filmato in Flash con dimensioni di almeno 400×400 pixel, clicchiamo sullo stage e nel pannello Proprietà, come voce Classe Documento, inseriamo ProvaBitmapFileMaterial, ovvero il nome del nostro file .AS, senza estensione, che dovrà trovarsi nella stessa cartella del FLA sorgente.
Compiliamo il file e vedremo la texture ruotare su se stessa.
Ecco il codice di ProvaBitmapFileMaterial.as nella sua integrità:
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.Plane;
import org.papervision3d.scenes.MovieScene3D;
public class ProvaBitmapFileMaterial extends Sprite
{
private var container :Sprite;
private var scene :MovieScene3D;
private var camera :Camera3D;
private var plane :Plane;
public function ProvaBitmapFileMaterial()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;
var material:BitmapFileMaterial = new BitmapFileMaterial("texture.jpg");
material.doubleSided = true;
material.smooth = true;
plane = new Plane( material, 128, 128, 2, 2);
scene.addChild( plane );
stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame( event: Event ): void
{
plane.rotationX += 4.35;
plane.rotationY += 6.55;
plane.rotationZ += 0.55;
scene.renderCamera( camera );
}
}
}
Ritieni questo post utile o interessante?
Condividi e Segnala
Leggi anche:
- » Papervision 3D 2.0, una release d'effetto
- » Preloader per Movieclip esterni in AS2
- » Passare valori e parametri a Flash in AS3 con SWFObject
dei commenti -
lascia un commento - trackback
November 29th, 2007, 1:24 am
Questo post è veramente interessante: chiaro, preciso e professionale.
Complimenti!