Eu imagino que alguns visitantes possam estar achando os tutoriais muito básicos.
Peço desculpas, mas a minha intenção por enquanto é exatamente essa : ir devagar para que todo mundo posso ir habituando-se com o Papervision.

Dito isso, vamos dar continuidade à série.
Dessa vez incorporando mais objetos nativos e utilizando imagens como material.

Antes de mais nada crie duas imagens com 200×200 pixels cada e salve no mesmo diretório dos arquivos as e fla com os nomes imagem1.jpg e imagem2.jpg.

Como no artigo anterior, vamos adicionar mais um objeto a cena. Dessa vez um cubo :

import org.papervision3d.objects.primitives.Cube;

Acrescentamos a classe BitmapFileMaterial responsável por carregar as imagens externas.
Vamos aproveitar e acrescentar também a classe MaterialsList, que como o próprio nome diz cria uma lista de materiais.

import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;

Declaramos as variáveis :

public var materialTres:BitmapFileMaterial;
public var materialQuatro:BitmapFileMaterial;
public var listaMaterial:MaterialsList;

Criamos os materiais :

materialTres = new BitmapFileMaterial(“imagem1.jpg”);
materialTres.smooth = true;// ameniza a aplicação do material nas faces triangulares do objeto

materialQuatro = new BitmapFileMaterial(“imagem2.jpg”);
materialQuatro.smooth = false;

// criamos uma lista de materiais
listaMaterial = new MaterialsList();
// onde podemos inclusive instanciar o material
listaMaterial.addMaterial (materialTres, “material3″);

Criamos o objeto cubo, aplicando os materiais :

cubo = new Cube(new MaterialsList( {
front: listaMaterial.getMaterialByName(“material3″), // usamos a instância vinda da lista de materiais
back: materialTres, // ou o próprio material
left: materialQuatro,
right: materialQuatro,
top: materialUm,
bottom: materialDois
} ), 200, 200, 200, 1, 1, 1);
cubo.y = 100;
cubo.rotationX = 35;
cubo.rotationY = 15;
cubo.rotationZ = 45;
cena.addChild (cubo);

O código agora ficou assim :

package {
// Importamos as classes necessárias
// Flash AS3
import flash.display.Sprite;
import flash.events.Event;
// Papervision
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.render.BasicRenderEngine;
// objeto
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Cube;
// materiais
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// Declaramos nossa classe
public class Tutorial3 extends Sprite {
// e as variáveis
public var cena:Scene3D;
public var viewport:Viewport3D;
public var camera:FreeCamera3D;
public var renderer:BasicRenderEngine;
public var esfera:Sphere;
public var plano:Plane;
public var cubo:Cube;
public var materialUm:ColorMaterial;
public var materialDois:ColorMaterial;
public var materialTres:BitmapFileMaterial;
public var materialQuatro:BitmapFileMaterial;
public var listaMaterial:MaterialsList;

// Declaramos o método da classe
public function Tutorial3 () {
// que irá acionar as funções auxiliares
Set ();
Materiais ();
Objetos ();
Listeners ();
}

// funções básicas do Papervision
public function Set ():void {
cena = new Scene3D ;
viewport = new Viewport3D(stage.stageWidth,stage.stageHeight,true,false,true,true);
addChild (viewport);
camera = new FreeCamera3D ;
renderer = new BasicRenderEngine ;
}

// materiais
public function Materiais ():void {
materialUm = new ColorMaterial(0XFF0000,1);

materialDois = new ColorMaterial(0X00FF00,1);
materialDois.doubleSided = true;// aplica o material nas duas faces do plano ( experimente trocar por false )

materialTres = new BitmapFileMaterial(“imagem1.jpg”);
materialTres.smooth = true;// ameniza a aplicação do material nas faces triangulares do objeto

materialQuatro = new BitmapFileMaterial(“imagem2.jpg”);
materialQuatro.smooth = false;

// criamos uma lista de materiais
listaMaterial = new MaterialsList();
// onde podemos inclusive instanciar o material
listaMaterial.addMaterial (materialTres, “material3″);
}

// função que irá criar o objeto
public function Objetos ():void {
esfera = new Sphere(materialUm,100,18,18);
esfera.x -= stage.stageWidth – 100;
esfera.y = 0;
esfera.z = 0;
esfera.rotationX = 15;
esfera.rotationY = 25;
esfera.rotationZ = -75;
cena.addChild (esfera);

plano = new Plane(materialDois,200,200,0,0);
plano.x += stage.stageWidth – 200;
plano.y = 0;
plano.z = 0;
plano.rotationX = 35;
plano.rotationY = 15;
plano.rotationZ = 45;
cena.addChild (plano);

cubo = new Cube(new MaterialsList( {
front: listaMaterial.getMaterialByName(“material3″), // usamos a instância vinda da lista de materiais
back: materialTres, // ou o próprio material
left: materialQuatro,
right: materialQuatro,
top: materialUm,
bottom: materialDois
} ), 200, 200, 200, 1, 1, 1);
cubo.y = 100;
cubo.rotationX = 35;
cubo.rotationY = 15;
cubo.rotationZ = 45;
cena.addChild (cubo);

camera.focus = 300;
camera.zoom = 2;
}

// função que irá receber novas funções auxiliares
public function Listeners ():void {
addEventListener (Event.ENTER_FRAME,Render);
}

// função responsável pela renderização do Papervision
public function Render (e:Event):void {
esfera.rotationX -= 2;

plano.rotationX += 1;
plano.rotationY += 2;

cubo.rotationX += 3;
cubo.rotationY += 1;

renderer.renderScene (cena,camera,viewport);
}
}
}

Salve o arquivo e compile novamente o swf.
E, como sempre, vá fazendo alterações nos parâmetros, salve, recompile e veja as alterações.

Até a próxima …

Dando continuidade, dessa vez veremos como aplicar materiais em objetos primitivos utilizando a classe ColorMaterial.

Vamos continuar utilizando os mesmos arquivos Tutorial1.as e Tutorial1.fla do artigo anterior.

Vamos aproveitar para adicionar outro objeto a cena :

import org.papervision3d.objects.primitives.Plane;

E basicamente acrescentar as classes necessárias :

import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

Declaramos as variáveis :

public var plano:Plane;
public var materialUm:ColorMaterial;
public var materialDois:ColorMaterial;

Atenção aqui : você precisa acionar a função de materiais antes de chamar os objetos

public function Tutorial1 () {
Set ();
Materiais ();
Objetos ();
Listeners ();
}

Criamos os materiais :

public function Materiais ():void {
materialUm = new ColorMaterial(0XFF0000, 1);

materialDois = new ColorMaterial(0X00FF00, 1);
materialDois.doubleSided=true;// aplica o material nas duas faces do plano ( experimente trocar por false )
}

E aplicamos os materiais nos objetos :

public function Objetos ():void {
esfera = new Sphere(materialUm, 100, 18, 18);
esfera.x -= stage.stageWidth/2;
esfera.y=0;
esfera.z=0;
esfera.rotationX = 15;
esfera.rotationY = 25;
esfera.rotationZ = -75;
cena.addChild (esfera);

plano = new Plane(materialDois, 200, 200, 0, 0);
plano.x += stage.stageWidth/2;
plano.y=0;
plano.z=0;
plano.rotationX = 35;
plano.rotationY = 15;
plano.rotationZ = 45;
cena.addChild (plano);
}

Temos então o código completo :

package {
// Importamos as classes necessárias
// Flash AS3
import flash.display.Sprite;
import flash.events.Event;
// Papervision
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.render.BasicRenderEngine;
// objeto
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.objects.primitives.Plane;
// materiais
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// Declaramos nossa classe
public class Tutorial1 extends Sprite {
// e as variáveis
public var cena:Scene3D;
public var viewport:Viewport3D;
public var camera:FreeCamera3D;
public var renderer:BasicRenderEngine;
public var esfera:Sphere;
public var plano:Plane;
public var materialUm:ColorMaterial;
public var materialDois:ColorMaterial;

// Declaramos o método da classe
public function Tutorial1 () {
// que irá acionar as funções auxiliares
Set ();
Materiais ();
Objetos ();
Listeners ();
}

// funções básicas do Papervision
public function Set ():void {
cena = new Scene3D();
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, false, true, true);
addChild (viewport);
camera = new FreeCamera3D();
renderer = new BasicRenderEngine();
}

// materiais
public function Materiais ():void {
materialUm = new ColorMaterial(0XFF0000, 1);

materialDois = new ColorMaterial(0X00FF00, 1);
materialDois.doubleSided=true;// aplica o material nas duas faces do plano ( experimente trocar por false )
}

// função que irá criar o objeto
public function Objetos ():void {
esfera = new Sphere(materialUm, 100, 18, 18);
esfera.x -= stage.stageWidth/2;
esfera.y=0;
esfera.z=0;
esfera.rotationX = 15;
esfera.rotationY = 25;
esfera.rotationZ = -75;
cena.addChild (esfera);

plano = new Plane(materialDois, 200, 200, 0, 0);
plano.x += stage.stageWidth/2;
plano.y=0;
plano.z=0;
plano.rotationX = 35;
plano.rotationY = 15;
plano.rotationZ = 45;
cena.addChild (plano);

// alterando alguns parâmetros na câmera
camera.focus = 300;
camera.zoom = 2;
}

// função que irá receber novas funções auxiliares
public function Listeners ():void {
addEventListener (Event.ENTER_FRAME, Render);
}

// função responsável pela renderização do Papervision
public function Render (e:Event):void {
// algumas propriedades básicas de movimento de objetos
esfera.rotationX -= 2;

plano.rotationX += 1;
plano.rotationY += 2;

renderer.renderScene (cena, camera, viewport);
}
}
}

Salve o arquivo Tutorial1.as e compile o swf.
Faça alterações nos parâmetros e veja as alterações.

Até a próxima …

Agora que você fez o download do Papervision e preparou o Flash para iniciar os seus projetos, vamos iniciar com uma classe básica de introdução ao Papervision 2.0 – Great White.

Crie um Actionscript file e salve-o como Tutorial1.as.

package {
// Importamos as classes necessárias
// AS3
import flash.display.Sprite;
import flash.events.Event;
// Papervision
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.render.BasicRenderEngine;
// objeto
import org.papervision3d.objects.primitives.Sphere;
//
// Declaramos nossa classe
public class Tutorial1 extends Sprite {
// e as variáveis
public var cena:Scene3D;
public var viewport:Viewport3D;
public var camera:FreeCamera3D;
public var renderer:BasicRenderEngine;
public var objeto:Sphere;
//
// Declaramos a função da classe
public function Tutorial1 () {
// que irá acionar as funções auxiliares
Set ();
Objetos ();
Listeners ();
}
//
// funções básicas do Papervision
public function Set ():void {
cena = new Scene3D();
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, false, true, true);
addChild (viewport);
camera = new FreeCamera3D();
renderer = new BasicRenderEngine();
}
//
// função que irá criar o objeto
public function Objetos ():void {
objeto = new Sphere(null, 100, 8, 6, null);
cena.addChild (objeto);
//
//objeto.x=50;
//objeto.y=-50;
//objeto.z=-500;
//objeto.rotationX = 15;
//objeto.rotationY = 25;
//objeto.rotationZ = -75;
//camera.x=10;
//camera.y=60;
//camera.z=-2200;
//camera.zoom=2;
//camera.focus=400;
//
// Antes de descomentar as linhas acima, veja as propriedades padrão no trace
// Depois descomente e modifique os valores para ver as alterações
trace ('viewport.viewportWidth: '+viewport.viewportWidth+' viewport.viewportHeight: '+viewport.viewportHeight);
trace ('objeto x: '+objeto.x+'\nobjeto y: '+objeto.y+'\nobjeto z: '+objeto.z);
trace ('camera x: '+camera.x+'\ncamera y: '+camera.y+'\ncamera z: '+camera.z+'\ncamera zoom: '+camera.zoom+'\ncamera focus: '+camera.focus);
}
//
// função que irá receber novas funções auxiliares
public function Listeners ():void {
addEventListener (Event.ENTER_FRAME, Render);
}
//
// função responsável pela renderização do Papervision
public function Render (e:Event):void {
// objeto.rotationY += 2;
// camera.rotationY += 2;
renderer.renderScene (cena, camera, viewport);
}
}
}

Copie e cole o código acima e salve-o.

Agora crie um novo arquivo Flash File ( ActionScript 3.0 ) e salve-o no mesmo diretório do arquivo Tutorial1.as.
Vá em File>Publish Settings>Flash (aba) e clique no botão Settings.
Em Document class, digite o nome da classe Tutorial1.
Se você não determinou o caminho para a classe nas preferências globais do Flash, você deve setar o caminho em Classpath.

Salve o arquivo e compile.

Descomente as linhas no arquivo Tutorial1.as, faça testes alterando os valores, salve o arquivo e recompile.

Para compreender a fundo os parâmetros de cada propriedade, dê uma olhada na documentação do Papervision 2.0 – Great White.

Por enquanto é isso. Aos poucos vamos incluir materiais, interações, etc …

Componente, plugin, engine, classe ou API ?
Seja qual for a definição exata, o 3D promete dar uma nova cara a web.

Com o lançamento – já atrasado – do Flash Player 10 – Astro,  a Adobe promete incorporar ao novo player – entre outras capacidades – a renderização de objetos 3D simples.

Assim, o Papervision deve ganhar destaque. E, quem sabe, melhorar a performance, reduzindo o processamento dos ambientes/objetos 3D – ainda bastante alto no Flash Player 9.

De acordo com Carlos Ulloa, o fundador do Papervision, tudo começou com tentativas de criar efeitos 3D ilusórios através de rotação, distorção, … em movieclips, além de muito código é claro. E isso no final de 2005, baseado no Flash Player 7, onde pouquíssimos como Andre Michelle conseguiam algum resultado satisfatório.

Com foco principal voltado para o desenvolvimento em AS3, o Papervision também pode ser utilizado no Flash Player 8 com AS2 e até mesmo ser controlado em AS1.
Vale lembrar que, mesmo em AS3, são necessários alguns ajustes se a compilação for feita no Flash ou Flex.

Outro fator importante é a possibilidade de integrar qualquer objeto construído em programas de modelagem 3D a partir do formato Collada (COLLAborative Design Activity) que é um padrão de exportação e importação baseado em XML criado pela Sony e usado no console Playstation 3.

Em dezembro de 2007 foi lançada uma versão alpha chamada de “Papervision 2.0 – Great White“. E como todo desenvolvimento, o Papervision ainda não atingiu toda a sua maturidade. Tanto que poucos dias depois, Andy Zupko ( Papervision Core Team ) lançou uma versão incluindo efeitos muito interessantes, integrando classes nativas do Flash como filtros, matrizes geométricas, entre outras. Com essa e outras contrbuições, ele foi convidado a participar do Core Team – ponto para o Papervision.
Falta muita coisa ainda como colisão, etc … mas parece que já está havendo alguma integração com outras engines como WOW-Engine, desenvolvida por Seraf ( Jérôme Birembaut ).

Portanto, se você estiver interessado em iniciar-se no Papervision, prepare-se para acompanhar as constantes – diárias - modificações.

Os passos a seguir irão orientá-lo a fazer o download do Papervision e mantê-lo sempre atualizado :
1. A maneira mais recomendada é instalar um “SVN client” como o Tortoise for Windows.
2. Após instalar o programa, crie um diretório e clique sobre ele com o botão da direita e escolha “SVN checkout”.
3. Em URL, cole o endereço http://papervision3d.googlecode.com/svn/trunk/ e clique OK.
4. Após o término do download, você irá ver os subdiretórios as2, as3 e branches. Dentro dos diretórios as2 e as3 estão as respectivas classes padrão e, em branches, as classes “Great White” ( Papervision 2.0 ) e “Effects” citada acima.

Antes de utilizá-las, você precisa preparar o Flash. Para fazer isso, você tem algumas maneiras :

Classe sempre disponível ( não importa onde esteja o seu projeto ) :
1- No Flash, clique em Edit>Preferences>Actionscript e clique no botão “Actionscript 3.0 settings” ( ou “Actionscript 2.0 settings“, se for o caso )
2. Em “classpath“, clique no boão “+” e em seguida ícone “Browser To Path“.
3. Navegue até o diretório onde você fez o download e escolha entre as3/trunk/src ( as2/trunk/src se for o caso ) OU branches\Effects\src ( para usar a classe Effects ) OU branches\GreatWhite\src ( para usar a classe Papervision 2.0 Great White ).

Inserir a classe em cada um dos arquivos do seu projeto :
1. Após criar um novo arquivo, vá em File>Publish Settings>Flash ( aba ) e clique sobre o botão “Settings“.
2. Em “classpath“, clique no boão “+” e em seguida ícone “Browser To Path“.
3. Navegue até o diretório onde você fez o download e escolha entre as3/trunk/src ( as2/trunk/src se for o caso ) OU branches\Effects\src ( para usar a classe Effects ) OU branches\GreatWhite\src ( para usar a classe Papervision 2.0 Great White ).
4. Se estiver preparando um documento na versão AS3, ainda nessa tela você deve colocar o caminho de sua própria classe principal em Document Class ( iremos detalhar isso posteriormente )

Você não deveria utilizar diferentes versões da classe simultaneamente.

Pronto, você está apto a começar a utilizar o Papervision em seus projetos. E, o que é o melhor, utilizando apenas códigos, programas, plugins, … tudo open-source
Dentro do diretótio de cada versão existem vários exemplos que servem como ponto de partida, além da documentação.

É claro que existem outras classes 3D como Sandy3D e Away3D - também open-source -, mas arrisco dizer que a Papervision deva prevalecer como dominante. A não ser que a própria Adobe resolva embutir uma API 3D em seus produtos.

Seja como for - em games, aplicações, passeios virtuais, demonstrações ou apenas ”firulas” na interface – dessa vez o 3D na web veio para ficar.

Fique ligado que nos próximos posts estaremos iniciando uma sequência de exemplos práticos sobre o Papervision.

Abraços