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:

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:

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.

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.

5 respostas para “Papervision 3D – materials – Parte 1”

Bruno disse:
29 de dezembro de 2009 às 14:37
Ola Felipe, tenho visitado muito o seu site, tem umas dicas de materiais para papervision3d muito interessante, cara queria uma ajuda sua, estou usando o Flartoolkit junto com papervision3d para criar um ambiente de realidade aumentada, certo.. eu queria que você desse uma olhada no meu projeto para ver se pode me ajudar, acho que meu problema e besteira, só tá faltando uma coisa que to tentando a dias fazer, roda um Video em flv em RA, se a pessoa posicionar a imagem na webcam o video aparece e roda sozinho.. por favor entre em contato comigo, envio o projeto para você e se me da um help.
meu msn: slackwareleeto@hotmail.com
Email: bruno.argc@gmail.com
Muito Obrigado Felipe, seu site e muito bom mesmo!!
Feliz 2010 =*************
OBS: ERREI SEU NOME NO POST 2 foiz mal ae .
Abração.
Fábio Lessa disse:
11 de março de 2010 às 12:17
Fala cara!
Então to com o mesmo problema do bruno…
Não estou conseguindo usar as classes MovieMaterial e VideoStreamMaterials.
Se possivel entre em contato comigo!
meu msn eh fabiodutralessa@hotmail.com
Abração
gesse disse:
12 de fevereiro de 2011 às 5:54
Teria como adicionar um elemento gui ao papervision ,para poder dar efeitos os formularios em flex ?
Rubia disse:
10 de abril de 2012 às 10:48
Olá, gostei muito do seu artigo, todos os exemplos funcionaram perfeitos, porém estou com dúvida muito simples, eu não sei onde eu importo para biblioteca a imagem do exemplo. Onde fica a importação para biblioteca?
Obrigada.