Tutorial PaperVision 3D 2.0

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:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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 :

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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…

Esta entrada foi publicada em Flash, Tutoriais e marcada com a tag , , , , , , , , , . Adicione o link permanente aos seus favoritos.

2 respostas a Tutorial PaperVision 3D 2.0

  1. Ponce disse:

    Massa PH !!!
    asuhsauhu
    valews !
    abraço!

  2. Pingback: Papervision 3D + TweenLite | Fellyph Cintra Flash Developer

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">