Posts Tagged ‘colormaterial’

Papervision [ReflectionView]

julho 27, 2009

Imagem

Clique na imagem para testar

Olá pessoal , Hoje falarei sobre uma classe muito interessante e simples, ReflectionView. Uma classe que faz com que o viewport se transforme em um espelho tanto para cima do eixo y:0 quanto para baixo.

A classe ReflectionView é uma classe extendida da classe BasicView que por sua vez é extendido da classe AbstractView, o que eu quero dizer com tudo isso, que ao extender uma classe a RelectionView ele vai possuira atributos instanciados como:

AbstractView:
scene:Scene3D;
viewport:Viewport3D;
renderer:BasicRenderEngine;

startRendering();
stopRendering();
singleRender();

ReflectionView
viewportReflection : Viewport3D;
cameraReflection : CameraObject3D;
singleRender() (override - sobrescrevido)

Quando criávamos nosso BasicView ativávamos a função startRendering() para renderizar nossa aplicação, porem quando criamos um ReflectionView também podemos utilizar esta função para renderizar, porém não irá criar reflexo pois a função responsável pelo reflexo é a singleRender() que esta reescrita nesta classe para poder ativar o reflexo. Esta parecendo complicado mas as coisas são bem simples vamos analisar nosso código. Em resumo para funcionar precisamos apenas colocar dentro de um bloco ENTER_FRAME a função singleRender();

Como de custume trabalharemos com 2 arquivos. ppv_reflection.fla e ppv_reflection.as. Certifique de possuir 2 movieclip em sua biblioteca com os seguintes linkage: “smile” e “face”.

ppv_reflection.as

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_reflection extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;

        public function ppv_reflection() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;
            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            lista = new MaterialsList(
                {front: matface,
                  back: matsmile,
                  top: new ColorMaterial(0xF9EAAD),
                  bottom: new ColorMaterial(0x000000),
                  left: matface,
                  right: matface} );
            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

        }
        private function onEnterFrame(e:Event):void {
            cubo.rotationY = mouseX - stage.stageWidth / 2;
            cubo.rotationX = mouseY - stage.stageHeight / 2;
            singleRender();
        }

    }

}

Uma classe simples que possui uma imagem de fundo com um cubo personalizado, aonde este cubo se movimenta respondendo os comandos do mouse.Na primeira linha de nosso construtor utilizamos o seguinte código:

    setChildIndex(viewportReflection, 1);

Quando criamos nossa classe extendida de ReflectionView automaticamente nosso viewport refletor é criado no índex 0 porem se eu quiser deixar uma imagem de background desenhado em alguma layer da time line esse background entrará em um índex acima de nosso viewport fazendo com que o viewport refletor fique por trás do background, este é o motive desta linha de comando, estamos trocando o posicionamento índex de nosso viewport.

Nosso viewport refletor ele funciona da seguinte maneira, tudo que esta do eixo y:0 para cima será refletido para baixo o eixo y:0 e vice versa, a imagem a seguir ilustra um cubo desenhado abaixo do eixo y:0.

img_02

Espero que tenham gostado deste tutorial, não precisam se preocupar que teremos mais coisas interessantes no decorrer da semana, até a próxima.

Papervision [Materiais]

março 10, 2009

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);
		}
	}
}