Papervision [Materiais]

Olá pessoal, dando continuidade aos tutoriais de papervision 3D, hoje em nosso segundo tutorial falaremos um pouco sobre materiais. Explicaremos o que é, como se cria um, alguns metodos e no final no totorial criaremos este exemplo.

ppv_mat

O que é Materiais?

Falando de maneira bem simples, os Materiais são as texturas que usamos para preencher nossos objetos 3d.

Como Utilizar?

Para utilizarmos um material devemos importar seu pacote, criar uma variável que simbolizará seu material, e passar como parâmetro a variável na hora que você esta construindo seu objeto primitivo.

import org.papervision3d.materials.ColorMaterial;
..
public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
..
obSphere = new Sphere(faceColor,50,50);

Agora vamos detalhar um pouco mais sobre alguns tipos diferentes de materiais.

WireframeMaterial:

Quando criamos um objeto primitivo qualquer, com exceção ao cubo, o próprio papervision defini uma textura wireframe de cor aleatória para seu objeto. Criando sua própria textura wireframe você pode definir uma cor padrão e a espessura das linhas.

WireframeMaterial(color:Number = 0xFF00FF, alpha:Number = 100, thickness:Number = 0);

Parameters

  • color:Number (default = 0xFF00FF) – Cor da linha.
  • alpha:Number (default = 100) – Alpha da linha.
  • thickness:Number (default = 0) – Espessura da linha.

Obs: Nenhum dos parâmetros são obrigatórios.

ColorMaterial:

Define uma cor para o fundo da textura.

ColorMaterial(color:Number = 0xFF00FF, alpha:Number = 1);

Parameters

  • color:Number (default = 0xFF00FF) – Cor de fundo.
  • alpha:Number (default = 1) – Alpha do fundo.

BitmapAssetMaterial:

Este material importa um bitmap (jpg, bmp, gif, png entre outros) que esteja em sua biblioteca com a propriedade linkage ativada.

BitmapAssetMaterial(linkageID:String, precise:Boolean = false);

Parameters

  • linkageID:String — String utilizada na propriedade linkage do bitmap que esteja na bibllioteca
  • precise:Boolean (default = false) (opcional)

BitmapFileMaterial:

Este material importa uma imagem externa a partir de uma url.

BitmapFileMaterial(url:String = “”, precise:Boolean = false);

Parameters

  • url:String (default = “”) — String contendo o caminho da imagem.
  • precise:Boolean (default = false) (opcional)

MovieAssetMaterial:

Importa um movieClip que esteje em sua biblioteca.

MovieAssetMaterial(linkageID:String = “”, transparent:Boolean = false, animated:Boolean = false, createUnique:Boolean = false, precise:Boolean = false);

Parameters

  • linkageID:String (default = “”) — String utilizada na propriedade linkage do MovieClip que esteja na bibllioteca
  • transparent:Boolean (default = false) Permite a utilização de moviclips com fundos transparentes.(opcional)
  • animated:Boolean (default = false) Permite que seu movieclip seja animado. (opcional)
  • precise:Boolean (default = false) (opcional)

CompositeMaterial:

Este é um dos mais interessantes materiais, lhe permite colocar mais de um material como textura.

Métodos:

  • addMaterial() – Adiciona um material.
  • removeAllMaterials() – Remove todos os materiais.
  • removeMaterial() – Remove um material existente.

Ex:

public var faceWire:WireframeMaterial = new WireframeMaterial(0x006666, 100,3);
public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
public var composite:CompositeMaterial = new CompositeMaterial();
..
composite.addMaterial(faceColor);
composite.addMaterial(faceAssetMov);
obSphere = new Sphere(composite,50,50);

Metodos dos Materiais:

A classe Materials é uma classe extendida da classe “MaterialObject3D” com isso podemos utilizar alguns metodos.

  • doubleSided (): Permite que a imagem exibida pelo material seja exibida nos 2 lados do plano.
  • smooth (): Simplifica alguns pontos do bitmap para deixar o material mais leve.

Exemplo

Agora vamos construir um cubo utilizando todos os tipos de materiais descritos neste post.

Imagens que iremos utilizar:

mario Importaremos via BitmapFileMaterial, coloque esta imagem no mesmo diretorio que os arquivos.

luigi Importaremos via BitmapAssetMaterial impote esta imagem para biblioteca do flash.

bowser Esta imagem se transformará em um movieclip animado para importamos via MovieAssetMaterial.

Arquivo: ppv_mat.fla

Importaremos para biblioteca as imagens bowser.jpg e luigi.jpg. A partir da imagem do bowser criaremos um movie clip animado utlizando “Motion Tween” nos frames, o movieclip deverá ficar dessa maneira.

bowser_movieclip

Obs: não esquecer de importar os pacotes do papervision e defininir em document class “ppv_mat”

Arguivo: ppv_mat.as

Segue o codigo na integra deste noss exemplo.

package {
	//flash
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.Stage;
	//papervision
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	//Material
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.BitmapAssetMaterial;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.special.CompositeMaterial;
	// objeto
	import org.papervision3d.objects.primitives.Cube;

	public class ppv_mat extends MovieClip {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Material
		public var faceWire:WireframeMaterial = new WireframeMaterial(0x006666, 100,3);
		public var faceColor:ColorMaterial = new ColorMaterial(0xFFFF00);
		public var faceAssetBmp:BitmapAssetMaterial = new BitmapAssetMaterial("luigi.jpg", true);
		public var faceFileBmp:BitmapFileMaterial = new  BitmapFileMaterial("mario.jpg",false);
		public var faceAssetMov:MovieAssetMaterial = new MovieAssetMaterial("bowser", true, true, false, false);
		public var composite:CompositeMaterial = new CompositeMaterial();
		//objetos Primitivos
		public var obCube:Cube;

		public function ppv_mat () {
			Set ();
			Objetos ();
		}
		public function Set ():void {

			viewport = new Viewport3D(400,300,true,false,true,true);
			addChild (viewport);
			cena = new Scene3D ;
			renderer = new BasicRenderEngine ;
			camera = new Camera3D ;
			camera.focus = 100;
			camera.zoom = 10;

		}
		public function Objetos ():void {
			//Definindo transparencia nos materiais
			faceWire.doubleSided = true;
			faceColor.doubleSided = true;
			faceAssetBmp.doubleSided = true;
			faceFileBmp.doubleSided = true;
			faceAssetMov.doubleSided = true;
			composite.doubleSided = true;
			//Composite
			composite.addMaterial(faceColor);
			composite.addMaterial(faceAssetMov);
			//Cube
			obCube = new Cube(
			new MaterialsList(
			{front: faceWire,
			      back: faceFileBmp,
			      left: composite,
			      right: faceAssetMov,
			      top: faceColor,
			      bottom: faceAssetBmp}
			)
			,200,200,200,5,5);
			cena.addChild (obCube);

			addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
		}
		public function Loop (e:Event):void {

			obCube.yaw (-2);
			obCube.pitch (-1);
			renderer.renderScene (cena,camera,viewport);
		}
	}
}
Anúncios

Tags: , , , , , , , ,

4 Respostas to “Papervision [Materiais]”

  1. Júnior Says:

    Pow, muito legal o tutorial, tá de parabéns!!! Eu fiquei com umas dúvidas, se puder me ajudar são as seguintes: existe a possibilidade de colocar um movie clip como face interna dos lados do cubo. Tb gostaria de saber se eu posso criar novas faces e se elas podem ser manipuladas isoladamente.(a ideia é fazer uma caixa se abrindo, dai eu precisaria de + 1 face).

  2. Setzer Wolf Says:

    Antes de mais nada obrigado pela visita Júnior, olha eu também estou começando com papervision e desconheço boa parte do poder do papervision, quando eu estava tentando montar este tutorial eu dei uma olhada rapida para ver se teria como deixar só a face de dentro com a imagem, mas eu não tive muito tempo para achar a solução e acabei desistindo de pesquisar.
    Com relação a caixa se abrindo, eu já vi em outros sites algo parecido, não tenho certeza do método utilizado para fazer isso, alguns deles eu pude percerber que eram objetos complexos (animações feitas em 3d max exportados como collada) e em outros eram planos posicionados junto a face do cubo para dar impressão da caixa se abrindo. vou tentar dar uma pesquisada e se eu encontrar algo pode ter certeza que montarei um tutorial ajudando.

  3. Guilherme Says:

    Pow muito bom memso o tutorial otimo!

    so tenhu uma duvida, quando trabalhamos com extensão .dae collada, como podemos manipular a textuta para que nao fique destorcida?

    Obrigado. qual quer coisa me envie um email

    zoiorox@gmail.com

  4. Setzer Wolf Says:

    Obrigado pela presença Guilherme, Bem não sou nenhum expert em collada, uma coisa que ajuda a não distorcer tanto a textura é você utilizar outro tipo de render. O BasicRenderEngine não é o mais recomendado para objetos complexos, tente utilizar o QuadrantRenderEngine.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: