Oggi vedremo come utilizzare le classi di Papervision 3D 2.0 Interactivity utilizzando Adobe Flash CS3 per creare un cubo tridimensionale
Avremo la possibilità di ruotare il cubo con il puntatore del mouse o cambiare la veste grafica delle sei facce
L’esempio originale ci mostra come utilizzare le classi di Papervision 3D 2.0 con la possibilità di interagire con l’applicazione, in questo caso tramite un url.
Nel scaricare i file originali ho notato che purtroppo l’applicazione forse è stata scritta con delle classi meno recenti di Papervision, infatti non funzionava.
Quindi non è stato possibile mantenere questa interattività (si cercherà di implementarla prima possibile) dopo le varie mdofiche.
Questo è il codice per utilizzare le classi Papervision 3D 2.0
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.core.proto.*;
var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild (container);
var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D(null, 11, 100);
var materials:Array = [];
for (var i:uint=1; i<=6; i++){
materials.push(new MovieMaterial(new (getDefinitionByName("face"+i) as Class)()));
materials[uint(i-1)].smooth = true;
materials[uint(i-1)].animated = true;
}
var cube:Cube = new Cube(new MaterialsList({front:materials[0], back:materials[1], right:materials[2], left:materials[3], top:materials[4], bottom:materials[5]}), 200, 200, 200, 10, 10, 10);
scene.addChild (cube);
addEventListener (Event.ENTER_FRAME, loop);
function loop (e:Event):void {
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
cube.rotationY -= xDist * 0.05;
cube.rotationX += -yDist * 0.05;
scene.renderCamera (camera);
}
Un ringraziamento speciale a and80 per aver corretto le classi di Papervision3D
Scarica il sorgente
Guarda il VideoTutorial
Fonte [The Flash Bblog]
18 Commenti
Ciao Julius, vorrei sapere una cosa, ma come faccio a cambiare le immagini di ogni faccia?
Grazie!
Nel file sorgente trovi tutte le facce, non eccedere di dimensioni
per ora puoi cambiare solo il contenuto…
Controlla anche in libreria
ciao julius
volevo chiederti se era possibile settare un tot di gradi di rotazione per i 2 assi x e y.
una cosa del genere
http://www.whitevoid.com/application.html
Come si fa, se si può fare, inserire questa animazione in un sito flash? Grazie!
@luke: ciao
bè questo esempio non ti aiuta molto, anche se il progetto che mi hai segnalato è sempre in AS3 e utilizza classi 3d Papervision..
se trovo qualcosa faccio un articolo
@Sara: ciao
devi utilizzare una funzione in AS3 per caricare un swf esterno
ciao julius, un altro fantastico lavoro! volevo chiederti perchè non è possibile utilizzare il file swf che esporto. ho modificato le facce del cubo e ho esportato l’swf.ma quando lo importo dentro uno stage di un altro file non succede nulla. come mai? grazie in anticipo, buona serata!
@federichissima: ciao hai provato a importarlo in questo modo?
Ciao Julius, grande come sempre!
Senti, ho aggiustato il problema dell’interattività nel cubo.
In effetti ci ho studiato un pò sopra, perchè ho dovuto rifare un pò tutto il codice.
Cmq le parti più importanti sono queste:
//definizione dei materiali delle varie facce e attivazione interattività
fronteMaterial.interactive = true;
fronteMaterial.name = “frontale”;
dietroMaterial.interactive = true;
dietroMaterial.name = “dietro”;
sinistraMaterial.interactive = true;
………
//realizzazione del Cubo coi nuovi materiali
cubo = new Cube(new MaterialsList( {
front: fronteMaterial,
back: dietroMaterial,
left: sinistraMaterial,
right: destraMaterial,
top: sopraMaterial,
bottom: sottoMaterial
} ), 100, 100, 100, 3, 3, 3);
//creazione listener che intercettano il Click sulla faccia
private function onPresss(e:InteractiveScene3DEvent):void {
switch(e.face3d.material.name) {
…..
ovviamente non posso inserire tutto il codice ;-) non si capirebbe niente.
ma l’ho inserito nel mio blog.
BYYYYYE
Julius… tu sei un TIC nella parola mi-tic-o
grazie
Mi sono messo a studiare papervision3D, ma non riesco a capire se sia possibile e/o come sia possibile cambiare il materiale del cubo (o anche solo di una faccia) una volta che il cubo sia già stato creato.
Hai idea di come si possa fare?
Ciao..scusa l’imperdonabile ignoranza, ma come faccio a dare un urlo ad ogni faccia?
Grazie mille anticipatamente
@Nele è stato implementato da Enrico
Ciao Giulio,
spero posso darti del tu dato che siamo quasi coetani nonchè tu abbia un anno + di me..
ti scrivo xk nn so + cm ringranziarti
perchè l’ottimo lavoro che fai x tutti quelli che navigano nella confusione della rete
e alla fine trovano sempre delle giuste informazioni munite di tutorial e video che spiegano in modo semplicissimo
la qualsiasi dei tuoi studi..
grazi a te ho conosciuto la realtà amplificata e molto altro…così da approfondirli nel mio mondo di arte
detto questo ti ringrazio ancora e mi chiedevo se potevo condividere i miei saperi con te in qualche modo x darti una mano
sarebbe tropp chiedere il tuo contatto però so che potrei apprendere molto da una amicizia cm la tua e sicuramente
poterti far conoscere cose che non sai
per attivare quel mondo di condivisione e unione che si stava perdendo ma che piano piano internet innalzandosi come democrazia moderna e belva in continua evoluzione sta cercando di liberarci
detto questo nn volevo farti xere altro tempo ma spero che mi risp a quest’e-mai xk t volevo parlare di alcuni progetti che avevo in mente sia sulla rete che ne condividere e tu mi sembri al xsona + azzeccata e sopratutt xk m fai tropp simpatia e denoto tutt l’aiuto che cerchi di dar al prox
continua così…….
Grazie per le belle parole, sentiamoci in privato via mail per i progetti su cui mi devi chiedere consigli ;) ciao
utilizzando il sorgente non riesco ad aggiungere la funzione per richiamare un url sul click di ogni singola faccia
ho provato a seguire sia le indicazioni di
http://www.enricoviola.it/blog/2008/cubo-3d-come-menu-interattivo-con-papervision/
sia
http://www.gotoandlearn.com/play?id=68
in entrambi i casi ottengo diversi errori
quale suggerimento usando gli script e il fla indicato in questo sito?
Ciao Julius, come posso aggiungere un bagliore esterno o un’ombra intorno al cubo come nella demo che vedo qui sul tuo sito? Ho provato ad aggiungere un bagliore alle facce ma non si vede… forse perchè è esterno all’area consentita? Ho provato a mettere 210 210 210 come dimensioni ma non si vede comunque…
Complimenti per tutti i tuoi tutorial!
Grande,
io l’ho utilizzato per un sito, devo aggiustarlo un attimo, ma di ottimo effetto.
http://www.dezuagroup.webuda.com/
come faccio a cambiare le dimensioni grazie?