Papervision 3D + TweenLite

Nesse tutorial vamos trabalhar com Tweenlite + Papervision, para trabalhar com esse esquema é bastante simples, basta importar as classe do Tweenlite e + Papervision para o nosso projeto, que ficará da seguinte forma :

esquemapapertweenlite

Papervision a pasta : org
O link para baixar as classes do papervision clique aqui.

Tweenlite a pasta : gs
O link para baixar as classes do Tweenlite clique aqui.

Para mais detalhes sobre papervision veja os posts:

TUTORIAL PAPERVISION 3D 2.0

PAPERVISON 3D – OBJECTS PRIMITIVE

PAPERVISION 3D – MATERIALS(MATERIAIS)

Para mais detalhes sobre Tweenlite veja os posts:

TWEEN LITE

Para desenvolver esse tutorial vou trabalhar com flash IDE(bom e velho cs3) + flash develop, mas você pode utilizar só o flash, jogando direto no fla o código ou criando um arquivo AS3, mas para códificação eu indico o flashdevelop.
Voltando para na nossa ide vou criar três movieClips: letraM, letraA, letraR; para os três vou utilizar o mesmo nome para o linkage: letraM, letraA, letraR, como na imagem abaixo:

tutorialtweenpaper

Vou criar uma class “Interatividade.as” e agora vamos para o código:

package  {
	import flash.display.Scene;
	import flash.display.Sprite;

	import flash.events.Event;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.materials.MovieAssetMaterial;

	import org.papervision3d.objects.primitives.Plane;

	import gs.TweenLite;
	import gs.easing.*;

	/**
	* ...
	* @author Fellyph Cintra
	* @link http://fellyph.com.br/blog/
	*
	*/
	public class Interatividade extends Sprite{
		// criar os objetos chave para trabalhar com papervision
		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		// meu renderizador
		private var _renderizador 	:BasicRenderEngine;

		// os planos que eu vou trabalhar
		private var _m				:Plane;
		private var _a				:Plane;
		private var _r				:Plane;

		//os materiais que vão compor meus planos(Plane)
		private var material_m 		:MovieAssetMaterial;
		private var material_a		:MovieAssetMaterial;
		private var material_r 		:MovieAssetMaterial;

		// o construtor da minha classe que executar o código
		public function Interatividade() {

			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);

			// inicializando os objetos chave;
			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();

			// inicializando meus materiais "MovieAssetMaterial" lembrando
			// MovieAsset trabalha com o linkage dos movieclips criados no
			// meu arquivo ".fla"
			material_m = new MovieAssetMaterial("letraM", true, true);
			material_a = new MovieAssetMaterial("letraA", true, true);
			material_r = new MovieAssetMaterial("letraR", true, false);

			//adicionando os materiais a cada respectivo Plane
			_m = new Plane(material_m, 100, 94, 8, 8);
			_a = new Plane(material_a,100, 94, 8, 8);
			_r = new Plane(material_r, 100, 94, 8, 8);

			//Adicionando o Plane a Cena
			_cena.addChild(_m);
			_cena.addChild(_a);
			_cena.addChild(_r);

			//Abaixo vou trabalhar com as propriedades dos meus planos
			//para em seguida executar a animação
			_m.x   = 10;
			_a.x   = 100;
			_r.x   = 200;

			_m.rotationY = 90;
			_a.rotationY = 90;
			_r.rotationY = 90;

			_m.rotationX = 90;
			_a.rotationX = 90;
			_r.rotationX = 90;

			// Adicionando o evento ENTER_FRAME para renderizar meu arquivo
			addEventListener(Event.ENTER_FRAME, onRender);

			// E por fim executamos as animações nos planos
			// Revisando:
			// TweenLite.to( objeto a ser animado, tempo , {propriedades da animação});
			TweenLite.to(_m, 4,  { rotationX:0, rotationY:0,  z:-500,  	ease:Expo.easeOut } );
			TweenLite.to(_a, 4,  { rotationX:0, rotationY:0, z: -400, 	ease:Expo.easeOut , delay:0.3 } );
			TweenLite.to(_r, 4,  { rotationX:0, rotationY:0, z:-300, 	ease:Expo.easeOut , delay:0.6} );

		}

		public function onRender(e:Event):void {
			//renderizando
			_renderizador.renderScene(_cena, _camera, _viewport);
		}

	}

}

Para testar nosso filme temos que atrelar nossa classe ao arquivo fla.
no meu exemplo eles estão na mesma pasta, fla e as então utilizamos como na imagem abaixo

tutorialtweenpaper_2

o código acima já está comentado, a estrutura é a mesma inicializa os objetos, aplica os materiais aos Objetos primitivos, adiciona os objetos a cena e por fim renderiza o filme. O adicional é que no final do construtor utilizamos a Classe TweenLite. E o resultado que temos é o seguinte :

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

Lembrando a classe de Tween sem a renderização não funciona.

Esse post é bastante simples, vamos tentar complicar nos próximos posts.
Até breve…

PaperVision Materials – Parte 2

No Post anterior começamos a falar sobre materiais em papervision, paramos em materiais que trabalham com bitmap, neste post iremos continuar a abordagem sobre o assunto começando por materiais que utilizam MovieClip. Grande vantagem de se trabalhar com a textura em movieclip, é que podemos aproveitar toda a interatividade do do movieClip, animação e transparência podem ser aplicados na textura. Existem dois tipos de materiais que trabalham com movieclip o MovieAssetMaterial e o MovieMaterial.

MovieAssetMaterial
Carrega o movieClip através do linkageID do movieClip na biblioteca esse recurso é utilizado com o Flash CS3 ou superior, por já ter mostrado no post anterior sobre materiais como incluir o linkageID então não vou repetir o passo-a-passo, link para o post anterior. As principais propriedades que o MovieAssetMaterial trabalha são :

  • linkageID:String, o nome no linkage do movieclip
  • transparent:Boolean, define se o material vai ter transparência ou não (true ou false)
  • animated:Boolean, define se o material vai ser animado (true ou false)

Então vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.MovieAssetMaterial;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Plane;
	import flash.events.Event;

	import flash.events.Event;

	public class MainMateriaisMovieAsset extends Sprite{

		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		private var _renderizador 	:BasicRenderEngine;
		private var plano			:Plane;
		private var plano2			:Plane;
		private var material  		:MovieAssetMaterial;

		public function MainMateriaisMovieAsset() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// com o movie material trabalhamos com as seguintes propriedades
			//(linkageId, transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieAssetMaterial("face",true,true);

			//nesse exemplo eu vou trabalhar com dois planos
			// para dar a impressão de um plano com dupla face
			plano = new Plane(material, 300,300, 8, 8);
			plano2 = new Plane(material, 300, 300, 8, 8);

			//no segundo plano um rotação de 180 para fica no sentido oposta ao primeiro plano
			plano2.rotationY -= 180;

			//adicionamos nossos 2 planos na Scene3D _cena
			_cena.addChild(plano);
			_cena.addChild(plano2);

			//aplicamos um onEnterFrame para rotacionar os objetos
			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			plano.rotationY += 3;
			plano2.rotationY += 3;
			_renderizador.renderScene(_cena, _camera, _viewport);

		}
	}

}

Como podemos ver para burlar a falta de planos de dupla face nessa versão do papervision criamos dois planos em sentidos contrários. então temos o seguinte resultado :

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

MovieMaterial

Este tipo de material trabalha com Objetos do tipo DisplayObject criados em tempo de execução, ou seja podemos trabalhar com MovieClips e Sprites, é bem parecido com o material anterior , mas o objeto primitivo que vamos trabalhar dessa vez é o cubo(Cube), vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.utils.MaterialsList;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Cube;
	import flash.events.Event;
	import Formas;
	import flash.events.Event;

	public class MainMateriaisMovie extends Sprite{

		private var _viewport 		:Viewport3D;
		private var _cena 			:Scene3D;
		private var _camera 		:Camera3D;

		private var _renderizador 	:BasicRenderEngine;

		//Nesse Exemplo vou trabalhar com um objeto cubo
		private var cubo			:Cube;
		private var material  		:MovieMaterial;

		// Para trabalhar com o MovieMaterial eu vou criar
		//uma classe que extends de Sprite que eu criei em um tutorial anterior
		private var movieForma		:Formas;
		private var materialList 	:MaterialsList;

		// Criamos mais dois materiais para diversificar mais os materiais
		//na montagem do cubo
		private var corAmarela		:ColorMaterial;
		private var corAzul			:ColorMaterial;

		public function MainMateriaisMovie() {

			//Criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// Estou inicializando meu objeto movieForma
			movieForma = new Formas();

			// Com o movie material trabalhamos com as seguintes propriedades
			//(o nosso movie que é um displayObject ou seja pode ser um movieclip, Sprite ou shape,
			//transparência um valor Booleano , se a textura vai ser animada um valor também Booleano)
			material = new MovieMaterial(movieForma,false,false);
			corAzul = new ColorMaterial(0x00027F);
			corAmarela = new ColorMaterial(0xFCFF00);

			// criamos um materialList para montar nosso cubo
			materialList = new MaterialsList( { front:material,back:material,left:corAmarela,right:corAmarela,top:corAzul,bottom:corAzul } )

			cubo = new Cube(materialList,330,50,240, 6,6,6);

			//adicionamos nosso cubo na Scene3D _cena
			_cena.addChild(cubo);

			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			cubo.rotationY += 1;
			cubo.rotationZ += 1;
			_renderizador.renderScene(_cena, _camera, _viewport);

		}
	}

}

Nesse exemplo trabalhamos com a classe Formas que extends de Sprite, essa classe foi criada em um tutorial anterior link para o tutorial, ela possui o seguinte código :

package {

	import flash.display.Shape;
	import flash.display.Sprite;

	/**
	* ...
	* @author Fellyph Cintra
	*/
	public class Formas extends Sprite {
		public var bola		:Shape;
		public var rect 	:Shape;
		public var rect2 	:Shape;

		public function Formas() {

			criaRect();
			criaLosango();
			criaBola();

		}

		public function criaRect():void {
			rect = new Shape();
			rect.graphics.beginFill(0x008300);
			rect.graphics.lineStyle(1, 0x008300);
			rect.graphics.drawRect(0,0,330,240);
			addChild(rect);
		}

		public function criaLosango():void {

			rect2 = new Shape();
			rect2.graphics.beginFill(0xFCFF00);
			rect2.graphics.lineStyle(1, 0xFCFF00);
			rect2.graphics.moveTo( 165, 10);
			rect2.graphics.lineTo( 310, 120);
			rect2.graphics.lineTo( 165, 230);
			rect2.graphics.lineTo( 20, 120);
			rect2.graphics.lineTo( 165, 10);
			rect2.graphics.endFill();
			addChild(rect2);

		}

		public function criaBola():void {

			bola = new Shape();
			bola.graphics.beginFill(0x00027F);
			bola.graphics.lineStyle(1, 0x00027F);
			bola.graphics.drawCircle(165, 120, 70);
			bola.graphics.endFill();
			addChild(bola);
		}

	}

}

O resultado que temos é o seguinte :

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

Anteriormente tinha previsto o post sobre materiais dividido em dois, mas será necessário um terceiro post sobre o assunto, então pessoal até o próximo post sobre materiais.

Papervision 3D – materials – Parte 1

Olá pessoal nesse post vamos falar sobre materiais em papervision ( texturas ), parece simples mas o papervision têm uma gama de materiais muito boa, basicamente são divididos em materiais simples , bitmap, movieclip e vídeos. A classe mais básicas onde todos estendem é a classe MaterialObject3D ela contém os métodos mais básicos da família dos materiais. Nos posts anteriores sobre papervision começamos com wireframeMaterial, é o tipo mais simples formados por linhas entre os segmentos. Para trabalhar com  wireframeMaterial utilizamos as seguintes propriedades:

  • lineColor : cor da linha RGB
  • lineAlpha : alpha da linha de 0..1
  • lineThickness : espessura da linha
package  {

	/**
	* ...
	* @author Fellyph Cintra
        * www.fellyph.com/blog/
	*/

	import flash.display.Sprite;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Sphere;

	import org.papervision3d.materials.WireframeMaterial;

	public class MainMateriaisWire 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 MainMateriaisWire() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// criamos um novo material e passamos como parâmetro(cor , alpha , espessura da linha)
			material = new WireframeMaterial(0x004400, 0.8, 3);

			esfera = new Sphere(material, 80, 8, 8);

			//adicionamos nossa esfera na Scene3D _cena
			_cena.addChild(esfera);

			// por fim renderizamos a _cena junto com a _camera e o _viewport
			_renderizador.renderScene(_cena, _camera, _viewport);

		}

	}

}

Não comentei as primeiras linhas por que esse assunto já foi tratado em posts anteriores, se ainda não viu aqui está o link :

Tutorial PaperVision 3D 2.0

Papervison 3D – Objects Primitive

Com código acima temos o seguinte resultado:

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

ColorMaterial

Diferente do wireFrame material ele cobre toda a área do objeto.

Suas propriedades são :

  • fillColor : cor do preenchimento em RGB
  • fillAlpha : alpha do preenchimento 0..1
package  {

	import flash.display.Sprite;
	import org.papervision3d.core.math.Sphere3D;

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.Sprite;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Sphere;

	import org.papervision3d.materials.ColorMaterial;

	public class MainMateriaisColor 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  		:ColorMaterial;

 		public function MainMateriaisColor() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// criamos um novo material e passamos como parâmetro(cor , alpha )
			material = new ColorMaterial(0x004400, 0.8);

			esfera = new Sphere(material, 80, 8, 8);

			//adicionamos nossa esfera na Scene3D _cena
			_cena.addChild(esfera);

			// por fim renderizamos a _cena junto com a _camera e o _viewport
			_renderizador.renderScene(_cena, _camera, _viewport);

		}

	}

}

Bitmaps

Os materiais que trabalham com bitmaps têm suas variações, podemos utilizar as seguintes opções, uma imagem da biblioteca, criar um bitmap em tempo de execução, carregar um arquivo externo ou simplesmente wireframes ou Colors(preenchimentos).

BitmapColorMaterial

Tem praticamente a mesma função que ColorMaterial a diferença é que não estamos trabalhando com vetores e sim bitmaps, para não repetir o mesmo código vou comentar apenas as linhas que sofrem modificações, em relação aos exemplos anteriores …

//no momento de importar a classe devemos importar a classe BitmapColorMaterial
import org.papervision3d.materials.BitmapColorMaterial;

//definimos uma variável do tipo BitmapColorMaterial
private var materialcolor 	:BitmapColorMaterial;

//inicializamos nossa variável a atribuindo um ColorMaterial na cor 0x004400 e alpha 0.8
materialcolor   = new ColorMaterial(0x004400, 0.8, );

//adicionamos nosso materialcolor a esfera
esfera           = new Sphere(materialcolor, 80, 8, 8);

BitmapWireframeMaterial

Mesmo esquema do WireframeMaterial com a diferença de temos acesso a o bitmapData desse matérial:

//no momento de importar a classe devemos importar a classe BitmapColorMaterial
import org.papervision3d.materials.BitmapWireframeMaterial;

//definimos uma variável do tipo BitmapColorMaterial
private var materialwire 	:BitmapWireframeMaterial;

//inicializamos nossa variável a atribuindo um ColorMaterial na cor 0x004400,
//alpha 0.8, espessura da linha 5px

materialwire   = new BitmapWireframeMaterial(0x004400, 0.8, 5);

//adicionamos nosso materialwire a esfera
esfera           = new Sphere(materialwire, 150, 8, 8);

BitmapAssetMaterial

Nesse material podemos carrega-lo da nossa biblioteca, mas para isso é preciso linkageID em nossa imagem. Esse tipo de material é trabalhado apenas no Flash CS3 ou versão superior. Para obter o linkageID devemos importar uma imagem no flash e atribuir um id nas propriedades da imagem, da seguinte forma :

Para esse exemplo eu vou utilizar essa imagem:

mapa_mundi

primeiro importamos para biblioteca a imagem, em seguida vamos editar as propriedades da imagem, na biblioteca selecione a imagem e vá em “Properties…” um “i” que fica localizado no canto inferior da aba da library. como podemos ver na image a baixo:

tuto_paper_mat_1

habilite a opção advanced, adicione em Linkage um no para a Classe que vai representar a imagem da biblioteca, esse será o nome utilizado no código para fazer referência a imagem no código.

tuto_paper_mat_2

Agora tudo pronto para programação. Na mesma pasta que se encontra o nosso arquivo “.fla” vamos criar o arquivo “.as” MainMateriaisBitmap.as, ele segue a mesma lógica dos códigos anteriores :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.Sprite;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	import org.papervision3d.objects.primitives.Sphere;

	import org.papervision3d.materials.BitmapAssetMaterial;

	import flash.events.Event;

	public class MainMateriaisBitmap 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  		:BitmapAssetMaterial;

 		public function MainMateriaisBitmap() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();

			// criamos um novo material do tipo BitmapAssetMaterial
			//passamos como parâmetro(o id da imagem como String)
			material = new BitmapAssetMaterial("Img");

			esfera = new Sphere(material, 150, 8, 8);

			//adicionamos nossa esfera na Scene3D _cena
			_cena.addChild(esfera);

			// adicionamos um evento ENTER_FRAME para fazer a rotação da nossa esfera
			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			// fazemos o incremento da propriedade rotationY
                        esfera.rotationY += 3;
                        // por fim renderizamos a _cena junto com a _camera e o _viewport
			_renderizador.renderScene(_cena, _camera, _viewport);
		}
	}

}

O resultado que temos é o seguinte :

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

Bitmap File

Material que recebe um bitmap, apontado pelo endereço da imagem através de uma string, por exemplo “http://www.meusite.com/minhaimagem.jpg”. Esse material também podemos adicionar um evento a essa imagem. Nesse Exemplo eu volto a trabalhar somente com o Flash Develop, vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra
	*/

	import flash.display.Sprite;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;

	//nesse exemplo vamos mudar um, pouco vamos trabalhar com um plano
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.BitmapFileMaterial;
	import flash.events.Event;

	import flash.events.Event;

	public class MainMateriaisBitmapFile extends Sprite{

		private var _viewport 		:Viewport3D;
		private var _cena 		:Scene3D;
		private var _camera 		:Camera3D;

		private var _renderizador 	:BasicRenderEngine;
		private var plano			:Plane;
		private var material  		:BitmapFileMaterial;

		public function MainMateriaisBitmapFile() {

			//criamos nosso Viewport3D
			_viewport = new Viewport3D(450 , 300 , false, true);
			addChild(_viewport);

			_cena = new Scene3D();
			_camera = new Camera3D();
			_renderizador = new BasicRenderEngine();
			//nesse exemplo no mesmo local do meu arquivo .swf eu tenho um arquivo agua.jpg
                        //então passo como parâmetro o endereço da minha imagem
			material = new BitmapFileMaterial("agua.jpg");
			//criamos um plano com 300px de altura e 300px de largura
                        //e 8 segmentos verticais e horizontais
			plano = new Plane(material, 300,300, 8, 8);

			//adicionamos nosso plano na Scene3D _cena
			_cena.addChild(plano);

			addEventListener(Event.ENTER_FRAME, onRender);

		}

		public function onRender(e:Event):void {
			plano.rotationY -= 3;
			_renderizador.renderScene(_cena, _camera, _viewport);

		}
	}

}

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

Para não ficar muito extenso esse post vou dividi-lo em dois.
Então até o próximo post, pessoal.

Papervison 3D – Objects Primitive

Olá pessoal no post anterior dei uma breve introdução a papervision, agora vamos falar um pouco mais sobre o assunto. Papervision têm a possibilidade de trabalhar com objetos primitivos (formas geométricas) são eles: Sphere, Cube, Plane,Cone e Cylinder. Nesse tutorial vou utilizar o velho esquema, flash develop + flex SDK.

Vamos ao código :

package  {

	/**
	* ...
	* @author Fellyph Cintra fellyph.com.br/blog/
	*/

	import flash.display.Sprite;
	import org.papervision3d.materials.utils.MaterialsList;

	//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;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Cylinder;

	// 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 MainObjetos extends Sprite {

		private var _viewport		:Viewport3D;
		private var _cena			:Scene3D;
		private var _camera			:Camera3D;

		private var _renderizador 	:BasicRenderEngine;

		private var esfera 			:Sphere;
		private var cubo			:Cube;
		private var cilindro		:Cylinder;
		private var plano			:Plane;
		private var cone			:Cone;

		private var material		:WireframeMaterial;
		private var materialPlano	:WireframeMaterial;
		private var materialList 	:MaterialsList;

		public function MainObjetos() {

			_viewport = new Viewport3D(450, 300, false, true);
			addChild(_viewport);

			_cena 			= new Scene3D();
			_camera 		= new Camera3D();
			_renderizador 	= new BasicRenderEngine();

			material = new WireframeMaterial(0xFF0000);
			materialPlano = new WireframeMaterial(0xFF0000);

			// a propriedade doubleSided serve para informar que o material será exibido com duas faces frente e verso
			materialPlano.doubleSided = true;

			materialList = new MaterialsList( { front:material,back:material,left:material,right:material,top:material,bottom:material } )

			//para criar as um objeto do tipo Sphere é necessário passar como parâmetro
			//( material, raio, segmentos Horizontais , número de segmentos Verticais
			esfera = new Sphere(material, 80, 7, 7);

			//para o objeto Cube são necessário os parâmetros , primeiro MaterialsList que diferente dos outros objetos é um Array com materiais
			//passando as faces do cubo: frente, costas(verso), lateral direita, lateral esquerda, topo  e base, ou seja,
			//você pode criar um cubo com diferentes materiais, nesse exemplo podemos ver acima, só foi utilizado apenas um material.
			//Concluindo ( materialslist, largura, profundidade, altura, segmentos horizontais, segmentos de profundidade, segmentos verticais)
			cubo = new Cube(materialList, 80, 80, 80, 2, 2, 2);

			// para o objeto Cylinder passamos o parametro ( material, raio , segmentos Horizontais e vertical)
			cilindro = new Cylinder(material, 30, 80, 8, 6);

			//para o objeto Plane ( material, largura , altura, segmentos horizontais , segmentos verticais);
			// no objeto plano estou adicionando o materialPlano porque ele tem dupla face, isso porque,
			// quando ele rotacionar a parte oposta do plano também ser exibida
			plano = new Plane(materialPlano, 60, 60 , 1 , 1);

			// Objeto Cone( material, raio da base, altura, segmentos horizontais , segmentos verticais);
			cone = new Cone(material, 80, 120, 8, 6);

			//adicionamos os objetos na Scene3D
			_cena.addChild(esfera);
			_cena.addChild(cubo);
			_cena.addChild(cilindro);
			_cena.addChild(plano);
			_cena.addChild(cone);

			//modificamos as posições dos objetos para não se chocarem
			cubo.x = 150;
			cilindro.x = 300;
			plano.x = - 150;

			cone.x = - 300; 


			//adicionamos o Evento ENTER_FRAME para fazer a renderização e movimento dos objetos
			addEventListener(Event.ENTER_FRAME, render);
			_renderizador.renderScene(_cena, _camera, _viewport);

		}

		public function render(e:Event):void {

			esfera.rotationY += 2;
			cubo.rotationX += 2;

			cilindro.rotationY -= 2;
			cilindro.rotationX += 2;

			cone.rotationZ -= 2;
			cone.rotationY -= 2;

			plano.rotationY -= 2;

			_renderizador.renderScene(_cena, _camera, _viewport);

		}

	}

}

O resultado é o seguinte :

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

O Código está comentado os pontos relevantes, existem mais parâmetros que podem ser repassados para os objetos, mas nesse exemplo foi simplificado com os parâmetros básicos e como podemos ver o uso de objeto é simples , que segue sempre um padrão que se aplica a todos os objetos, com exceção do cubo que recebe uma lista de materiais :

  • Criar uma material
  • Aplicar o material ao objeto e definir suas propriedades
  • Aplicar o objeto a cena
  • Renderizar a cena

Pronto pessoal tutorial simples para não ficar chato.

Até breve…

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…