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:

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:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/03/teste22.swf w=450 h=300]

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 :

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 :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2009/03/teste2.swf w=450 h=300]

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…

2 respostas para “Tutorial PaperVision 3D 2.0”

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.