Papervision 3d start-up your first template tutorial
Inizia da questo post una serie di tutorial che porteranno a completare un template Flash Papervision 3d con Action Script 3. Tornate a visitare questo blog per seguire lo sviluppo del progetto. Per completare il tutorial questi i requisiti: essere in possesso di Adobe Flash (almeno versione CS3), scaricare il pacchetto Papervision, nozioni di Action Script 3.
Demo
1) Download Papervision 3d
Prima di tutto dovete scaricare il pacchetto Papervision. Se avete avuto problemi cercando di seguire alcuni di quei pochi tutorial che si trovano online sullo sviluppo di una scena base, che il compilatore dell’output segnala una serie di errori che impediscono all’applicazione di funzionare.
Questo è dato dal fatto che molti di questi tutorial base sono stati realizzati con la prima versione di Papervision, la seconda revisione denominata The Great White 2.0 ha subito una serie di interessanti migliorie, molte funzioni sono state eliminate e integrate in altre funzioni. Vi troverete quindi a cercare di eseguire uno script realizzato con la prima revision mentre voi avete scaricato ed avete in uso l’ultima versione.
Download latest Papervision 3d stuff
2) Import Packages
Ogni volta che dovrete creare una scena Papervision o meglio As3 la prima cosa da fare è instanziare tutta quella serie di funzioni (packages) che permettono di comunicare a Flash di abilitare una scena 3d e le componenti necessarie As3.
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.*;
import org.papervision3d.objects.primitives.Plane;
3) Main Class
Iniziamo a scrivere la nostra funzione, definendo la Classe:
public class Pv3d_Tut_1 extends Sprite {
private var scene:Scene3D;
private var renderer:BasicRenderEngine;
private var viewport:Viewport3D;
private var camera:Camera3D;
private var plane1:Plane;
public function Pv3d_Tut_1() {
init();
}
}
4) Init function (create Pv3d stuff)
Definiamo la funzione init() che sarà il contenitore della nostra scena con le propreità principali:
private function init():void {
viewport=new Viewport3D(stage.stageWidth,stage.stageHeight,false,true);
scene=new Scene3D ;
renderer=new BasicRenderEngine ;
camera=new Camera3D ;
camera.zoom=8;
camera.focus=100;
addChild(viewport);
initObjects();
addEventListener(Event.ENTER_FRAME,render,false,0,true);
}
5) initObjects()
Definiamo la funzione initObjects(), in cui vengono creati gli oggetti e i materiali presenti nella scena. Aggiungiamo un semplice piano alla nostra scena. Questo piano sarà un oggetto MovieClip, dentro al quale potremo poi naturalmente richiamare un file esterno, applicare pulsanti ed azioni etc… In questo caso ho semplicemente inserito un testo.
private function initObjects():void {
var material_mc:MovieAssetMaterial=new MovieAssetMaterial("mc_1");
material_mc.smooth=true;
plane1=new Plane(material_mc,500,500,4,4);
scene.addChild(plane1);
}
6) Render function
E la nostra funzione di rendering:
private function render(event:Event):void {
camera.target=plane1;
renderer.renderScene(scene,camera,viewport);
}Sinceramente non sembra così chiaro a questo punto la potenzialità di Papervision.
Aggiungiamo alla nostra funzione di render alcune righe di codice grazie alle quali il muovimento della scena viene legato alla distanza del mouse relativamente alle dimensioni dello stage.
camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)- camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;
7) Full Class
package {
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.*;
import org.papervision3d.objects.primitives.Plane;
public class Pv3d_Tut_1 extends Sprite {
private var scene:Scene3D;
private var renderer:BasicRenderEngine;
private var viewport:Viewport3D;
private var camera:Camera3D;
private var plane1:Plane;
public function Pv3d_Tut_1() {
init();
}
private function init():void {
viewport=new Viewport3D(stage.stageWidth,stage.stageHeight,false,true);
scene=new Scene3D ;
renderer=new BasicRenderEngine ;
camera=new Camera3D ;
camera.zoom=8;
camera.focus=100;
addChild(viewport);
initObjects();
addEventListener(Event.ENTER_FRAME,render,false,0,true);
}
private function initObjects():void {
var material_mc:MovieAssetMaterial=new MovieAssetMaterial("mc_1");
material_mc.smooth=true;
plane1=new Plane(material_mc,500,500,4,4);
scene.addChild(plane1);
}
private function render(event:Event):void {
camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)- camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;
camera.target=plane1;
renderer.renderScene(scene,camera,viewport);
}
}
} Ecco fatto come potete vedere abbiamo instanziato correttamente il nostro simbolo e abbiamo dato vita alla nostra prima scena base, generalmente nominata “Hello World”.
Conclusion & Download
Attenzione! Come vedrete la funzione costruttrice è vuota. Richiama infatti la funzione init(); che a sua volta fa riferimento alla funzione initObjects ();. Questo passaggio non è strettamente necessario. Preferisco procedere in questo modo sia per ordine visivo, sia per modularità nello sviluppo di altre applicazioni future, sia perchè lasciare la funzione costruttrice vuota risolverà parecchi problemi che nasceranno in seguito quando proveremo a richiamare la classe Papervison tramite un preloading o come swf esterno. Parleremo in seguito di questo sul blog.
Comments
Nik
February 12, 2009
Sei un animale! ..mò ti metti pure a fare i tutorial?? bella davidì!
Mattia
February 26, 2009
Ciao mi chiamo Mattia. Complimenti per il tutorial, è tutto molto chiaro.
Volevo chiederti però…nel caso volessi utilizzare come texture per il piano un movieclip contenente pulsanti e azioni…come faccio a renderlo funzionale?
Grazie Ciau!
David
February 26, 2009
Ciao Mattia, i file del prossimo post di questa serie sono già pronti…e tratterò proprio come rendere interattivi i materiali in Papervision3d, sia che siano bitmap, che movieclip semplici o animati, o movieclip esterni caricati in runtime.
Penso di riuscire a pubblicare tutto la prossima settimana. Se hai estrema urgenza per qualche progetto commerciale scrivimi una mail, sennò ci aggiorniamo presto su queste pagine.
daniele
March 6, 2009
Sono capitato per caso sul tuo sito (alla ricerca di una vecchia versione di pv3d in as2),
devo dire che hai fatto davvero un ottimo lavoro e pure i tuoi progetti sono davvero belli.
Ti faccio ancora i complimenti, in attesa dei prossimi tutorial su pv3d.
:)
Papervision 3d first Interactive Scene3DEvent template tutorial
March 8, 2009
[...] Papervision 3d start-up your first template tutorial [...]
dino roselli
March 14, 2009
ciao David, molto bravo , anche nello stile grafico!! è un buon punto di aprtenza per capire come funziona papervision3d….grazie davvero dino:)
dino r
March 14, 2009
quando esporto il fla , il mio swf è vuoto come mai? il movie clip mc_1 che viene richiamato sembra vuoto, o meglio quando esporto mi da molti errori….
David
March 14, 2009
Stai parlando del file del tutorial ?
Hai il pacchetto papervision allo stesso livello del file .fla? Sennò non trova la libreria…è il punto 1 del tutorial.
dino
March 15, 2009
si, apro il fla , lo esporto dandomi errori nella compilazione.
David
March 15, 2009
Prova a riscaricare il pacchetto Pv3d adesso, mi ero scordato di inserire un file ;-)
Papervision 3d Interactive Scene template
May 22, 2009
[...] Papervision 3d start-up your first template tutorial [...]
Johnny
May 27, 2009
Ciao David … scusa l’intrusione ma ho un quesito da porti …
Sto sviluppando una RIA per lo sharing di media in Flex 3 e sto aggiungendo alcune viste per “sfogliare” i contenuti delle collection di media, fra cui una CoverFlow view … il componente e’ un’estensione di un ViewStack base di Papervision3D sviluppato da altri …
L’oggetto ha già una sua camera3D, ma all’evento resize dell’applicazione la camera interna non e’ modificabile e/o raggiungibile … come posso aggiungere una camera3D per creare un effetto zoom sul resize dell’applicazione?
L’oggetto che spieghi nel tutorial e’ “stand-alone”? O meglio, posso applicarlo a qualsiasi oggetto 3D all’intero dell’applicazione principale?
Grazie in anticipo…
Johnny
David
May 27, 2009
ciao J,
così non ti so dire quale sia il problema, e sincerametne non ti capisco quando dici “effetto zoom on resize”. On resize definisce il comportamenteo del browser. Sicuramente la classe CoverFlow avrà delle funzioni che si “scontrano” con le tue funzioni.
Ma se crei una nuova camera e riprendi la scena con quella, bypassando la camera della classe?
ciao
D
Johnny
May 28, 2009
Hai ragione … non sono stato molto chiaro (ancora spraticone di Flex), ma la tua risposta finale e’ proprio quello che volevo sentirmi dire … quindi ne deduco che il tuo codice mi sembra appropriato per quello che dovrei fare, no?
Thx always in adv.
Johnny
David
May 28, 2009
Puoi creare quante camere vuoi. Facci sapere!
ciao
D
Alessia
June 6, 2009
ciao david. grazie del tutorial e dei file, molto bello!!!
premettendo che sono una capra con flash e che forse mi sto imbarcando in un’impresa più grande di me, ho una domanda da porti: se io volessi sostituire al piano un oggetto semplice esportato da cinema4d in .dae, come faccio?
in realtà le mie conoscenze di action script rasentano lo zero, chiedo scusa se la mia domanda dovesse risultate fuori luogo. grazie
David
June 8, 2009
ciao A,
se hai qualche giorno di pazienza faccio un nuovo tutorial proprio su come importare i modelli 3d da cinema 4d… la proxima settimana! ;)
alessia
June 9, 2009
fantastico… grazie!!!
Luca
August 18, 2009
Ciao, ho provato a sostituire mc_1 con una mia mc(un logo fatto da testo con sfondo trasparente), ma quando pubblico l’swf viene sempre con lo sfondo nero, qualsiasi sia lo sfondo della mia scena.Come posso sostituire lo sfondo che avrà la mia clip animata con papervision3d?
grazie, complimenti!!!
Ciao
Mamba
August 21, 2009
Che dire… grande tutorial!
Ciao David, complimenti…
volevo sapere come posso togliere lo sfondo nero al testo… ho provato a metterlo a 0%.. ma niente.
In pratica se cambio il colore dello sfondo (ad esempio rosso) lo cambia.. ma se lo metto a 0% diventa nero..
dove sbaglio?
P.S.
Sono alle prime armi :-D
David
August 23, 2009
Ciao,
avete provata a dare un’occhiata a questo tut ?
http://davidsalvatori.com/papervision-3d-interactive-scene3devent-template-tutorial/
Mamba
August 24, 2009
Ciao David, grazie per la risposta.
Avevo visto quel tutorial e scaricato l’esempio… ma anche li mi viene lo sfondo nero con l’animazione del primo tutorial.. non capisco cosa sbaglio… devo forse scaricare qualcos’altro?
David
August 24, 2009
metti così:
var material_mc1:MovieAssetMaterial = new MovieAssetMaterial(“mc_1″, true);
ovvero… è vero che il materiale è trasparente
fammi sap
ciao
d
Mamba
August 24, 2009
Perfetto!!!! Sei un grande!!!
ma in pratica il – ,true – significa che il mc deve essere trasparente?
vale
May 21, 2010
ciao david e grazie per i tutorial…
domanda: se invece ho un file .dae che è un’animazione di 66 oggetti circa, posso gestirlo come il piano legando il movimento allo spostamento del mouse???
quando da max esporto il file .dae, mi dice che trasforma la luce della scena (skylight) in un point light, ciò cambia l’illuminazione della scena???
scusami…
non prendermi per matta…
David
May 22, 2010
Ciao,
nell’esempio è la camera che si muove e non il piano, quindi non hai problemi, ricorda solo che il massimo numero di poligoni consigliato è 1500, ovvero 3000 triangoli (pv3d lavora con le triangolazioni).
Non lavoro con Max ma i point light sono le luci Pv3d (papervision3d.lights.PointLight3D), quindi direi che va bene ;-)
vale
May 22, 2010
grazie, per essere stato velocissimo nel rispondermi…
quindi se si muove la camera che è legata al movimento del mouse e non l’oggetto tutto mi è più semplice…
domanda di una povera ignorante: io lavoro con cs4, che release di Pv3d devo installare???
grazie tanto per il tuo lavoro sei fantastico
vale
May 22, 2010
senza che mi rispondi ho risolto con l’installazione…
miiiiii quanto sono ignorante…………
grazie grazie grazie :-)
vale
May 23, 2010
aiuto ho un problema, forse ne ho tanti….
ma come importo un file .DAE in flash???
nella libreria non lo importa.
se aggiungo queste stringhe
import org.papervision3d.objects.Collada;
var solido:DisplayObject3D = new Collada(“prova_1.DAE”);
mi dice errore impossibile trovare la definizione org.papervision3d.objects:Collada
errore chiamata al metodo non definito collada
David
May 31, 2010
ciao Vale,
scusa ma non avevo visto gli avvisi.. se ancora ti servisse ecco qua il problema
import org.papervision3d.objects.parsers.DAE;
ciao
d
vale
June 6, 2010
tranquillo non ti preoccupare, col prof abbiamo provato a smanettare un pò, e all’importazione del parsers c’eravamo arrivati, ma ci siamo fermati perchè non mi visualizza il file, non carica il collada puoi dirmi se sbaglio qualcosa:
private var _cont:DisplayObject3D=new DisplayObject3D();
private var dae:DAE=new DAE();
var dae :DAE = new DAE();
dae.load( “box.DAE” );
dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, caricato());
}
public function caricato(){
_cont.addChild(dae);
}
}
grazie vale
David
June 7, 2010
Ciao, direi tutto perfetto tranne che non hai agganciato alla scena 3d l’oggetto contenitore, quindi non vedi niente ;-)
ciao
d
Nuccio
June 9, 2010
I tuoi tutorial sono molto chiari e mi aiutano molto nello studio che sto effettuando su questi nuovi mondi 3d.
Ho cercato di fare una mia elaborazione di ciu riporto uno spezzone di codice:
package
{
import flash.display.*;
etc.
import org.papervision3d.cameras.*;
etc.
public class ProvaMondo3D extends flash.display.Sprite
{
public function ProvaMondo3D()
{
swfFondo = ProvaMondo3D_swfFondo;
//Ho una classe ProvaMondo3D_swfFondo.as, posta nella stessa cartella di
//ProvaMondo3D .as, che effettua un preload
super();
fondo = new swfFondo();
addChild(fondo);
fondo.cacheAsBitmap = true;
etc. etc .etc. etc.
——————-
Nel file FLA ho creato una movieclip a cui, nella finestra Proprietà>Class
le ho assegnato il nome swfFondo e la esporto nel primo frame.
Però, il tutto non funziona in quanto mi genera un errore:
Il parametro ByteArray in Loader.loadBytes() deve avere una lunghezza superiore a 0.
at flash.display::Loader/_loadBytes()
at flash.display::Loader/loadBytes()
at mx.core::MovieClipLoaderAsset()
at ProvaMondo3D_swfFondo()
at ProvaMondo3D().
Mi potresti aiutare su come risolver tale problema.
Riporto anche la classi utilizzate nel codice soprariportato:
package
{
import flash.utils.*;
import mx.core.*;
public class ProvaMondo3D_swfFondo extends mx.core.MovieClipLoaderAsset
{
public function Dasai3D_swfFondo()
{
dataClass = ProvaMondo3D_swfFondo_dataClass;
super();
initialWidth = 12000 / 20;
initialHeight = 12000 / 20;
return;
}
public override function get movieClipData():flash.utils.ByteArray
{
if (bytes == null)
{
bytes = flash.utils.ByteArray(new dataClass());
}
return bytes;
}
{
bytes = null;
}
public var dataClass:Class;
private static var bytes:flash.utils.ByteArray=null;
}
}
package
{
import mx.core.*;
public class ProvaMondo3D_swfFondo_dataClass extends mx.core.ByteArrayAsset
{
public function ProvaMondo3D_swfFondo_dataClass()
{
super();
return;
}
}
}
Ciao e grazie
David
June 9, 2010
ciao,
senza avere il progetto sotto mi resta un po difficile, da quello che scrivi non arriva niente al loadBytes, prova a fare un trace e vedere cosa prende…
Nuccio
June 10, 2010
Grazie. Proverò a smanettare ancora sul codice. Se non riesco, gli darò una forma presentabile e, caso mai, te lo posto.
Ciao.
vale
June 11, 2010
sono finalmente riuscita a importare il dae, ma mi sposta tutto…
ti spiego meglio, il mio modello 3d è un libro pop-up per bambini, quindi ho vari piani che si aprono e chiudono insieme alle pagine del libro.
le pagine del libro hanno coordinate giuste, mentre i piani no, li sposta o ruota, perchè????
ti posto il codice:
camera = new Camera3D();
camera.y = 12000;
camera.z = -10000;
camera.x = 7000;
camera.rotationX=45;
camera.focus = 45;
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial();
materialList.addMaterial(bitmapFileMaterial,”all”);
libro = new Collada();
libro.load(“libro.DAE”,materialList);
libro.scale = 1;
libro.x = 0;
libro.z=100;
libro.rotationY=0;
scene.addChild(libro);
libro.addEventListener(FileLoadEvent.LOAD_COMPLETE, onLoadComplete);
vale
June 11, 2010
altra domanda:
quando esporto il dae da 3d studio max, mi crea automaticamente una cartella “images” che contiene tutte le texture, ora come faccio a dire a flash che deve andare a prendere le texture in quella cartella???
perchè se gli inserisco un immagine, facciamo un esempio
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial(libro.jpg);
materialList.addMaterial(bitmapFileMaterial,”all”);
giustamente mi da la stessa texture a tutto il modello 3d….
David
June 17, 2010
ciao, innanzi tutto il percorso sarebbe bitmapFileMaterial = new BitmapFileMaterial(images/libro.jpg);
In ogni modo se ogni pagina deve avere la tua texture devi caricare tante texture quante le pagine, ma lo farei direttamtne da pv3d creando tanti bitmap material quante le pagine e successivamente assegneri il materiale al singolo oggetto andando a navigare il tuo modello dae…
es: myCollada.getChildByName(“body”).material = mytTexture;
Nuccio
July 17, 2010
Ciao, ho scaricato un esempio che ha come obiettivo quello di rendere interattivo un file dae. Nell’esempio scaricato, Il file viene visualizzato correttamente ma il suo evento Press non funziona. Ecco le righe di codice utilizzate:
material = new CompositeMaterial();
material.doubleSided = true;
material.interactive = true;
material.addMaterial(new ColorMaterial(0×000000, 0.5));
material.addMaterial(new WireframeMaterial(0×000000));
materials = new MaterialsList();
materials.addMaterial(material, “material_0_0″);
object = new DAE();
object.scale = 0.85;
object.load(“Cube.dae”, materials);
scene.addChild(object);
object.addEventListener(FileLoadEvent.LOAD_COMPLETE, handleLoadComplete);
private function DAELoadComplete(e:FileLoadEvent):void
{
trace(“file caricato”);
var child :DisplayObject3D = object.getChildByName(“mesh1″, true);
child.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, handleObjectPress);
}
private function handleObjectPress(e:InteractiveScene3DEvent):void
{
trace(“press”);
}
Il file dae utilizzato è quello fornito con l’esempio eppure all’avvio ricevo solo il messaggio del comando trace (file caricato) ma non l’interattività legata all’evento Press. Ho controllato se nel file dae esiste veramente il riferimento “mesh1″ utilizzato da getChildByNam e tutto sembra corretto. Chiaramente, nella stessa cartella del file ho inserito pure le cartelle org, nochump e collada.
David
July 17, 2010
ciao Nuccio,
a questo punto il problema è in un pezzo di codice che non hai riportato… hai verificato che quando instanzi la viewport3d questa sia settata su interactive ?
Viewport3D(viewportWidth:Number = 640, viewportHeight:Number = 480, autoScaleToStage:Boolean = false, interactive:Boolean = false, autoClipping:Boolean = true, autoCulling:Boolean = true)
d
Nuccio
July 17, 2010
Ciao David,
Ho controllato il settaggio della viewport ed è il seguente:
private var viewport :Viewport3D;
viewport = new Viewport3D();
viewport.autoScaleToStage = true;
viewport.interactive = true;
addChild(viewport);
L’esempio l’ho scaricato da un sito in inglese ( http://osbo.com/papervision3d/dae/), dove la versione on line dell’autore funziona correttamente.
David
July 18, 2010
Ciao, ho provato al volo a scaricare il file e anche se non ricevo nessun tipo di errore, il risultato non sembra essere proprio quello dell’esempio online ( addirittura mi renderizza tutto bianco)…
Di quanto tempo fa è quel blog? A me sembra un pò datato, può essere che la versione di PV3D usata dall’autore sia un’altra rispetto alle ultime repository? Fammi sapere semmai guardo meglio nei prossimi giorni.
ciao
d
Nuccio
July 19, 2010
Grazie.
Ciao.