Uno dei punti forza di Flash è sempre stata la possibilità di aggiungere (tramite codice actionscript) le interazioni, in maniera sempre più fluida ed avanzata. Anche papervision non è dà meno e presenta grosse potenzialità interattive, che l’avvicina a sistemi 3D simili a quelli per i videogiochi (ma ancora sia un pò distanti da quella resa, sicuramente 1000 volte migliore). Il comando che utilizzeremo per dare questa interattività sarà InteractiveScene3DEvent il quale può essere applicato a vari oggetti 3D e allo stage.

Un nuovo comando che utilizzaremo sarà il Tweener caurina, ossia una interpolazione per un preciso e complesso movimento (il rimbalzo, l’elastico, l’accelerazione, ecc.). Questo comando, in varie versioni, è da tempo utilizzato nei progetti Flash e non costituisce un comando di Papervision 3D, qui troverete una ottima spiegazione in italiano del Tweener.

Ritorniamo a noi, questo è il risultato che vorremmo ottenere:

Come si vede abbiamo aggiunto qualche elemento di interattività e il suono del boing. Ma analizziamo il codice commentato, come al solito troverete sotto i file sorgenti con le cartelle dei sorgenti di PV3D (così potrete sempre avere dei sorgenti funzionanti!):

package {

//autore: www.enricoviola.it/blog
//——————————-
//Guida personale a Papervision3D

//importiamo questa classe per l’interpolazione
import caurina.transitions.Tweener;

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
//importare libreria per controllo del suono
import flash.media.Sound;

import org.papervision3d.core.proto.MaterialObject3D;
//importiamo per l’interattività tridimensionale
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.shadematerials.CellMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.shadematerials.PhongMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

//riutilizzeremo il BasicView già analizzato
public class esempio4 extends BasicView {

private static const RAGGIO_ORBITALE:Number = 200;

private var sfera1:Sphere;
private var sfera2:Sphere;
private var sfera3:Sphere;
private var sfera4:Sphere;
private var sferaGroup:DisplayObject3D;
private var luce:PointLight3D;
private var nuovoCentro:DisplayObject3D;

private var staiRuotando:Boolean = false;
private var ultimoMouseX:int;
private var ultimoMouseY:int;
private var cameraPitch:Number = 60;
private var cameraYaw:Number = -60;

public function esempio4() {
//richiamo la classe BasicView
super(0, 0, true, true);

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

init3D();
createScene();
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseGiu);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseSu);
//avvia il rendering della scena
startRendering();
}

private function init3D():void {
//posizioniamo la camera
camera.z = -500;
nuovoCentro = new DisplayObject3D();
nuovoCentro.x = 1200;
nuovoCentro.y = 200;
nuovoCentro.z = 200;
//
camera.orbit(cameraPitch, cameraYaw, true, nuovoCentro);
}

private function createScene():void {
//la creazione della scena è stata già spiegata nell’esempio 3
luce = new PointLight3D(true);
luce.x = 400;
luce.y = 1000;
luce.z = -400;

//sfera 1
var flatShadedMaterial:MaterialObject3D = new FlatShadeMaterial(luce, 0xFFFFFF, 0×060433);

//IMPORTANTE: bisona indicare che il materiale che stia realizzando
//sia posizionato come interattivo, al fine di rispondere efficacemente
//al comando (CLICK) proveniente dal mouse.
flatShadedMaterial.interactive = true;
sfera1 = new Sphere(flatShadedMaterial, 50, 10, 10);
sfera1.x = -RAGGIO_ORBITALE;

//sfera 2 blu
var gouraudMaterial:MaterialObject3D = new GouraudMaterial(luce, 0×6654FF, 0×060433);
//rendiamo il materiale interattivo agli eventi del mouse
gouraudMaterial.interactive = true;
sfera2 = new Sphere(gouraudMaterial, 50, 10, 10);
sfera2.x =  RAGGIO_ORBITALE;

//sfera 3 verde
var phongMaterial:MaterialObject3D = new PhongMaterial(luce, 0xFFFFFF, 0×066021, 100);
//rendiamo il materiale interattivo agli eventi del mouse
phongMaterial.interactive = true;
sfera3 = new Sphere(phongMaterial, 50, 10, 10);
sfera3.z = -RAGGIO_ORBITALE;

//sfera 4 rossa
var cellMaterial:MaterialObject3D = new CellMaterial(luce, 0xFFFFFF, 0xB11201, 12);
//rendiamo il materiale interattivo agli eventi del mouse
cellMaterial.interactive = true;
sfera4 = new Sphere(cellMaterial, 50, 10, 10);
sfera4.z =  RAGGIO_ORBITALE;

sferaGroup = new DisplayObject3D();
sferaGroup.addChild(sfera1);
sferaGroup.addChild(sfera2);
sferaGroup.addChild(sfera3);
sferaGroup.addChild(sfera4);

//avendo reso interattivo il materiale applicato ad ogni sfera, è possibile ora
//applicare dei listener agli oggetti, precisamente il listener di papervision
//”InteractiveScene3DEvent” per gli eventi del mouse sugli oggetti 3D.
sfera1.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickSuSfera);
sfera2.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickSuSfera);
sfera3.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickSuSfera);
sfera4.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickSuSfera);

scene.addChild(sferaGroup);
scene.addChild(luce);
}

override protected function onRenderTick(event:Event=null):void {
sfera1.yaw(-8);
sfera2.yaw(-8);
sfera3.yaw(-8);
sfera4.yaw(-8);

sferaGroup.yaw(3);

//Tenendo cliccato col mouse rendiamo True la var staiRuotando
//così aggiorniamo la posizione della camera
if (staiRuotando) {

//a seconda della posizione del mouse verrà modificato
//l’angolo della camera, si tratta entrambe di modifiche
//di rotazione rispetto un asse interno.
var dPitch:Number = (mouseY - ultimoMouseY) / 2;
//Yaw: rotazione attorno l’asse verticale
var dYaw:Number = (mouseX - ultimoMouseX) / 2;

///update della angolatura
cameraPitch -= dPitch;
cameraYaw -= dYaw;
//Limitazione dell’angolo di rotazione del Pitch entro 180°
if (cameraPitch <= 0) {
cameraPitch = 0.1;
} else if (cameraPitch >= 180) {
cameraPitch = 179.9;
}

//resettiamo la posizione ultima del mouse
ultimoMouseX = mouseX;
ultimoMouseY = mouseY;

//riposizioniamo la camera coi nuovi valori aggiornati
//al trascinamento del mouse.
camera.orbit(cameraPitch, cameraYaw);
}

//richiamiamo la renderizzazione del BasicView
super.onRenderTick(event);
}

//funzione attivata quando clicchiamo col mouse nel filmato
private function mouseGiu(event:MouseEvent):void {
//rendiamo True la var staiRuotando per avviare i comandi
//sopraillustrati per il trascinamento degli oggetti3D
staiRuotando = true;
ultimoMouseX = event.stageX;
ultimoMouseY = event.stageY;
}

//funzione attivata quando smettiamo di cliccare col mouse
private function mouseSu(event:MouseEvent):void {
//rendiamo False la var staiRuotando per non avviare i
//comandi sopraillustrati.
staiRuotando = false;
}

//funzione attivata quando clicchiamo col mouse nelle sfere
private function clickSuSfera(event:InteractiveScene3DEvent):void {
//lettura file suono mp3 per il boing
var richiesta_file_mov:URLRequest = new URLRequest(”boing.mp3″);
var boing:Sound = new Sound();
boing.load(richiesta_file_mov);
boing.play();
//avviamo il Tweener per dare l’effetto di deccelerazione,
//in questo caso comandiamo soltanto di salire verso sopra
var object:DisplayObject3D = event.displayObject3D;
Tweener.addTween(object, {y:200, time:1, transition:”easeOutSine”, onComplete:function():void {goBack(object);} });
}

//funzione attivata quando il Tweener di sopra finisce (ossia
//la sfera arriva al punto + alto) e attiva la discesa a rimbalzo
private function goBack(object:DisplayObject3D):void {
Tweener.addTween(object, {y:0, time:2, transition:”easeOutBounce”});
}
}
}

File sorgenti del progetto