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.
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);
}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 );esfera = new Sphere( new WireframeMaterial(), 100, 20, 20 );
view.scene.addChild( esfera );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;addEventListener(Event.ENTER_FRAME, enterFrameHandler);private function enterFrameHandler( event:Event ):void {
esfera.rotationY += 2;
view.singleRender();
}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();
}
}
}