È con estremo piacere che vi presento il primo tutorial per fare grafica in 3d con adobe flash e le librerie open-source papervision3d. Mi sono basato sugli ottimi tutorial presentati da Enrico Viola nel suo blog. Vi consiglio vivamente di seguirli, sia per l’ottima fattura, che per la semplicità per come vengono proposti.
Come funziona papervision?
Tutto il mondo di papervision 3d gira attorno a due classi: Scene3d e Camera3d. La prima, come dice il nome, ci permette di creare la scena e di posizionare gli elementi al suo interno, mentre la seconda gestisce l’inquadratura. Inoltre, chi conosce la programmazione ad oggetti e specialmente actionscript 3.0 avrà un enorme vantaggio nell’apprendimento di questa libreria.
Il nostro primo progetto riguarderà il famoso allunaggio (si lo so un po’ in ritardo :P), e per adesso sarà molto semplice: inseriremo una sfera con la texture lunare, e una bandiera americana, che cliccando su di essa ci porterà sulla pagina Apollo 11 di wikipedia; carino come primo esperimento, no? Potete osservare il risultato qui sotto (aspettate qualche secondo se il movieclip non viene caricato):
Se vi è piaciuto qui sotto trovate il codice, commentato leggermente da me, mi raccomando integrate le letture di Enrico Viola che vi ho indicato sopra ;)
package {
//autore: www.mazzjoe.com basato sulla guida di www.enricoviola.it/blog
//-------------------------------
//Luna in papervision
//importiamo le classi standard di flash, tra cui il mouseevent, URLRequest e navigateToUrl per il link sulla bandiera
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.Sprite;
import flash.net.navigateToURL;
//importiamo le classi di papervision necessarie al nostro progetto, maggiori informazioni le potete trovare sul blog di E. Viola
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.*;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.events.InteractiveScene3DEvent;
//BasicView è la classe che ci permette di sviluppare il progetto, e noi la estendiamo con la nostra scena
public class luna extends BasicView {
//creazione delle variabili necessarie con gli oggetti primitivi necessari
private var sfera2:Sphere;
private var piano:Plane;
private static const raggioOrbitale:Number=200;
private var angoloOrbitaleMovimento:Number=0;
public function luna() {
//super richiama la superclasse BasicView, buttonMode e useHandCursor fa apparire la classica manina.
super(0, 0, true, true);
super.buttonMode=true;
super.useHandCursor=true;
init3D();
createScene();
startRendering();
}
private function init3D():void {
//viene posizionata la "camera"
camera.x=-200;
camera.y=200;
camera.z=500;
}
private function createScene():void {
//si crea la nuova scena, viene assegnato un materiale bitmap (in questo caso la texture della luna) e poi collegata alla sfera.
var tessutolunare:BitmapAssetMaterial=new BitmapAssetMaterial("immagine");
sfera2=new Sphere(tessutolunare,195,25,25);
//stessa cosa con la bandiera, la si rende interattiva, visibile su due facce e la si posiziona
var flag:BitmapAssetMaterial=new BitmapAssetMaterial("americanflag");
flag.interactive=true;
piano=new Plane(flag,45,60,20);
piano.material.doubleSided=true;
piano.y=120;
//aggiungiamo quello che abbiamo creato alla scena
scene.addChild(piano);
scene.addChild(sfera2);
//impostiamo il metodo di rotazione alla bandiera.
piano.x=- raggioOrbitale;
//facciamo partire la funzione bandiera una volta cliccata su di essa
piano.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, bandiera);
}
//simulazione dell'ENTER_FRAME, anche qui la spiegazione la trovate sul blog di E. Viola
override protected function onRenderTick(event:Event=null):void {
//yaw permette una rotazione dell'elemento su se stesso.
sfera2.yaw( 0.3);
//calcolo attraverso formule matematiche della rotazione della bandiera.
angoloOrbitaleMovimento+=0.3;
var x:Number=- Math.cos(angoloOrbitaleMovimento*Math.PI/180)*raggioOrbitale;
var z:Number=Math.sin(angoloOrbitaleMovimento*Math.PI/180)*raggioOrbitale;
piano.x=x;
piano.z=z;
piano.yaw( 0.3);
super.onRenderTick(event);
}
//quando l'utente fa click sulla bandiera, viene inviato nella pagina di Apollo_11!
private function bandiera(event:InteractiveScene3DEvent):void {
var indirizzo:URLRequest=new URLRequest("http://it.wikipedia.org/wiki/Apollo_11");
navigateToURL(indirizzo, "_blank");
}
}
}
Inoltre, vanno importate le due textures all’interno del .fla con adobe flash, e dopo esportate per actionscript, come ho fatto per americanflag e immagine.
Inoltre, ecco i sorgenti del progetto con il file fla con le texture, buon divertimento, e state in linea, perché nel prossimo tutorial proveremo ad inserire un’astronauta!