Continuiamo con la guida per analizzare invece il procedimento di realizzazione di una animazione. Abbiamo già visto qualcosina in un precedente articolo riguardante le primitive, ma questa volta cerchiamo di ordinare meglio il lavoro, basandoci sulla versione 2.0 beta di PV3D.
Cerchiamo di realizzare questa animazione:
Si tratta di un simpatico modellino di sistema solare, in cui, oltre ai 2 movimenti di rotazione, le sfere possiedono anche un movimento di rotazione rispetto ad un asse verticale.
Stavolta preferisco utilizzare la funzione BasicView per realizzare la scena, la camera, il viewport e per permettere la renderizzazione, in maniera veloce ed immediata. Vedremo come il risultato non cambia. Cambiamo però alcune funzioni che utilizzeremo (tipo la funzione “super” ,che richiama nient’altro che il metodo BasicView, e la funzione “onRenderTick”, che semplicemente sostituisce il listener ENTER_FRAME senza alcuna differenza sostanziale).
Come di consueto il codice deve essere inserito in un file actionscript esterno .as, bisogna quindi collegare il file flash .fla con tale file .as (inserire in corretto nome in “classe documento” nel pannello proprietà) e infine bisogna posizionare entrambi i file e le cartelle dei codici sorgenti di papervision3D affiancate.
Ma analizziamo dettagliatamente il codice commentato:
package {
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;import org.papervision3d.core.geom.Lines3D;
import org.papervision3d.core.geom.renderables.Line3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.special.LineMaterial;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.view.BasicView;//da notare l’estensione della classe come BasicView, in questo modo
//ne eredita tutte le proprietà e i metodi, che possono immediatamente
//essere utilizzati nella programmazione.
public class esempio2 extends BasicView {//Utilizziamo una costante per definire il raggio orbitante
//per convenzione le costanti si scrivono con lettere maiuscole
private static const raggioOrbitale:Number = 200;
private static const raggioOrbitale2:Number = 300;private var sfera:Sphere;
private var sfera2:Sphere;
private var sfera3:Sphere;
private var angoloOrbitaleMovimento:Number = 0;
private var angoloOrbitaleMovimento2:Number = 0;public function esempio2() {
//ricordiamo che l’istruzione super() in AS3 richiama la versione superclasse
//della funzione di costruzione. In questo caso è BasicView (l’estensione)
//e ne eredita le proprietà e i metodi, velocizzando la programmazione.
//BasicView(viewportWidth:Num = 640, viewportHeight:Num = 480,
//scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = “Target”)
super(0, 0, true, false);stage.align = StageAlign.TOP_LEFT;
init3D();
createScene();
startRendering();
}private function init3D():void {
camera.x = -200;
camera.y = 200;
camera.z = -500;
}private function createScene():void {
//creiamo una sfera, la costruzione di tali oggetti
//è già stata analizzata nel primo articolo
var sferaMaterial:MaterialObject3D = new WireframeMaterial(0xFFFFFF);
sfera = new Sphere(sferaMaterial, 35, 10, 10);//posizioniamo la sfera(default = 0, 0, 0)
sfera.x = -raggioOrbitale;//creiamo una sfera2 posizionata di default al centro
sfera2 = new Sphere(sferaMaterial, 50, 10, 10);
//creiamo una sfera3 che ruoti più velocemente
sfera3 = new Sphere(sferaMaterial, 15, 10, 10);
sfera3.x = raggioOrbitale2;//creiamo una linea verticale centrale, la costruzione di
//tali oggetti è già stata analizzata nel primo articolo
var defaultMaterial:LineMaterial = new LineMaterial(0xFFFFFF);
var axes:Lines3D = new Lines3D(defaultMaterial);
var yAxisMaterial:LineMaterial = new LineMaterial(0×00FF00);
var origin:Vertex3D = new Vertex3D(0, -100, 0);
var yAxis:Line3D = new Line3D(axes, yAxisMaterial, 2, origin, new Vertex3D(0, 100, 0));
axes.addLine(yAxis);scene.addChild(sfera3);
scene.addChild(sfera2);
scene.addChild(sfera);
scene.addChild(axes);
}//la funzione “onRenderTick” altro non fà che simulare l’ENTER_FRAME, per
//funzionare è necessario però attivare la funzione “startRendering” che
//ha proprio il compito di attivare un listener ogni frame per la funzione
//”onRenderTick”. In questo caso faremo delle sostituzioni al metodo, al
//fine di realizzare l’animazione desiderata.
override protected function onRenderTick(event:Event=null):void {//il metodo “yaw” agisce su tutti gli DisplayObject3D e
//avvia una rotazione dell’oggetto3D secondo il valore
//di angolatura inserito.
sfera.yaw( 4);
sfera2.yaw( 1);
sfera3.yaw( -6);//cambiamo la posizione della sfera creando un movimento
//di rivoluzione attorno all’asse centrale di 5° ogni frame
angoloOrbitaleMovimento += 5;//calcoliamo tale movimento di rivoluzione utilizzando le seguenti
//formule matematiche generiche.
var x:Number = - Math.cos(angoloOrbitaleMovimento * Math.PI / 180) * raggioOrbitale;
var z:Number = Math.sin(angoloOrbitaleMovimento * Math.PI / 180) * raggioOrbitale;
sfera.x = x;
sfera.z = z;//realizziamo il movimento per la terza sfera
angoloOrbitaleMovimento2 -= 9;
var x2:Number = - Math.cos(angoloOrbitaleMovimento2 * Math.PI / 180) * raggioOrbitale2;
var z2:Number = Math.sin(angoloOrbitaleMovimento2 * Math.PI / 180) * raggioOrbitale2;
sfera3.x = x2;
sfera3.z = z2;//per attivare le modifiche bisogna richiamare la funzione “OnRenderTick”
//partendo dalla funzione “super” (ossia “BasicView”)
super.onRenderTick(event);
}}
}