Atualmente existem várias engines 3D no mercado, sendo Papervision a mais popular. Com essa engine podemos trabalhar com formas como: planos , cubos , cilindros, cones e objetos complexos, exportados por ferramentas 3D, por exemplo, Blender.
Mais informações no site do projeto no google code: http://code.google.com/p/papervision3d/
Blog oficial: http://blog.papervision3d.org/
Um exemplo no site : http://www.papervision3d.org/
Vamos começar de leve, para esse tutorial será necessário baixar a versão 2.0 do papervision, no site : http://papervision3d.googlecode.com/files/Papervision3D_2.0_beta_1_src.zip
Descompacte o zip, o aqui contém uma pasta chamada src, dentro dessa pasta tem os seguintes arquivos :

Como na imagem a cima a pasta src possui as seguintes pastas nochump e org.
Copie a pasta “org” para o local do seu projeto. (no meu caso criei uma pasta papervision e em seguida criei um projeto com o flash Develop).

Para compilar o código eu vou utilizar flash develop + flex SDK que você pode ver o tutorial como utilizar aqui, se tudo der certo o flash develop irá reconhecer as classes do paperVision, crie uma classe chama Main e vamos ao código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | package { /** * ... * @author Fellyph Cintra fellyph.com.br/blog/ */ import flash.display.Sprite; //Classes necessárias para trabalhar com 3D //em termos de visualização import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; //objeto a ser utilizado import org.papervision3d.objects.primitives.Sphere; // o Material a ser aplicado no objeto 3d import org.papervision3d.materials.WireframeMaterial; public class Main extends Sprite { // para criar um ambiente 3D precisamos desses três elementos para //visualização de de nosso ambiente, resumindo : // Viewport é responsável pela área que irá ser exibida // Scene3D é responsável pelos objetos 3d aplicados na tela // Camara3D será nossa visão do ambiente 3d private var _viewport :Viewport3D; private var _cena :Scene3D; private var _camera :Camera3D; // BasicRenderEngine cuidará da renderização de nosso ambiente. private var _renderizador :BasicRenderEngine; //Sphere é nosso objeto primitivo 3D private var esfera :Sphere; // WireframeMaterial é camada do objeto primitivo ou seja nossa Textura // WireframeMaterial é um dos materiais mais simples do paperVision são // apenas linhas que contornam os vértices do meu objeto. private var material :WireframeMaterial; public function Main() { _viewport = new Viewport3D(450, 300, false, true); addChild(_viewport); _cena = new Scene3D(); _camera = new Camera3D(); _renderizador = new BasicRenderEngine(); material = new WireframeMaterial(0x330000); esfera = new Sphere(material, 80, 6, 6); _cena.addChild(esfera); _renderizador.renderScene(_cena, _camera, _viewport); } } } |
Para que não esta ambientado com POO, vou fazer um resumo bem “Basicão”:
- Na primeira linha definimos o pacote que a classe está “package {” nesse caso a classe está na raiz do projeto.
- Importamos as classes necessárias
- Iniciamos nossa classe ” public class Main extends Sprite { “
- Definimos nossos atributos
- Iniciamos nosso construtor (o construtor é o primeiro método a ser executado em uma classe) “public function Main() {“
Para esse tutorial para ficar simples eu joguei todas as operações dentro do construtor, para entender melhor vamos ver o passo-a-passo de nosso construtor:
- Primeiro criamos um novo Viewport3D, passamos como parâmetro ( largura:Number, altura:Number, autosize:Boolean e interatividade:Boolean ), existem outros parâmetros, mas não serão abordados nesse tutorial.
- Adicionamos o Viewport no palco.
- Instânciamos novos _renderizador, _cena e _camera.
- Criamos um novo material e passamos com parâmetro a cor.
- A instancimos uma nova esfera Objeto do tipo Sphere , para isso são necessário os parâmetros, o material , o raio da esfera, e a quantidade de segmentos horizontais e verticais
- Adicionamos a esfera na _cena
- por fim renderizamos nosso ambiente
Nesse esquema utilizado o nosso ambiente será renderizado apenas uma vez o resultado podemos ver abaixo:
Diferente do modelo acima o legal é dar movimento aos objetos, nesse caso precisamos renderizar o nosso ambiente varias vezes, para isso utilizamos o Evento ENTER_FRAME, então, vamos ao código :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | package { /** * ... * @author Fellyph Cintra fellyph.com.br/blog/ */ import flash.display.Sprite; //Classes necessárias para trabalhar com 3D //em termos de visualização import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; //objeto a ser utilizado import org.papervision3d.objects.primitives.Sphere; // o Material a ser aplicado no objeto 3d import org.papervision3d.materials.WireframeMaterial; //importamos o Event para utilizar o ENTER_FRAME import flash.events.Event; public class Main extends Sprite { private var _viewport :Viewport3D; private var _cena :Scene3D; private var _camera :Camera3D; private var _renderizador :BasicRenderEngine; private var esfera :Sphere; private var material :WireframeMaterial; public function Main() { _viewport = new Viewport3D(450, 300, false, true); addChild(_viewport); _cena = new Scene3D(); _camera = new Camera3D(); _renderizador = new BasicRenderEngine(); material = new WireframeMaterial(0x330000); esfera = new Sphere(material, 80, 7, 7); _cena.addChild(esfera); //adicionamos o Evento ENTER_FRAME addEventListener(Event.ENTER_FRAME, render); } public function render(e:Event):void { esfera.rotationY += 2; _renderizador.renderScene(_cena, _camera, _viewport); } } } |
Vamos lá a diferença para o modelo anterior é que, aumentei o número de segmentos da esfera para ficar visualmente melhor e adicionamos um evento ENTER_FRAME que chama o método “render” que faz duas coisas simples incrementa o rotationY e renderiza nosso ambiente a cada vez que o método é chamado.
O Resultado é o seguinte :
Próximo tutorial vou falar mais um pouco sobre papervision.
Quando comecei a reescrever esse post era dia 30 de março, aniversário do meu amigo André Ponce, Parceiro sempre ajudando quando possível, terminei de escrever 2 horas do dia 31 março, foi mau ai Ponce. Parabéns atrasado.
Até breve…

Massa PH !!!
asuhsauhu
valews !
abraço!
Pingback: Papervision 3D + TweenLite | Fellyph Cintra Flash Developer