Olá pessoal nesse post eu vou falar sobre Papervision 3D(obs. esse post está em rascunho desde o ano passado), ela é uma engine que simula um ambiente 3D dentro do flash com um conjunto de classes que através de cálculos gera um ambiente altura, largura e profundidade.Mas lembrando que a nova versão do flash já tem um suporte nativo para 3D.

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”:

1. Na primeira linha definimos o pacote que a classe está “package {” nesse caso a classe está na raiz do projeto.
2. Importamos as classes necessárias
3. Iniciamos nossa classe ” public class Main extends Sprite { “
4. Definimos nossos atributos
5. 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…