Olá
pessoal! Desde já agradeço todo o retorno positivo de meus últimos
artigos sobre Flash. Muito obrigado a todos!

Percebi
que no iMasters não havia nenhum tutorial ou nada que falasse
tecnicamente sobre o Papervision 3D, então para preencher essa
lacuna vamos conhecer essa maravilhosa ferramenta para Flash.

O
que é o Papervision 3D?

Basicamente,
o Papervision 3D é um pacote de classes que lhe oferece diversas
ferramentas profissionais para produção de filmes em Flash com a
ilusão de três dimensões. Digo ilusão pois, apesar de o Flash
suportar atualmente 3D nativo (que ainda perde feio para o que o
Papervision nos oferece), o Papervision 3D já existia muito antes
disso, simulando o efeito ótico tridimensional apenas manipulando as
propriedades de objetos bidimensionais.

Hoje
o Papervision 3D é a ferramenta de produção tridimensional no
Flash mais utilizada e mais popular, com diversos plugins e efeitos
impressionantes. A grande maioria dos sites 3D mais impressionantes
do mundo foram todos produzidos com a ferramenta.

Como
usar?

O
primeiro passo é fazer o download no repositório de código oficial
no Google: http://code.google.com/p/papervision3d/.

Existem
duas formas de usar o pacote com seu filme SWF: Baixando o ZIP com os
arquivos das classes dentro de uma pasta e sempre a copiando em cada
projeto realizado. Baixando o arquivo .SWC
que empacota todas as classes do Papervision em um só arquivo.

E
qual a diferença?

No
caso da primeira opção teremos sempre compatibilidade na hora de
compilar nosso SWF, pois como sempre copiamos a pasta com a versão
que estamos utilizando em cada projeto, nunca teremos problemas com
versões futuras. A desvantagem é ter que sempre duplicar essa pasta
em cada projeto e ocupando mais espaço no HD.

Na
segunda opção você pode colocar o arquivo .SWC em um lugar comum e
apenas configurar para que seu filme sempre o requisite na hora de
compilar o SWF. Para configurar essa requisição vá em Edit
> Preferences > Actionscript.
Agora clique no botão Actionscript
3.0 settings.
No box do meio, Library
Path,
clique no ícone vermelho e vá atrás do arquivo SWC do Papervision
em seu computador.

Vamos
começar!

Devido
ao fato de termos de criar tudo através de Actionscript, sem a
visualização em tempo real, muitos não sabem nem por onde começar.
Então vamos entender passo a passo a lógica de como trabalha nosso
Papervision 3D:

Para
que o Papervision 3D funcione, precisaremos de quatro elementos
essenciais:

• Renderizador
  Um objeto BasicRendererEngine para processar todo o ambiente 3D
  na tela.
• Cena
  Um objeto Scene3D que englobe todo o seu conteúdo. É o cenário
  necessário para exibir qualquer coisa na tela.
• Ponto
  de vista Um objeto
  Viewport3D. Uma perspectiva a partir do qual seu conteúdo será
  visualizado.
• Câmera
  Um objeto Camera3D. Precisamos de um “olho” em nosso cenário
  para que possamos manipular uma visão do ambiente.

Agora
que temos a base essencial do Papervision 3D, vamos juntar tudo e
construir um ambiente no qual possamos colocar a mão na massa.

O
Actionscript para prepararmos esse ambiente de produção é um tanto
burocrático:

public var scene:Scene3D;
public var camera:Camera3D;
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine; 

public function init():void{

scene = new Scene3D();
camera = new Camera3D();
camera.focus = 100;
camera.zoom = 12;
camera.z = -1000;

renderer = new BasicRenderEngine();
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight,false, false, false, false);
addChild(viewport);

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

Porém
o Papervision 3D facilita nossa vida e nos oferece um objeto chamado
BasicView
que simplifica todo o código anterior e já nos dá um objeto pronto
com tudo: o renderizador (BasicView.renderer),
a cena (BasicView.scene),
o ponto de vista (BasicView.viewport)
e a câmera (BasicView.camera).

Esse
objeto estende um objeto Sprite,
logo você deverá inseri-lo no Stage usando addChild().
Vamos usar o BasicView para montar nosso ambiente. Só precisamos
passar alguns parâmetros para ele:

• viewportWidth:Number
  A largura da perspectiva em pixels
• viewportHeight:Number
  – A altura da perspectiva em pixels
• scaleToStage:Boolean
  Redimensionar a perspectiva seguindo o Stage caso ele também
  seja redimensionado
• interactive:Boolean
  Detectar interações do usuário (teclado, mouse,
  etc.)
• cameraType:String
  Tipo da câmera que será utilizada, usando variáveis estáticas
  de objetos de câmeras do Papervision. Exemplo: Camera3D.TYPE,
  FreeCamera3D.TYPE, FrustrumCamera3D.TYPE, etc. De início
  utilizaremos o padrão Camera3D.TYPE.

view = new BasicView( 500, 500, true, false );

Pronto!
Já temos todo nosso ambiente 3D preparado para colocarmos o que
quisermos dentro dele e assim o Papervision 3D realizar seu trabalho
de renderização. Vamos colocar agora uma esfera 3D em nossa cena
3D:

esfera = new Sphere( new WireframeMaterial(), 100, 20, 20 );
view.scene.addChild( esfera );

No
momento não vou explicar em detalhes a criação de um objeto
esférico e suas configurações, falaremos isso de outra vez. Mas adianto que nossa esfera foi configurada com um
material aramado (wireframe), de raio 100 pixels e 20 segmentos de
montagem vertical e horizontal.

Além
de colocarmos objetos dentro do ambiente, podemos também mudar suas
configurações, como por exemplo, o zoom e o foco do ambiente:

view.camera.zoom = 12;
view.camera.focus = 100;

Ok,
já temos nosso ambiente montado, configurado e com uma esfera 3D
nele. Só que tudo estático! Flash é movimento, animação! Nosso
milagroso objeto BasicView também nos dá uma função específica
de renderização que processará tudo para nós. Então vamos criar
um loop, usando o evento ENTER_FRAME:

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

Como
vimos acima, nosso evento ENTER_FRAME está chamando uma função que
no exemplo estamos chamando de enterFrameHandler.
Dentro dela pediremos que o BasicView renderize tudo para nós a cada
frame do filme, e aproveitamos para dizer que a esfera rotacione em
seu eixo Y:

private function enterFrameHandler( event:Event ):void {
esfera.rotationY += 2;
view.singleRender();
}

Agora
que entendemos os princípios básicos do Papervision 3D, como montar
um ambiente 3D para trabalharmos e como trabalhar com um loop de
renderização, vamos juntar tudo de forma organizada em uma classe
que chamaremos de HelloWorld
e nos mostrará um globo 3D aramado girando:

package {

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

[SWF(frameRate="31", width="500", height="500", backgroundColor="0x000000")]

public class HelloWorld extends Sprite {

private var view:BasicView;
private var esfera:Sphere;

public function HelloWorld() {

init();

}

private function init():void {

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

view = new BasicView(500, 500, true, false);
view.camera.zoom = 12;
view.camera.focus = 100;
addChild(view);

esfera = new Sphere( new WireframeMaterial(), 100, 20, 20 );
view.scene.addChild( esfera );

addEventListener( Event.ENTER_FRAME, enterFrameHandler );

}

private function enterFrameHandler( event : Event ):void {

esfera.rotationY += 2;
view.singleRender();

}

}

} 

Você
pode fazer aqui o download com o exemplo acima junto com o pacote do
Papervision 3D mais recente. Vejo vocês na continuação deste
artigo.