Utilizando Papervision 3D nos seus projetos

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;<br />public var camera:Camera3D;<br />public var viewport:Viewport3D;<br />public var renderer:BasicRenderEngine; <br /><br />public function init():void{<br /><br />scene = new Scene3D();<br />camera = new Camera3D();<br />camera.focus = 100;<br />camera.zoom = 12;<br />camera.z = -1000;<br /><br />renderer = new BasicRenderEngine();<br />viewport = new Viewport3D(stage.stageWidth, stage.stageHeight,false, false, false, false);<br />addChild(viewport);<br /><br />addEventListener(Event.ENTER_FRAME, enterFrameHandler);<br /><br />}

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 );<br />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;<br />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 {<br />esfera.rotationY += 2;<br />view.singleRender();<br />}

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 {<br /><br />import flash.display.Sprite;<br />import flash.display.StageAlign;<br />import flash.display.StageScaleMode;<br />import flash.events.*;<br /><br />import org.papervision3d.cameras.Camera3D;<br />import org.papervision3d.materials.WireframeMaterial;<br />import org.papervision3d.objects.primitives.Sphere;<br />import org.papervision3d.view.BasicView;<br /><br />[SWF(frameRate="31", width="500", height="500", backgroundColor="0x000000")]<br /><br />public class HelloWorld extends Sprite {<br /><br />private var view:BasicView;<br />private var esfera:Sphere;<br /><br />public function HelloWorld() {<br /><br />init();<br /><br />}<br /><br />private function init():void {<br /><br />stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br /><br />view = new BasicView(500, 500, true, false);<br />view.camera.zoom = 12;<br />view.camera.focus = 100;<br />addChild(view);<br /><br />esfera = new Sphere( new WireframeMaterial(), 100, 20, 20 );<br />view.scene.addChild( esfera );<br /><br />addEventListener( Event.ENTER_FRAME, enterFrameHandler );<br /><br />}<br /><br />private function enterFrameHandler( event : Event ):void {<br /><br />esfera.rotationY += 2;<br />view.singleRender();<br /><br />}<br /><br />}<br /><br />} 

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.