Papervision – Tutorial 3 ( Material Bitmap )

Eu imagino que alguns visitantes possam estar achando os tutoriais muito básicos.
Peço desculpas, mas a minha intenção por enquanto é exatamente essa : ir devagar para que todo mundo posso ir habituando-se com o Papervision.

Dito isso, vamos dar continuidade à série.
Dessa vez incorporando mais objetos nativos e utilizando imagens como material.

Tutorial Papervision Great White - BitmapFileMaterial

Antes de mais nada crie duas imagens com 200×200 pixels cada e salve no mesmo diretório dos arquivos as e fla com os nomes imagem1.jpg e imagem2.jpg.

Como no artigo anterior, vamos adicionar mais um objeto a cena. Dessa vez um cubo :

import org.papervision3d.objects.primitives.Cube;

Acrescentamos a classe BitmapFileMaterial responsável por carregar as imagens externas.
Vamos aproveitar e acrescentar também a classe MaterialsList, que como o próprio nome diz cria uma lista de materiais.

import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;

Declaramos as variáveis :

public var materialTres:BitmapFileMaterial;
public var materialQuatro:BitmapFileMaterial;
public var listaMaterial:MaterialsList;

Criamos os materiais :

materialTres = new BitmapFileMaterial(“imagem1.jpg”);
materialTres.smooth = true;// ameniza a aplicação do material nas faces triangulares do objeto

materialQuatro = new BitmapFileMaterial(“imagem2.jpg”);
materialQuatro.smooth = false;

// criamos uma lista de materiais
listaMaterial = new MaterialsList();
// onde podemos inclusive instanciar o material
listaMaterial.addMaterial (materialTres, “material3″);

Criamos o objeto cubo, aplicando os materiais :

cubo = new Cube(new MaterialsList( {
front: listaMaterial.getMaterialByName(“material3″), // usamos a instância vinda da lista de materiais
back: materialTres, // ou o próprio material
left: materialQuatro,
right: materialQuatro,
top: materialUm,
bottom: materialDois
} ), 200, 200, 200, 1, 1, 1);
cubo.y = 100;
cubo.rotationX = 35;
cubo.rotationY = 15;
cubo.rotationZ = 45;
cena.addChild (cubo);

O código agora ficou assim :

package {
// Importamos as classes necessárias
// Flash AS3
import flash.display.Sprite;
import flash.events.Event;
// Papervision
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.render.BasicRenderEngine;
// objeto
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Cube;
// materiais
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// Declaramos nossa classe
public class Tutorial3 extends Sprite {
// e as variáveis
public var cena:Scene3D;
public var viewport:Viewport3D;
public var camera:FreeCamera3D;
public var renderer:BasicRenderEngine;
public var esfera:Sphere;
public var plano:Plane;
public var cubo:Cube;
public var materialUm:ColorMaterial;
public var materialDois:ColorMaterial;
public var materialTres:BitmapFileMaterial;
public var materialQuatro:BitmapFileMaterial;
public var listaMaterial:MaterialsList;

// Declaramos o método da classe
public function Tutorial3 () {
// que irá acionar as funções auxiliares
Set ();
Materiais ();
Objetos ();
Listeners ();
}

// funções básicas do Papervision
public function Set ():void {
cena = new Scene3D ;
viewport = new Viewport3D(stage.stageWidth,stage.stageHeight,true,false,true,true);
addChild (viewport);
camera = new FreeCamera3D ;
renderer = new BasicRenderEngine ;
}

// materiais
public function Materiais ():void {
materialUm = new ColorMaterial(0XFF0000,1);

materialDois = new ColorMaterial(0X00FF00,1);
materialDois.doubleSided = true;// aplica o material nas duas faces do plano ( experimente trocar por false )

materialTres = new BitmapFileMaterial(“imagem1.jpg”);
materialTres.smooth = true;// ameniza a aplicação do material nas faces triangulares do objeto

materialQuatro = new BitmapFileMaterial(“imagem2.jpg”);
materialQuatro.smooth = false;

// criamos uma lista de materiais
listaMaterial = new MaterialsList();
// onde podemos inclusive instanciar o material
listaMaterial.addMaterial (materialTres, “material3″);
}

// função que irá criar o objeto
public function Objetos ():void {
esfera = new Sphere(materialUm,100,18,18);
esfera.x -= stage.stageWidth – 100;
esfera.y = 0;
esfera.z = 0;
esfera.rotationX = 15;
esfera.rotationY = 25;
esfera.rotationZ = -75;
cena.addChild (esfera);

plano = new Plane(materialDois,200,200,0,0);
plano.x += stage.stageWidth – 200;
plano.y = 0;
plano.z = 0;
plano.rotationX = 35;
plano.rotationY = 15;
plano.rotationZ = 45;
cena.addChild (plano);

cubo = new Cube(new MaterialsList( {
front: listaMaterial.getMaterialByName(“material3″), // usamos a instância vinda da lista de materiais
back: materialTres, // ou o próprio material
left: materialQuatro,
right: materialQuatro,
top: materialUm,
bottom: materialDois
} ), 200, 200, 200, 1, 1, 1);
cubo.y = 100;
cubo.rotationX = 35;
cubo.rotationY = 15;
cubo.rotationZ = 45;
cena.addChild (cubo);

camera.focus = 300;
camera.zoom = 2;
}

// função que irá receber novas funções auxiliares
public function Listeners ():void {
addEventListener (Event.ENTER_FRAME,Render);
}

// função responsável pela renderização do Papervision
public function Render (e:Event):void {
esfera.rotationX -= 2;

plano.rotationX += 1;
plano.rotationY += 2;

cubo.rotationX += 3;
cubo.rotationY += 1;

renderer.renderScene (cena,camera,viewport);
}
}
}

Salve o arquivo e compile novamente o swf.
E, como sempre, vá fazendo alterações nos parâmetros, salve, recompile e veja as alterações.

Até a próxima …

4 Comentários »

  1. Marcos Disse:

    o meu flash cs3 naum consegui encontrar as classPath do papervision
    como eu posso fazer para que ele encontre?
    obrigado!!

    Marcos Vinicus

  2. Marco Molina Disse:

    Opa Marcos
    Dê uma olhada no primeiro artigo da série ( Papervision – Será que depois da web 2.0 chegou a vez da web )

    []’s

  3. Marcelo Disse:

    Acho que ficaria legal postar os swf no final, assim nós temos noção de como ficará o resultado final.

  4. jhonny Disse:

    oi cara massa o seu post, eu quero saber como adicionar varios materiais no palco e definir as coordenadas de cada um, se der pra vc me dar esse toque agradeço muito, e tipo os obj podem ser no modo plano mesmo vlw……..


{ RSS feed para comentários neste post} · { URI do TrackBack }

Deixe um comentário