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.

Download Source

Download Pv3d Tutorial Revision_859